Bug 698873 - Update Zoom commands when changing zoom level. r=NeilDeakin,desktop-theme-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D145496

browser/base/content/browser-fullZoom.js

@@ -120,6 +120,10 @@ var FullZoom = {
               "browser.zoom.updateBackgroundTabs"
             );
             break;
+          case "browser.zoom.full": {
+            this.updateCommands();
+            break;
+          }
         }
         break;
     }
@@ -317,12 +321,42 @@ var FullZoom = {
     });
   },
 
-  // update state of zoom type menu item
+  // update state of zoom menu items
 
-  updateMenu: function FullZoom_updateMenu() {
-    var menuItem = document.getElementById("toggle_zoom");
+  updateCommands: function FullZoom_updateCommands() {
+    let zoomLevel = ZoomManager.zoom;
+    let reduceCmd = document.getElementById("cmd_fullZoomReduce");
+    if (zoomLevel == ZoomManager.MIN) {
+      reduceCmd.setAttribute("disabled", "true");
+    } else {
+      reduceCmd.removeAttribute("disabled");
+    }
 
-    menuItem.setAttribute("checked", !ZoomManager.useFullZoom);
+    let enlargeCmd = document.getElementById("cmd_fullZoomEnlarge");
+    if (zoomLevel == ZoomManager.MAX) {
+      enlargeCmd.setAttribute("disabled", "true");
+    } else {
+      enlargeCmd.removeAttribute("disabled");
+    }
+
+    let resetCmd = document.getElementById("cmd_fullZoomReset");
+    if (zoomLevel == 1) {
+      resetCmd.setAttribute("disabled", "true");
+    } else {
+      resetCmd.removeAttribute("disabled");
+    }
+
+    let fullZoomCmd = document.getElementById("cmd_fullZoomToggle");
+    if (!ZoomManager.useFullZoom) {
+      fullZoomCmd.setAttribute("checked", "true");
+    } else {
+      fullZoomCmd.setAttribute("checked", "false");
+    }
+    let event = new CustomEvent("ZoomCommandsUpdated", {
+      bubbles: false,
+      cancelable: false,
+    });
+    window.dispatchEvent(event);
   },
 
   // Setting & Pref Manipulation

browser/base/content/browser-menubar.inc

@@ -156,8 +156,7 @@
                   </menupopup>
                 </menu>
                 <menuseparator/>
-                <menu id="viewFullZoomMenu"
-                      onpopupshowing="FullZoom.updateMenu();" data-l10n-id="menu-view-full-zoom">
+                <menu id="viewFullZoomMenu" data-l10n-id="menu-view-full-zoom">
                   <menupopup>
                     <menuitem id="menu_zoomEnlarge"
                               key="key_fullZoomEnlarge"

browser/base/content/test/zoom/browser.ini

@@ -31,3 +31,4 @@ skip-if = os == "win" && debug || (verify && debug && (os == 'linux')) # Bug 131
 [browser_tabswitch_zoom_flicker.js]
 https_first_disabled = true
 skip-if = (debug && os == "linux" && bits == 64) || (!debug && os == "win") # Bug 1652383
+[browser_zoom_commands.js]

browser/base/content/test/zoom/browser_default_zoom.js

@@ -55,6 +55,7 @@ add_task(async function test_set_default_zoom() {
   );
   info("Removing tab");
   await FullZoomHelper.removeTabAndWaitForLocationChange();
+  await FullZoomHelper.changeDefaultZoom(100);
 });
 
 add_task(async function test_enlarge_reduce_reset_local_zoom() {

browser/base/content/test/zoom/browser_zoom_commands.js

@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that the zoom commands have the expected disabled state.
+ *
+ * @param {Object} expectedState
+ *   An object where each key represents one of the zoom commands,
+ *   and the value is a boolean that is true if the command should
+ *   be enabled, and false if it should be disabled.
+ *
+ *   The keys are "enlarge", "reduce" and "reset" for readability,
+ *   and internally this function maps those keys to the appropriate
+ *   commands.
+ */
+function assertCommandEnabledState(expectedState) {
+  const COMMAND_MAP = {
+    enlarge: "cmd_fullZoomEnlarge",
+    reduce: "cmd_fullZoomReduce",
+    reset: "cmd_fullZoomReset",
+  };
+
+  for (let commandKey in expectedState) {
+    let commandID = COMMAND_MAP[commandKey];
+    let command = document.getElementById(commandID);
+    let expectedEnabled = expectedState[commandKey];
+
+    Assert.equal(
+      command.hasAttribute("disabled"),
+      !expectedEnabled,
+      `${commandID} command should have the expected enabled state.`
+    );
+  }
+}
+
+/**
+ * Tests that the "Zoom Text Only" command is in the right checked
+ * state.
+ *
+ * @param {boolean} isChecked
+ *   True if the command should have its "checked" attribute set to
+ *   "true". Otherwise, ensures that the attribute is set to "false".
+ */
+function assertTextZoomCommandCheckedState(isChecked) {
+  let command = document.getElementById("cmd_fullZoomToggle");
+  Assert.equal(
+    command.getAttribute("checked"),
+    "" + isChecked,
+    "Text zoom command has expected checked attribute"
+  );
+}
+
+/**
+ * Tests that zoom commands are properly updated when changing
+ * zoom levels and/or preferences.
+ */
+add_task(async () => {
+  const TEST_PAGE_URL =
+    "data:text/html;charset=utf-8,<body>test_zoom_levels</body>";
+
+  await BrowserTestUtils.withNewTab(TEST_PAGE_URL, async browser => {
+    let currentZoom = await FullZoomHelper.getGlobalValue();
+    Assert.equal(
+      currentZoom,
+      1,
+      "We expect to start at the default zoom level."
+    );
+
+    assertCommandEnabledState({
+      enlarge: true,
+      reduce: true,
+      reset: false,
+    });
+    assertTextZoomCommandCheckedState(false);
+
+    // We'll run two variations of this test - one with text zoom enabled,
+    // and the other without.
+    for (let textZoom of [true, false]) {
+      info(`Running variation with textZoom set to ${textZoom}`);
+      await SpecialPowers.pushPrefEnv({
+        set: [["browser.zoom.full", !textZoom]],
+      });
+
+      // 120% global zoom
+      info("Changing default zoom by a single level");
+      await FullZoomHelper.changeDefaultZoom(120);
+
+      assertCommandEnabledState({
+        enlarge: true,
+        reduce: true,
+        reset: true,
+      });
+      assertTextZoomCommandCheckedState(textZoom);
+
+      // Now max out the zoom level.
+      await FullZoomHelper.changeDefaultZoom(500);
+
+      assertCommandEnabledState({
+        enlarge: false,
+        reduce: true,
+        reset: true,
+      });
+      assertTextZoomCommandCheckedState(textZoom);
+
+      // Now min out the zoom level.
+      await FullZoomHelper.changeDefaultZoom(30);
+      assertCommandEnabledState({
+        enlarge: true,
+        reduce: false,
+        reset: true,
+      });
+      assertTextZoomCommandCheckedState(textZoom);
+
+      // Now reset back to the default zoom level
+      await FullZoomHelper.changeDefaultZoom(100);
+      assertCommandEnabledState({
+        enlarge: true,
+        reduce: true,
+        reset: false,
+      });
+      assertTextZoomCommandCheckedState(textZoom);
+    }
+  });
+});

browser/base/content/test/zoom/head.js

@@ -33,7 +33,11 @@ var FullZoomHelper = {
 
     let parsedZoomValue = parseFloat((parseInt(newZoom) / 100).toFixed(2));
 
-    await new Promise(resolve => {
+    let commandsUpdated = BrowserTestUtils.waitForEvent(
+      window,
+      "ZoomCommandsUpdated"
+    );
+    let completion = new Promise(resolve => {
       gContentPrefs.setGlobal(
         FullZoom.name,
         parsedZoomValue,
@@ -45,6 +49,7 @@ var FullZoomHelper = {
         }
       );
     });
+    await Promise.all([commandsUpdated, completion]);
   },
 
   async getGlobalValue() {

browser/modules/ZoomUI.jsm

@@ -189,6 +189,8 @@ async function updateZoomUI(aBrowser, aAnimate = false) {
     }
     urlbarZoomButton.setAttribute("label", label);
   }
+
+  win.FullZoom.updateCommands();
 }
 
 const { CustomizableUI } = ChromeUtils.import(

browser/themes/shared/customizableui/panelUI-shared.css

@@ -1071,6 +1071,15 @@ panelview .toolbarbutton-1,
   stroke: var(--panel-item-active-bgcolor);
 }
 
+/**
+ * When the Zoom Reset button is disabled, we don't want the zoom-level
+ * indicator to be so hard to read, so we override the disabled text
+ * style on it.
+ */
+#appMenu-zoomReset-button2[disabled] {
+  opacity: 1;
+}
+
 /* We don't always display: none this item, and if it has forced width (like above)
  * or margin, that impacts the position of the label. Fix:
  */