commit ebefbf6207409975e6194f94a71e6b4781c296c2
parent 1156edd12a2293161db6e612509f07ba189f248f
Author: Erik Nordin <enordin@mozilla.com>
Date: Thu, 18 Dec 2025 15:42:08 +0000
Bug 2002127 - Part 20: Restructure Translations Settings Subpage r=hjones
This commit restructures the elements of the Translations
Settings Subpage, so that each group is a proper setting-group
rather than a fieldset within the subpage. This was the original
intended pattern, but I got it wrong in the previous commits.
It's easier to fix it here rather than rebasing into this already
very large stack.
Differential Revision: https://phabricator.services.mozilla.com/D274832
Diffstat:
3 files changed, 138 insertions(+), 191 deletions(-)
diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
@@ -688,19 +688,6 @@ Preferences.addSetting({
Preferences.addSetting({
id: "translationsDownloadLanguagesSelect",
- _value: "",
- get() {
- return this._value;
- },
- set(val, _deps, setting) {
- const newValue = val ?? "";
- if (this._value === newValue) {
- return this._value;
- }
- this._value = newValue;
- setting?.emit("change");
- return this._value;
- },
});
Preferences.addSetting({
@@ -712,14 +699,6 @@ Preferences.addSetting({
});
Preferences.addSetting({
- id: "translationsDownloadLanguagesFieldset",
-});
-
-Preferences.addSetting({
- id: "translationsAutomaticTranslationFieldset",
-});
-
-Preferences.addSetting({
id: "translationsAlwaysTranslateLanguagesGroup",
});
@@ -729,19 +708,6 @@ Preferences.addSetting({
Preferences.addSetting({
id: "translationsAlwaysTranslateLanguagesSelect",
- _value: "",
- get() {
- return this._value;
- },
- set(val, _deps, setting) {
- const newValue = val ?? "";
- if (this._value === newValue) {
- return this._value;
- }
- this._value = newValue;
- setting?.emit("change");
- return this._value;
- },
});
Preferences.addSetting({
@@ -770,19 +736,6 @@ Preferences.addSetting({
Preferences.addSetting({
id: "translationsNeverTranslateLanguagesSelect",
- _value: "",
- get() {
- return this._value;
- },
- set(val, _deps, setting) {
- const newValue = val ?? "";
- if (this._value === newValue) {
- return this._value;
- }
- this._value = newValue;
- setting?.emit("change");
- return this._value;
- },
});
Preferences.addSetting({
@@ -3844,207 +3797,194 @@ SettingGroupManager.registerGroups({
},
],
},
- moreTranslationSettings: {
+ translationsAutomaticTranslation: {
inProgress: true,
+ headingLevel: 2,
+ l10nId: "settings-translations-subpage-automatic-translation-header",
items: [
{
- id: "translationsAutomaticTranslationFieldset",
- l10nId: "settings-translations-subpage-automatic-translation-header",
- control: "moz-fieldset",
+ id: "translationsAlwaysTranslateLanguagesGroup",
+ control: "moz-box-group",
controlAttrs: {
- headingLevel: 2,
+ type: "list",
},
items: [
{
- id: "translationsAlwaysTranslateLanguagesGroup",
- control: "moz-box-group",
+ id: "translationsAlwaysTranslateLanguagesRow",
+ l10nId: "settings-translations-subpage-always-translate-header",
+ control: "moz-box-item",
+ slot: "header",
controlAttrs: {
- type: "list",
+ class: "box-header-bold",
},
items: [
{
- id: "translationsAlwaysTranslateLanguagesRow",
- l10nId: "settings-translations-subpage-always-translate-header",
- control: "moz-box-item",
- slot: "header",
- controlAttrs: {
- style:
- "--box-label-font-weight: var(--font-weight-semibold);",
- },
- items: [
- {
- id: "translationsAlwaysTranslateLanguagesSelect",
- control: "moz-select",
- options: [
- {
- value: "",
- l10nId:
- "settings-translations-subpage-language-select-option",
- },
- ],
- },
+ id: "translationsAlwaysTranslateLanguagesSelect",
+ slot: "actions",
+ control: "moz-select",
+ options: [
{
- id: "translationsAlwaysTranslateLanguagesButton",
- l10nId: "settings-translations-subpage-language-add-button",
- control: "moz-button",
- controlAttrs: {
- slot: "actions",
- type: "icon",
- iconsrc: "chrome://global/skin/icons/plus.svg",
- },
+ value: "",
+ l10nId:
+ "settings-translations-subpage-language-select-option",
},
],
},
{
- id: "translationsAlwaysTranslateLanguagesNoneRow",
- l10nId: "settings-translations-subpage-no-languages-added",
- control: "moz-box-item",
+ id: "translationsAlwaysTranslateLanguagesButton",
+ l10nId: "settings-translations-subpage-language-add-button",
+ control: "moz-button",
+ slot: "actions",
controlAttrs: {
- class: "text-deemphasized",
+ type: "icon",
+ iconsrc: "chrome://global/skin/icons/plus.svg",
},
},
],
},
{
- id: "translationsNeverTranslateLanguagesGroup",
- control: "moz-box-group",
+ id: "translationsAlwaysTranslateLanguagesNoneRow",
+ l10nId: "settings-translations-subpage-no-languages-added",
+ control: "moz-box-item",
controlAttrs: {
- type: "list",
+ class: "description-deemphasized",
+ },
+ },
+ ],
+ },
+ {
+ id: "translationsNeverTranslateLanguagesGroup",
+ control: "moz-box-group",
+ controlAttrs: {
+ type: "list",
+ },
+ items: [
+ {
+ id: "translationsNeverTranslateLanguagesRow",
+ l10nId: "settings-translations-subpage-never-translate-header",
+ control: "moz-box-item",
+ slot: "header",
+ controlAttrs: {
+ class: "box-header-bold",
},
items: [
{
- id: "translationsNeverTranslateLanguagesRow",
- l10nId: "settings-translations-subpage-never-translate-header",
- control: "moz-box-item",
- slot: "header",
- controlAttrs: {
- style:
- "--box-label-font-weight: var(--font-weight-semibold);",
- },
- items: [
- {
- id: "translationsNeverTranslateLanguagesSelect",
- control: "moz-select",
- options: [
- {
- value: "",
- l10nId:
- "settings-translations-subpage-language-select-option",
- },
- ],
- },
+ id: "translationsNeverTranslateLanguagesSelect",
+ slot: "actions",
+ control: "moz-select",
+ options: [
{
- id: "translationsNeverTranslateLanguagesButton",
- l10nId: "settings-translations-subpage-language-add-button",
- control: "moz-button",
- controlAttrs: {
- slot: "actions",
- type: "icon",
- iconsrc: "chrome://global/skin/icons/plus.svg",
- },
+ value: "",
+ l10nId:
+ "settings-translations-subpage-language-select-option",
},
],
},
{
- id: "translationsNeverTranslateLanguagesNoneRow",
- l10nId: "settings-translations-subpage-no-languages-added",
- control: "moz-box-item",
+ id: "translationsNeverTranslateLanguagesButton",
+ l10nId: "settings-translations-subpage-language-add-button",
+ control: "moz-button",
+ slot: "actions",
controlAttrs: {
- class: "text-deemphasized",
+ type: "icon",
+ iconsrc: "chrome://global/skin/icons/plus.svg",
},
},
],
},
{
- id: "translationsNeverTranslateSitesGroup",
- control: "moz-box-group",
+ id: "translationsNeverTranslateLanguagesNoneRow",
+ l10nId: "settings-translations-subpage-no-languages-added",
+ control: "moz-box-item",
controlAttrs: {
- type: "list",
+ class: "description-deemphasized",
},
- items: [
- {
- id: "translationsNeverTranslateSitesRow",
- l10nId:
- "settings-translations-subpage-never-translate-sites-header",
- control: "moz-box-item",
- controlAttrs: {
- style:
- "--box-label-font-weight: var(--font-weight-semibold);",
- ".description": createNeverTranslateSitesDescription(),
- },
- },
- {
- id: "translationsNeverTranslateSitesNoneRow",
- l10nId: "settings-translations-subpage-no-sites-added",
- control: "moz-box-item",
- controlAttrs: {
- class: "text-deemphasized",
- },
- },
- ],
},
],
},
{
- id: "translationsDownloadLanguagesFieldset",
- l10nId: "settings-translations-subpage-speed-up-translation-header",
- control: "moz-fieldset",
+ id: "translationsNeverTranslateSitesGroup",
+ control: "moz-box-group",
controlAttrs: {
- headingLevel: 2,
+ type: "list",
},
items: [
{
- id: "translationsDownloadLanguagesGroup",
- control: "moz-box-group",
+ id: "translationsNeverTranslateSitesRow",
+ l10nId:
+ "settings-translations-subpage-never-translate-sites-header",
+ control: "moz-box-item",
+ controlAttrs: {
+ class: "box-header-bold",
+ ".description": createNeverTranslateSitesDescription(),
+ },
+ },
+ {
+ id: "translationsNeverTranslateSitesNoneRow",
+ l10nId: "settings-translations-subpage-no-sites-added",
+ control: "moz-box-item",
+ controlAttrs: {
+ class: "description-deemphasized",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ translationsDownloadLanguages: {
+ inProgress: true,
+ headingLevel: 2,
+ l10nId: "settings-translations-subpage-speed-up-translation-header",
+ items: [
+ {
+ id: "translationsDownloadLanguagesGroup",
+ control: "moz-box-group",
+ controlAttrs: {
+ type: "list",
+ },
+ items: [
+ {
+ id: "translationsDownloadLanguagesRow",
+ l10nId: "settings-translations-subpage-download-languages-header",
+ control: "moz-box-item",
+ slot: "header",
controlAttrs: {
- type: "list",
+ class: "box-header-bold",
},
items: [
{
- id: "translationsDownloadLanguagesRow",
- l10nId:
- "settings-translations-subpage-download-languages-header",
- control: "moz-box-item",
- slot: "header",
- controlAttrs: {
- style:
- "--box-label-font-weight: var(--font-weight-semibold);",
- },
- items: [
- {
- id: "translationsDownloadLanguagesSelect",
- control: "moz-select",
- options: [
- {
- value: "",
- l10nId:
- "settings-translations-subpage-download-languages-select-option",
- },
- ],
- },
+ id: "translationsDownloadLanguagesSelect",
+ slot: "actions",
+ control: "moz-select",
+ options: [
{
- id: "translationsDownloadLanguagesButton",
+ value: "",
l10nId:
- "settings-translations-subpage-download-languages-button",
- control: "moz-button",
- controlAttrs: {
- slot: "actions",
- type: "icon",
- iconsrc: "chrome://browser/skin/downloads/downloads.svg",
- },
+ "settings-translations-subpage-download-languages-select-option",
},
],
},
{
- id: "translationsDownloadLanguagesNoneRow",
- l10nId: "settings-translations-subpage-no-languages-downloaded",
- control: "moz-box-item",
+ id: "translationsDownloadLanguagesButton",
+ l10nId:
+ "settings-translations-subpage-download-languages-button",
+ control: "moz-button",
+ slot: "actions",
controlAttrs: {
- class: "text-deemphasized",
+ type: "icon",
+ iconsrc: "chrome://browser/skin/downloads/downloads.svg",
},
},
],
},
+ {
+ id: "translationsDownloadLanguagesNoneRow",
+ l10nId: "settings-translations-subpage-no-languages-downloaded",
+ control: "moz-box-item",
+ controlAttrs: {
+ class: "description-deemphasized",
+ },
+ },
],
},
],
diff --git a/browser/components/preferences/preferences.js b/browser/components/preferences/preferences.js
@@ -298,7 +298,10 @@ const CONFIG_PANES = Object.freeze({
translations: {
parent: "general",
l10nId: "settings-translations-subpage-header",
- groupIds: ["moreTranslationSettings"],
+ groupIds: [
+ "translationsAutomaticTranslation",
+ "translationsDownloadLanguages",
+ ],
iconSrc: "chrome://browser/skin/translations.svg",
},
});
diff --git a/browser/components/preferences/translations.js b/browser/components/preferences/translations.js
@@ -397,16 +397,20 @@ const TranslationsSettings = {
const pane = /** @type {ElementWithUpdateComplete|null} */ (
document.querySelector('setting-pane[data-category="paneTranslations"]')
);
- const group = /** @type {ElementWithUpdateComplete|null} */ (
- document.querySelector('setting-group[groupid="moreTranslationSettings"]')
+ const groups = Array.from(
+ document.querySelectorAll(
+ 'setting-group[groupid="translationsAutomaticTranslation"], setting-group[groupid="translationsDownloadLanguages"]'
+ )
);
const promises = [];
if (pane?.getUpdateComplete) {
promises.push(pane.getUpdateComplete());
}
- if (group?.getUpdateComplete) {
- promises.push(group.getUpdateComplete());
+ for (const group of groups) {
+ if (group?.getUpdateComplete) {
+ promises.push(group.getUpdateComplete());
+ }
}
if (promises.length) {
