commit 4d496b62350f8e278f8503eea6c7d4822f72aca9
parent b894797a05545a9a6e779f60033fe88a444bb127
Author: mimi <nsauermann@mozilla.com>
Date: Mon, 17 Nov 2025 21:22:36 +0000
Bug 1999497 - Revert content tiles order change and add new optional property for order r=omc-reviewers,mviar,gcardieri
Differential Revision: https://phabricator.services.mozilla.com/D272787
Diffstat:
5 files changed, 113 insertions(+), 19 deletions(-)
diff --git a/browser/components/aboutwelcome/content-src/components/ContentTiles.jsx b/browser/components/aboutwelcome/content-src/components/ContentTiles.jsx
@@ -335,11 +335,13 @@ export const ContentTiles = props => {
const renderContentTiles = () => {
if (Array.isArray(tiles)) {
+ const containerStyle = content?.tiles_container?.style;
+
return (
<div
id="content-tiles-container"
style={AboutWelcomeUtils.getValidStyle(
- content?.contentTilesContainer?.style,
+ containerStyle,
CONTAINER_STYLES
)}
>
diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx
@@ -785,11 +785,18 @@ export class ProtonScreen extends React.PureComponent {
/>
) : null}
{this.renderLanguageSwitcher()}
+ {content?.tiles_container?.position !==
+ "after_supporting_content" ? (
+ <ContentTiles {...this.props} />
+ ) : null}
{content.above_button_content
? this.renderOrderedContent(content.above_button_content)
: null}
{this.renderActionButtons("after_supporting_content", content)}
- <ContentTiles {...this.props} />
+ {content?.tiles_container?.position ===
+ "after_supporting_content" ? (
+ <ContentTiles {...this.props} />
+ ) : null}
{!hideStepsIndicator && aboveButtonStepsIndicator
? this.renderStepsIndicator()
: null}
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
@@ -1618,7 +1618,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
}) : null) : null, content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_7__.OnboardingVideo, {
content: content.video_container,
handleAction: this.props.handleAction
- }) : null, this.renderLanguageSwitcher(), content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, this.renderActionButtons("after_supporting_content", content), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ContentTiles__WEBPACK_IMPORTED_MODULE_10__.ContentTiles, this.props), !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, this.renderActionButtons("end", content),
+ }) : null, this.renderLanguageSwitcher(), content?.tiles_container?.position !== "after_supporting_content" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ContentTiles__WEBPACK_IMPORTED_MODULE_10__.ContentTiles, this.props) : null, content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, this.renderActionButtons("after_supporting_content", content), content?.tiles_container?.position === "after_supporting_content" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ContentTiles__WEBPACK_IMPORTED_MODULE_10__.ContentTiles, this.props) : null, !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, this.renderActionButtons("end", content),
/* Fullscreen dot-style step indicator should sit inside the
main inner content to share its padding, which will be
configurable with Bug 1956042 */
@@ -2562,9 +2562,10 @@ const ContentTiles = props => {
};
const renderContentTiles = () => {
if (Array.isArray(tiles)) {
+ const containerStyle = content?.tiles_container?.style;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "content-tiles-container",
- style: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_11__.AboutWelcomeUtils.getValidStyle(content?.contentTilesContainer?.style, CONTAINER_STYLES)
+ style: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_11__.AboutWelcomeUtils.getValidStyle(containerStyle, CONTAINER_STYLES)
}, tiles.map((tile, index) => renderContentTile(tile, index)));
}
// If tiles is not an array render the tile alone without a container
diff --git a/browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx b/browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx
@@ -829,8 +829,7 @@ describe("MultiStageAboutWelcomeProton module", () => {
it("should render action buttons after tiles by default when no position is configured", async () => {
const SCREEN_PROPS = {
content: {
- title: "test title",
- position: "center",
+ title: "Test title",
primary_button: { label: "Confirm and continue" },
tiles_header: { title: "Title" },
tiles: {
@@ -860,7 +859,6 @@ describe("MultiStageAboutWelcomeProton module", () => {
content: {
title: "Test title",
subtitle: "Test subtitle",
- position: "center",
action_buttons_position: "after_subtitle",
primary_button: { label: "Get started" },
},
@@ -886,7 +884,6 @@ describe("MultiStageAboutWelcomeProton module", () => {
const SCREEN_PROPS = {
content: {
title: "Welcome to Firefox",
- position: "center",
action_buttons_position: "after_supporting_content",
above_button_content: [
{
@@ -897,19 +894,17 @@ describe("MultiStageAboutWelcomeProton module", () => {
},
],
primary_button: { label: "Confirm and continue" },
- tiles_header: {
- title: {
- string_id: "preonboarding-manage-data-header-button-title",
- },
- },
+ tiles_container: { position: "after_supporting_content" },
tiles: {
type: "multiselect",
data: [
- { id: "checkbox-1", label: "Interaction data" },
- { id: "checkbox-2", label: "Crash data" },
+ { id: "checkbox-1", label: "Checkbox 1" },
+ { id: "checkbox-2", label: "Checkbox 2" },
],
},
},
+ setScreenMultiSelects: sinon.stub(),
+ setActiveMultiSelect: sinon.stub(),
};
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
@@ -926,8 +921,97 @@ describe("MultiStageAboutWelcomeProton module", () => {
const afterButtonsEl = nextEl.nextElementSibling;
assert.isTrue(
- afterButtonsEl.classList.contains("content-tiles-header"),
- "Next element after action buttons should be content-tiles-header"
+ afterButtonsEl.classList.contains("content-tile"),
+ "Next element after action buttons should be content tile"
+ );
+ });
+
+ it("should render tiles before 'above_button_content' by default", async () => {
+ const SCREEN_PROPS = {
+ content: {
+ title: "Test title",
+ primary_button: { label: "Continue" },
+ above_button_content: [
+ {
+ type: "text",
+ text: { string_id: "tou-existing-user-spotlight-body" },
+ font_styles: "legal",
+ link_keys: ["terms-of-use", "privacy-notice", "learn-more"],
+ },
+ ],
+ tiles: {
+ type: "multiselect",
+ data: [
+ { id: "checkbox-1", label: "Checkbox 1" },
+ { id: "checkbox-2", label: "Checkbox 2" },
+ ],
+ },
+ },
+ setScreenMultiSelects: sinon.stub(),
+ setActiveMultiSelect: sinon.stub(),
+ };
+ const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
+ assert.ok(wrapper.exists());
+
+ const tilesEl = wrapper.find(".content-tile");
+ assert.isTrue(tilesEl.exists(), "Content tiles found");
+
+ const legalParagraphEl = wrapper.find(".legal-paragraph");
+ assert.isTrue(
+ legalParagraphEl.exists(),
+ "above_button_content legal paragraph element found"
+ );
+
+ assert.isTrue(
+ tilesEl
+ .getDOMNode()
+ .nextElementSibling.classList.contains("legal-paragraph"),
+ "the next element after tiles should be legal paragraph (above_button_content)"
+ );
+ });
+
+ it("should render tiles after 'above_button_content' when configured", async () => {
+ const SCREEN_PROPS = {
+ content: {
+ title: "Test title",
+ primary_button: { label: "Continue" },
+ above_button_content: [
+ {
+ type: "text",
+ text: { string_id: "tou-existing-user-spotlight-body" },
+ font_styles: "legal",
+ link_keys: ["terms-of-use", "privacy-notice", "learn-more"],
+ },
+ ],
+ tiles_container: { position: "after_supporting_content" },
+ tiles: {
+ type: "multiselect",
+ data: [
+ { id: "checkbox-1", label: "Checkbox 1" },
+ { id: "checkbox-2", label: "Checkbox 2" },
+ ],
+ },
+ },
+ setScreenMultiSelects: sinon.stub(),
+ setActiveMultiSelect: sinon.stub(),
+ };
+ const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
+ assert.ok(wrapper.exists());
+
+ const tilesEl = wrapper.find(".content-tile");
+ assert.isTrue(tilesEl.exists(), "Content tiles found");
+
+ const legalParagraphEl = wrapper.find(".legal-paragraph");
+ assert.isTrue(
+ legalParagraphEl.exists(),
+ "above_button_content legal paragraph element found"
+ );
+
+ assert.isTrue(
+ legalParagraphEl
+ .getDOMNode()
+ .nextElementSibling.classList.contains("content-tile"),
+ "the next element after legal paragraph (above_button_content) should be tiles"
);
});
});
@@ -1211,7 +1295,7 @@ describe("MultiStageAboutWelcomeProton module", () => {
const SCREEN_PROP = {
content: {
title: "test title",
- contentTilesContainer: {
+ tiles_container: {
style: {
flexDirection: "row",
marginBlock: "16px",
diff --git a/browser/components/asrouter/modules/PanelTestProvider.sys.mjs b/browser/components/asrouter/modules/PanelTestProvider.sys.mjs
@@ -2364,7 +2364,7 @@ const MESSAGES = () => [
dismiss: true,
},
},
- contentTilesContainer: {
+ tiles_container: {
style: {
marginBlock: "6px",
},
