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

Bug 1815793 - Display error when failing to load supported languages. r=nordzilla,fluent-reviewers,translations-reviewers,bolsson

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D243484
This commit is contained in:
Ricardo Delgado Gomez
2025-04-11 21:42:01 +00:00
parent c717dac2bb
commit 10fad0dbb0
6 changed files with 95 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
toolkit/components/translations/content/translations.html
View File

@@ -16,8 +16,16 @@
<link rel="localization" href="toolkit/branding/brandings.ftl"/>
<link rel="localization" href="locales-preview/aboutTranslations.ftl"/>
<script type="module" src="chrome://global/content/translations/translations.mjs"></script>
<script
type="module"
src="chrome://global/content/elements/moz-message-bar.mjs">
</script>
</head>
<body>
<moz-message-bar
id="messageBar"
hidden>
</moz-message-bar>
<h1 data-l10n-id="about-translations-header"></h1>
<main class="about-translations-contents">

23
toolkit/components/translations/content/translations.mjs
View File

@@ -403,6 +403,8 @@ class TranslationsUI {
translationResultsPlaceholder = document.getElementById(
"translation-results-placeholder"
);
/** @type {HTMLElement} */
messageBar = document.getElementById("messageBar");
/** @type {TranslationsState} */
state;
@@ -435,7 +437,10 @@ class TranslationsUI {
this.disableUI();
return;
}
this.setupDropdowns();
this.setupDropdowns().catch(error => {
console.error("Failed to set up dropdowns:", error);
this.showError("about-translations-language-load-error");
});
this.setupTextarea();
this.setupLanguageSwapButton();
}
@@ -558,14 +563,26 @@ class TranslationsUI {
return targetLangTag;
}
/**
* Show an error message to the user.
*
* @param {string} l10nId
*/
showError(l10nId) {
document.l10n.setAttributes(this.messageBar, l10nId);
this.messageBar.hidden = false;
this.messageBar.setAttribute("type", "error");
}
/**
* Show an info message to the user.
*
* @param {string} l10nId
*/
showInfo(l10nId) {
document.l10n.setAttributes(this.translationInfoMessage, l10nId);
this.translationInfo.style.display = "flex";
document.l10n.setAttributes(this.messageBar, l10nId);
this.messageBar.hidden = false;
this.messageBar.setAttribute("type", "info");
}
/**

2
toolkit/components/translations/tests/browser/browser.toml
View File

@@ -36,6 +36,8 @@ skip-if = ["os == 'linux'"] # Bug 1821461
["browser_about_translations_language_swap.js"]
["browser_about_translations_message_bar.js"]
["browser_about_translations_telemetry_open.js"]
["browser_about_translations_translations.js"]

55
toolkit/components/translations/tests/browser/browser_about_translations_message_bar.js Normal file
View File

@@ -0,0 +1,55 @@
/* Any copyright is dedicated to the Public Domain.
https://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// runInPage calls ContentTask.spawn, which injects ContentTaskUtils in the
// scope of the callback. Eslint doesn't know about that.
/* global ContentTaskUtils */
/**
* Check that the error message bar is displayed
* when getSupportedLanguages fails
*/
add_task(
async function test_about_translations_language_load_error_message_bar() {
// Simulate the getSupportedLanguages error
const realGetSupportedLanguages = TranslationsParent.getSupportedLanguages;
TranslationsParent.getSupportedLanguages = () => {
TranslationsParent.getSupportedLanguages = realGetSupportedLanguages;
throw new Error("Simulating getSupportedLanguagesError()");
};
const { runInPage, cleanup } = await openAboutTranslations({
autoDownloadFromRemoteSettings: true,
});
await runInPage(async ({ selectors }) => {
const { document } = content;
await ContentTaskUtils.waitForCondition(
() => {
const bar = document.querySelector(
selectors.languageLoadErrorMessage
);
return bar;
},
"Waiting for the error message bar to render",
100,
200
);
const messageBar = document.querySelector(
selectors.languageLoadErrorMessage
);
ok(messageBar, "Error message bar exists in the DOM");
is(messageBar.hidden, false, "Message bar is visible (not hidden)");
is(
messageBar.getAttribute("type"),
"error",
"Message bar has type='error'"
);
});
await cleanup();
}
);

2
toolkit/components/translations/tests/browser/shared-head.js
View File

@@ -170,6 +170,8 @@ async function openAboutTranslations({
translationInfo: "#translation-info",
translationResultsPlaceholder: "#translation-results-placeholder",
noSupportMessage: "[data-l10n-id='about-translations-no-support']",
languageLoadErrorMessage:
"[data-l10n-id='about-translations-language-load-error']",
};
// Start the tab at a blank page.

10
toolkit/locales-preview/aboutTranslations.ftl
View File

@@ -21,5 +21,11 @@ about-translations-detect-lang = Detect language ({ $language })
about-translations-select = Select language
about-translations-textarea =
.placeholder = Add text to translate
about-translations-no-support = Your device does not meet the minimum requirements to use this feature. Try on another device.
about-translations-engine-error = The translations engine failed to load.
about-translations-no-support =
.message = Your device does not meet the minimum requirements to use this feature. Try on another device.
about-translations-engine-error =
.message = The translations engine failed to load.
# Error message displayed when the language list fails to load.
about-translations-language-load-error =
.message = The language list failed to load. Check your internet connection and reload the page.