Skip to content

Commit 002b396

Browse files
author
Niklas Baumgardner
committed
Bug 1957460 - Update themes on about:editprofile. r=profiles-reviewers,fluent-reviewers,bolsson,tbersentes
Differential Revision: https://phabricator.services.mozilla.com/D260751
1 parent 132a05f commit 002b396

File tree

4 files changed

+177
-96
lines changed

4 files changed

+177
-96
lines changed

‎browser/components/profiles/ProfilesParent.sys.mjs‎

Lines changed: 164 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,138 +11,220 @@ const PROFILE_THEMES_MAP = new Map([
1111
[
1212
"firefox-compact-light@mozilla.org",
1313
{
14-
dataL10nId: "profiles-light-theme",
14+
dataL10nId: "profiles-gray-theme",
1515
colors: {
16-
chromeColor: "#F0F0F4",
17-
toolbarColor: "#F9F9FB",
18-
contentColor: "#FFFFFF",
16+
light: {
17+
chromeColor: "rgb(234, 234, 237)", // frame
18+
toolbarColor: "rgb(255, 255, 255)", // sidebar?
19+
contentColor: "#F9F9FB", // ntp_background
20+
},
1921
},
2022
isDark: false,
2123
useInAutomation: true,
2224
},
2325
],
2426
[
25-
"{b90acfd0-f0fc-4add-9195-f6306d25cdfa}",
27+
"firefox-compact-dark@mozilla.org",
28+
{
29+
dataL10nId: "profiles-gray-theme",
30+
colors: {
31+
dark: {
32+
chromeColor: "rgb(28, 27, 34)",
33+
toolbarColor: "rgb(28, 27, 34)",
34+
contentColor: "rgb(43, 42, 51)",
35+
},
36+
},
37+
isDark: true,
38+
useInAutomation: true,
39+
},
40+
],
41+
[
42+
"{cd6791f7-4b6d-47b4-8877-1d4c82c6699d}",
2643
{
27-
dataL10nId: "profiles-marigold-theme-2",
44+
dataL10nId: "profiles-yellow-theme",
2845
downloadURL:
29-
"https://addons.mozilla.org/firefox/downloads/file/4381985/marigold-1.9.xpi",
46+
"https://addons.mozilla.org/firefox/downloads/file/4552782/profiles_yellow-1.0.xpi",
3047
colors: {
31-
chromeColor: "#F1CA52",
32-
toolbarColor: "#FBDF8C",
33-
contentColor: "#FEF7E0",
48+
light: {
49+
chromeColor: "rgb(255, 230, 153)",
50+
toolbarColor: "rgb(255, 255, 255)",
51+
contentColor: "rgb(255, 244, 208)",
52+
},
53+
dark: {
54+
chromeColor: "rgb(39, 16, 0)",
55+
toolbarColor: "rgb(22, 22, 22)",
56+
contentColor: "rgb(66, 27, 0)",
57+
},
3458
},
35-
isDark: false,
3659
},
3760
],
3861
[
39-
"{388d9fae-8a28-4f9f-9aad-fb9e84e4f3c3}",
62+
"{7a301b7b-c3e2-40bf-a06b-6d517bbf138b}",
4063
{
41-
dataL10nId: "profiles-lichen-theme-2",
64+
dataL10nId: "profiles-orange-theme",
4265
downloadURL:
43-
"https://addons.mozilla.org/firefox/downloads/file/4381979/lichen_soft-1.3.xpi",
66+
"https://addons.mozilla.org/firefox/downloads/file/4552788/profiles_orange-1.0.xpi",
4467
colors: {
45-
chromeColor: "#D2E4DA",
46-
toolbarColor: "#E9F2EC",
47-
contentColor: "#F5F9F7",
68+
light: {
69+
chromeColor: "rgb(255, 205, 158)",
70+
toolbarColor: "rgb(255, 255, 255)",
71+
contentColor: "rgb(255, 237, 214)",
72+
},
73+
dark: {
74+
chromeColor: "rgb(39, 15, 0)",
75+
toolbarColor: "rgb(22, 22, 22)",
76+
contentColor: "rgb(72, 18, 0)",
77+
},
4878
},
49-
isDark: false,
5079
},
5180
],
5281
[
53-
"{3ac3b0d7-f017-40e1-b142-a26f794e7015}",
82+
"{8de5f8c3-bfc2-443b-9913-7bbadbd1ba0d}",
5483
{
55-
dataL10nId: "profiles-magnolia-theme-2",
84+
dataL10nId: "profiles-red-theme",
5685
downloadURL:
57-
"https://addons.mozilla.org/firefox/downloads/file/4381978/magnolia-1.1.xpi",
86+
"https://addons.mozilla.org/firefox/downloads/file/4552785/profiles_red-1.0.xpi",
5887
colors: {
59-
chromeColor: "#FB5B9E",
60-
toolbarColor: "#F986B6",
61-
contentColor: "#FBE0ED",
88+
light: {
89+
chromeColor: "rgb(255, 195, 201)",
90+
toolbarColor: "rgb(255, 255, 255)",
91+
contentColor: "rgb(255, 232, 234)",
92+
},
93+
dark: {
94+
chromeColor: "rgb(41, 11, 15)",
95+
toolbarColor: "rgb(22, 22, 22)",
96+
contentColor: "rgb(76, 5, 22)",
97+
},
6298
},
63-
isDark: false,
6499
},
65100
],
66101
[
67-
"{ba48d251-0732-45c2-9f2f-39c68e82d047}",
102+
"{2b0fadbf-238d-43db-aa9d-e06c9a7e000b}",
68103
{
69-
dataL10nId: "profiles-lavender-theme-2",
104+
dataL10nId: "profiles-pink-theme",
70105
downloadURL:
71-
"https://addons.mozilla.org/firefox/downloads/file/4381983/lavender_soft-1.2.xpi",
106+
"https://addons.mozilla.org/firefox/downloads/file/4552787/profiles_pink-1.0.xpi",
72107
colors: {
73-
chromeColor: "#CDC1EA",
74-
toolbarColor: "#EBE4FA",
75-
contentColor: "#F4F0FD",
108+
light: {
109+
chromeColor: "rgb(255, 194, 219)",
110+
toolbarColor: "rgb(255, 255, 255)",
111+
contentColor: "rgb(255, 232, 244)",
112+
},
113+
dark: {
114+
chromeColor: "rgb(39, 11, 21)",
115+
toolbarColor: "rgb(22, 22, 22)",
116+
contentColor: "rgb(73, 6, 36)",
117+
},
76118
},
77-
isDark: false,
78119
},
79120
],
80121
[
81-
"firefox-compact-dark@mozilla.org",
122+
"{1d73a1eb-128d-4e9e-83f8-c0c51f8c5fd3}",
82123
{
83-
dataL10nId: "profiles-dark-theme",
124+
dataL10nId: "profiles-purple-theme",
125+
downloadURL:
126+
"https://addons.mozilla.org/firefox/downloads/file/4552786/profiles_purple-1.0.xpi",
84127
colors: {
85-
chromeColor: "#1C1B22",
86-
toolbarColor: "#2B2A33",
87-
contentColor: "#42414D",
128+
light: {
129+
chromeColor: "rgb(247, 202, 255)",
130+
toolbarColor: "rgb(255, 255, 255)",
131+
contentColor: "rgb(255, 236, 255)",
132+
},
133+
dark: {
134+
chromeColor: "rgb(30, 14, 37)",
135+
toolbarColor: "rgb(22, 22, 22)",
136+
contentColor: "rgb(56, 17, 71)",
137+
},
88138
},
89-
isDark: true,
90-
useInAutomation: true,
91139
},
92140
],
93141
[
94-
"{750fa518-b61f-4068-9974-330dcf45442f}",
142+
"{aab1adac-5449-47fd-b836-c2f43dc28f3f}",
95143
{
96-
dataL10nId: "profiles-ocean-theme-2",
144+
dataL10nId: "profiles-violet-theme",
97145
downloadURL:
98-
"https://addons.mozilla.org/firefox/downloads/file/4381977/ocean_dark-1.1.xpi",
146+
"https://addons.mozilla.org/firefox/downloads/file/4552784/profiles_violet-1.0.xpi",
99147
colors: {
100-
chromeColor: "#080D33",
101-
toolbarColor: "#050D5B",
102-
contentColor: "#000511",
148+
light: {
149+
chromeColor: "rgb(221, 207, 255)",
150+
toolbarColor: "rgb(255, 255, 255)",
151+
contentColor: "rgb(244, 240, 255)",
152+
},
153+
dark: {
154+
chromeColor: "rgb(22, 17, 43)",
155+
toolbarColor: "rgb(22, 22, 22)",
156+
contentColor: "rgb(40, 25, 83)",
157+
},
103158
},
104-
isDark: true,
105159
},
106160
],
107161
[
108-
"{25b5a343-4238-4bae-b1f9-93a33f258167}",
162+
"{4223a94a-d3f9-40e9-95dd-99aca80ea04b}",
109163
{
110-
dataL10nId: "profiles-terracotta-theme-2",
164+
dataL10nId: "profiles-blue-theme",
111165
downloadURL:
112-
"https://addons.mozilla.org/firefox/downloads/file/4381976/terracotta_dark-1.1.xpi",
166+
"https://addons.mozilla.org/firefox/downloads/file/4551961/profiles_blue-1.0.xpi",
113167
colors: {
114-
chromeColor: "#591305",
115-
toolbarColor: "#98240B",
116-
contentColor: "#060100",
168+
light: {
169+
chromeColor: "rgb(171, 223, 255)",
170+
toolbarColor: "rgb(255, 255, 255)",
171+
contentColor: "rgb(226, 247, 255)",
172+
},
173+
dark: {
174+
chromeColor: "rgb(8, 21, 44)",
175+
toolbarColor: "rgb(22, 22, 22)",
176+
contentColor: "rgb(4, 35, 86)",
177+
},
117178
},
118-
isDark: true,
119179
},
120180
],
121181
[
122-
"{f9261f02-c03c-4352-92ee-78dd8b41ca98}",
182+
"{7063abff-a690-4b87-a548-fc32d3ce5708}",
123183
{
124-
dataL10nId: "profiles-moss-theme-2",
184+
dataL10nId: "profiles-green-theme",
125185
downloadURL:
126-
"https://addons.mozilla.org/firefox/downloads/file/4381975/moss_dark-1.1.xpi",
186+
"https://addons.mozilla.org/firefox/downloads/file/4552789/profiles_green-1.0.xpi",
127187
colors: {
128-
chromeColor: "#405948",
129-
toolbarColor: "#5B7B65",
130-
contentColor: "#323433",
188+
light: {
189+
chromeColor: "rgb(181, 240, 181)",
190+
toolbarColor: "rgb(255, 255, 255)",
191+
contentColor: "rgb(225, 255, 225)",
192+
},
193+
dark: {
194+
chromeColor: "rgb(5, 28, 7)",
195+
toolbarColor: "rgb(22, 22, 22)",
196+
contentColor: "rgb(0, 50, 0)",
197+
},
131198
},
132-
isDark: true,
133199
},
134200
],
135201
[
136-
"default-theme@mozilla.org",
202+
"{0683b144-0d4a-4815-963e-55a8ec8d386b}",
137203
{
138-
dataL10nId: "profiles-system-theme",
204+
dataL10nId: "profiles-cyan-theme",
205+
downloadURL:
206+
"https://addons.mozilla.org/firefox/downloads/file/4552790/profiles_cyan-1.0.xpi",
139207
colors: {
140-
chromeColor: "#1C1B22",
141-
toolbarColor: "#2B2A33",
142-
contentColor: "#42414D",
208+
light: {
209+
chromeColor: "rgb(166, 236, 244)",
210+
toolbarColor: "rgb(255, 255, 255)",
211+
contentColor: "rgb(207, 255, 255)",
212+
},
213+
dark: {
214+
chromeColor: "rgb(0, 31, 43)",
215+
toolbarColor: "rgb(22, 22, 22)",
216+
contentColor: "rgb(0, 50, 61)",
217+
},
143218
},
144219
},
145220
],
221+
[
222+
"default-theme@mozilla.org",
223+
{
224+
dataL10nId: "profiles-system-theme",
225+
colors: {},
226+
},
227+
],
146228
]);
147229

148230
ChromeUtils.defineESModuleGetters(lazy, {
@@ -176,12 +258,12 @@ export class ProfilesParent extends JSWindowActorParent {
176258
favicon.classList.remove("profiles-tab");
177259
}
178260

179-
async #getProfileContent() {
261+
async #getProfileContent(isDark) {
180262
// Make sure SelectableProfileService is initialized
181263
await SelectableProfileService.init();
182264
let currentProfile = SelectableProfileService.currentProfile;
183265
let profiles = await SelectableProfileService.getAllProfiles();
184-
let themes = await this.getSafeForContentThemes();
266+
let themes = await this.getSafeForContentThemes(isDark);
185267
return {
186268
currentProfile: await currentProfile.toContentSafeObject(),
187269
profiles: await Promise.all(profiles.map(p => p.toContentSafeObject())),
@@ -236,11 +318,17 @@ export class ProfilesParent extends JSWindowActorParent {
236318
}
237319
case "Profiles:GetNewProfileContent": {
238320
Glean.profilesNew.displayed.record();
239-
return this.#getProfileContent();
321+
let isDark = gBrowser.selectedBrowser.ownerGlobal.matchMedia(
322+
"(-moz-system-dark-theme)"
323+
).matches;
324+
return this.#getProfileContent(isDark);
240325
}
241326
case "Profiles:GetEditProfileContent": {
242327
Glean.profilesExisting.displayed.record();
243-
return this.#getProfileContent();
328+
let isDark = gBrowser.selectedBrowser.ownerGlobal.matchMedia(
329+
"(-moz-system-dark-theme)"
330+
).matches;
331+
return this.#getProfileContent(isDark);
244332
}
245333
case "Profiles:MoreThemes": {
246334
if (message.data.source === "about:editprofile") {
@@ -394,16 +482,20 @@ export class ProfilesParent extends JSWindowActorParent {
394482
await theme.enable();
395483
}
396484

397-
async getSafeForContentThemes() {
485+
async getSafeForContentThemes(isDark) {
486+
let lightDark = isDark ? "dark" : "light";
398487
let themes = [];
399488
for (let [themeId, themeObj] of PROFILE_THEMES_MAP) {
489+
if (Object.hasOwn(themeObj, "isDark") && themeObj.isDark !== isDark) {
490+
continue;
491+
}
492+
400493
let theme = await lazy.AddonManager.getAddonByID(themeId);
401494
themes.push({
402495
id: themeId,
403496
dataL10nId: themeObj.dataL10nId,
404497
isActive: theme?.isActive ?? false,
405-
...themeObj.colors,
406-
isDark: themeObj.isDark,
498+
...themeObj.colors[lightDark],
407499
useInAutomation: themeObj?.useInAutomation,
408500
});
409501
}

‎browser/components/profiles/content/new-profile-card.mjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ export class NewProfileCard extends EditProfileCard {
4848
return;
4949
}
5050

51-
let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
52-
let possibleThemes = this.themes.filter(t => t.isDark === isDark);
51+
let possibleThemes = this.themes;
5352
if (isInAutomation) {
5453
possibleThemes = possibleThemes.filter(t => t.useInAutomation);
5554
}

‎browser/components/profiles/tests/browser/browser_test_current_theme_from_amo.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ add_task(async function test_currentThemeFromAMOExistsOnEditPage() {
6363

6464
Assert.equal(
6565
editProfileCard.themes.length,
66-
11,
67-
"Should have 11 themes with the currennt theme from AMO"
66+
12,
67+
"Should have 12 themes with the current theme from AMO"
6868
);
6969

7070
Assert.equal(

0 commit comments

Comments
 (0)