Bug 1383031 - Rename customization-uidensity-menu-button* classes and ids since these are menuitems. r?johannh
MozReview-Commit-ID: 72S5zENy1gX
--- 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;