corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1950167, 1953316 - Use InspectorUtils.colorToRGBA to get correct color values for profiles themeObserver. r=profiles-reviewers,mossop

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D241229
This commit is contained in:
Niklas Baumgardner
2025-03-17 16:42:09 +00:00
parent 41fe5d5ad8
commit 3adef40ecc
2 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
browser/components/profiles/SelectableProfileService.sys.mjs
View File

@@ -119,6 +119,7 @@ class SelectableProfileServiceClass extends EventEmitter {
this.onNimbusUpdate = this.onNimbusUpdate.bind(this);
this.themeObserver = this.themeObserver.bind(this);
this.matchMediaObserver = this.matchMediaObserver.bind(this);
this.prefObserver = (subject, topic, prefName) =>
this.flushSharedPrefToDatabase(prefName);
this.#profileService = Cc[
@@ -405,6 +406,10 @@ class SelectableProfileServiceClass extends EventEmitter {
"lightweight-theme-styling-update"
);
let window = Services.wm.getMostRecentBrowserWindow();
let prefersDarkQuery = window.matchMedia("(prefers-color-scheme: dark)");
prefersDarkQuery.addEventListener("change", this.matchMediaObserver);
this.#initialized = true;
// this.#currentProfile is unset in the case that the database has only just been created. We
@@ -821,6 +826,35 @@ class SelectableProfileServiceClass extends EventEmitter {
}
}
/**
* The default theme uses `light-dark` color function which doesn't apply
* correctly to the taskbar avatar icon. We use `InspectorUtils.colorToRGBA`
* to get the current rgba values for a theme. This way the color values can
* be correctly applied to the taskbar avatar icon.
*
* @returns {object}
* themeBg {string}: the background color in rgba(r, g, b, a) format
* themeFg {string}: the foreground color in rgba(r, g, b, a) format
*/
getColorsForDefaultTheme() {
let window = Services.wm.getMostRecentBrowserWindow();
// The computedStyles object is a live CSSStyleDeclaration.
let computedStyles = window.getComputedStyle(
window.document.documentElement
);
let themeFgColor = computedStyles.getPropertyValue("--toolbar-color");
let themeBgColor = computedStyles.getPropertyValue("--toolbar-bgcolor");
let bg = InspectorUtils.colorToRGBA(themeBgColor, window.document);
let themeBg = `rgba(${bg.r}, ${bg.r}, ${bg.b}, ${bg.a})`;
let fg = InspectorUtils.colorToRGBA(themeFgColor, window.document);
let themeFg = `rgba(${fg.r}, ${fg.g}, ${fg.b}, ${fg.a})`;
return { themeBg, themeFg };
}
/**
* The observer function that watches for theme changes and updates the
* current profile of a theme change.
@@ -849,16 +883,10 @@ class SelectableProfileServiceClass extends EventEmitter {
let themeBg = theme.toolbarColor;
if (theme.id === "default-theme@mozilla.org" || !themeFg || !themeBg) {
// The computedStyles object is a live CSSStyleDeclaration.
let computedStyles = window.getComputedStyle(
window.document.documentElement
);
window.addEventListener(
"windowlwthemeupdate",
() => {
themeFg = computedStyles.getPropertyValue("--toolbar-color");
themeBg = computedStyles.getPropertyValue("--toolbar-bgcolor");
({ themeBg, themeFg } = this.getColorsForDefaultTheme());
this.currentProfile.theme = {
themeId: theme.id,
@@ -879,6 +907,20 @@ class SelectableProfileServiceClass extends EventEmitter {
}
}
/**
* The observer function that watches for OS theme changes and updates the
* current profile of a theme change.
*/
matchMediaObserver() {
let { themeBg, themeFg } = this.getColorsForDefaultTheme();
this.currentProfile.theme = {
themeId: this.currentProfile.theme.themeId,
themeFg,
themeBg,
};
}
/**
* Fetch all prefs from the DB and write to the current instance.
*/