commit 4cbe324897d1c54502f88059fd8e7550a1829008
parent aa8d2fda6f6bffc6d8147d12d163e0337242f475
Author: Erik Nordin <enordin@mozilla.com>
Date: Wed, 7 Jan 2026 18:43:59 +0000
Bug 2008213 - Rework about:translations vertical resizing r=translations-reviewers,gregtatum
This commit reworks the way that the about:translations sections
are resized to their content when in the vertical page orientation.
Now, the sections grow to their own individual max content height in
vertical orientation, but remain synchronized to the maximum content
height between the two in horizontal orientation.
Differential Revision: https://phabricator.services.mozilla.com/D277710
Diffstat:
6 files changed, 465 insertions(+), 207 deletions(-)
diff --git a/toolkit/components/translations/content/about-translations.css b/toolkit/components/translations/content/about-translations.css
@@ -198,7 +198,7 @@ body {
#about-translations-main-user-interface {
display: grid;
grid-template-columns: 1fr auto 1fr;
- grid-template-rows: auto 1fr 1fr;
+ grid-template-rows: auto auto auto;
margin: 0;
width: 100%;
gap: var(--space-medium);
diff --git a/toolkit/components/translations/content/about-translations.mjs b/toolkit/components/translations/content/about-translations.mjs
@@ -130,8 +130,8 @@ class AboutTranslations {
*
* When the page orientation is vertical, each section spans the full width
* of the content, and resizing the window width or changing the zoom level
- * must trigger section resizing, whereas that synchronization is not
- * necessary when the page orientation is horizontal.
+ * must trigger section resizing, whereas those updates are not necessary
+ * when the page orientation is horizontal.
*
* @type {("vertical"|"horizontal")}
*/
@@ -139,14 +139,25 @@ class AboutTranslations {
/**
* A timeout id that gets set when a pending callback is scheduled
- * to synchronize the heights of the source and target sections.
+ * to update the section heights.
*
* This helps ensure that we do not make repeated calls to this function
* that would cause unnecessary and excessive reflow.
*
* @type {number | null}
*/
- #synchronizeSectionHeightsTimeoutId = null;
+ #updateSectionHeightsTimeoutId = null;
+
+ /**
+ * Returns the maximum of the given numbers, rounded up.
+ *
+ * @param {...number} numbers
+ *
+ * @returns {number}
+ */
+ static #maxInteger(...numbers) {
+ return Math.ceil(Math.max(...numbers));
+ }
/**
* Constructs a new {@link AboutTranslations} instance.
@@ -323,7 +334,7 @@ class AboutTranslations {
this.#showMainUserInterface();
this.#updateSourceSectionClearButtonVisibility();
- this.#ensureSectionHeightsMatch({ scheduleCallback: false });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: false });
this.#setInitialFocus();
}
@@ -599,9 +610,9 @@ class AboutTranslations {
const orientationChanged = this.#updatePageOrientation();
if (orientationChanged) {
- this.#ensureSectionHeightsMatch({ scheduleCallback: false });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: false });
} else if (this.#pageOrientation === "vertical") {
- this.#ensureSectionHeightsMatch({ scheduleCallback: true });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: true });
}
};
@@ -1009,7 +1020,7 @@ class AboutTranslations {
this.#updateSourceScriptDirection();
this.#updateTargetScriptDirection();
- this.#ensureSectionHeightsMatch({ scheduleCallback: false });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: false });
this.#updateSourceSectionClearButtonVisibility();
if (sourceSectionTextArea.value) {
@@ -1106,7 +1117,7 @@ class AboutTranslations {
this.#maybeUpdateDetectedSourceLanguage();
this.#updateSourceScriptDirection();
- this.#ensureSectionHeightsMatch({ scheduleCallback: false });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: false });
if (!value && hadValueBefore) {
document.dispatchEvent(
@@ -1133,7 +1144,7 @@ class AboutTranslations {
}
this.#updateTargetScriptDirection();
- this.#ensureSectionHeightsMatch({ scheduleCallback: false });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: false });
this.#setCopyButtonEnabled(Boolean(value) && isTranslationResult);
}
@@ -1384,7 +1395,7 @@ class AboutTranslations {
onDebounce: async () => {
try {
this.#updateURLFromUI();
- this.#ensureSectionHeightsMatch({ scheduleCallback: false });
+ this.#requestSectionHeightsUpdate({ scheduleCallback: false });
await this.#maybeUpdateDetectedSourceLanguage();
@@ -1476,8 +1487,11 @@ class AboutTranslations {
});
/**
- * Ensures that the heights of the source and target sections match by syncing
- * them to the maximum height of either of their content.
+ * Requests that the heights of each section is updated to at least match its content.
+ *
+ * In horizontal orientation the source and target sections are synchronized to
+ * the maximum content height between the two. In vertical orientation, each section
+ * is sized to its own content height.
*
* There are many situations in which this function needs to be called:
* - Every time the source text is updated
@@ -1487,35 +1501,54 @@ class AboutTranslations {
* - Etc.
*
* Some of these events happen infrequently, or are already debounced, such as
- * each time a translation occurs. In these situations it is okay to synchronize
+ * each time a translation occurs. In these situations it is okay to update
* the section heights immediately.
*
* Some of these events can trigger quite rapidly, such as resizing the window
* via click-and-drag semantics. In this case, a single callback should be scheduled
- * to synchronize the section heights to prevent unnecessary and excessive reflow.
+ * to update the section heights to prevent unnecessary and excessive reflow.
*
* @param {object} params
* @param {boolean} params.scheduleCallback
*/
- #ensureSectionHeightsMatch({ scheduleCallback }) {
+ #requestSectionHeightsUpdate({ scheduleCallback }) {
if (scheduleCallback) {
- if (this.#synchronizeSectionHeightsTimeoutId) {
+ if (this.#updateSectionHeightsTimeoutId) {
// There is already a pending callback: no need to schedule another.
return;
}
- this.#synchronizeSectionHeightsTimeoutId = setTimeout(
- this.#synchronizeSectionsToMaxContentHeight,
+ this.#updateSectionHeightsTimeoutId = setTimeout(
+ this.#updateSectionHeights,
100
);
return;
}
- this.#synchronizeSectionsToMaxContentHeight();
+ this.#updateSectionHeights();
}
/**
+ * Updates the section heights based on the current page orientation.
+ *
+ * This function is intentionally written as a lambda so that it can be passed
+ * as a callback without the need to explicitly bind `this` to the function object.
+ */
+ #updateSectionHeights = () => {
+ if (this.#updateSectionHeightsTimeoutId) {
+ clearTimeout(this.#updateSectionHeightsTimeoutId);
+ this.#updateSectionHeightsTimeoutId = null;
+ }
+
+ if (this.#pageOrientation === "horizontal") {
+ this.#synchronizeSectionsToMaxContentHeight();
+ } else {
+ this.#resizeSectionsToIndividualContentHeights();
+ }
+ };
+
+ /**
* Retrieves the combined border and padding height of an element.
*
* Returns 0 when the element is missing or does not use border-box sizing.
@@ -1539,7 +1572,7 @@ class AboutTranslations {
const paddingTop = Number.parseFloat(style.paddingTop) || 0;
const paddingBottom = Number.parseFloat(style.paddingBottom) || 0;
- return borderTop + borderBottom + paddingTop + paddingBottom;
+ return Math.ceil(borderTop + borderBottom + paddingTop + paddingBottom);
}
/**
@@ -1565,18 +1598,61 @@ class AboutTranslations {
}
/**
+ * Returns whether a section height increased or decreased.
+ *
+ * @param {number} beforeHeight
+ * @param {number} afterHeight
+ * @returns {null | "decreased" | "increased"}
+ */
+ #getSectionHeightChange(beforeHeight, afterHeight) {
+ const changeThreshold = 1;
+ if (!Number.isFinite(beforeHeight) || beforeHeight <= changeThreshold) {
+ return null;
+ }
+
+ const delta = afterHeight - beforeHeight;
+ if (Math.abs(delta) <= changeThreshold) {
+ return null;
+ }
+
+ return delta < 0 ? "decreased" : "increased";
+ }
+
+ /**
+ * Dispatches a test event when section height changes are detected.
+ *
+ * @param {object} params
+ * @param {null | "decreased" | "increased"} params.sourceSectionHeightChange
+ * @param {null | "decreased" | "increased"} params.targetSectionHeightChange
+ */
+ #dispatchSectionHeightsChangedEvent({
+ sourceSectionHeightChange,
+ targetSectionHeightChange,
+ }) {
+ if (!sourceSectionHeightChange && !targetSectionHeightChange) {
+ return;
+ }
+
+ document.dispatchEvent(
+ new CustomEvent("AboutTranslationsTest:SectionHeightsChanged", {
+ detail: {
+ sourceSectionHeightChange: sourceSectionHeightChange ?? "unchanged",
+ targetSectionHeightChange: targetSectionHeightChange ?? "unchanged",
+ },
+ })
+ );
+ }
+
+ /**
* Calculates the content heights in both the source and target sections,
* then syncs them to the maximum calculated content height among the two.
*
- * This function is intentionally written as a lambda so that it can be passed
- * as a callback without the need to explicitly bind `this` to the function object.
- *
- * Prefer calling #ensureSectionHeightsMatch to make it clear whether this function
+ * Prefer calling #requestSectionHeightsUpdate to make it clear whether this function
* needs to run immediately, or is okay to be scheduled as a callback.
*
- * @see {AboutTranslations#ensureSectionHeightsMatch}
+ * @see {AboutTranslations#requestSectionHeightsUpdate}
*/
- #synchronizeSectionsToMaxContentHeight = () => {
+ #synchronizeSectionsToMaxContentHeight() {
const {
sourceSection,
sourceSectionTextArea,
@@ -1585,14 +1661,12 @@ class AboutTranslations {
targetSectionTextArea,
} = this.elements;
- const currentHeight = Number.parseFloat(sourceSection?.style.height);
- const sectionWidth = Math.max(
- sourceSection?.scrollWidth ?? sourceSectionTextArea.scrollWidth,
- 1
+ const sourceSectionHeightBefore = Number.parseFloat(
+ sourceSection?.style.height
+ );
+ const targetSectionHeightBefore = Number.parseFloat(
+ targetSection?.style.height
);
- const textAreaRatioBefore = Number.isNaN(currentHeight)
- ? 0
- : currentHeight / sectionWidth;
sourceSection.style.height = "auto";
targetSection.style.height = "auto";
@@ -1601,20 +1675,18 @@ class AboutTranslations {
const targetActionsHeight =
targetSectionActionsRow.getBoundingClientRect().height;
- const minSectionHeight = Math.max(
+ const minSectionHeight = AboutTranslations.#maxInteger(
this.#getMinHeight(sourceSection),
this.#getMinHeight(targetSection)
);
const targetSectionContentHeight =
targetSectionTextArea.scrollHeight + targetActionsHeight;
- const maxContentHeight = Math.ceil(
- Math.max(
- sourceSectionTextArea.scrollHeight,
- targetSectionContentHeight,
- minSectionHeight
- )
+ const maxContentHeight = AboutTranslations.#maxInteger(
+ sourceSectionTextArea.scrollHeight,
+ targetSectionContentHeight,
+ minSectionHeight
);
- const sectionBorderHeight = Math.max(
+ const sectionBorderHeight = AboutTranslations.#maxInteger(
this.#getBorderAndPaddingHeight(sourceSection),
this.#getBorderAndPaddingHeight(targetSection)
);
@@ -1624,6 +1696,14 @@ class AboutTranslations {
maxContentHeight - targetActionsHeight,
0
)}px`;
+ const sourceSectionHeightChange = this.#getSectionHeightChange(
+ sourceSectionHeightBefore,
+ maxSectionHeight
+ );
+ const targetSectionHeightChange = this.#getSectionHeightChange(
+ targetSectionHeightBefore,
+ maxSectionHeight
+ );
sourceSection.style.height = maxSectionHeightPixels;
targetSection.style.height = maxSectionHeightPixels;
@@ -1631,27 +1711,81 @@ class AboutTranslations {
sourceSectionTextArea.style.height = "100%";
targetSectionTextArea.style.height = targetSectionTextAreaHeightPixels;
- const textAreaRatioAfter = maxSectionHeight / sectionWidth;
- const ratioDelta = textAreaRatioAfter - textAreaRatioBefore;
- const changeThreshold = 0.001;
+ this.#dispatchSectionHeightsChangedEvent({
+ sourceSectionHeightChange,
+ targetSectionHeightChange,
+ });
+ }
- if (
- // The section heights were not 0px prior to growing.
- textAreaRatioBefore > changeThreshold &&
- // The section aspect ratio changed beyond typical floating-point error.
- Math.abs(ratioDelta) > changeThreshold
- ) {
- document.dispatchEvent(
- new CustomEvent("AboutTranslationsTest:TextAreaHeightsChanged", {
- detail: {
- textAreaHeights: ratioDelta < 0 ? "decreased" : "increased",
- },
- })
- );
- }
+ /**
+ * Calculates the content heights in both the source and target sections,
+ * then sizes each section to its own calculated content height.
+ *
+ * Prefer calling #requestSectionHeightsUpdate to make it clear whether this function
+ * needs to run immediately, or is okay to be scheduled as a callback.
+ *
+ * @see {AboutTranslations#requestSectionHeightsUpdate}
+ */
+ #resizeSectionsToIndividualContentHeights() {
+ const {
+ sourceSection,
+ sourceSectionTextArea,
+ targetSection,
+ targetSectionActionsRow,
+ targetSectionTextArea,
+ } = this.elements;
- this.#synchronizeSectionHeightsTimeoutId = null;
- };
+ const sourceSectionHeightBefore = Number.parseFloat(
+ sourceSection?.style.height
+ );
+ const targetSectionHeightBefore = Number.parseFloat(
+ targetSection?.style.height
+ );
+
+ sourceSection.style.height = "auto";
+ targetSection.style.height = "auto";
+ sourceSectionTextArea.style.height = "auto";
+ targetSectionTextArea.style.height = "auto";
+
+ const targetActionsHeight =
+ targetSectionActionsRow.getBoundingClientRect().height;
+ const sourceMinHeight = this.#getMinHeight(sourceSection);
+ const targetMinHeight = this.#getMinHeight(targetSection);
+ const sourceContentHeight = AboutTranslations.#maxInteger(
+ sourceSectionTextArea.scrollHeight,
+ sourceMinHeight
+ );
+ const targetContentHeight = AboutTranslations.#maxInteger(
+ targetSectionTextArea.scrollHeight + targetActionsHeight,
+ targetMinHeight
+ );
+ const sourceSectionHeight =
+ sourceContentHeight + this.#getBorderAndPaddingHeight(sourceSection);
+ const targetSectionHeight =
+ targetContentHeight + this.#getBorderAndPaddingHeight(targetSection);
+ const targetSectionTextAreaHeightPixels = `${Math.max(
+ targetContentHeight - targetActionsHeight,
+ 0
+ )}px`;
+ const sourceSectionHeightChange = this.#getSectionHeightChange(
+ sourceSectionHeightBefore,
+ sourceSectionHeight
+ );
+ const targetSectionHeightChange = this.#getSectionHeightChange(
+ targetSectionHeightBefore,
+ targetSectionHeight
+ );
+
+ sourceSection.style.height = `${sourceSectionHeight}px`;
+ targetSection.style.height = `${targetSectionHeight}px`;
+ sourceSectionTextArea.style.height = "100%";
+ targetSectionTextArea.style.height = targetSectionTextAreaHeightPixels;
+
+ this.#dispatchSectionHeightsChangedEvent({
+ sourceSectionHeightChange,
+ targetSectionHeightChange,
+ });
+ }
}
/**
diff --git a/toolkit/components/translations/tests/browser/browser_about_translations_resize_sections_by_input.js b/toolkit/components/translations/tests/browser/browser_about_translations_resize_sections_by_input.js
@@ -51,7 +51,7 @@ add_task(async function test_about_translations_no_resize_for_small_input() {
],
unexpected: [
AboutTranslationsTestUtils.Events.PageOrientationChanged,
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
],
},
async () => {
@@ -111,9 +111,10 @@ add_task(async function test_about_translations_resize_by_input() {
],
[AboutTranslationsTestUtils.Events.ShowTranslatingPlaceholder],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "increased",
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
},
],
],
@@ -139,9 +140,10 @@ add_task(async function test_about_translations_resize_by_input() {
{ translationId: 1 },
],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "increased",
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
},
],
],
@@ -173,9 +175,10 @@ add_task(async function test_about_translations_resize_by_input() {
{ translationId: 2 },
],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "decreased",
+ sourceSectionHeightChange: "decreased",
+ targetSectionHeightChange: "decreased",
},
],
],
@@ -204,9 +207,10 @@ add_task(async function test_about_translations_resize_by_input() {
{
expected: [
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "decreased",
+ sourceSectionHeightChange: "decreased",
+ targetSectionHeightChange: "decreased",
},
],
],
diff --git a/toolkit/components/translations/tests/browser/browser_about_translations_resize_sections_by_window.js b/toolkit/components/translations/tests/browser/browser_about_translations_resize_sections_by_window.js
@@ -51,9 +51,10 @@ add_task(
{ translationId: 1 },
],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "increased",
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
},
],
],
@@ -78,7 +79,7 @@ add_task(
await aboutTranslationsTestUtils.assertEvents(
{
unexpected: [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
AboutTranslationsTestUtils.Events.PageOrientationChanged,
],
},
@@ -93,7 +94,7 @@ add_task(
await aboutTranslationsTestUtils.assertEvents(
{
unexpected: [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
AboutTranslationsTestUtils.Events.PageOrientationChanged,
],
},
@@ -107,130 +108,238 @@ add_task(
);
/**
+ * This test case ensures that source and target sections resize independently
+ * while in vertical orientation.
+ */
+add_task(
+ async function test_about_translations_vertical_orientation_resizes_by_input() {
+ const { aboutTranslationsTestUtils, cleanup } = await openAboutTranslations(
+ {
+ languagePairs: [
+ { fromLang: "de", toLang: "en" },
+ { fromLang: "en", toLang: "de" },
+ ],
+ autoDownloadFromRemoteSettings: false,
+ }
+ );
+
+ const longExpandingInput = expandingInput + expandingInput;
+
+ info(
+ "The text-area heights should not change when transitioning to a vertical orientation with no content."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.PageOrientationChanged,
+ { orientation: "vertical" },
+ ],
+ ],
+ unexpected: [AboutTranslationsTestUtils.Events.SectionHeightsChanged],
+ },
+ async () => {
+ await ensureWindowSize(window, 1000 * Math.SQRT1_2, 900 * Math.SQRT1_2);
+ }
+ );
+
+ info(
+ "The source text area should expand with input while the target remains unchanged."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.TranslationRequested,
+ { translationId: 1 },
+ ],
+ [AboutTranslationsTestUtils.Events.ShowTranslatingPlaceholder],
+ [
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "unchanged",
+ },
+ ],
+ ],
+ unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
+ },
+ async () => {
+ await aboutTranslationsTestUtils.setSourceLanguageSelectorValue("de");
+ await aboutTranslationsTestUtils.setTargetLanguageSelectorValue("en");
+ await aboutTranslationsTestUtils.setSourceTextAreaValue(
+ longExpandingInput
+ );
+ }
+ );
+
+ info(
+ "The target text area should expand with output while the source remains unchanged."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.TranslationComplete,
+ { translationId: 1 },
+ ],
+ [
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "unchanged",
+ targetSectionHeightChange: "increased",
+ },
+ ],
+ ],
+ unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
+ },
+ async () => {
+ await aboutTranslationsTestUtils.resolveDownloads(1);
+ }
+ );
+
+ await aboutTranslationsTestUtils.assertTranslatedText({
+ sourceLanguage: "de",
+ targetLanguage: "en",
+ sourceText: longExpandingInput,
+ });
+
+ await cleanup();
+ }
+);
+
+/**
* This test case ensures that transitioning the page between its vertical and horizontal orientations via modifying
* the window width may cause the text areas to resize, and that modifying the window width within the page's vertical
* orientation may cause the text areas to resize.
*/
-add_task(async function test_about_translations_vertical_orientation_resizes() {
- const { aboutTranslationsTestUtils, cleanup } = await openAboutTranslations({
- languagePairs: [
- { fromLang: "de", toLang: "en" },
- { fromLang: "en", toLang: "de" },
- ],
- autoDownloadFromRemoteSettings: true,
- });
-
- info(
- "The text-area heights should not change when transitioning to a vertical orientation with no content."
- );
- await aboutTranslationsTestUtils.assertEvents(
- {
- expected: [
- [
- AboutTranslationsTestUtils.Events.PageOrientationChanged,
- { orientation: "vertical" },
- ],
- ],
- unexpected: [AboutTranslationsTestUtils.Events.TextAreaHeightsChanged],
- },
- async () => {
- await ensureWindowSize(window, 1000 * Math.SQRT1_2, 900 * Math.SQRT1_2);
- }
- );
-
- info(
- "The text areas should expand when a large input is pasted as the source."
- );
- await aboutTranslationsTestUtils.assertEvents(
- {
- expected: [
- [
- AboutTranslationsTestUtils.Events.TranslationRequested,
- { translationId: 1 },
- ],
- [AboutTranslationsTestUtils.Events.ShowTranslatingPlaceholder],
- [
- AboutTranslationsTestUtils.Events.TranslationComplete,
- { translationId: 1 },
+add_task(
+ async function test_about_translations_vertical_orientation_resizes_by_window() {
+ const { aboutTranslationsTestUtils, cleanup } = await openAboutTranslations(
+ {
+ languagePairs: [
+ { fromLang: "de", toLang: "en" },
+ { fromLang: "en", toLang: "de" },
],
- [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- {
- textAreaHeights: "increased",
- },
+ autoDownloadFromRemoteSettings: true,
+ }
+ );
+
+ info(
+ "The text-area heights should not change when transitioning to a vertical orientation with no content."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.PageOrientationChanged,
+ { orientation: "vertical" },
+ ],
],
- ],
- unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
- },
- async () => {
- await aboutTranslationsTestUtils.setSourceLanguageSelectorValue("de");
- await aboutTranslationsTestUtils.setTargetLanguageSelectorValue("en");
- await aboutTranslationsTestUtils.setSourceTextAreaValue(expandingInput);
- }
- );
-
- await aboutTranslationsTestUtils.assertTranslatedText({
- sourceLanguage: "de",
- targetLanguage: "en",
- sourceText: expandingInput,
- });
-
- info(
- "The text-area heights should increase when making the vertical orientation narrower."
- );
- await aboutTranslationsTestUtils.assertEvents(
- {
- expected: [
- [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- { textAreaHeights: "increased" },
+ unexpected: [AboutTranslationsTestUtils.Events.SectionHeightsChanged],
+ },
+ async () => {
+ await ensureWindowSize(window, 1000 * Math.SQRT1_2, 900 * Math.SQRT1_2);
+ }
+ );
+
+ info(
+ "The text areas should expand when a large input is pasted as the source."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.TranslationRequested,
+ { translationId: 1 },
+ ],
+ [AboutTranslationsTestUtils.Events.ShowTranslatingPlaceholder],
+ [
+ AboutTranslationsTestUtils.Events.TranslationComplete,
+ { translationId: 1 },
+ ],
],
- ],
- unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
- },
- async () => {
- await ensureWindowSize(window, 480 * Math.SQRT1_2, 900 * Math.SQRT1_2);
- }
- );
-
- info(
- "The text-area heights should decrease when making the vertical orientation wider."
- );
- await aboutTranslationsTestUtils.assertEvents(
- {
- expected: [
- [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- { textAreaHeights: "decreased" },
+ unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
+ },
+ async () => {
+ await aboutTranslationsTestUtils.setSourceLanguageSelectorValue("de");
+ await aboutTranslationsTestUtils.setTargetLanguageSelectorValue("en");
+ await aboutTranslationsTestUtils.setSourceTextAreaValue(expandingInput);
+ }
+ );
+
+ await aboutTranslationsTestUtils.assertTranslatedText({
+ sourceLanguage: "de",
+ targetLanguage: "en",
+ sourceText: expandingInput,
+ });
+
+ info(
+ "The text-area heights should increase when making the vertical orientation narrower."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
+ },
+ ],
],
- ],
- unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
- },
- async () => {
- await ensureWindowSize(window, 1000 * Math.SQRT1_2, 900 * Math.SQRT1_2);
- }
- );
-
- info(
- "The text-area heights should increase when transitioning from vertical to horizontal orientation with content."
- );
- await aboutTranslationsTestUtils.assertEvents(
- {
- expected: [
- [
- AboutTranslationsTestUtils.Events.PageOrientationChanged,
- { orientation: "horizontal" },
+ unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
+ },
+ async () => {
+ await ensureWindowSize(window, 480 * Math.SQRT1_2, 900 * Math.SQRT1_2);
+ }
+ );
+
+ info(
+ "The text-area heights should decrease when making the vertical orientation wider."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "decreased",
+ targetSectionHeightChange: "decreased",
+ },
+ ],
],
- [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- { textAreaHeights: "increased" },
+ unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
+ },
+ async () => {
+ await ensureWindowSize(window, 1000 * Math.SQRT1_2, 900 * Math.SQRT1_2);
+ }
+ );
+
+ info(
+ "The text-area heights should increase when transitioning from vertical to horizontal orientation with content."
+ );
+ await aboutTranslationsTestUtils.assertEvents(
+ {
+ expected: [
+ [
+ AboutTranslationsTestUtils.Events.PageOrientationChanged,
+ { orientation: "horizontal" },
+ ],
+ [
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
+ },
+ ],
],
- ],
- },
- async () => {
- await ensureWindowSize(window, 1600 * Math.SQRT1_2, 900 * Math.SQRT1_2);
- }
- );
-
- await cleanup();
-});
+ },
+ async () => {
+ await ensureWindowSize(window, 1600 * Math.SQRT1_2, 900 * Math.SQRT1_2);
+ }
+ );
+
+ await cleanup();
+ }
+);
diff --git a/toolkit/components/translations/tests/browser/browser_about_translations_resize_sections_by_zoom.js b/toolkit/components/translations/tests/browser/browser_about_translations_resize_sections_by_zoom.js
@@ -51,9 +51,10 @@ add_task(
{ translationId: 1 },
],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "increased",
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
},
],
],
@@ -78,7 +79,7 @@ add_task(
await aboutTranslationsTestUtils.assertEvents(
{
unexpected: [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
AboutTranslationsTestUtils.Events.PageOrientationChanged,
],
},
@@ -93,7 +94,7 @@ add_task(
await aboutTranslationsTestUtils.assertEvents(
{
unexpected: [
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
AboutTranslationsTestUtils.Events.PageOrientationChanged,
],
},
@@ -156,9 +157,10 @@ add_task(
{ translationId: 1 },
],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
{
- textAreaHeights: "increased",
+ sourceSectionHeightChange: "unchanged",
+ targetSectionHeightChange: "increased",
},
],
],
@@ -184,8 +186,11 @@ add_task(
{
expected: [
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- { textAreaHeights: "increased" },
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
+ },
],
],
unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
@@ -202,8 +207,11 @@ add_task(
{
expected: [
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- { textAreaHeights: "decreased" },
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "decreased",
+ targetSectionHeightChange: "decreased",
+ },
],
],
unexpected: [AboutTranslationsTestUtils.Events.PageOrientationChanged],
@@ -224,8 +232,11 @@ add_task(
{ orientation: "horizontal" },
],
[
- AboutTranslationsTestUtils.Events.TextAreaHeightsChanged,
- { textAreaHeights: "increased" },
+ AboutTranslationsTestUtils.Events.SectionHeightsChanged,
+ {
+ sourceSectionHeightChange: "increased",
+ targetSectionHeightChange: "increased",
+ },
],
],
},
diff --git a/toolkit/components/translations/tests/browser/shared-head.js b/toolkit/components/translations/tests/browser/shared-head.js
@@ -4213,12 +4213,12 @@ class AboutTranslationsTestUtils {
"AboutTranslationsTest:PageOrientationChanged";
/**
- * Event fired when the source/target textarea heights change.
+ * Event fired when the source/target section heights change.
*
* @type {string}
*/
- static TextAreaHeightsChanged =
- "AboutTranslationsTest:TextAreaHeightsChanged";
+ static SectionHeightsChanged =
+ "AboutTranslationsTest:SectionHeightsChanged";
/**
* Event fired when the source text is cleared programmatically.
