Bug 1402981 - add light and dark themes to the list of themes in customize mode by default, r?jaws
MozReview-Commit-ID: 4GxPEm119Yc
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -1306,17 +1306,19 @@ CustomizeMode.prototype = {
// Re-render the menu items since the active mode might have
// change because of this.
this.onUIDensityMenuShowing();
this._onUIChange();
},
onLWThemesMenuShowing(aEvent) {
const DEFAULT_THEME_ID = "{972ce4c6-7e08-4474-a285-3208198ce6fd}";
- const RECENT_LWT_COUNT = 5;
+ const LIGHT_THEME_ID = "firefox-compact-light@mozilla.org";
+ const DARK_THEME_ID = "firefox-compact-dark@mozilla.org";
+ const MAX_THEME_COUNT = 6;
this._clearLWThemesMenu(aEvent.target);
function previewTheme(aPreviewThemeEvent) {
LightweightThemeManager.previewTheme(
aPreviewThemeEvent.target.theme.id != DEFAULT_THEME_ID ?
aPreviewThemeEvent.target.theme : null);
}
@@ -1361,29 +1363,37 @@ CustomizeMode.prototype = {
tbb.addEventListener("mouseout", resetPreview);
return tbb;
}
let themes = [aDefaultTheme];
let lwts = LightweightThemeManager.usedThemes;
let currentLwt = LightweightThemeManager.currentTheme;
- let currentLwtIndex = lwts.indexOf(currentLwt);
- if (currentLwtIndex > -1) {
- // Make sure that the current lightweight theme
- // is at the beginning of the array to avoid truncation
- // in the next step.
- lwts = lwts.splice(currentLwtIndex, 1).concat(lwts);
+ // The lwts besides the builtin themes don't have an isActive property:
+ for (let lwt of lwts) {
+ if (!lwt.hasOwnProperty("isActive")) {
+ lwt.isActive = !!currentLwt && (lwt.id == currentLwt.id);
+ }
}
- if (lwts.length > RECENT_LWT_COUNT)
- lwts.length = RECENT_LWT_COUNT;
- for (let lwt of lwts) {
- lwt.isActive = !!currentLwt && (lwt.id == currentLwt.id);
- themes.push(lwt);
+
+ // Move the current theme (if any) and the light/dark themes to the start:
+ let importantThemes = [LIGHT_THEME_ID, DARK_THEME_ID];
+ if (currentLwt && !importantThemes.includes(currentLwt.id)) {
+ importantThemes.push(currentLwt.id);
}
+ for (let importantTheme of importantThemes) {
+ let themeIndex = lwts.findIndex(theme => theme.id == importantTheme);
+ if (themeIndex > -1) {
+ themes.push(...lwts.splice(themeIndex, 1));
+ }
+ }
+ themes = themes.concat(lwts);
+ if (themes.length > MAX_THEME_COUNT)
+ themes.length = MAX_THEME_COUNT;
let footer = doc.getElementById("customization-lwtheme-menu-footer");
let panel = footer.parentNode;
let recommendedLabel = doc.getElementById("customization-lwtheme-menu-recommended");
for (let theme of themes) {
let button = buildToolbarButton(theme);
button.addEventListener("command", () => {
if ("userDisabled" in button.theme)
@@ -1395,18 +1405,25 @@ CustomizeMode.prototype = {
panel.insertBefore(button, recommendedLabel);
}
let lwthemePrefs = Services.prefs.getBranch("lightweightThemes.");
let recommendedThemes = lwthemePrefs.getStringPref("recommendedThemes");
recommendedThemes = JSON.parse(recommendedThemes);
let sb = Services.strings.createBundle("chrome://browser/locale/lightweightThemes.properties");
for (let theme of recommendedThemes) {
- theme.name = sb.GetStringFromName("lightweightThemes." + theme.id + ".name");
- theme.description = sb.GetStringFromName("lightweightThemes." + theme.id + ".description");
+ try {
+ theme.name = sb.GetStringFromName("lightweightThemes." + theme.id + ".name");
+ theme.description = sb.GetStringFromName("lightweightThemes." + theme.id + ".description");
+ } catch (ex) {
+ // If finding strings for this failed, just don't build it. This can
+ // happen for users with 'older' recommended themes lists, some of which
+ // have since been removed from Firefox.
+ continue;
+ }
let button = buildToolbarButton(theme);
button.addEventListener("command", () => {
LightweightThemeManager.setLocalTheme(button.theme);
recommendedThemes = recommendedThemes.filter((aTheme) => { return aTheme.id != button.theme.id; });
lwthemePrefs.setStringPref("recommendedThemes",
JSON.stringify(recommendedThemes));
onThemeSelected(panel);
});
--- a/browser/components/customizableui/test/browser_1007336_lwthemes_in_customize_mode.js
+++ b/browser/components/customizableui/test/browser_1007336_lwthemes_in_customize_mode.js
@@ -1,21 +1,22 @@
/* 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 DEFAULT_THEME_ID = "{972ce4c6-7e08-4474-a285-3208198ce6fd}";
+const LIGHT_THEME_ID = "firefox-compact-light@mozilla.org";
+const DARK_THEME_ID = "firefox-compact-dark@mozilla.org";
const {LightweightThemeManager} = Components.utils.import("resource://gre/modules/LightweightThemeManager.jsm", {});
add_task(async function() {
Services.prefs.clearUserPref("lightweightThemes.usedThemes");
Services.prefs.clearUserPref("lightweightThemes.recommendedThemes");
- LightweightThemeManager.clearBuiltInThemes();
await startCustomizing();
let themesButton = document.getElementById("customization-lwtheme-button");
let popup = document.getElementById("customization-lwtheme-menu");
let popupShownPromise = popupShown(popup);
EventUtils.synthesizeMouseAtCenter(themesButton, {});
@@ -30,39 +31,50 @@ add_task(async function() {
popupShownPromise = popupShown(popup);
EventUtils.synthesizeMouseAtCenter(themesButton, {});
info("Clicked on themes button a second time");
await popupShownPromise;
let header = document.getElementById("customization-lwtheme-menu-header");
let recommendedHeader = document.getElementById("customization-lwtheme-menu-recommended");
- is(header.nextSibling.nextSibling, recommendedHeader,
- "There should only be one theme (default) in the 'My Themes' section by default");
- is(header.nextSibling.theme.id, DEFAULT_THEME_ID, "That theme should be the default theme");
+ is(header.nextSibling.nextSibling.nextSibling.nextSibling, recommendedHeader,
+ "There should only be three themes (default, light, dark) in the 'My Themes' section by default");
+ is(header.nextSibling.theme.id, DEFAULT_THEME_ID,
+ "The first theme should be the default theme");
+ is(header.nextSibling.nextSibling.theme.id, LIGHT_THEME_ID,
+ "The second theme should be the light theme");
+ is(header.nextSibling.nextSibling.nextSibling.theme.id, DARK_THEME_ID,
+ "The third theme should be the dark theme");
let firstLWTheme = recommendedHeader.nextSibling;
let firstLWThemeId = firstLWTheme.theme.id;
let themeChangedPromise = promiseObserverNotified("lightweight-theme-changed");
firstLWTheme.doCommand();
info("Clicked on first theme");
await themeChangedPromise;
popupShownPromise = popupShown(popup);
EventUtils.synthesizeMouseAtCenter(themesButton, {});
info("Clicked on themes button");
await popupShownPromise;
is(header.nextSibling.theme.id, DEFAULT_THEME_ID, "The first theme should be the Default theme");
- let installedThemeId = header.nextSibling.nextSibling.theme.id;
+ let installedThemeId = header.nextSibling.nextSibling.nextSibling.nextSibling.theme.id;
ok(installedThemeId.startsWith(firstLWThemeId),
"The second theme in the 'My Themes' section should be the newly installed theme: " +
"Installed theme id: " + installedThemeId + "; First theme ID: " + firstLWThemeId);
- is(header.nextSibling.nextSibling.nextSibling, recommendedHeader,
- "There should be two themes in the 'My Themes' section");
+ let themeCount = 0;
+ let iterNode = header;
+ while (iterNode.nextSibling && iterNode.nextSibling.theme) {
+ themeCount++;
+ iterNode = iterNode.nextSibling;
+ }
+ is(themeCount, 4,
+ "There should be four themes in the 'My Themes' section");
let defaultTheme = header.nextSibling;
defaultTheme.doCommand();
is(Services.prefs.getCharPref("lightweightThemes.selectedThemeID"), "", "No lwtheme should be selected");
// ensure current theme isn't set to "Default"
popupShownPromise = popupShown(popup);
EventUtils.synthesizeMouseAtCenter(themesButton, {});
@@ -85,21 +97,31 @@ add_task(async function() {
info("Removed all recommended themes");
await startCustomizing();
popupShownPromise = popupShown(popup);
EventUtils.synthesizeMouseAtCenter(themesButton, {});
info("Clicked on themes button a second time");
await popupShownPromise;
header = document.getElementById("customization-lwtheme-menu-header");
is(header.hidden, false, "Header should never be hidden");
- is(header.nextSibling.theme.id, DEFAULT_THEME_ID, "The first theme should be the Default theme");
- is(header.nextSibling.hidden, false, "The default theme should never be hidden");
+ let themeNode = header.nextSibling;
+ is(themeNode.theme.id, DEFAULT_THEME_ID, "The first theme should be the Default theme");
+ is(themeNode.hidden, false, "The default theme should never be hidden");
+
+ themeNode = themeNode.nextSibling;
+ is(themeNode.theme.id, LIGHT_THEME_ID, "The second theme should be the Light theme");
+ is(themeNode.hidden, false, "The light theme should never be hidden");
+
+ themeNode = themeNode.nextSibling;
+ is(themeNode.theme.id, DARK_THEME_ID, "The third theme should be the Dark theme");
+ is(themeNode.hidden, false, "The dark theme should never be hidden");
+
recommendedHeader = document.getElementById("customization-lwtheme-menu-recommended");
- is(header.nextSibling.nextSibling, recommendedHeader,
- "There should only be one theme (default) in the 'My Themes' section by default");
+ is(themeNode.nextSibling, recommendedHeader,
+ "There should only be three themes (default, light, dark) in the 'My Themes' section now");
let footer = document.getElementById("customization-lwtheme-menu-footer");
is(recommendedHeader.nextSibling.id, footer.id, "There should be no recommended themes in the menu");
is(recommendedHeader.hidden, true, "The recommendedHeader should be hidden since there are no recommended themes");
});
add_task(async function asyncCleanup() {
await endCustomizing();