Bug 1310938 - disabled eyedropper in toolbar for non-HTML documents and added a tooltip;r=jdescottes

devtools/client/inspector/inspector.js

@@ -645,11 +645,14 @@ Inspector.prototype = {
         this.onEyeDropperButtonClicked = this.onEyeDropperButtonClicked.bind(this);
         this.eyeDropperButton = this.panelDoc
                                     .getElementById("inspector-eyedropper-toggle");
-        this.eyeDropperButton.style.display = "initial";
+        this.eyeDropperButton.disabled = false;
+        this.eyeDropperButton.title = INSPECTOR_L10N.getStr("inspector.eyedropper.label");
         this.eyeDropperButton.addEventListener("click", this.onEyeDropperButtonClicked);
       }, e => console.error(e));
     } else {
-      this.panelDoc.getElementById("inspector-eyedropper-toggle").style.display = "none";
+      let eyeDropperButton = this.panelDoc.getElementById("inspector-eyedropper-toggle");
+      eyeDropperButton.disabled = true;
+      eyeDropperButton.title = INSPECTOR_L10N.getStr("eyedropper.disabled.title");
     }
   },
 

devtools/client/inspector/inspector.xhtml

@@ -46,7 +46,6 @@
           <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button>
         </div>
         <button id="inspector-eyedropper-toggle"
-                     data-localization="title=inspector.eyedropper.label"
                      class="devtools-button command-button-invertable"></button>
         <div id="inspector-sidebar-toggle-box"></div>
       </div>

devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js

@@ -7,13 +7,15 @@
 // when the page isn't an HTML one.
 
 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_xbl.xul";
+const TEST_URL_2 =
+  "data:text/html;charset=utf-8,<h1 style='color:red'>HTML test page</h1>";
 
 add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+  let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
 
   info("Check the inspector toolbar");
   let button = inspector.panelDoc.querySelector("#inspector-eyedropper-toggle");
-  ok(!isVisible(button), "The button is hidden in the toolbar");
+  ok(isDisabled(button), "The button is hidden in the toolbar");
 
   info("Check the color picker");
   yield selectNode("#scale", inspector);
@@ -31,11 +33,35 @@ add_task(function* () {
 
   button = cPicker.tooltip.doc.querySelector("#eyedropper-button");
   ok(isDisabled(button), "The button is disabled in the color picker");
-});
 
-function isVisible(button) {
-  return button.getBoxQuads().length !== 0;
-}
+  info("Navigate to a HTML document");
+  let navigated = toolbox.target.once("navigate");
+  let markuploaded = inspector.once("markuploaded");
+  navigateTo(toolbox, TEST_URL_2);
+  yield navigated;
+  yield markuploaded;
+
+  info("Check the inspector toolbar in HTML document");
+  button = inspector.panelDoc.querySelector("#inspector-eyedropper-toggle");
+  ok(!isDisabled(button), "The button is enabled in the toolbar");
+
+  info("Check the color picker in HTML document");
+  // Find the color swatch in the rule-view.
+  yield selectNode("h1", inspector);
+
+  ruleView = inspector.ruleview.view;
+  ruleViewDocument = ruleView.styleDocument;
+  swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
+
+  info("Open the color picker in HTML document");
+  cPicker = ruleView.tooltips.colorPicker;
+  onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  yield onColorPickerReady;
+
+  button = cPicker.tooltip.doc.querySelector("#eyedropper-button");
+  ok(!isDisabled(button), "The button is enabled in the color picker");
+});
 
 function isDisabled(button) {
   return button.disabled;

devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js

@@ -100,6 +100,8 @@ SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.pr
       let tooltipDoc = this.tooltip.doc;
       let eyeButton = tooltipDoc.querySelector("#eyedropper-button");
       if (value && this.inspector.selection.nodeFront.isInHTMLDocument) {
+        eyeButton.disabled = false;
+        eyeButton.removeAttribute("title");
         eyeButton.addEventListener("click", this._openEyeDropper);
       } else {
         eyeButton.disabled = true;

devtools/client/themes/inspector.css

@@ -108,8 +108,8 @@ window {
 /* Eyedropper toolbar button */
 
 #inspector-eyedropper-toggle {
-  /* hidden by default, until we can check that the required highlighter exists */
-  display: none;
+  /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
+  pointer-events: auto;
 }
 
 #inspector-eyedropper-toggle::before {