Bug 934951 - [Australis] Zoom controls percentage label doesn't update when it's in the toolbar and you navigate. r=mconley

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -291,7 +291,9 @@ const CustomizableWidgets = [{
     defaultArea: CustomizableUI.AREA_PANEL,
     onBuild: function(aDocument) {
       const kPanelId = "PanelUI-popup";
-      let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
+      let areaType = CustomizableUI.getAreaType(this.currentArea);
+      let inPanel = areaType == CustomizableUI.TYPE_MENU_PANEL;
+      let inToolbar = areaType == CustomizableUI.TYPE_TOOLBAR;
       let noautoclose = inPanel ? "true" : null;
       let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
 
@@ -358,10 +360,14 @@ const CustomizableWidgets = [{
       Services.obs.addObserver(updateZoomResetButton, "browser-fullZoom:zoomChange", false);
       Services.obs.addObserver(updateZoomResetButton, "browser-fullZoom:zoomReset", false);
 
-      if (inPanel && this.currentArea) {
+      if (inPanel) {
         let panel = aDocument.getElementById(kPanelId);
         panel.addEventListener("popupshowing", updateZoomResetButton);
       } else {
+        if (inToolbar) {
+          let container = window.gBrowser.tabContainer;
+          container.addEventListener("TabSelect", updateZoomResetButton);
+        }
         updateZoomResetButton();
       }
 
@@ -373,9 +379,13 @@ const CustomizableWidgets = [{
           updateCombinedWidgetStyle(node, aArea, true);
           updateZoomResetButton();
 
-          if (aArea == CustomizableUI.AREA_PANEL) {
+          let areaType = CustomizableUI.getAreaType(aArea);
+          if (areaType == CustomizableUI.TYPE_MENU_PANEL) {
             let panel = aDocument.getElementById(kPanelId);
             panel.addEventListener("popupshowing", updateZoomResetButton);
+          } else if (areaType == CustomizableUI.TYPE_TOOLBAR) {
+            let container = window.gBrowser.tabContainer;
+            container.addEventListener("TabSelect", updateZoomResetButton);
           }
         }.bind(this),
 
@@ -383,9 +393,13 @@ const CustomizableWidgets = [{
           if (aWidgetId != this.id)
             return;
 
-          if (aPrevArea == CustomizableUI.AREA_PANEL) {
+          let areaType = CustomizableUI.getAreaType(aPrevArea);
+          if (areaType == CustomizableUI.TYPE_MENU_PANEL) {
             let panel = aDocument.getElementById(kPanelId);
             panel.removeEventListener("popupshowing", updateZoomResetButton);
+          } else if (areaType == CustomizableUI.TYPE_TOOLBAR) {
+            let container = window.gBrowser.tabContainer;
+            container.removeEventListener("TabSelect", updateZoomResetButton);
           }
 
           // When a widget is demoted to the palette ('removed'), it's visual
@@ -417,6 +431,8 @@ const CustomizableWidgets = [{
           Services.obs.removeObserver(updateZoomResetButton, "browser-fullZoom:zoomReset");
           let panel = aDoc.getElementById(kPanelId);
           panel.removeEventListener("popupshowing", updateZoomResetButton);
+          let container = aDoc.defaultView.gBrowser.tabContainer;
+          container.removeEventListener("TabSelect", updateZoomResetButton);
         }.bind(this),
 
         onWidgetDrag: function(aWidgetId, aArea) {

browser/components/customizableui/test/browser.ini

@@ -38,6 +38,7 @@ skip-if = true
 # Because this test is about the menubar, it can't be run on mac
 skip-if = os == "mac"
 
+[browser_934951_zoom_in_toolbar.js]
 [browser_938980_navbar_collapsed.js]
 [browser_938995_indefaultstate_nonremovable.js]
 [browser_940013_registerToolbarNode_calls_registerArea.js]

browser/components/customizableui/test/browser_934951_zoom_in_toolbar.js

@@ -0,0 +1,68 @@
+/* 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 kTimeoutInMS = 20000;
+
+// Bug 934951 - Zoom controls percentage label doesn't update when it's in the toolbar and you navigate.
+add_task(function() {
+  CustomizableUI.addWidgetToArea("zoom-controls", CustomizableUI.AREA_NAVBAR);
+  let tab1 = gBrowser.addTab("about:mozilla");
+  let tab2 = gBrowser.addTab("about:newtab");
+  gBrowser.selectedTab = tab1;
+  let zoomResetButton = document.getElementById("zoom-reset-button");
+
+  is(parseInt(zoomResetButton.label, 10), 100, "Default zoom is 100% for about:mozilla");
+  let zoomChangePromise = promiseObserverNotification("browser-fullZoom:zoomChange");
+  FullZoom.enlarge();
+  yield zoomChangePromise;
+  is(parseInt(zoomResetButton.label, 10), 110, "Zoom is changed to 110% for about:mozilla");
+
+  let tabSelectPromise = promiseTabSelect();
+  gBrowser.selectedTab = tab2;
+  yield tabSelectPromise;
+  is(parseInt(zoomResetButton.label, 10), 100, "Default zoom is 100% for about:newtab");
+
+  gBrowser.selectedTab = tab1;
+  let zoomResetPromise = promiseObserverNotification("browser-fullZoom:zoomReset");
+  FullZoom.reset();
+  yield zoomResetPromise;
+  is(parseInt(zoomResetButton.label, 10), 100, "Default zoom is 100% for about:mozilla");
+
+  CustomizableUI.reset();
+  gBrowser.removeTab(tab2);
+  gBrowser.removeTab(tab1);
+});
+
+function promiseObserverNotification(aObserver) {
+  let deferred = Promise.defer();
+  function notificationCallback(e) {
+    Services.obs.removeObserver(notificationCallback, aObserver, false);
+    clearTimeout(timeoutId);
+    deferred.resolve();
+  };
+  let timeoutId = setTimeout(() => {
+    Services.obs.removeObserver(notificationCallback, aObserver, false);
+    deferred.reject("Notification '" + aObserver + "' did not happen within 20 seconds.");
+  }, kTimeoutInMS);
+  Services.obs.addObserver(notificationCallback, aObserver, false);
+  return deferred.promise;
+}
+
+function promiseTabSelect() {
+  let deferred = Promise.defer();
+  let container = window.gBrowser.tabContainer;
+  let timeoutId = setTimeout(() => {
+    container.removeEventListener("TabSelect", callback);
+    deferred.reject("TabSelect did not happen within 20 seconds");
+  }, kTimeoutInMS);
+  function callback(e) {
+    container.removeEventListener("TabSelect", callback);
+    clearTimeout(timeoutId);
+    executeSoon(deferred.resolve);
+  };
+  container.addEventListener("TabSelect", callback);
+  return deferred.promise;
+}