Bug 1348122 - Share code between the customizable zoom control and the location bar's zoom indicator. r=Gijs

MozReview-Commit-ID: 7iRRr1gF9R5

--HG--
rename : browser/modules/URLBarZoom.jsm => browser/modules/FullZoomUI.jsm
extra : rebase_source : 90a4f8f0b4a3804c3306a4f5bc70d566b288979f

browser/base/content/browser.js

@@ -28,7 +28,7 @@ Cu.import("resource://gre/modules/NotificationDB.jsm");
           Social:false, TabCrashHandler:false, Task:false, TelemetryStopwatch:false,
           Translation:false, UITour:false, UpdateUtils:false, Weave:false,
           fxAccounts:false, gDevTools:false, gDevToolsBrowser:false, webrtcUI:false,
-          URLBarZoom:false
+          FullZoomUI:false
  */
 
 /**
@@ -49,6 +49,7 @@ Cu.import("resource://gre/modules/NotificationDB.jsm");
   ["E10SUtils", "resource:///modules/E10SUtils.jsm"],
   ["ExtensionsUI", "resource:///modules/ExtensionsUI.jsm"],
   ["FormValidationHandler", "resource:///modules/FormValidationHandler.jsm"],
+  ["FullZoomUI", "resource:///modules/FullZoomUI.jsm"],
   ["GMPInstallManager", "resource://gre/modules/GMPInstallManager.jsm"],
   ["LightweightThemeManager", "resource://gre/modules/LightweightThemeManager.jsm"],
   ["Log", "resource://gre/modules/Log.jsm"],
@@ -74,7 +75,6 @@ Cu.import("resource://gre/modules/NotificationDB.jsm");
   ["Translation", "resource:///modules/translation/Translation.jsm"],
   ["UITour", "resource:///modules/UITour.jsm"],
   ["UpdateUtils", "resource://gre/modules/UpdateUtils.jsm"],
-  ["URLBarZoom", "resource:///modules/URLBarZoom.jsm"],
   ["Weave", "resource://services-sync/main.js"],
   ["fxAccounts", "resource://gre/modules/FxAccounts.jsm"],
   ["gDevTools", "resource://devtools/client/framework/gDevTools.jsm"],
@@ -1140,7 +1140,7 @@ var gBrowserInit = {
     TrackingProtection.init();
     RefreshBlocker.init();
     CaptivePortalWatcher.init();
-    URLBarZoom.init(window);
+    FullZoomUI.init(window);
 
     let mm = window.getGroupMessageManager("browsers");
     mm.loadFrameScript("chrome://browser/content/tab-content.js", true);

browser/components/customizableui/CustomizableWidgets.jsm

@@ -663,11 +663,6 @@ const CustomizableWidgets = [
     tooltiptext: "zoom-controls.tooltiptext2",
     defaultArea: CustomizableUI.AREA_PANEL,
     onBuild(aDocument) {
-      const kPanelId = "PanelUI-popup";
-      let areaType = CustomizableUI.getAreaType(this.currentArea);
-      let inPanel = areaType == CustomizableUI.TYPE_MENU_PANEL;
-      let inToolbar = areaType == CustomizableUI.TYPE_TOOLBAR;
-
       let buttons = [{
         id: "zoom-out-button",
         command: "cmd_fullZoomReduce",
@@ -705,40 +700,6 @@ const CustomizableWidgets = [
         node.appendChild(btnNode);
       });
 
-      // The middle node is the 'Reset Zoom' button.
-      let zoomResetButton = node.childNodes[2];
-      let window = aDocument.defaultView;
-      function updateZoomResetButton() {
-        let updateDisplay = true;
-        // Label should always show 100% in customize mode, so don't update:
-        if (aDocument.documentElement.hasAttribute("customizing")) {
-          updateDisplay = false;
-        }
-        // XXXgijs in some tests we get called very early, and there's no docShell on the
-        // tabbrowser. This breaks the zoom toolkit code (see bug 897410). Don't let that happen:
-        let zoomFactor = 100;
-        try {
-          zoomFactor = Math.round(window.ZoomManager.zoom * 100);
-        } catch (e) {}
-        zoomResetButton.setAttribute("label", CustomizableUI.getLocalizedProperty(
-          buttons[1], "label", [updateDisplay ? zoomFactor : 100]
-        ));
-      }
-
-      // Register ourselves with the service so we know when the zoom prefs change.
-      Services.obs.addObserver(updateZoomResetButton, "browser-fullZoom:location-change", false);
-      window.addEventListener("FullZoomChange", updateZoomResetButton);
-
-      if (inPanel) {
-        let panel = aDocument.getElementById(kPanelId);
-        panel.addEventListener("popupshowing", updateZoomResetButton);
-      } else {
-        if (inToolbar) {
-          let container = window.gBrowser.tabContainer;
-          container.addEventListener("TabSelect", updateZoomResetButton);
-        }
-        updateZoomResetButton();
-      }
       updateCombinedWidgetStyle(node, this.currentArea, true);
 
       let listener = {
@@ -747,56 +708,33 @@ const CustomizableWidgets = [
             return;
 
           updateCombinedWidgetStyle(node, aArea, true);
-          updateZoomResetButton();
-
-          let newAreaType = CustomizableUI.getAreaType(aArea);
-          if (newAreaType == CustomizableUI.TYPE_MENU_PANEL) {
-            let panel = aDocument.getElementById(kPanelId);
-            panel.addEventListener("popupshowing", updateZoomResetButton);
-          } else if (newAreaType == CustomizableUI.TYPE_TOOLBAR) {
-            let container = window.gBrowser.tabContainer;
-            container.addEventListener("TabSelect", updateZoomResetButton);
-          }
         }.bind(this),
 
         onWidgetRemoved: function(aWidgetId, aPrevArea) {
           if (aWidgetId != this.id)
             return;
 
-          let formerAreaType = CustomizableUI.getAreaType(aPrevArea);
-          if (formerAreaType == CustomizableUI.TYPE_MENU_PANEL) {
-            let panel = aDocument.getElementById(kPanelId);
-            panel.removeEventListener("popupshowing", updateZoomResetButton);
-          } else if (formerAreaType == CustomizableUI.TYPE_TOOLBAR) {
-            let container = window.gBrowser.tabContainer;
-            container.removeEventListener("TabSelect", updateZoomResetButton);
-          }
-
           // When a widget is demoted to the palette ('removed'), it's visual
           // style should change.
           updateCombinedWidgetStyle(node, null, true);
-          updateZoomResetButton();
         }.bind(this),
 
         onWidgetReset: function(aWidgetNode) {
           if (aWidgetNode != node)
             return;
           updateCombinedWidgetStyle(node, this.currentArea, true);
-          updateZoomResetButton();
         }.bind(this),
 
         onWidgetUndoMove: function(aWidgetNode) {
           if (aWidgetNode != node)
             return;
           updateCombinedWidgetStyle(node, this.currentArea, true);
-          updateZoomResetButton();
         }.bind(this),
 
         onWidgetMoved: function(aWidgetId, aArea) {
           if (aWidgetId != this.id)
             return;
           updateCombinedWidgetStyle(node, aArea, true);
-          updateZoomResetButton();
         }.bind(this),
 
         onWidgetInstanceRemoved: function(aWidgetId, aDoc) {
@@ -804,26 +742,8 @@ const CustomizableWidgets = [
             return;
 
           CustomizableUI.removeListener(listener);
-          Services.obs.removeObserver(updateZoomResetButton, "browser-fullZoom:location-change");
-          window.removeEventListener("FullZoomChange", updateZoomResetButton);
-          let panel = aDoc.getElementById(kPanelId);
-          panel.removeEventListener("popupshowing", updateZoomResetButton);
-          let container = aDoc.defaultView.gBrowser.tabContainer;
-          container.removeEventListener("TabSelect", updateZoomResetButton);
         }.bind(this),
 
-        onCustomizeStart(aWindow) {
-          if (aWindow.document == aDocument) {
-            updateZoomResetButton();
-          }
-        },
-
-        onCustomizeEnd(aWindow) {
-          if (aWindow.document == aDocument) {
-            updateZoomResetButton();
-          }
-        },
-
         onWidgetDrag: function(aWidgetId, aArea) {
           if (aWidgetId != this.id)
             return;

browser/components/customizableui/test/browser_934951_zoom_in_toolbar.js

@@ -29,9 +29,10 @@ add_task(function*() {
   yield zoomChangePromise;
   is(parseInt(zoomResetButton.label, 10), 110, "Zoom is changed to 110% for about:mozilla");
 
-  let tabSelectPromise = promiseTabSelect();
+  let tabSelectPromise = promiseObserverNotification("browser-fullZoom:location-change");
   gBrowser.selectedTab = tab2;
   yield tabSelectPromise;
+  yield new Promise(resolve => executeSoon(resolve));
   is(parseInt(zoomResetButton.label, 10), 100, "Default zoom is 100% for about:robots");
 
   gBrowser.selectedTab = tab1;

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

@@ -386,10 +386,11 @@ tabHistory.goForward=Go forward to this page
 
 # URL Bar
 pasteAndGo.label=Paste & Go
-# LOCALIZATION NOTE(urlbar-zoom-button.label): %S is the current zoom level,
+
+# LOCALIZATION NOTE(zoom-button.label): %S is the current page zoom level,
 # %% will be displayed as a single % character (% is commonly used to define
 # format specifiers, so it needs to be escaped).
-urlbar-zoom-button.label = %S%%
+zoom-button.label = %S%%
 
 # Block autorefresh
 refreshBlocked.goButton=Allow

browser/locales/en-US/chrome/browser/customizableui/customizableWidgets.properties

@@ -51,10 +51,6 @@ zoom-out-button.label = Zoom out
 # LOCALIZATION NOTE(zoom-out-button.tooltiptext2): %S is the keyboard shortcut.
 zoom-out-button.tooltiptext2 = Zoom out (%S)
 
-# LOCALIZATION NOTE(zoom-reset-button.label): %S is the current zoom level,
-# %% will be displayed as a single % character (% is commonly used to define
-# format specifiers, so it needs to be escaped).
-zoom-reset-button.label = %S%%
 # LOCALIZATION NOTE(zoom-reset-button.tooltiptext2): %S is the keyboard shortcut.
 zoom-reset-button.tooltiptext2 = Reset zoom level (%S)
 

browser/modules/FullZoomUI.jsm

@@ -0,0 +1,116 @@
+// -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
+/* 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";
+
+this.EXPORTED_SYMBOLS = [ "FullZoomUI" ];
+
+Components.utils.import("resource://gre/modules/Services.jsm");
+
+var FullZoomUI = {
+  init(aWindow) {
+    aWindow.addEventListener("EndSwapDocShells", onEndSwapDocShells, true);
+    aWindow.addEventListener("FullZoomChange", onFullZoomChange);
+    aWindow.addEventListener("unload", () => {
+      aWindow.removeEventListener("EndSwapDocShells", onEndSwapDocShells, true);
+      aWindow.removeEventListener("FullZoomChange", onFullZoomChange);
+    }, {once: true});
+  },
+}
+
+function fullZoomLocationChangeObserver(aSubject, aTopic) {
+  // If the tab was the last one in its window and has been dragged to another
+  // window, the original browser's window will be unavailable here. Since that
+  // window is closing, we can just ignore this notification.
+  if (!aSubject.ownerGlobal) {
+    return;
+  }
+  updateZoomUI(aSubject, false);
+}
+Services.obs.addObserver(fullZoomLocationChangeObserver, "browser-fullZoom:location-change", false);
+
+function onEndSwapDocShells(event) {
+  updateZoomUI(event.originalTarget);
+}
+
+function onFullZoomChange(event) {
+  let browser;
+  if (event.target.nodeType == event.target.DOCUMENT_NODE) {
+    // In non-e10s, the event is dispatched on the contentDocument
+    // so we need to jump through some hoops to get to the <xul:browser>.
+    let gBrowser = event.currentTarget.gBrowser;
+    let topDoc = event.target.defaultView.top.document;
+    browser = gBrowser.getBrowserForDocument(topDoc);
+  } else {
+    browser = event.originalTarget;
+  }
+  updateZoomUI(browser, true);
+}
+
+/**
+ * Updates zoom controls.
+ *
+ * @param {object} aBrowser The browser that the zoomed content resides in.
+ * @param {boolean} aAnimate Should be True for all cases unless the zoom
+ *   change is related to tab switching. Optional
+ */
+function updateZoomUI(aBrowser, aAnimate = false) {
+  let win = aBrowser.ownerGlobal;
+  if (aBrowser != win.gBrowser.selectedBrowser) {
+    return;
+  }
+
+  let customizableZoomControls = win.document.getElementById("zoom-controls");
+  let customizableZoomReset = win.document.getElementById("zoom-reset-button");
+  let urlbarZoomButton = win.document.getElementById("urlbar-zoom-button");
+  let zoomFactor = Math.round(win.ZoomManager.zoom * 100);
+
+  // Hide urlbar zoom button if zoom is at 100% or the customizable control is
+  // in the toolbar.
+  urlbarZoomButton.hidden =
+    (zoomFactor == 100 ||
+     (customizableZoomControls &&
+      customizableZoomControls.getAttribute("cui-areatype") == "toolbar"));
+
+  let label = win.gNavigatorBundle.getFormattedString("zoom-button.label", [zoomFactor]);
+  if (customizableZoomReset) {
+    customizableZoomReset.setAttribute("label", label);
+  }
+  if (!urlbarZoomButton.hidden) {
+    if (aAnimate) {
+      urlbarZoomButton.setAttribute("animate", "true");
+    } else {
+      urlbarZoomButton.removeAttribute("animate");
+    }
+    urlbarZoomButton.setAttribute("label", label);
+  }
+}
+
+Components.utils.import("resource:///modules/CustomizableUI.jsm");
+let customizationListener = {
+  onAreaNodeRegistered(aAreaType, aAreaNode) {
+    if (aAreaType == CustomizableUI.AREA_PANEL) {
+      updateZoomUI(aAreaNode.ownerGlobal.gBrowser.selectedBrowser);
+    }
+  }
+};
+customizationListener.onWidgetAdded =
+customizationListener.onWidgetRemoved =
+customizationListener.onWidgetMoved =
+customizationListener.onWidgetInstanceRemoved = function(aWidgetId) {
+  if (aWidgetId == "zoom-controls") {
+    for (let window of CustomizableUI.windows) {
+      updateZoomUI(window.gBrowser.selectedBrowser);
+    }
+  }
+};
+customizationListener.onWidgetReset =
+customizationListener.onWidgetUndoMove = function(aWidgetNode) {
+  if (aWidgetNode.id == "zoom-controls") {
+    updateZoomUI(aWidgetNode.ownerGlobal.gBrowser.selectedBrowser);
+  }
+};
+CustomizableUI.addListener(customizationListener);
+

browser/modules/URLBarZoom.jsm

@@ -1,91 +0,0 @@
-// -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
-/* 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";
-
-this.EXPORTED_SYMBOLS = [ "URLBarZoom" ];
-
-Components.utils.import("resource://gre/modules/Services.jsm");
-
-var URLBarZoom = {
-  init(aWindow) {
-    aWindow.addEventListener("EndSwapDocShells", onEndSwapDocShells, true);
-    aWindow.addEventListener("FullZoomChange", onFullZoomChange);
-    aWindow.addEventListener("unload", () => {
-      aWindow.removeEventListener("EndSwapDocShells", onEndSwapDocShells, true);
-      aWindow.removeEventListener("FullZoomChange", onFullZoomChange);
-    }, {once: true});
-  },
-}
-
-function fullZoomLocationChangeObserver(aSubject, aTopic) {
-  // If the tab was the last one in its window and has been dragged to another
-  // window, the original browser's window will be unavailable here. Since that
-  // window is closing, we can just ignore this notification.
-  if (!aSubject.ownerGlobal) {
-    return;
-  }
-
-  updateZoomButton(aSubject, false);
-}
-
-function onEndSwapDocShells(event) {
-  updateZoomButton(event.originalTarget);
-}
-
-function onFullZoomChange(event) {
-  let browser;
-  if (event.target.nodeType == event.target.DOCUMENT_NODE) {
-    // In non-e10s, the event is dispatched on the contentDocument
-    // so we need to jump through some hoops to get to the <xul:browser>.
-    let gBrowser = event.currentTarget.gBrowser;
-    let topDoc = event.target.defaultView.top.document;
-    browser = gBrowser.getBrowserForDocument(topDoc);
-  } else {
-    browser = event.originalTarget;
-  }
-  updateZoomButton(browser, true);
-}
-
-  /**
-   * Updates the zoom button in the location bar.
-   *
-   * @param {object} aBrowser The browser that the zoomed content resides in.
-   * @param {boolean} aAnimate Should be True for all cases unless the zoom
-   *   change is related to tab switching. Optional
-   */
-function updateZoomButton(aBrowser, aAnimate = false) {
-  let win = aBrowser.ownerGlobal;
-  if (aBrowser != win.gBrowser.selectedBrowser) {
-    return;
-  }
-
-  let customizableZoomControls = win.document.getElementById("zoom-controls");
-  let zoomResetButton = win.document.getElementById("urlbar-zoom-button");
-
-  // Ensure that zoom controls haven't already been added to browser in Customize Mode
-  if (customizableZoomControls &&
-      customizableZoomControls.getAttribute("cui-areatype") == "toolbar") {
-    zoomResetButton.hidden = true;
-    return;
-  }
-
-  let zoomFactor = Math.round(win.ZoomManager.zoom * 100);
-  if (zoomFactor != 100) {
-    zoomResetButton.hidden = false;
-    if (aAnimate) {
-      zoomResetButton.setAttribute("animate", "true");
-    } else {
-      zoomResetButton.removeAttribute("animate");
-    }
-    zoomResetButton.setAttribute("label",
-        win.gNavigatorBundle.getFormattedString("urlbar-zoom-button.label", [zoomFactor]));
-  } else {
-    // Hide button if zoom is at 100%
-    zoomResetButton.hidden = true;
-  }
-}
-
-Services.obs.addObserver(fullZoomLocationChangeObserver, "browser-fullZoom:location-change", false);

browser/modules/moz.build

@@ -29,6 +29,7 @@ EXTRA_JS_MODULES += [
     'Feeds.jsm',
     'FormSubmitObserver.jsm',
     'FormValidationHandler.jsm',
+    'FullZoomUI.jsm',
     'HiddenFrame.jsm',
     'LaterRun.jsm',
     'NetworkPrioritizer.jsm',
@@ -45,7 +46,6 @@ EXTRA_JS_MODULES += [
     'Social.jsm',
     'SocialService.jsm',
     'TransientPrefs.jsm',
-    'URLBarZoom.jsm',
     'webrtcUI.jsm',
 ]