Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Verifies the aboutaddons-themes-mode component behaviour in about:addons.
const PREF_NOVA_ENABLED = "browser.nova.enabled";
const PREF_SYSTEM_USES_DARK = "ui.systemUsesDarkTheme";
const getThemesMode = doc => doc.querySelector("aboutaddons-themes-mode");
registerCleanupFunction(() => {
Services.prefs.clearUserPref(PREF_SYSTEM_USES_DARK);
});
add_task(async function test_themes_mode_hidden_when_nova_disabled() {
await SpecialPowers.pushPrefEnv({ set: [[PREF_NOVA_ENABLED, false]] });
const win = await loadInitialView("theme");
Assert.ok(
!BrowserTestUtils.isVisible(getThemesMode(win.document)),
"themes-mode should be hidden when nova is disabled"
);
await closeView(win);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_themes_mode_visibility() {
await SpecialPowers.pushPrefEnv({ set: [[PREF_NOVA_ENABLED, true]] });
for (const [type, expectedVisible] of [
["extension", false],
["locale", false],
["plugin", false],
["mlmodel", false],
["dictionary", false],
["sitepermission", false],
["theme", true],
]) {
const win = await loadInitialView(type);
Assert.equal(
BrowserTestUtils.isVisible(getThemesMode(win.document)),
expectedVisible,
`themes-mode should be ${expectedVisible ? "visible" : "hidden"} on ${type} list view`
);
await closeView(win);
}
await SpecialPowers.popPrefEnv();
});
add_task(async function test_themes_mode_initial_value() {
Services.prefs.clearUserPref(PREF_SYSTEM_USES_DARK);
for (const [darkPrefValue, expectedValue] of [
[null, "device"],
[0, "light"],
[1, "dark"],
]) {
const set = [[PREF_NOVA_ENABLED, true]];
if (darkPrefValue !== null) {
set.push([PREF_SYSTEM_USES_DARK, darkPrefValue]);
}
await SpecialPowers.pushPrefEnv({ set });
const win = await loadInitialView("theme");
const themesMode = getThemesMode(win.document);
await themesMode.updateComplete;
Assert.equal(
themesMode.value,
expectedValue,
`Initial value should be '${expectedValue}'`
);
await closeView(win);
await SpecialPowers.popPrefEnv();
}
});
add_task(async function test_themes_mode_pref_binding() {
await SpecialPowers.pushPrefEnv({
set: [
[PREF_NOVA_ENABLED, true],
[PREF_SYSTEM_USES_DARK, 0 /* light */],
],
});
const win = await loadInitialView("theme");
const themesMode = getThemesMode(win.document);
await themesMode.updateComplete;
Assert.equal(
themesMode.value,
"light",
"Initial themes mode value should be 'light' on pref set to 0"
);
await SpecialPowers.pushPrefEnv({
set: [[PREF_SYSTEM_USES_DARK, 2 /* device */]],
});
await themesMode.updateComplete;
Assert.equal(
themesMode.value,
"device",
"Value should update to 'device' after pref set to 2"
);
await SpecialPowers.pushPrefEnv({
set: [[PREF_SYSTEM_USES_DARK, 1 /* dark */]],
});
await themesMode.updateComplete;
Assert.equal(
themesMode.value,
"dark",
"Value should update to 'dark' after pref set to 1"
);
await SpecialPowers.popPrefEnv();
await SpecialPowers.popPrefEnv();
const getButton = value =>
themesMode.shadowRoot
.querySelector("moz-segmented-control")
.querySelector(`[value="${value}"]`);
getButton("light").click();
Assert.equal(
Services.prefs.getIntPref(PREF_SYSTEM_USES_DARK, -1),
0,
"Clicking 'light' should set pref to 0"
);
getButton("dark").click();
Assert.equal(
Services.prefs.getIntPref(PREF_SYSTEM_USES_DARK, -1),
1,
"Clicking 'dark' should set pref to 1"
);
getButton("device").click();
Assert.ok(
!Services.prefs.prefHasUserValue(PREF_SYSTEM_USES_DARK),
"Clicking 'device' should clear the pref user value"
);
await closeView(win);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_themes_mode_change_telemetry() {
await SpecialPowers.pushPrefEnv({
set: [
[PREF_NOVA_ENABLED, true],
[PREF_SYSTEM_USES_DARK, 0 /* light */],
],
});
const win = await loadInitialView("theme");
const themesMode = getThemesMode(win.document);
await themesMode.updateComplete;
const getButton = value =>
themesMode.shadowRoot
.querySelector("moz-segmented-control")
.querySelector(`[value="${value}"]`);
for (const appearance of ["device", "dark", "light"]) {
Services.fog.testResetFOG();
getButton(appearance).click();
const events = Glean.themePicker.change.testGetValue();
Assert.equal(
events?.length,
1,
`theme_picker.change is recorded once for appearance=${appearance}`
);
Assert.deepEqual(
{
source: events[0].extra.source,
layout: events[0].extra.layout,
property: events[0].extra.property,
appearance: events[0].extra.appearance,
},
{
source: "about:addons",
layout: "full",
property: "appearance",
appearance,
},
"theme_picker.change event got the expected extra properties"
);
}
// Check that clicking light again doesn't record a change
Services.fog.testResetFOG();
getButton("light").click();
const events = Glean.themePicker.change.testGetValue();
Assert.ok(!events, "No theme_picker.change when no change");
await closeView(win);
await SpecialPowers.popPrefEnv();
});
add_task(async function test_themes_mode_a11y_label() {
await SpecialPowers.pushPrefEnv({
set: [
[PREF_NOVA_ENABLED, true],
[PREF_SYSTEM_USES_DARK, 0 /* light */],
],
});
const win = await loadInitialView("theme");
const themesMode = getThemesMode(win.document);
await themesMode.updateComplete;
const segmentedControl = themesMode.shadowRoot.querySelector(
"moz-segmented-control"
);
Assert.equal(
segmentedControl.getAttribute("data-l10n-id"),
"themes-mode",
"aboutaddons-themes-mode segmented control should have the expected data-l10n-id"
);
await segmentedControl.updateComplete;
await win.document.l10n.translateFragment(segmentedControl);
Assert.ok(
segmentedControl.getAttribute("aria-label"),
"aboutaddons-themes-mode segmented control should have an associated aria-label"
);
await closeView(win);
await SpecialPowers.popPrefEnv();
});