commit 4c6114842685c51cc3f5609abf90a5106598468a
parent 66e30688d50b2101eaf3e18555b9f55d6e9644b8
Author: Erik Nordin <enordin@mozilla.com>
Date: Tue, 23 Dec 2025 16:05:27 +0000
Bug 1992232 - Part 1/6: Refactor about:translations Event Handling r=translations-reviewers,gregtatum
This patch refactors the event handling of the about:translations page
to use more targeted, per-event functions, rather than a single function
with a lot of case logic. The functionality is unchanged.
Differential Revision: https://phabricator.services.mozilla.com/D276110
Diffstat:
2 files changed, 66 insertions(+), 72 deletions(-)
diff --git a/toolkit/components/translations/content/about-translations.mjs b/toolkit/components/translations/content/about-translations.mjs
@@ -325,86 +325,79 @@ class AboutTranslations {
sourceTextArea,
} = this.elements;
- learnMoreLink.addEventListener("click", this);
- swapLanguagesButton.addEventListener("click", this);
- sourceLanguageSelector.addEventListener("input", this);
- targetLanguageSelector.addEventListener("input", this);
- sourceTextArea.addEventListener("input", this);
- window.addEventListener("resize", this);
- window.visualViewport.addEventListener("resize", this);
+ learnMoreLink.addEventListener("click", this.#onLearnMoreLink);
+ swapLanguagesButton.addEventListener("click", this.#onSwapLanguagesButton);
+ sourceLanguageSelector.addEventListener(
+ "input",
+ this.#onSourceLanguageInput
+ );
+ targetLanguageSelector.addEventListener(
+ "input",
+ this.#onTargetLanguageInput
+ );
+ sourceTextArea.addEventListener("input", this.#onSourceTextInput);
+ window.addEventListener("resize", this.#onResize);
+ window.visualViewport.addEventListener("resize", this.#onResize);
}
/**
- * The event handler for all UI interactions.
- *
- * @param {Event} event
+ * Handles clicks on the learn-more link.
*/
- handleEvent = ({ type, target }) => {
- const {
- learnMoreLink,
- swapLanguagesButton,
- sourceLanguageSelector,
- targetLanguageSelector,
- sourceTextArea,
- } = this.elements;
+ #onLearnMoreLink = () => {
+ AT_openSupportPage();
+ };
- switch (type) {
- case "click": {
- if (target.id === swapLanguagesButton.id) {
- this.#disableSwapLanguagesButton();
+ /**
+ * Handles clicks on the swap-languages button.
+ */
+ #onSwapLanguagesButton = () => {
+ this.#disableSwapLanguagesButton();
+ this.#maybeSwapLanguages();
+ this.#maybeRequestTranslation();
+ };
- this.#maybeSwapLanguages();
- this.#maybeRequestTranslation();
- } else if (target.id === learnMoreLink.id) {
- AT_openSupportPage();
- }
+ /**
+ * Handles input events on the source-language selector.
+ */
+ #onSourceLanguageInput = () => {
+ const { sourceLanguageSelector } = this.elements;
- break;
- }
- case "input": {
- const { id } = target;
-
- if (id === sourceLanguageSelector.id) {
- if (sourceLanguageSelector.value !== this.#detectedLanguage) {
- this.#resetDetectLanguageOptionText();
- this.#disableSwapLanguagesButton();
- } else {
- // The source-language selector was previously set to "detect", but was
- // explicitly changed to the detected language, so there is no action to take.
- this.#resetDetectLanguageOptionText();
- return;
- }
- }
+ if (sourceLanguageSelector.value !== this.#detectedLanguage) {
+ this.#resetDetectLanguageOptionText();
+ this.#disableSwapLanguagesButton();
+ } else {
+ this.#resetDetectLanguageOptionText();
+ return;
+ }
- if (id === targetLanguageSelector.id) {
- this.#disableSwapLanguagesButton();
- }
+ this.#maybeRequestTranslation();
+ };
- if (
- id === sourceLanguageSelector.id ||
- id === targetLanguageSelector.id ||
- id === sourceTextArea.id
- ) {
- this.#maybeRequestTranslation();
- }
+ /**
+ * Handles input events on the target-language selector.
+ */
+ #onTargetLanguageInput = () => {
+ this.#disableSwapLanguagesButton();
+ this.#maybeRequestTranslation();
+ };
- break;
- }
- case "resize": {
- if (target === window || target === window.visualViewport) {
- const orientationChanged = this.#updatePageOrientation();
-
- if (orientationChanged) {
- // The page orientation changed, so we need to update the text-area heights immediately.
- this.#ensureTextAreaHeightsMatch({ scheduleCallback: false });
- } else if (this.#pageOrientation === "vertical") {
- // Otherwise we only need to eventually update the text-area heights in vertical orientation.
- this.#ensureTextAreaHeightsMatch({ scheduleCallback: true });
- }
- }
+ /**
+ * Handles input events on the source textarea.
+ */
+ #onSourceTextInput = () => {
+ this.#maybeRequestTranslation();
+ };
- break;
- }
+ /**
+ * Handles resize events, including resizing the window and zooming.
+ */
+ #onResize = () => {
+ const orientationChanged = this.#updatePageOrientation();
+
+ if (orientationChanged) {
+ this.#ensureTextAreaHeightsMatch({ scheduleCallback: false });
+ } else if (this.#pageOrientation === "vertical") {
+ this.#ensureTextAreaHeightsMatch({ scheduleCallback: true });
}
};
diff --git a/toolkit/components/translations/tests/browser/shared-head.js b/toolkit/components/translations/tests/browser/shared-head.js
@@ -4405,7 +4405,7 @@ class AboutTranslationsTestUtils {
/**
* Waits for the specified AboutTranslations event to fire, then returns its detail payload.
- * Rejects if the event doesn’t fire within three seconds.
+ * Rejects if the event doesn’t fire within the given time limit.
*
* @param {string} eventName
* @returns {Promise<any>}
@@ -4422,15 +4422,16 @@ class AboutTranslationsTestUtils {
);
});
+ const timeoutMS = 10_000;
const timeoutPromise = new Promise((_, reject) => {
setTimeout(
() =>
reject(
new Error(
- `Event "${eventName}" did not fire within three seconds.`
+ `Event "${eventName}" did not fire within ${timeoutMS / 1000} seconds.`
)
),
- 3000
+ timeoutMS
);
});
