Bug 892268 - Zoom devtools with Ctrl/Cmd +/-/0; r=dcamp

browser/app/profile/firefox.js

@@ -1081,6 +1081,7 @@ pref("devtools.toolbox.host", "bottom");
 pref("devtools.toolbox.selectedTool", "webconsole");
 pref("devtools.toolbox.toolbarSpec", '["paintflashing toggle","tilt toggle","scratchpad","resize toggle"]');
 pref("devtools.toolbox.sideEnabled", true);
+pref("devtools.toolbox.zoomValue", "1");
 
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);

browser/devtools/framework/test/Makefile.in

@@ -22,5 +22,6 @@ MOCHITEST_BROWSER_FILES = \
 		browser_toolbox_options_disablejs_iframe.html \
 		browser_toolbox_highlight.js \
 		browser_toolbox_raise.js \
+		browser_toolbox_zoom.js \
 		browser_keybindings.js \
 		$(NULL)

browser/devtools/framework/test/browser_toolbox_zoom.js

@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let modifiers = {
+  accelKey: true
+};
+
+let toolbox;
+
+function test() {
+  waitForExplicitFinish();
+
+  addTab("about:blank", function() {
+    openToolbox();
+  });
+}
+
+function openToolbox() {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  gDevTools.showToolbox(target).then((aToolbox) => {
+    toolbox = aToolbox;
+    toolbox.selectTool("styleeditor").then(testZoom);
+  });
+}
+
+function testZoom() {
+  info("testing zoom keys");
+
+  testZoomLevel("in", 2, 1.2);
+  testZoomLevel("out", 3, 0.9);
+  testZoomLevel("reset", 1, 1);
+
+  tidyUp();
+}
+
+function testZoomLevel(type, times, expected) {
+  sendZoomKey("toolbox-zoom-"+ type + "-key", times);
+
+  let zoom = getCurrentZoom(toolbox);
+  is(zoom.toFixed(2), expected, "zoom level correct after zoom " + type);
+
+  is(toolbox.zoomValue.toFixed(2), expected,
+     "saved zoom level is correct after zoom " + type);
+}
+
+function sendZoomKey(id, times) {
+  let key = toolbox.doc.getElementById(id).getAttribute("key");
+  for (let i = 0; i < times; i++) {
+    EventUtils.synthesizeKey(key, modifiers, toolbox.doc.defaultView);
+  }
+}
+
+function getCurrentZoom() {
+  var contViewer = toolbox.frame.docShell.contentViewer;
+  var docViewer = contViewer.QueryInterface(Ci.nsIMarkupDocumentViewer);
+  return docViewer.fullZoom;
+}
+
+function tidyUp() {
+  toolbox.destroy().then(function() {
+    gBrowser.removeCurrentTab();
+
+    toolbox = modifiers = null;
+    finish();
+  });
+}

browser/devtools/framework/toolbox.js

@@ -6,6 +6,10 @@
 
 const {Cc, Ci, Cu} = require("chrome");
 const MAX_ORDINAL = 99;
+const ZOOM_PREF = "devtools.toolbox.zoomValue";
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 2;
+
 let promise = require("sdk/core/promise");
 let EventEmitter = require("devtools/shared/event-emitter");
 let Telemetry = require("devtools/shared/telemetry");
@@ -189,6 +193,13 @@ Toolbox.prototype = {
     return this.frame.contentDocument;
   },
 
+  /**
+   * Get current zoom level of toolbox
+   */
+  get zoomValue() {
+    return parseFloat(Services.prefs.getCharPref(ZOOM_PREF));
+  },
+
   /**
    * Open the toolbox
    */
@@ -210,6 +221,8 @@ Toolbox.prototype = {
         this._buildButtons();
         this._addKeysToWindow();
         this._addToolSwitchingKeys();
+        this._addZoomKeys();
+        this._loadInitialZoom();
 
         this._telemetry.toolOpened("toolbox");
 
@@ -240,6 +253,70 @@ Toolbox.prototype = {
     prevKey.addEventListener("command", this.selectPreviousTool.bind(this), true);
   },
 
+  /**
+   * Wire up the listeners for the zoom keys.
+   */
+  _addZoomKeys: function TBOX__addZoomKeys() {
+    let inKey = this.doc.getElementById("toolbox-zoom-in-key");
+    inKey.addEventListener("command", this.zoomIn.bind(this), true);
+
+    let inKey2 = this.doc.getElementById("toolbox-zoom-in-key2");
+    inKey2.addEventListener("command", this.zoomIn.bind(this), true);
+
+    let outKey = this.doc.getElementById("toolbox-zoom-out-key");
+    outKey.addEventListener("command", this.zoomOut.bind(this), true);
+
+    let resetKey = this.doc.getElementById("toolbox-zoom-reset-key");
+    resetKey.addEventListener("command", this.zoomReset.bind(this), true);
+  },
+
+  /**
+   * Set zoom on toolbox to whatever the last setting was.
+   */
+  _loadInitialZoom: function TBOX__loadInitialZoom() {
+    this.setZoom(this.zoomValue);
+  },
+
+  /**
+   * Increase zoom level of toolbox window - make things bigger.
+   */
+  zoomIn: function TBOX__zoomIn() {
+    this.setZoom(this.zoomValue + 0.1);
+  },
+
+  /**
+   * Decrease zoom level of toolbox window - make things smaller.
+   */
+  zoomOut: function TBOX__zoomOut() {
+    this.setZoom(this.zoomValue - 0.1);
+  },
+
+  /**
+   * Reset zoom level of the toolbox window.
+   */
+  zoomReset: function TBOX__zoomReset() {
+    this.setZoom(1);
+  },
+
+  /**
+   * Set zoom level of the toolbox window.
+   *
+   * @param {number} zoomValue
+   *        Zoom level e.g. 1.2
+   */
+  setZoom: function TBOX__setZoom(zoomValue) {
+    // cap zoom value
+    zoomValue = Math.max(zoomValue, MIN_ZOOM);
+    zoomValue = Math.min(zoomValue, MAX_ZOOM);
+
+    let contViewer = this.frame.docShell.contentViewer;
+    let docViewer = contViewer.QueryInterface(Ci.nsIMarkupDocumentViewer);
+
+    docViewer.fullZoom = zoomValue;
+
+    Services.prefs.setCharPref(ZOOM_PREF, zoomValue);
+  },
+
   /**
    * Adds the keys and commands to the Toolbox Window in window mode.
    */
@@ -287,7 +364,7 @@ Toolbox.prototype = {
       }, true);
       doc.getElementById("toolbox-keyset").appendChild(key);
     }
-    
+
     // Add key for toggling the browser console from the detached window
     if(doc.getElementById("key_browserconsole") == null) {
       let key = doc.createElement("key");
@@ -546,6 +623,9 @@ Toolbox.prototype = {
     let prevToolId = this._currentToolId;
 
     if (this._currentToolId == id) {
+      // re-focus tool to get key events again
+      this.focusTool(id);
+
       // Return the existing panel in order to have a consistent return value.
       return promise.resolve(this._toolPanels.get(id));
     }
@@ -588,12 +668,25 @@ Toolbox.prototype = {
     }
 
     return this.loadTool(id).then((panel) => {
+      // focus the tool's frame to start receiving key events
+      this.focusTool(id);
+
       this.emit("select", id);
       this.emit(id + "-selected", panel);
       return panel;
     });
   },
 
+  /**
+   * Focus a tool's panel by id
+   * @param  {string} id
+   *         The id of tool to focus
+   */
+  focusTool: function(id) {
+    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
+    iframe.focus();
+  },
+
   /**
    * Loads the tool next to the currently selected tool.
    */

browser/devtools/framework/toolbox.xul

@@ -31,6 +31,22 @@
          key="&toolboxPreviousTool.key;"
          oncommand="void(0);"
          modifiers="accel"/>
+    <key id="toolbox-zoom-in-key"
+         key="&toolboxZoomIn.key;"
+         oncommand="void(0);"
+         modifiers="accel"/>
+    <key id="toolbox-zoom-in-key2"
+         key="&toolboxZoomIn.key2;"
+         oncommand="void(0);"
+         modifiers="accel"/>
+    <key id="toolbox-zoom-out-key"
+         key="&toolboxZoomOut.key;"
+         oncommand="void(0);"
+         modifiers="accel"/>
+    <key id="toolbox-zoom-reset-key"
+         key="&toolboxZoomReset.key;"
+         oncommand="void(0);"
+         modifiers="accel"/>
   </keyset>
 
   <notificationbox id="toolbox-notificationbox" flex="1">

browser/locales/en-US/chrome/browser/devtools/toolbox.dtd

@@ -12,6 +12,11 @@
 <!ENTITY toolboxNextTool.key           "]">
 <!ENTITY toolboxPreviousTool.key       "[">
 
+<!ENTITY toolboxZoomIn.key             "+">
+<!ENTITY toolboxZoomIn.key2            "="> <!-- + is above this key on many keyboards -->
+<!ENTITY toolboxZoomOut.key            "-">
+<!ENTITY toolboxZoomReset.key          "0">
+
 <!-- LOCALIZATION NOTE (options.context.advancedSettings): This is the label for
   -  the heading of the advanced settings group in the options panel. -->
 <!ENTITY options.context.advancedSettings "Advanced settings">