Bug 1316613 - Disables eyedropper icon if the eyedropper highlighter is unavailable.r=jdescottes
authordjmdev <djmdeveloper060796@gmail.com>
Thu, 24 Nov 2016 03:08:28 +0530
changeset 324696 3b322d58be091eb4aab2e6e8fb86cb45fd8948a3
parent 324695 77eaeeade47ebbe695df5abb56f47bf4b57a9eaa
child 324697 7bc1a0226b9c67ba55ba043e9a4a99546ff8f20e
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersjdescottes
bugs1316613
milestone53.0a1
Bug 1316613 - Disables eyedropper icon if the eyedropper highlighter is unavailable.r=jdescottes MozReview-Commit-ID: 3HhqqGqnoHo
devtools/client/inspector/inspector.js
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -609,17 +609,35 @@ Inspector.prototype = {
    * @param {string} title tab title
    * @param {React.Component} panel component. See `InspectorPanelTab` as an example.
    * @param {boolean} selected true if the panel should be selected
    */
   addSidebarTab: function (id, title, panel, selected) {
     this.sidebar.addTab(id, title, panel, selected);
   },
 
-  setupToolbar: function () {
+  /**
+   * Method to check whether the document is a HTML document and
+   * pickColorFromPage method is available or not.
+   * Returns a boolean value
+   */
+  supportsEyeDropper: Task.async(function* () {
+    let isInHTMLDocument = this.selection.nodeFront &&
+                            this.selection.nodeFront.isInHTMLDocument;
+    let pickColorAvailable = false;
+    try {
+      pickColorAvailable = yield this.target
+                                      .actorHasMethod("inspector", "pickColorFromPage");
+    } catch (e) {
+      console.error(e);
+    }
+    return isInHTMLDocument && pickColorAvailable;
+  }),
+
+  setupToolbar: Task.async(function* () {
     this.teardownToolbar();
 
     // Setup the sidebar toggle button.
     let SidebarToggle = this.React.createFactory(this.browserRequire(
       "devtools/client/shared/components/sidebar-toggle"));
 
     let sidebarToggle = SidebarToggle({
       onClick: this.onPaneToggleButtonClicked,
@@ -632,36 +650,31 @@ Inspector.prototype = {
     this._sidebarToggle = this.ReactDOM.render(sidebarToggle, parentBox);
 
     // Setup the add-node button.
     this.addNode = this.addNode.bind(this);
     this.addNodeButton = this.panelDoc.getElementById("inspector-element-add-button");
     this.addNodeButton.addEventListener("click", this.addNode);
 
     // Setup the eye-dropper icon if we're in an HTML document and we have actor support.
-    if (this.selection.nodeFront && this.selection.nodeFront.isInHTMLDocument) {
-      this.target.actorHasMethod("inspector", "pickColorFromPage").then(value => {
-        if (!value) {
-          return;
-        }
-
-        this.onEyeDropperDone = this.onEyeDropperDone.bind(this);
-        this.onEyeDropperButtonClicked = this.onEyeDropperButtonClicked.bind(this);
-        this.eyeDropperButton = this.panelDoc
+    let canShowEyeDropper = yield this.supportsEyeDropper();
+    if (canShowEyeDropper) {
+      this.onEyeDropperDone = this.onEyeDropperDone.bind(this);
+      this.onEyeDropperButtonClicked = this.onEyeDropperButtonClicked.bind(this);
+      this.eyeDropperButton = this.panelDoc
                                     .getElementById("inspector-eyedropper-toggle");
-        this.eyeDropperButton.disabled = false;
-        this.eyeDropperButton.title = INSPECTOR_L10N.getStr("inspector.eyedropper.label");
-        this.eyeDropperButton.addEventListener("click", this.onEyeDropperButtonClicked);
-      }, e => console.error(e));
+      this.eyeDropperButton.disabled = false;
+      this.eyeDropperButton.title = INSPECTOR_L10N.getStr("inspector.eyedropper.label");
+      this.eyeDropperButton.addEventListener("click", this.onEyeDropperButtonClicked);
     } else {
       let eyeDropperButton = this.panelDoc.getElementById("inspector-eyedropper-toggle");
       eyeDropperButton.disabled = true;
       eyeDropperButton.title = INSPECTOR_L10N.getStr("eyedropper.disabled.title");
     }
-  },
+  }),
 
   teardownToolbar: function () {
     this._sidebarToggle = null;
 
     if (this.addNodeButton) {
       this.addNodeButton.removeEventListener("click", this.addNode);
       this.addNodeButton = null;
     }
--- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -90,30 +90,28 @@ SwatchColorPickerTooltip.prototype = Her
       this._originalColor = this.currentSwatchColor.textContent;
       let color = this.activeSwatch.style.backgroundColor;
       this.spectrum.off("changed", this._onSpectrumColorChange);
       this.spectrum.rgb = this._colorToRgba(color);
       this.spectrum.on("changed", this._onSpectrumColorChange);
       this.spectrum.updateUI();
     }
 
-    let {target} = this.inspector;
-    target.actorHasMethod("inspector", "pickColorFromPage").then(value => {
-      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;
-        eyeButton.title = L10N.getStr("eyedropper.disabled.title");
-      }
-      this.emit("ready");
-    }, e => console.error(e));
+    let tooltipDoc = this.tooltip.doc;
+    let eyeButton = tooltipDoc.querySelector("#eyedropper-button");
+    let canShowEyeDropper = yield this.inspector.supportsEyeDropper();
+    if (canShowEyeDropper) {
+      eyeButton.disabled = false;
+      eyeButton.removeAttribute("title");
+      eyeButton.addEventListener("click", this._openEyeDropper);
+    } else {
+      eyeButton.disabled = true;
+      eyeButton.title = L10N.getStr("eyedropper.disabled.title");
+    }
+    this.emit("ready");
   }),
 
   _onSpectrumColorChange: function (event, rgba, cssColor) {
     this._selectColor(cssColor);
   },
 
   _selectColor: function (color) {
     if (this.activeSwatch) {