Thursday, October 16, 2014

0.2 Milestone Completed - My 1st Appmaker Pull Request is in!

First and foremost, the link to the PR - Fixed tray hover tooltip position offset #2317

As expected, this bug ended up being nothing short of an absolute blessing because the time it took to fix it was an iota of the amount of time it took to successfully set up my Appmaker development environment on my Windows 8 machine in order to be able to properly see and test my work.

In the beginning, besides the odd npm install error log emitting after attempting to download the required dependencies partially failed raising an eyebrow, it was relatively smooth sailing until needing to install and run MongoDB. The Appmaker documentation doesn't really let on much as far as the nitty gritty to my particular use case, save for showing the general link to the official website tutorial for installation and use steps. Those proved to be little more than useless in the end. I GUI-installed MongoDB just fine, but as soon as I opened up a command prompt to try and run it as per the instructions on the Appmaker README it would fail and often close the window altogether. When I managed to isolate the error it purported, it looked something like this:

********************************************************************
 ERROR: dbpath (\data\db\) does not exist.
 Create this directory or give existing directory in --dbpath.
 See http://dochub.mongodb.org/core/startingandstoppingmongo
********************************************************************

But much like Tweety Bird constantly reaffirming that it did, it did in fact see a pootie tat... I too clearly made a \data\db folder and later even set and assigned that location to the dbpath explicitly in the config file. After trying to make the most of my google-fu skills to find a step-by-step how-to on Windows related MongoDB installation and execution, I finally found the most relevant and comprehensive one titled Running MongoDB on Windows. If you follow this with a fine-tooth comb, you will be able to both start mongo on both the command prompt, and have it perpetually keep running as a local service via the service manager.

NOTE: For the love of all that is good and righteous in this world, the Service Controller (sc.exe) command you will try to run to create a local service out of MongoDB can ONLY be executed by the administrator account -- not your own custom user account, even if it has the "administrator" label/type. If you want to be extremely thorough, follow the steps mentioned in this answer article to the same problem for a different sc command.

--------------------------------------------------------------------------------------------------------------------------

Finally, the bug itself proved to be initially daunting, but with inspiration from a casual comment given to me in-class on Wednesday from a fellow student, once I managed to get the node app/server to run, the procedure I followed ended up being close to my original strategy with a few additions:

1) Open my Appmaker localhost browser instance.

2) Find the "tray hover tooltip" element as described in the bug. It wasn't called that, so after thinking about it, I actually just used my own vision to infer where its location on the DOM was by looking at the image posted on the issue site in Github and compared it with my Appmaker site. I know, it's horribly crass, but hey, it seems to have worked out this time...

3) I used the Chrome Developer Tools to try and inspect the element by hovering over it. This was where my biggest issue was - the tray hover tooltip only appears when you hover over the tray's inquiry icon. Because life was never meant to be this easy. After a bit of thought, I figure I might be able to pinpoint it in the source code by finding where the logic for its parent element was - a div with an ID named "showInfo".

4) In Atom, I initiated a global search for that particular string. I ended up finding it in a place I would never have guessed from past experience with css properties - an .html file. What? Fine, I'll indulge in new flavors. So I started parsing the rest of the file and ended up landing on this interesting looking property nugget:

floatingMoreInfoPopup.style.top = pos + 54 - (height/2) - offset + "px";

I'll be honest. I don't have any background context on the specifics of this statement. It looks more like Javascript than CSS so my assumption is that it's some sort of new library or framework for CSS injection that I'm not yet aware of, or something much more comprehensive and cool altogether. What I did see is the name of the property itself, which by the looks of it seemed like just about exactly what I was looking for. So I did what any Curious Carl would do at this point...

5) Start playing around with values, and see what changes. Turned out to be pretty much as easy as that. I changed the pixel value after the "pos" variable by 14 pixels and voila!

The original positioning:


My fix's positioning:


And for now, that's all she wrote ladies and gentlemen. Stay tuned for next week update on FSOSS!

No comments:

Post a Comment