Bug 997163 - Add 'eyedropper' command and button; r=jwalker

2014-04-24 21:39:00 +02:00 · 2014-04-24 21:39:00 +02:00 · 5ac48b4982
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@ -1228,7 +1228,7 @@ pref("devtools.toolbox.footer.height", 250);
 pref("devtools.toolbox.sidebar.width", 500);
 pref("devtools.toolbox.host", "bottom");
 pref("devtools.toolbox.selectedTool", "webconsole");
-pref("devtools.toolbox.toolbarSpec", '["splitconsole", "paintflashing toggle","tilt toggle","scratchpad","resize toggle"]');
+pref("devtools.toolbox.toolbarSpec", '["splitconsole", "paintflashing toggle","tilt toggle","scratchpad","resize toggle","eyedropper"]');
 pref("devtools.toolbox.sideEnabled", true);
 pref("devtools.toolbox.zoomValue", "1");

@ -1239,6 +1239,7 @@ pref("devtools.command-button-paintflashing.enabled", false);
 pref("devtools.command-button-tilt.enabled", false);
 pref("devtools.command-button-scratchpad.enabled", false);
 pref("devtools.command-button-responsive.enabled", true);
+pref("devtools.command-button-eyedropper.enabled", false);

 // Inspector preferences
 // Enable the Inspector
--- a/browser/devtools/eyedropper/commands.js
+++ b/browser/devtools/eyedropper/commands.js
@ -0,0 +1,50 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const gcli = require("gcli/index");
+const EventEmitter = require("devtools/toolkit/event-emitter");
+const eventEmitter = new EventEmitter();
+
+let { Eyedropper, EyedropperManager } = require("devtools/eyedropper/eyedropper");
+
+/**
+ * 'eyedropper' command
+ */
+exports.items = [{
+  name: "eyedropper",
+  description: gcli.lookup("eyedropperDesc"),
+  manual: gcli.lookup("eyedropperManual"),
+  buttonId: "command-button-eyedropper",
+  buttonClass: "command-button command-button-invertable",
+  tooltipText: gcli.lookup("eyedropperTooltip"),
+  state: {
+    isChecked: function(target) {
+      let chromeWindow = target.tab.ownerDocument.defaultView;
+      let dropper = EyedropperManager.getInstance(chromeWindow);
+      if (dropper) {
+        return true;
+      }
+      return false;
+    },
+    onChange: function(target, changeHandler) {
+      eventEmitter.on("changed", changeHandler);
+    },
+    offChange: function(target, changeHandler) {
+      eventEmitter.off("changed", changeHandler);
+    },
+  },
+  exec: function(args, context) {
+    let chromeWindow = context.environment.chromeWindow;
+    let target = context.environment.target;
+
+    let dropper = EyedropperManager.createInstance(chromeWindow);
+    dropper.open();
+
+    eventEmitter.emit("changed", target.tab);
+
+    dropper.once("destroy", () => {
+      eventEmitter.emit("changed", target.tab);
+    });
+  }
+}];
--- a/browser/devtools/eyedropper/eyedropper.js
+++ b/browser/devtools/eyedropper/eyedropper.js
@ -48,6 +48,40 @@ const CLOSE_DELAY = 750;
 const HEX_BOX_WIDTH = CANVAS_WIDTH + CANVAS_OFFSET * 2;
 const HSL_BOX_WIDTH = 158;

+/**
+ * Manage instances of eyedroppers for windows. Registering here isn't
+ * necessary for creating an eyedropper, but can be used for testing.
+ */
+let EyedropperManager = {
+  _instances: new WeakMap(),
+
+  getInstance: function(chromeWindow) {
+    return this._instances.get(chromeWindow);
+  },
+
+  createInstance: function(chromeWindow) {
+    let dropper = this.getInstance(chromeWindow);
+    if (dropper) {
+      return dropper;
+    }
+
+    dropper = new Eyedropper(chromeWindow);
+    this._instances.set(chromeWindow, dropper);
+
+    dropper.on("destroy", () => {
+      this.deleteInstance(chromeWindow);
+    });
+
+    return dropper;
+  },
+
+  deleteInstance: function(chromeWindow) {
+    this._instances.delete(chromeWindow);
+  }
+}
+
+exports.EyedropperManager = EyedropperManager;
+
 /**
 * Eyedropper widget. Once opened, shows zoomed area above current pixel and
 * displays the color value of the center pixel. Clicking on the window will
--- a/browser/devtools/eyedropper/moz.build
+++ b/browser/devtools/eyedropper/moz.build
@ -7,6 +7,7 @@
 JS_MODULES_PATH = 'modules/devtools/eyedropper'

 EXTRA_JS_MODULES += [
+    'commands.js',
    'eyedropper.js'
 ]

--- a/browser/devtools/eyedropper/test/browser.ini
+++ b/browser/devtools/eyedropper/test/browser.ini
@ -7,3 +7,4 @@ support-files =

 [browser_eyedropper_basic.js]
 skip-if = os == "win" && debug # bug 963492
+[browser_eyedropper_cmd.js]
--- a/browser/devtools/eyedropper/test/browser_eyedropper_basic.js
+++ b/browser/devtools/eyedropper/test/browser_eyedropper_basic.js
@ -62,14 +62,3 @@ function inspectPage(dropper, click=true) {
 function pressESC() {
  EventUtils.synthesizeKey("VK_ESCAPE", { });
 }
-
-function dropperLoaded(dropper) {
-  if (dropper.loaded) {
-    return promise.resolve();
-  }
-
-  let deferred = promise.defer();
-  dropper.once("load", deferred.resolve);
-
-  return deferred.promise;
-}
--- a/browser/devtools/eyedropper/test/browser_eyedropper_cmd.js
+++ b/browser/devtools/eyedropper/test/browser_eyedropper_cmd.js
@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the eyedropper command works
+
+const TESTCASE_URI = TEST_BASE + "color-block.html";
+const DIV_COLOR = "#0000FF";
+
+function test() {
+  return Task.spawn(spawnTest).then(finish, helpers.handleError);
+}
+
+function spawnTest() {
+  let options = yield helpers.openTab(TESTCASE_URI);
+  yield helpers.openToolbar(options);
+
+  yield helpers.audit(options, [
+    {
+      setup: "eyedropper",
+      check: {
+        input: "eyedropper"
+      },
+      exec: { output: "" }
+    },
+  ]);
+
+  yield inspectAndWaitForCopy();
+
+  yield helpers.closeToolbar(options);
+  yield helpers.closeTab(options);
+}
+
+function inspectAndWaitForCopy() {
+  let deferred = promise.defer();
+
+  waitForClipboard(DIV_COLOR, () => {
+    inspectPage(); // setup: inspect the page
+  }, deferred.resolve, deferred.reject);
+
+  return deferred.promise;
+}
+
+function inspectPage() {
+  let target = content.document.getElementById("test");
+  let win = content.window;
+
+  EventUtils.synthesizeMouse(target, 20, 20, { type: "mousemove" }, win);
+
+  let dropper = EyedropperManager.getInstance(window);
+
+  return dropperLoaded(dropper).then(() => {
+    EventUtils.synthesizeMouse(target, 30, 30, { type: "mousemove" }, win);
+
+    EventUtils.synthesizeMouse(target, 30, 30, {}, win);
+  });
+}
--- a/browser/devtools/eyedropper/test/head.js
+++ b/browser/devtools/eyedropper/test/head.js
@ -4,10 +4,11 @@
 const TEST_BASE = "chrome://mochitests/content/browser/browser/devtools/eyedropper/test/";
 const TEST_HOST = 'mochi.test:8888';

-const promise = Cu.import("resource://gre/modules/devtools/deprecated-sync-thenables.js").Promise;
-const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;
-const { Eyedropper } = require("devtools/eyedropper/eyedropper");
+let { devtools } = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
+const { Eyedropper, EyedropperManager } = devtools.require("devtools/eyedropper/eyedropper");

+let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
+Services.scriptloader.loadSubScript(testDir + "../../../commandline/test/helpers.js", this);

 waitForExplicitFinish();

@ -35,3 +36,10 @@ function addTab(uri) {

  return deferred.promise;
 }
+
+function dropperLoaded(dropper) {
+  if (dropper.loaded) {
+    return promise.resolve();
+  }
+  return dropper.once("load");
+}
--- a/browser/devtools/framework/toolbox.js
+++ b/browser/devtools/framework/toolbox.js
@ -573,7 +573,8 @@ Toolbox.prototype = {
      "command-button-responsive",
      "command-button-paintflashing",
      "command-button-tilt",
-      "command-button-scratchpad"
+      "command-button-scratchpad",
+      "command-button-eyedropper"
    ].map(id => {
      let button = this.doc.getElementById(id);
      // Some buttons may not exist inside of Browser Toolbox
--- a/browser/devtools/main.js
+++ b/browser/devtools/main.js
@ -128,6 +128,7 @@ Tools.inspector = {
  commands: [
    "devtools/resize-commands",
    "devtools/inspector/inspector-commands",
+    "devtools/eyedropper/commands.js"
  ],

  preventClosingOnKey: true,
--- a/browser/devtools/shared/widgets/Tooltip.js
+++ b/browser/devtools/shared/widgets/Tooltip.js
@ -693,7 +693,7 @@ Tooltip.prototype = {
    let iframe = this.doc.createElementNS(XHTML_NS, "iframe");
    iframe.setAttribute("transparent", true);
    iframe.setAttribute("width", "210");
-    iframe.setAttribute("height", "220");
+    iframe.setAttribute("height", "216");
    iframe.setAttribute("flex", "1");
    iframe.setAttribute("class", "devtools-tooltip-iframe");

--- a/browser/devtools/shared/widgets/spectrum-frame.xhtml
+++ b/browser/devtools/shared/widgets/spectrum-frame.xhtml
@ -19,6 +19,6 @@
 </head>
 <body role="application">
  <div id="spectrum"></div>
-  <button id="eyedropper-button"></button>
+  <div id="eyedropper-button"></div>
 </body>
 </html>
--- a/browser/devtools/shared/widgets/spectrum.css
+++ b/browser/devtools/shared/widgets/spectrum.css
@ -3,17 +3,40 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 #eyedropper-button {
-  background: url("chrome://browser/skin/devtools/eyedropper-black.png") no-repeat center;
-  width: 20px;
-  height: 20px;
-  -moz-margin-start: 6px;
-  border: 1px solid #ccc;
+  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+  width: 16px;
+  height: 16px;
+  background-size: 64px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+  -moz-margin-start: 5px;
  border-radius: 2px;
  cursor: pointer;
 }

+.theme-light #eyedropper-button {
+  filter: url(chrome://browser/skin/devtools/filters.svg#invert);
+  border: 1px solid #AAA;
+}
+
 .theme-dark #eyedropper-button {
-  filter: url(chrome://browser/skin/devtools/filters.svg#colorpicker-invert);
+  border: 1px solid #444;
+}
+
+#eyedropper-button:hover {
+  background-position: -16px center;
+}
+#eyedropper-button:hover:active {
+  background-position: -32px center;
+}
+#eyedropper-button[checked=true] {
+  background-position: -48px center;
+}
+
+@media (min-resolution: 2dppx) {
+  #eyedropper-button {
+    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+  }
 }

 /* Mix-in classes */
--- a/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties
@ -165,6 +165,20 @@ inspectNodeDesc=CSS selector
 # on what it does.
 inspectNodeManual=A CSS selector for use with document.querySelector which identifies a single element

+# LOCALIZATION NOTE (eyedropperDesc) A very short description of the 'eyedropper'
+# command. See eyedropperManual for a fuller description of what it does. This
+# string is designed to be shown in a menu alongside the command name, which
+# is why it should be as short as possible.
+eyedropperDesc=Grab a color from the page
+
+# LOCALIZATION NOTE (eyedropperManual) A fuller description of the 'eyedropper'
+# command, displayed when the user asks for help on what it does.
+eyedropperManual=Open a panel that magnifies an area of page to inspect pixels and copy color values
+
+# LOCALIZATION NOTE (eyedropperTooltip) A string displayed as the
+# tooltip of button in devtools toolbox which toggles the Eyedropper tool.
+eyedropperTooltip=Grab a color from the page
+
 # LOCALIZATION NOTE (tiltDesc) A very short description of the 'tilt'
 # command. See tiltManual for a fuller description of what it does. This
 # string is designed to be shown in a menu alongside the command name, which
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@ -199,6 +199,8 @@ browser.jar:
  skin/classic/browser/devtools/command-pick@2x.png           (../shared/devtools/images/command-pick@2x.png)
  skin/classic/browser/devtools/command-console.png           (../shared/devtools/images/command-console.png)
  skin/classic/browser/devtools/command-console@2x.png        (../shared/devtools/images/command-console@2x.png)
+  skin/classic/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+  skin/classic/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
  skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
 * skin/classic/browser/devtools/ruleview.css          (../shared/devtools/ruleview.css)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
@ -297,7 +299,6 @@ browser.jar:
  skin/classic/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
  skin/classic/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
  skin/classic/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
-  skin/classic/browser/devtools/eyedropper-black.png        (../shared/devtools/images/eyedropper-black.png)
 #ifdef MOZ_SERVICES_SYNC
  skin/classic/browser/sync-16.png
  skin/classic/browser/sync-32.png
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@ -320,6 +320,8 @@ browser.jar:
  skin/classic/browser/devtools/command-pick@2x.png           (../shared/devtools/images/command-pick@2x.png)
  skin/classic/browser/devtools/command-console.png           (../shared/devtools/images/command-console.png)
  skin/classic/browser/devtools/command-console@2x.png        (../shared/devtools/images/command-console@2x.png)
+  skin/classic/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+  skin/classic/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
  skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
 * skin/classic/browser/devtools/ruleview.css                (../shared/devtools/ruleview.css)
  skin/classic/browser/devtools/commandline.css             (devtools/commandline.css)
@ -418,7 +420,6 @@ browser.jar:
  skin/classic/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
  skin/classic/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
  skin/classic/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
-  skin/classic/browser/devtools/eyedropper-black.png        (../shared/devtools/images/eyedropper-black.png)

 #ifdef MOZ_SERVICES_SYNC
  skin/classic/browser/sync-16.png
--- a/browser/themes/shared/devtools/filters.svg
+++ b/browser/themes/shared/devtools/filters.svg
@ -6,11 +6,4 @@
    <feFuncB type="table" tableValues=".1 0"/>
  </feComponentTransfer>
 </filter>
-<filter id="colorpicker-invert" x="0%" y="0%" width="100%" height="100%" >
-  <feComponentTransfer>
-    <feFuncR type="table" tableValues=".6 0"/>
-    <feFuncG type="table" tableValues=".6 0"/>
-    <feFuncB type="table" tableValues=".6 0"/>
-  </feComponentTransfer>
-</filter>
 </svg>
--- a/browser/themes/shared/devtools/images/command-eyedropper.png
+++ b/browser/themes/shared/devtools/images/command-eyedropper.png
--- a/browser/themes/shared/devtools/images/command-eyedropper@2x.png
+++ b/browser/themes/shared/devtools/images/command-eyedropper@2x.png
--- a/browser/themes/shared/devtools/images/eyedropper-black.png
+++ b/browser/themes/shared/devtools/images/eyedropper-black.png
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@ -580,6 +580,9 @@
  background-image: url("chrome://browser/skin/devtools/command-console.png");
 }

+#command-button-eyedropper > image {
+  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+}

@media (min-resolution: 2dppx) {
  #command-button-paintflashing > image {
@ -605,6 +608,10 @@
  #command-button-splitconsole > image {
    background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
  }
+
+  #command-button-eyedropper > image {
+    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+  }
 }

 /* Tabs */
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@ -239,6 +239,8 @@ browser.jar:
        skin/classic/browser/devtools/command-pick@2x.png           (../shared/devtools/images/command-pick@2x.png)
        skin/classic/browser/devtools/command-console.png           (../shared/devtools/images/command-console.png)
        skin/classic/browser/devtools/command-console@2x.png        (../shared/devtools/images/command-console@2x.png)
+        skin/classic/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+        skin/classic/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
        skin/classic/browser/devtools/markup-view.css               (../shared/devtools/markup-view.css)
        skin/classic/browser/devtools/editor-error.png              (devtools/editor-error.png)
        skin/classic/browser/devtools/editor-breakpoint.png         (devtools/editor-breakpoint.png)
@ -333,7 +335,6 @@ browser.jar:
        skin/classic/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
        skin/classic/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
        skin/classic/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
-        skin/classic/browser/devtools/eyedropper-black.png                  (../shared/devtools/images/eyedropper-black.png)

 #ifdef MOZ_SERVICES_SYNC
        skin/classic/browser/sync-16.png
@ -599,6 +600,8 @@ browser.jar:
        skin/classic/aero/browser/devtools/command-pick@2x.png       (../shared/devtools/images/command-pick@2x.png)
        skin/classic/aero/browser/devtools/command-console.png       (../shared/devtools/images/command-console.png)
        skin/classic/aero/browser/devtools/command-console@2x.png    (../shared/devtools/images/command-console@2x.png)
+        skin/classic/aero/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+        skin/classic/aero/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
        skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
 *       skin/classic/aero/browser/devtools/ruleview.css              (../shared/devtools/ruleview.css)
        skin/classic/aero/browser/devtools/commandline.css           (devtools/commandline.css)
@ -695,8 +698,6 @@ browser.jar:
        skin/classic/aero/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
        skin/classic/aero/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
        skin/classic/aero/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
-        skin/classic/aero/browser/devtools/eyedropper-black.png        (../shared/devtools/images/eyedropper-black.png)
-
 #ifdef MOZ_SERVICES_SYNC
        skin/classic/aero/browser/sync-16.png
        skin/classic/aero/browser/sync-32.png