For release 0.3 I worked on fixing an Appmaker bug in the Drawing Canvas component brick. The “Drawing Canvas” brick was not working on the latest Firefox and Chromium browsers. Upon clicking on the “Drawing Canvas” brick we should expect to see a line drawn or dot but what actually happens is nothing gets drawn.
Before even beginning the debugging process, I had already run into problems with my development environment. After updating my local repo with the latest upstream from Appmaker I found that I could no longer successfully run
node app to get Webmaker server started. To get it working again I had to remove my local repo, re-cloned from my forked origin of Appmaker and reinstalled node packages with
My approach to fixing this bug was to figure out what was causing it to break so I performed a walk through on the code using a mix of Firefox and Chrome’s web developer debug tool. The developer debug tool was something I was always aware of but never actually took advantage of. After seeing the debug tool in action during one of our DPS909 lecture it demystified it for me and it turns out it is easy to use and is an indispensable tool in the debugging process. The debugger tool provides a wealth of detailed information which is especially helpful for someone new looking at a new code base who wants to figure out what the code is doing. For the first two releases I was walking through the code in Sublime and writing
alert statements to figure out what was happening. The debugger tool definitely helps save time. Hovering over variables while stepping through lines of code lets you see variable values. From that moment on I said goodbye to my old alert ways.
While playing around with the “drawing canvas” brick in debug mode I found that if the Read Only check box on the “Drawing Canvas” brick was toggled on and off then the brick would start to work again. Thus putting a breakpoint on that line I was able to check the logic at that break point using Chromium’s debug tool. Using the tool I was able to see the value of the
readonly variable (which handles the toggle state of whether the canvas will allow editing) discovering it was set to empty
''. The code in the
drawing canvas component by default sets
false which is what we expect. Upon initial load of the Webmaker app before the user even adds the
drawing canvas component, the
readonly variable in
drawing canvas component gets initialized to
false as observed in the debugger tool. Which is what we expect but what we don’t expect is that the
readonly variable’s value gets replaced to empty
"" after the
drawing canvas is added by the user - as observed in the debug tool. Because the
readonly variable gets reset to an empty value
else statement gets triggered which triggers the block that sets the
readonly mode. In the the end, the option that I went with to fix this bug was to ensure the else statement only gets called when
readonly variable’s value is only
true which stops it from getting triggered when the variable is empty. That fixed the drawing canvas to do what we expect.
After testing in Firefox and Chromium, I went over Appmaker’s submitting a pull request readme and followed their procedures for preparing the patch.
Here is the pull request #2359.