ng-inspector
ng-inspector copied to clipboard
rev087
Change toolbar icon to reflect Angular usage in the page
Add a feature to dynamically update the Toolbar button for the current page, displaying an "enabled" icon if Angular is detected in the page and a "disabled" icon otherwise.
The LiveReload extension can provide an example on dynamically changing the icon.
For reference:
Chrome http://stackoverflow.com/a/16924274
Firefox http://stackoverflow.com/a/18232989 https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Adding_Toolbars_and_Toolbar_Buttons#Toolbar_button_icons
Safari: http://stackoverflow.com/a/12689172 https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/AddingExtensionMenus/AddingExtensionMenus.html
So, what are your thoughts on the ng-detector style of checking for Angular? You have much deeper knowledge of the ng-inspector code, so you may know what repercussions could come from us making that change.
I will say, I'm not entirely convinced switching the method of Angular detection would even be necessary. Do you think we'd get any benefit from it? I can't think of a scenario where the lib itself won't expose an angular global.
The simple detection we're doing in bootstrap.js for the presence of the angular object in the window scope would probably stay even if we add an additional check borrowed from Igor's ng-detector since we're using that object immediately after, and it's good practice to test the existence before referencing it.
I'm not against adding an additional check using his method, but I'm not sure if it would add any benefits either.
Added disabled states for all toolbar button icon sizes, (same filename sufixed with -disabled) as well as the empty state graphic to the repo.
Disabled: 
Enabled: 
A great suggestion was made in #115 to only show the ng-inspector icon on pages where Angular is found.
@rev087 How do you feel about that approach? I think it makes more sense, and will keep the users toolbar free from clutter on non-angular pages.
Having said that, we'll need to determine if we can support that functionality in both Safari and Firefox
The work for Firefox/Safari still needs to be done, but I now have a branch with the work done in Chrome to only show the ng-inspector icon/button when Angular is present on the page.
It turns out this is a pita to implement in Safari. Unlike Chrome, which has the concept of page actions that scope the icon to the tab itself, Safari makes you track tab navigation manually, updating the icon each time, by juggling a ton of different events they provide.
