Bug 1383031 - Rename customization-uidensity-menu-button* classes and ids since these are menuitems. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Fri, 21 Jul 2017 14:11:15 +0200
changeset 613021 29afcb48620cfda3d6e62f4cedff647617d954d5
parent 612110 0985725c848ec0cfc6f2f3c3a5aa3d71321e7620
child 638583 9c235e6adda58bea5434ede77bd3fd69c71b87b9
push id69694
push userdgottwald@mozilla.com
push dateFri, 21 Jul 2017 12:11:35 +0000
reviewersjohannh
bugs1383031
milestone56.0a1
Bug 1383031 - Rename customization-uidensity-menu-button* classes and ids since these are menuitems. r?johannh MozReview-Commit-ID: 72S5zENy1gX
browser/components/customizableui/CustomizeMode.jsm
browser/components/customizableui/content/customizeMode.inc.xul
browser/components/customizableui/test/browser_customizemode_uidensity.js
browser/locales/en-US/chrome/browser/uiDensity.properties
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -1435,57 +1435,57 @@ CustomizeMode.prototype = {
   },
 
   onUIDensityMenuShowing() {
     let win = this.window;
     let doc = win.document;
     let gUIDensity = win.gUIDensity;
     let currentDensity = gUIDensity.getCurrentDensity();
 
-    let normalButton = doc.getElementById("customization-uidensity-menu-button-normal");
-    normalButton.mode = gUIDensity.MODE_NORMAL;
+    let normalItem = doc.getElementById("customization-uidensity-menuitem-normal");
+    normalItem.mode = gUIDensity.MODE_NORMAL;
 
-    let compactButton = doc.getElementById("customization-uidensity-menu-button-compact");
-    compactButton.mode = gUIDensity.MODE_COMPACT;
+    let compactItem = doc.getElementById("customization-uidensity-menuitem-compact");
+    compactItem.mode = gUIDensity.MODE_COMPACT;
 
-    let buttons = [normalButton, compactButton];
+    let items = [normalItem, compactItem];
 
-    let touchButton = doc.getElementById("customization-uidensity-menu-button-touch");
+    let touchItem = doc.getElementById("customization-uidensity-menuitem-touch");
     // Touch mode can not be enabled in OSX right now.
-    if (touchButton) {
-      touchButton.mode = gUIDensity.MODE_TOUCH;
-      buttons.push(touchButton);
+    if (touchItem) {
+      touchItem.mode = gUIDensity.MODE_TOUCH;
+      items.push(touchItem);
     }
 
-    // Mark the active mode button.
-    for (let button of buttons) {
-      if (button.mode == currentDensity.mode) {
-        button.setAttribute("aria-checked", "true");
-        button.setAttribute("active", "true");
+    // Mark the active mode menuitem.
+    for (let item of items) {
+      if (item.mode == currentDensity.mode) {
+        item.setAttribute("aria-checked", "true");
+        item.setAttribute("active", "true");
       } else {
-        button.removeAttribute("aria-checked");
-        button.removeAttribute("active");
+        item.removeAttribute("aria-checked");
+        item.removeAttribute("active");
       }
     }
 
     // Add menu items for automatically switching to Touch mode in Windows Tablet Mode,
     // which is only available in Windows 10.
     if (AppConstants.isPlatformAndVersionAtLeast("win", "10")) {
       let spacer = doc.getElementById("customization-uidensity-touch-spacer");
       let checkbox = doc.getElementById("customization-uidensity-autotouchmode-checkbox");
       spacer.removeAttribute("hidden");
       checkbox.removeAttribute("hidden");
 
       // Show a hint that the UI density was overridden automatically.
       if (currentDensity.overridden) {
         let sb = Services.strings.createBundle("chrome://browser/locale/uiDensity.properties");
-        touchButton.setAttribute("acceltext",
-                                 sb.GetStringFromName("uiDensity.menu-button-touch.acceltext"));
+        touchItem.setAttribute("acceltext",
+                                 sb.GetStringFromName("uiDensity.menuitem-touch.acceltext"));
       } else {
-        touchButton.removeAttribute("acceltext");
+        touchItem.removeAttribute("acceltext");
       }
 
       let autoTouchMode = Services.prefs.getBoolPref(win.gUIDensity.autoTouchModePref);
       if (autoTouchMode) {
         checkbox.setAttribute("checked", "true");
       } else {
         checkbox.removeAttribute("checked");
       }
--- a/browser/components/customizableui/content/customizeMode.inc.xul
+++ b/browser/components/customizableui/content/customizeMode.inc.xul
@@ -56,43 +56,43 @@
               label="&customizeMode.uidensity;"
               class="customizationmode-button"
               type="menu">
         <panel type="arrow" id="customization-uidensity-menu"
                onpopupshowing="gCustomizeMode.onUIDensityMenuShowing();"
                position="topcenter bottomleft"
                flip="none"
                role="menu">
-          <menuitem id="customization-uidensity-menu-button-compact"
-                    class="menuitem-iconic customization-uidensity-menu-button"
+          <menuitem id="customization-uidensity-menuitem-compact"
+                    class="menuitem-iconic customization-uidensity-menuitem"
                     role="menuitemradio"
                     label="&customizeMode.uidensity.menuCompact.label;"
                     accesskey="&customizeMode.uidensity.menuCompact.accessKey;"
                     tooltiptext="&customizeMode.uidensity.menuCompact.tooltip;"
                     tabindex="0"
                     onfocus="gCustomizeMode.updateUIDensity(this.mode);"
                     onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
                     onblur="gCustomizeMode.resetUIDensity();"
                     onmouseout="gCustomizeMode.resetUIDensity();"
                     oncommand="gCustomizeMode.setUIDensity(this.mode);" />
-          <menuitem id="customization-uidensity-menu-button-normal"
-                    class="menuitem-iconic customization-uidensity-menu-button"
+          <menuitem id="customization-uidensity-menuitem-normal"
+                    class="menuitem-iconic customization-uidensity-menuitem"
                     role="menuitemradio"
                     label="&customizeMode.uidensity.menuNormal.label;"
                     accesskey="&customizeMode.uidensity.menuNormal.accessKey;"
                     tooltiptext="&customizeMode.uidensity.menuNormal.tooltip;"
                     tabindex="0"
                     onfocus="gCustomizeMode.updateUIDensity(this.mode);"
                     onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
                     onblur="gCustomizeMode.resetUIDensity();"
                     onmouseout="gCustomizeMode.resetUIDensity();"
                     oncommand="gCustomizeMode.setUIDensity(this.mode);" />
 #ifndef XP_MACOSX
-          <menuitem id="customization-uidensity-menu-button-touch"
-                    class="menuitem-iconic customization-uidensity-menu-button"
+          <menuitem id="customization-uidensity-menuitem-touch"
+                    class="menuitem-iconic customization-uidensity-menuitem"
                     role="menuitemradio"
                     label="&customizeMode.uidensity.menuTouch.label;"
                     accesskey="&customizeMode.uidensity.menuTouch.accessKey;"
                     tooltiptext="&customizeMode.uidensity.menuTouch.tooltip;"
                     tabindex="0"
                     onfocus="gCustomizeMode.updateUIDensity(this.mode);"
                     onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
                     onblur="gCustomizeMode.resetUIDensity();"
--- a/browser/components/customizableui/test/browser_customizemode_uidensity.js
+++ b/browser/components/customizableui/test/browser_customizemode_uidensity.js
@@ -2,147 +2,147 @@
   * 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 PREF_UI_DENSITY = "browser.uidensity";
 const PREF_AUTO_TOUCH_MODE = "browser.touchmode.auto";
 
-async function testModeButton(mode, modePref) {
+async function testModeMenuitem(mode, modePref) {
   await startCustomizing();
 
   let win = document.getElementById("main-window");
   let popupButton = document.getElementById("customization-uidensity-button");
   let popup = document.getElementById("customization-uidensity-menu");
 
   // Show the popup.
   let popupShownPromise = popupShown(popup);
   EventUtils.synthesizeMouseAtCenter(popupButton, {});
   await popupShownPromise;
 
-  let button = document.getElementById("customization-uidensity-menu-button-" + mode);
-  let normalButton = document.getElementById("customization-uidensity-menu-button-normal");
+  let item = document.getElementById("customization-uidensity-menuitem-" + mode);
+  let normalItem = document.getElementById("customization-uidensity-menuitem-normal");
 
-  is(normalButton.getAttribute("active"), "true",
-     "Normal mode button should be active by default.");
+  is(normalItem.getAttribute("active"), "true",
+     "Normal mode menuitem should be active by default");
 
-  // Hover over the mode button and wait until the UI density is updated.
-  EventUtils.synthesizeMouseAtCenter(button, { type: "mouseover" });
+  // Hover over the mode menuitem and wait until the UI density is updated.
+  EventUtils.synthesizeMouseAtCenter(item, { type: "mouseover" });
   await BrowserTestUtils.waitForAttribute("uidensity", win, mode);
 
   is(win.getAttribute("uidensity"), mode,
-     `UI Density should be set to ${mode} on ${mode} button hover.`);
+     `UI Density should be set to ${mode} on ${mode} menuitem hover`);
 
   is(Services.prefs.getIntPref(PREF_UI_DENSITY), window.gUIDensity.MODE_NORMAL,
-     `UI Density pref should still be set to normal on ${mode} button hover.`);
+     `UI Density pref should still be set to normal on ${mode} menuitem hover`);
 
-  // Hover the normal button again and check that the UI density reset to normal.
-  EventUtils.synthesizeMouseAtCenter(normalButton, { type: "mouseover" });
+  // Hover the normal menuitem again and check that the UI density reset to normal.
+  EventUtils.synthesizeMouseAtCenter(normalItem, { type: "mouseover" });
   await BrowserTestUtils.waitForCondition(() => !win.hasAttribute("uidensity"));
 
   ok(!win.hasAttribute("uidensity"),
-     `UI Density should be reset when no longer hovering the ${mode} button.`);
+     `UI Density should be reset when no longer hovering the ${mode} menuitem`);
 
   // Select the custom UI density and wait for the popup to be hidden.
   let popupHiddenPromise = popupHidden(popup);
-  EventUtils.synthesizeMouseAtCenter(button, {});
+  EventUtils.synthesizeMouseAtCenter(item, {});
   await popupHiddenPromise;
 
   // Check that the click permanently changed the UI density.
   is(win.getAttribute("uidensity"), mode,
-     `UI Density should be set to ${mode} on ${mode} button click.`);
+     `UI Density should be set to ${mode} on ${mode} menuitem click`);
   is(Services.prefs.getIntPref(PREF_UI_DENSITY), modePref,
-     `UI Density pref should be set to ${mode} when clicking the ${mode} button.`);
+     `UI Density pref should be set to ${mode} when clicking the ${mode} menuitem`);
 
   // Open the popup again.
   popupShownPromise = popupShown(popup);
   EventUtils.synthesizeMouseAtCenter(popupButton, {});
   await popupShownPromise;
 
-  // Check that the button is still active after opening and closing the popup.
-  is(button.getAttribute("active"), "true", `${mode} mode button should be active.`);
+  // Check that the menuitem is still active after opening and closing the popup.
+  is(item.getAttribute("active"), "true", `${mode} mode menuitem should be active`);
 
   // Hide the popup again.
   popupHiddenPromise = popupHidden(popup);
   EventUtils.synthesizeMouseAtCenter(popupButton, {});
   await popupHiddenPromise;
 
-  // Check that the button is still active after re-opening customize mode.
+  // Check that the menuitem is still active after re-opening customize mode.
   await endCustomizing();
   await startCustomizing();
 
   popupShownPromise = popupShown(popup);
   EventUtils.synthesizeMouseAtCenter(popupButton, {});
   await popupShownPromise;
 
-  is(button.getAttribute("active"), "true",
-     `${mode} mode button should be active after entering and exiting customize mode.`);
+  is(item.getAttribute("active"), "true",
+     `${mode} mode menuitem should be active after entering and exiting customize mode`);
 
-  // Click the normal button and check that the density is reset.
+  // Click the normal menuitem and check that the density is reset.
   popupHiddenPromise = popupHidden(popup);
-  EventUtils.synthesizeMouseAtCenter(normalButton, {});
+  EventUtils.synthesizeMouseAtCenter(normalItem, {});
   await popupHiddenPromise;
 
   ok(!win.hasAttribute("uidensity"),
-     "UI Density should be reset when clicking the normal button.");
+     "UI Density should be reset when clicking the normal menuitem");
 
   is(Services.prefs.getIntPref(PREF_UI_DENSITY), window.gUIDensity.MODE_NORMAL,
      "UI Density pref should be set to normal.");
 
-  // Show the popup and click on the mode button again to test the
+  // Show the popup and click on the mode menuitem again to test the
   // reset default feature.
   popupShownPromise = popupShown(popup);
   EventUtils.synthesizeMouseAtCenter(popupButton, {});
   await popupShownPromise;
 
   popupHiddenPromise = popupHidden(popup);
-  EventUtils.synthesizeMouseAtCenter(button, {});
+  EventUtils.synthesizeMouseAtCenter(item, {});
   await popupHiddenPromise;
 
   is(win.getAttribute("uidensity"), mode,
-     `UI Density should be set to ${mode} on ${mode} button click.`);
+     `UI Density should be set to ${mode} on ${mode} menuitem click`);
 
   is(Services.prefs.getIntPref(PREF_UI_DENSITY), modePref,
-     `UI Density pref should be set to ${mode} when clicking the ${mode} button.`);
+     `UI Density pref should be set to ${mode} when clicking the ${mode} menuitem`);
 
   await gCustomizeMode.reset();
 
   ok(!win.hasAttribute("uidensity"),
-     "UI Density should be reset when clicking the normal button.");
+     "UI Density should be reset when clicking the normal menuitem");
 
   is(Services.prefs.getIntPref(PREF_UI_DENSITY), window.gUIDensity.MODE_NORMAL,
      "UI Density pref should be set to normal.");
 
   await endCustomizing();
 }
 
-add_task(async function test_compact_mode_button() {
+add_task(async function test_compact_mode_menuitem() {
   if (!AppConstants.MOZ_PHOTON_THEME) {
     ok(true, "Skipping test because Photon is not enabled.");
     return;
   }
 
-  await testModeButton("compact", window.gUIDensity.MODE_COMPACT);
+  await testModeMenuitem("compact", window.gUIDensity.MODE_COMPACT);
 });
 
-add_task(async function test_touch_mode_button() {
+add_task(async function test_touch_mode_menuitem() {
   if (!AppConstants.MOZ_PHOTON_THEME) {
     ok(true, "Skipping test because Photon is not enabled.");
     return;
   }
 
   // OSX doesn't get touch mode for now.
   if (AppConstants.platform == "macosx") {
-    is(document.getElementById("customization-uidensity-menu-button-touch"), null,
+    is(document.getElementById("customization-uidensity-menuitem-touch"), null,
        "There's no touch option on Mac OSX");
     return;
   }
 
-  await testModeButton("touch", window.gUIDensity.MODE_TOUCH);
+  await testModeMenuitem("touch", window.gUIDensity.MODE_TOUCH);
 
   // Test the checkbox for automatic Touch Mode transition
   // in Windows 10 Tablet Mode.
   if (AppConstants.isPlatformAndVersionAtLeast("win", "10")) {
     await startCustomizing();
 
     let popupButton = document.getElementById("customization-uidensity-button");
     let popup = document.getElementById("customization-uidensity-menu");
--- a/browser/locales/en-US/chrome/browser/uiDensity.properties
+++ b/browser/locales/en-US/chrome/browser/uiDensity.properties
@@ -1,5 +1,5 @@
 # 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/.
 
-uiDensity.menu-button-touch.acceltext=Tablet Mode Enabled
+uiDensity.menuitem-touch.acceltext=Tablet Mode Enabled
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -452,72 +452,72 @@ toolbarpaletteitem[place=toolbar] > tool
      styling of the section headers and footer. */
   padding: 10px;
 }
 
 #customization-uidensity-menu > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 5px 10px;
 }
 
-.customization-uidensity-menu-button > .menu-iconic-left > .menu-iconic-icon,
+.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon,
 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
   width: 32px;
   height: 32px;
   margin: 5px;
 }
 
-.customization-uidensity-menu-button,
+.customization-uidensity-menuitem,
 .customization-lwtheme-menu-theme {
   -moz-appearance: none;
   border: 1px solid transparent;
   margin: 0 -5px 5px;
   padding-top: 0;
   padding-inline-end: 5px;
   padding-bottom: 0;
   padding-inline-start: 0;
 }
 
-.customization-uidensity-menu-button {
+.customization-uidensity-menuitem {
   color: inherit;
 }
 
 .customization-lwtheme-menu-theme[defaulttheme] {
   list-style-image: url(chrome://browser/content/default-theme-icon.svg);
 }
 
 %ifdef MOZ_PHOTON_THEME
-#customization-uidensity-menu-button-normal {
+#customization-uidensity-menuitem-normal {
   list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg");
 }
 
-#customization-uidensity-menu-button-compact {
+#customization-uidensity-menuitem-compact {
   list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg");
 }
 
-#customization-uidensity-menu-button-touch {
+#customization-uidensity-menuitem-touch {
   list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg");
 }
 %endif
 
-.customization-uidensity-menu-button[active="true"],
-.customization-uidensity-menu-button:hover,
+.customization-uidensity-menuitem[active="true"],
+.customization-uidensity-menuitem:hover,
 .customization-lwtheme-menu-theme[active="true"],
 .customization-lwtheme-menu-theme:hover {
   background-color: var(--arrowpanel-dimmed);
   border-color: var(--panel-separator-color);
 }
 
-.customization-uidensity-menu-button[active="true"],
-.customization-uidensity-menu-button:hover:active,
+.customization-uidensity-menuitem[active="true"],
+.customization-uidensity-menuitem:hover:active,
 .customization-lwtheme-menu-theme[active="true"],
 .customization-lwtheme-menu-theme:hover:active {
   background-color: var(--arrowpanel-dimmed-further);
 }
 
-.customization-uidensity-menu-button > .menu-iconic-text,
+.customization-uidensity-menuitem > .menu-iconic-text,
 .customization-lwtheme-menu-theme > .toolbarbutton-text {
   text-align: start;
 }
 
 #customization-lwtheme-menu-header,
 #customization-lwtheme-menu-recommended {
   padding: 10px;
   margin-bottom: 5px;