Bug 1869830 - [translations] Add a page for Translation Setting Preferences. r=nordzilla,fluent-reviewers,settings-reviewers,desktop-theme-reviewers,translations-reviewers,Gijs,bolsson,dao

Differential Revision: https://phabricator.services.mozilla.com/D197048
This commit is contained in:
Meera Murthy 2024-01-22 14:19:25 +00:00
parent 18f75aaf05
commit c381da7159
19 changed files with 202 additions and 18 deletions

View File

@ -12,6 +12,7 @@ browser.jar:
content/browser/preferences/search.js
content/browser/preferences/privacy.js
content/browser/preferences/containers.js
content/browser/preferences/translations.js
content/browser/preferences/sync.js
content/browser/preferences/experimental.js
content/browser/preferences/moreFromMozilla.js

View File

@ -1909,9 +1909,15 @@ var gMainPane = {
},
showTranslationsSettings() {
gSubDialog.open(
"chrome://browser/content/preferences/dialogs/translations.xhtml"
);
if (
Services.prefs.getBoolPref("browser.translations.newSettingsUI.enable")
) {
gotoPref("translations");
} else {
gSubDialog.open(
"chrome://browser/content/preferences/dialogs/translations.xhtml"
);
}
},
/**

View File

@ -7,6 +7,7 @@
/* import-globals-from home.js */
/* import-globals-from search.js */
/* import-globals-from containers.js */
/* import-globals-from translations.js */
/* import-globals-from privacy.js */
/* import-globals-from sync.js */
/* import-globals-from experimental.js */
@ -203,6 +204,7 @@ function init_all() {
register_module("paneSearch", gSearchPane);
register_module("panePrivacy", gPrivacyPane);
register_module("paneContainers", gContainersPane);
register_module("paneTranslations", gTranslationsPane);
if (Services.prefs.getBoolPref("browser.preferences.experimental")) {
// Set hidden based on previous load's hidden value.
document.getElementById("category-experimental").hidden =
@ -413,6 +415,16 @@ async function gotoPref(
aShowReason,
category
);
document.dispatchEvent(
new CustomEvent("paneshown", {
bubbles: true,
cancelable: true,
detail: {
category,
},
})
);
}
function search(aQuery, aAttribute) {

View File

@ -24,6 +24,10 @@
rel="stylesheet"
href="chrome://browser/skin/preferences/preferences.css"
/>
<link
rel="stylesheet"
href="chrome://browser/skin/preferences/translations.css"
/>
<link
rel="stylesheet"
href="chrome://browser/content/preferences/dialogs/handlers.css"
@ -63,6 +67,7 @@
<link rel="localization" href="browser/preferences/siteDataSettings.ftl"/>
<link rel="localization" href="browser/sanitize.ftl"/>
<link rel="localization" href="browser/translations.ftl"/>
<link rel="localization" href="preview/translations.ftl"/>
<link rel="localization" href="preview/enUS-searchFeatures.ftl"/>
<link rel="localization" href="security/certificates/certManager.ftl"/>
<link rel="localization" href="security/certificates/deviceManager.ftl"/>
@ -127,13 +132,6 @@
<label class="category-name" flex="1" data-l10n-id="pane-search-title"></label>
</richlistitem>
<!-- hidden with CSS; this is only here to allow the containers pane to
be switched to using the URL or the "Settings..." button. -->
<richlistitem id="category-containers"
class="category"
value="paneContainers"
helpTopic="prefs-containers"/>
<richlistitem id="category-privacy"
class="category"
value="panePrivacy"
@ -178,6 +176,25 @@
<image class="category-icon"/>
<label class="category-name" flex="1" data-l10n-id="more-from-moz-title"></label>
</richlistitem>
<!-- The following <richlistitem> elements are hidden from the list of items via the hidden-category class.
The intent is that they act as sub-pages, accessible from the UI of one of the main pages, but are
not listed as primary pages themselves via the selector.
These elements need to be hidden with CSS, rather than the "hidden" property, otherwise their
functionality will be disabled.
In the future, we may want to determine a way to support sub-pages in a first-class fashion, rather
than creating them as hidden primary pages like this. For now, any further pages of this kind should
be added in this fashion. -->
<richlistitem
class="category hidden-category"
value="paneContainers"
helpTopic="prefs-containers"/>
<richlistitem
class="category hidden-category"
value="paneTranslations"
helpTopic="prefs-translations"/>
</richlistbox>
<spacer flex="1"/>
@ -225,6 +242,7 @@
#include search.inc.xhtml
#include privacy.inc.xhtml
#include containers.inc.xhtml
#include translations.inc.xhtml
#include sync.inc.xhtml
#include experimental.inc.xhtml
#include moreFromMozilla.inc.xhtml

View File

@ -0,0 +1,16 @@
# 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
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
<script src="chrome://browser/content/preferences/translations.js"/>
<hbox hidden="true"
data-category="paneTranslations">
<button id="translations-settings-back-button" class="back-button" data-l10n-id="translations-settings-back-button-text"/>
</hbox>
<hbox hidden="true" class="header"
data-category="paneTranslations">
<html:h2 id="translations-settings-header"
data-l10n-id="translations-settings-header-text"/>
</hbox>

View File

@ -0,0 +1,15 @@
/* 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 file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/* import-globals-from preferences.js */
let gTranslationsPane = {
init() {
document
.getElementById("translations-settings-back-button")
.addEventListener("command", function () {
gotoPref("general");
});
},
};

View File

@ -13,6 +13,8 @@ support-files = [
["browser_translations_about_preferences_settings_never_translate_sites.js"]
["browser_translations_about_preferences_settings_ui.js"]
["browser_translations_panel_a11y_focus.js"]
["browser_translations_panel_always_translate_language_bad_data.js"]

View File

@ -30,7 +30,9 @@ add_task(async function test_about_preferences_manage_languages() {
ukrainianDownload,
ukrainianDelete,
},
} = await setupAboutPreferences(LANGUAGE_PAIRS);
} = await setupAboutPreferences(LANGUAGE_PAIRS, {
prefs: [["browser.translations.newSettingsUI.enable", false]],
});
is(
downloadAllLabel.getAttribute("data-l10n-id"),
@ -169,7 +171,9 @@ add_task(async function test_about_preferences_download_reject() {
cleanup,
remoteClients,
elements: { document, frenchDownload },
} = await setupAboutPreferences(LANGUAGE_PAIRS);
} = await setupAboutPreferences(LANGUAGE_PAIRS, {
prefs: [["browser.translations.newSettingsUI.enable", false]],
});
click(frenchDownload, "Downloading French");

View File

@ -8,7 +8,9 @@ add_task(
const {
cleanup,
elements: { settingsButton },
} = await setupAboutPreferences(LANGUAGE_PAIRS);
} = await setupAboutPreferences(LANGUAGE_PAIRS, {
prefs: [["browser.translations.newSettingsUI.enable", false]],
});
info("Ensuring the list of always-translate languages is empty");
is(

View File

@ -8,7 +8,9 @@ add_task(
const {
cleanup,
elements: { settingsButton },
} = await setupAboutPreferences(LANGUAGE_PAIRS);
} = await setupAboutPreferences(LANGUAGE_PAIRS, {
prefs: [["browser.translations.newSettingsUI.enable", false]],
});
info("Ensuring the list of never-translate languages is empty");
is(

View File

@ -12,6 +12,7 @@ add_task(async function test_about_preferences_never_translate_site_settings() {
cleanup,
elements: { settingsButton },
} = await setupAboutPreferences(LANGUAGE_PAIRS, {
prefs: [["browser.translations.newSettingsUI.enable", false]],
permissionsUrls: [
"https://example.com",
"https://example.org",

View File

@ -0,0 +1,61 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
add_task(async function test_translations_settings_pane_elements() {
const {
cleanup,
elements: { settingsButton },
} = await setupAboutPreferences(LANGUAGE_PAIRS, {
prefs: [["browser.translations.newSettingsUI.enable", true]],
});
ok(
BrowserTestUtils.isVisible(settingsButton),
"Expected the translations settings button to be visible"
);
const { backButton, header } =
await openAboutPreferencesTranslationsSettingsPane(settingsButton);
ok(
BrowserTestUtils.isHidden(settingsButton),
"Translations settings, Settings Button is hidden"
);
ok(
BrowserTestUtils.isVisible(header),
"Translations settings Header is visible"
);
ok(
BrowserTestUtils.isVisible(backButton),
"Translations settings Back Button is visible"
);
is(
header.getAttribute("data-l10n-id"),
"translations-settings-header-text",
"Translations settings header is localized"
);
is(
backButton.getAttribute("data-l10n-id"),
"translations-settings-back-button-text",
"Translations settings back button is localized"
);
const promise = BrowserTestUtils.waitForEvent(
document,
"paneshown",
false,
event => event.detail.category === "paneGeneral"
);
click(backButton);
await promise;
ok(
BrowserTestUtils.isHidden(backButton),
"Translations settings Back Button is hidden"
);
await cleanup();
});

View File

@ -1376,3 +1376,30 @@ async function waitForViewShown(callback) {
await promise;
await new Promise(resolve => setTimeout(resolve, 0));
}
/**
* Opens the Translation Settings page by clicking the settings button sent in the argument.
*
* @param {HTMLElement} settingsButton
* @returns {Element}
*/
async function openAboutPreferencesTranslationsSettingsPane(settingsButton) {
const document = gBrowser.selectedBrowser.contentDocument;
const promise = BrowserTestUtils.waitForEvent(
document,
"paneshown",
false,
event => event.detail.category === "paneTranslations"
);
click(settingsButton, "Click settings button");
await promise;
const elements = {
backButton: document.getElementById("translations-settings-back-button"),
header: document.getElementById("translations-settings-header"),
};
return elements;
}

View File

@ -0,0 +1,9 @@
# 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
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
## Translation Settings section
translations-settings-back-button-text =
.aria-label = Back to Settings
translations-settings-header-text = More Translation Settings

View File

@ -16,6 +16,7 @@
preview/onboarding.ftl (../components/aboutwelcome/content/onboarding.ftl)
preview/appmenu.ftl (../../services/fxaccounts/content/appmenu.ftl)
preview/select-translations.ftl (../locales-preview/select-translations.ftl)
preview/translations.ftl (../locales-preview/translations.ftl)
browser (%browser/**/*.ftl)
@AB_CD@.jar:

View File

@ -120,6 +120,7 @@
skin/classic/browser/preferences/category-search.svg (../shared/preferences/category-search.svg)
skin/classic/browser/preferences/category-sync.svg (../shared/preferences/category-sync.svg)
skin/classic/browser/preferences/containers.css (../shared/preferences/containers.css)
skin/classic/browser/preferences/translations.css (../shared/preferences/translations.css)
skin/classic/browser/preferences/containers-dialog.css (../shared/preferences/containers-dialog.css)
skin/classic/browser/preferences/dialog.css (../shared/preferences/dialog.css)
skin/classic/browser/preferences/fxaPairDevice.css (../shared/preferences/fxaPairDevice.css)

View File

@ -4,10 +4,6 @@
@import url("chrome://browser/content/usercontext/usercontext.css");
#category-containers {
display: none;
}
.container-header-links {
margin-block-end: 15px;
}

View File

@ -1484,6 +1484,9 @@ richlistitem .text-link:hover {
margin: 16px 0;
}
.hidden-category {
display: none;
}
/* Platform-specific tweaks & overrides */
@media (-moz-platform: macos) {

View File

@ -0,0 +1,7 @@
/* 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
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#translations-settings-back-button {
margin-block-end: 15px;
}