Bug 1144163 - Add a rulers highlighter; added gcli command and button. r=pbrosset

browser/app/profile/firefox.js

@@ -1364,7 +1364,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","eyedropper","screenshot --fullpage"]');
+pref("devtools.toolbox.toolbarSpec", '["splitconsole", "paintflashing toggle","tilt toggle","scratchpad","resize toggle","eyedropper","screenshot --fullpage", "rulers"]');
 pref("devtools.toolbox.sideEnabled", true);
 pref("devtools.toolbox.zoomValue", "1");
 pref("devtools.toolbox.splitconsoleEnabled", false);
@@ -1380,6 +1380,7 @@ pref("devtools.command-button-scratchpad.enabled", false);
 pref("devtools.command-button-responsive.enabled", true);
 pref("devtools.command-button-eyedropper.enabled", false);
 pref("devtools.command-button-screenshot.enabled", false);
+pref("devtools.command-button-rulers.enabled", false);
 
 // Inspector preferences
 // Enable the Inspector

browser/devtools/commandline/commands-index.js

@@ -23,6 +23,7 @@ const commandModules = [
   "gcli/commands/pagemod",
   "gcli/commands/paintflashing",
   "gcli/commands/restart",
+  "gcli/commands/rulers",
   "gcli/commands/screenshot",
   "gcli/commands/tools",
 ];

browser/devtools/commandline/test/browser.ini

@@ -73,6 +73,7 @@ support-files =
 [browser_cmd_pref2.js]
 [browser_cmd_pref3.js]
 [browser_cmd_restart.js]
+[browser_cmd_rulers.js]
 [browser_cmd_screenshot.js]
 support-files =
   browser_cmd_screenshot.html

browser/devtools/commandline/test/browser_cmd_rulers.js

@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the various highlight command parameters and options
+
+let TEST_PAGE = "data:text/html;charset=utf-8,foo";
+
+function test() {
+  return Task.spawn(spawnTest).then(finish, helpers.handleError);
+}
+
+function* spawnTest() {
+  let options = yield helpers.openTab(TEST_PAGE);
+  yield helpers.openToolbar(options);
+
+  yield helpers.audit(options, [
+    {
+      setup: 'rulers',
+      check: {
+        input:  'rulers',
+        markup: 'VVVVVV',
+        status: 'VALID'
+      }
+    },
+    {
+      setup: 'rulers on',
+      check: {
+        input:  'rulers on',
+        markup: 'VVVVVVVEE',
+        status: 'ERROR'
+      },
+      exec: {
+        output: 'Error: Too many arguments'
+      }
+    },
+    {
+      setup: 'rulers --visible',
+      check: {
+        input:  'rulers --visible',
+        markup: 'VVVVVVVEEEEEEEEE',
+        status: 'ERROR'
+      },
+      exec: {
+        output: 'Error: Too many arguments'
+      }
+    }
+  ]);
+
+  yield helpers.closeToolbar(options);
+  yield helpers.closeTab(options);
+}

browser/devtools/framework/toolbox.js

@@ -84,7 +84,8 @@ const ToolboxButtons = [
   { id: "command-button-tilt" },
   { id: "command-button-scratchpad" },
   { id: "command-button-eyedropper" },
-  { id: "command-button-screenshot" }
+  { id: "command-button-screenshot" },
+  { id: "command-button-rulers"}
 ];
 
 /**

browser/locales/en-US/chrome/browser/devtools/gclicommands.properties

@@ -1528,3 +1528,17 @@ folderInvalidPath=Please enter a valid path
 # describe the result of the 'folder open' command.
 # The argument (%1$S) is the folder path.
 folderOpenDirResult=Opened %1$S
+
+# LOCALIZATION NOTE (rulesDesc) A very short description of the
+# 'rules' command. See highlightManual 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.
+rulersDesc=Toggle rulers for the page
+
+# LOCALIZATION NOTE (rulesManual) A fuller description of the 'rules'
+# command, displayed when the user asks for help on what it does.
+rulersManual=Toggle the horizontal and vertical rulers for the current page
+
+# LOCALIZATION NOTE (rulersTooltip) A string displayed as the
+# tooltip of button in devtools toolbox which toggles the rulers highligher.
+rulersTooltip=Toggle rulers for the page

browser/themes/linux/jar.mn

@@ -259,6 +259,8 @@ browser.jar:
   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/command-rulers.png            (../shared/devtools/images/command-rulers.png)
+  skin/classic/browser/devtools/command-rulers@2x.png         (../shared/devtools/images/command-rulers@2x.png)
   skin/classic/browser/devtools/alerticon-warning.png (../shared/devtools/images/alerticon-warning.png)
   skin/classic/browser/devtools/alerticon-warning@2x.png      (../shared/devtools/images/alerticon-warning@2x.png)
 * skin/classic/browser/devtools/ruleview.css          (../shared/devtools/ruleview.css)

browser/themes/osx/jar.mn

@@ -389,6 +389,8 @@ browser.jar:
   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/command-rulers.png            (../shared/devtools/images/command-rulers.png)
+  skin/classic/browser/devtools/command-rulers@2x.png         (../shared/devtools/images/command-rulers@2x.png)
   skin/classic/browser/devtools/alerticon-warning.png         (../shared/devtools/images/alerticon-warning.png)
   skin/classic/browser/devtools/alerticon-warning@2x.png      (../shared/devtools/images/alerticon-warning@2x.png)
 * skin/classic/browser/devtools/ruleview.css                (../shared/devtools/ruleview.css)

browser/themes/shared/devtools/toolbars.inc.css

@@ -678,6 +678,10 @@
   background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
 }
 
+#command-button-rulers > image {
+  background-image: url("chrome://browser/skin/devtools/command-rulers.png");
+}
+
 @media (min-resolution: 2dppx) {
   #command-button-paintflashing > image {
     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
@@ -714,6 +718,10 @@
   #command-button-eyedropper > image {
     background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
   }
+
+  #command-button-rulers > image {
+    background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png");
+  }
 }
 
 /* Tabs */

browser/themes/windows/jar.mn

@@ -349,6 +349,8 @@ browser.jar:
         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/command-rulers.png            (../shared/devtools/images/command-rulers.png)
+        skin/classic/browser/devtools/command-rulers@2x.png         (../shared/devtools/images/command-rulers@2x.png)
         skin/classic/browser/devtools/markup-view.css               (../shared/devtools/markup-view.css)
         skin/classic/browser/devtools/editor-error.png              (../shared/devtools/images/editor-error.png)
         skin/classic/browser/devtools/editor-breakpoint.png         (../shared/devtools/images/editor-breakpoint.png)

toolkit/devtools/gcli/commands/rulers.js

@@ -0,0 +1,90 @@
+/* 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/. */
+
+"use strict";
+
+const EventEmitter = require("devtools/toolkit/event-emitter");
+const eventEmitter = new EventEmitter();
+const events = require("sdk/event/core");
+
+const gcli = require("gcli/index");
+require("devtools/server/actors/inspector");
+const { RulersHighlighter } = require("devtools/server/actors/highlighter");
+
+const highlighters = new WeakMap();
+
+exports.items = [
+  {
+    name: "rulers",
+    description: gcli.lookup("rulersDesc"),
+    manual: gcli.lookup("rulersManual"),
+    buttonId: "command-button-rulers",
+    buttonClass: "command-button command-button-invertable",
+    tooltipText: gcli.lookup("rulersTooltip"),
+    state: {
+      isChecked: function(aTarget) {
+        if (aTarget.isLocalTab) {
+          let window = aTarget.tab.linkedBrowser.contentWindow;
+
+          if (window) {
+            return highlighters.has(window.document);
+          }
+
+          return false;
+        } else {
+          throw new Error("Unsupported target");
+        }
+      },
+      onChange: function(aTarget, aChangeHandler) {
+        eventEmitter.on("changed", aChangeHandler);
+      },
+      offChange: function(aTarget, aChangeHandler) {
+        eventEmitter.off("changed", aChangeHandler);
+      },
+    },
+    exec: function(args, context) {
+      let env = context.environment;
+      let { target } = env;
+
+      if (highlighters.has(env.document)) {
+        highlighters.get(env.document).highlighter.destroy();
+        return;
+      }
+
+      // Build a tab context for the highlighter (which normally takes a
+      // TabActor as parameter to its constructor)
+      let tabContext = {
+        browser: env.chromeWindow.gBrowser.getBrowserForDocument(env.document),
+        window: env.window
+      };
+
+      let emitToContext = (type, data) =>
+        events.emit(tabContext, type, Object.assign({isTopLevel: true}, data))
+
+      target.once("navigate", emitToContext);
+      target.once("will-navigate", emitToContext);
+
+      let highlighter = new RulersHighlighter(tabContext);
+
+      highlighters.set(env.document, { highlighter, listener: emitToContext });
+
+      events.once(highlighter, "destroy", () => {
+        if (highlighters.has(env.document)) {
+          let { highlighter, listener } = highlighters.get(env.document);
+
+          target.off("navigate", listener);
+          target.off("will-navigate", listener);
+
+          highlighters.delete(env.document);
+        }
+
+        eventEmitter.emit("changed", { target });
+      });
+
+      highlighter.show();
+
+      eventEmitter.emit("changed", { target });
+    }
+  }
+];

toolkit/devtools/gcli/moz.build

@@ -20,6 +20,7 @@ EXTRA_JS_MODULES.devtools.gcli.commands += [
     'commands/pagemod.js',
     'commands/paintflashing.js',
     'commands/restart.js',
+    'commands/rulers.js',
     'commands/screenshot.js',
     'commands/tools.js',
 ]