EEH inspector integration fix

lib/inspectorObserver.js

 /*
  * This Source Code is subject to the terms of the Mozilla Public License
  * version 2.0 (the "License"). You can obtain a copy of the License at
  * http://mozilla.org/MPL/2.0/.
  */
 
 let InspectorObserver =
 {
   init: function()
   {
@@ skipping 22 matching lines @@
     let result = stringBundle.GetStringFromName("inspector.button.tooltiptext");
 
     delete this.inspectorButtonTooltip;
     this.__defineGetter__("inspectorButtonTooltip", function() result);
     return this.inspectorButtonTooltip;
   },
 
   inspectorReady: function(eventName, toolbox, panel)
   {
     let panelWindow = panel.panelWin;
-    let inspectBtn = panelWindow.document.getElementById("inspector-inspect-toolbutton");
+    let inspectBtn = panelWindow.document.getElementById("inspector-breadcrumbs");
     if (!inspectBtn)
       return;
 
     let tooltiptext = InspectorObserver.inspectorButtonTooltip;
     button = panelWindow.document.createElement("toolbarbutton");
     button.setAttribute("id", "inspector-abp-elemhide-toolbutton");
     button.style.listStyleImage = "url('chrome://adblockplus/skin/abp-status-16.png')";
     button.style.MozImageRegion = "rect(0px, 16px, 16px, 0px)";
     button.style.paddingTop = "4px";
     button.setAttribute("class", "devtools-toolbarbutton");

[saroyanm, 2014/04/14 15:38:01]

Wladimir I have doubt regarding the ABP button look with this class in FF
nightly inpector, 
but seams like it's a style that inspector uses for buttons. Not sure if we are
okey with it.

[Wladimir Palant, 2014/04/14 21:40:40]

No, we are not.

This is only an issue with the light DevTools theme, it inverts the icons (see
http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/...).
Messing up extension icons isn't the intention here, we need to overwrite the
filter.

You should move the styles for this icon into a new
chrome/skin/devToolsOverlay.css file. There you can also add a filter:none as a
style for #inspector-abp-elemhide-toolbarbutton>image element. You can then
inject that style file here similarly to how main.js does it with overlay.css.

[saroyanm, 2014/04/15 10:21:49]

Thanks for notes,
Done.

     button.setAttribute("tooltiptext", tooltiptext);
     button.setAttribute("tabindex", "0");
     button.addEventListener("command", function()
     {
       panelWindow.openDialog("chrome://elemhidehelper/content/composer.xul", "_blank",
                              "chrome,centerscreen,resizable,dialog=no", panel.selection.node);
     }, false);
-    inspectBtn.parentNode.insertBefore(button, inspectBtn.nextSibling);
+    inspectBtn.parentNode.insertBefore(button, inspectBtn);
   }
 };
 
 InspectorObserver.init();