Source code
Revision control
Copy as Markdown
Other Tools
/* 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
import { html, nothing } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
import { isBrowserNovaEnabled } from "../aboutaddons-utils.mjs";
const { AppConstants } = ChromeUtils.importESModule(
"resource://gre/modules/AppConstants.sys.mjs"
);
const PREF_NATIVE_THEME = "browser.theme.native-theme";
const DEFAULT_THEME_ID = "default-theme@mozilla.org";
/**
* Whether the native theme colors checkbox should be shown in the addon-card
* related to the given add-on.
*/
export function shouldShowNativeThemeCheckbox(addon) {
return (
isBrowserNovaEnabled() &&
AppConstants.platform === "linux" &&
addon?.id === DEFAULT_THEME_ID
);
}
/**
* Checkbox shown below the enabled default theme's addon-card on Linux, to
* opt into matching the GTK/system theme colors instead of the built-in
* default theme colors. Ancestor components (addon-card and addon-details)
* are responsible for showing this element (based on the result got from
* shouldShowNativeThemeCheckbox).
*/
export class NativeThemeColorsCheckbox extends MozLitElement {
static properties = {
checked: { state: true },
hidden: { type: Boolean, reflect: true },
};
#prefObserver = {
observe: () => this.#updateFromPref(),
QueryInterface: ChromeUtils.generateQI(["nsIObserver"]),
};
#observing = false;
constructor() {
super();
this.checked = false;
}
connectedCallback() {
super.connectedCallback();
if (!this.hidden) {
this.#startObserving();
}
}
disconnectedCallback() {
super.disconnectedCallback();
this.#stopObserving();
}
willUpdate(changedProperties) {
if (changedProperties.has("hidden")) {
if (this.hidden) {
this.#stopObserving();
} else {
this.#startObserving();
}
}
}
#startObserving() {
if (this.#observing || !this.isConnected) {
return;
}
this.#observing = true;
this.#updateFromPref();
Services.prefs.addObserver(PREF_NATIVE_THEME, this.#prefObserver);
}
#stopObserving() {
if (!this.#observing) {
return;
}
this.#observing = false;
Services.prefs.removeObserver(PREF_NATIVE_THEME, this.#prefObserver);
}
#updateFromPref() {
this.checked = Services.prefs.getBoolPref(PREF_NATIVE_THEME, false);
}
#onChange(e) {
Services.prefs.setBoolPref(PREF_NATIVE_THEME, e.target.checked);
}
render() {
if (this.hidden) {
return nothing;
}
return html`
<link
rel="stylesheet"
/>
<moz-checkbox
data-l10n-id="aboutaddons-linux-theme-colors-checkbox-label"
?checked=${this.checked}
@change=${this.#onChange}
></moz-checkbox>
`;
}
}
customElements.define(
"native-theme-colors-checkbox",
NativeThemeColorsCheckbox
);