From b3b324182c4fafcea712696f42080df92bc4ebd6 Mon Sep 17 00:00:00 2001 From: Natalia Csoregi Date: Wed, 13 Mar 2024 21:17:52 +0200 Subject: [PATCH] Backed out changeset d488b0a57d95 (bug 1876173) for causing fxms failures. CLOSED TREE --- browser/components/aboutwelcome/.eslintrc.js | 1 - .../aboutwelcome/content-src/aboutwelcome.scss | 241 ++++++++++----------- .../components/MultiStageProtonScreen.jsx | 1 - .../aboutwelcome/content/aboutwelcome.bundle.js | 3 +- .../aboutwelcome/content/aboutwelcome.css | 77 ++++--- .../browser_aboutwelcome_configurable_ui.js | 23 -- .../schemas/MessagingExperiment.schema.json | 4 - 7 files changed, 156 insertions(+), 194 deletions(-) diff --git a/browser/components/aboutwelcome/.eslintrc.js b/browser/components/aboutwelcome/.eslintrc.js index ba672187f149..9d17fd40c263 100644 --- a/browser/components/aboutwelcome/.eslintrc.js +++ b/browser/components/aboutwelcome/.eslintrc.js @@ -113,7 +113,6 @@ module.exports = { "layout", "pos", "hide-secondary-section", - "no-rdm", ], }, ], diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss index 62c7f66344d3..d57972b1391a 100644 --- a/browser/components/aboutwelcome/content-src/aboutwelcome.scss +++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -861,178 +861,173 @@ html { } @media only screen and (width <= 800px) { - &:not([no-rdm]) { - flex-direction: column; - min-height: $small-main-section-height + $small-secondary-section-height; + flex-direction: column; + min-height: $small-main-section-height + $small-secondary-section-height; - &::before { - width: $split-section-width; - } + &::before { + width: $split-section-width; + } - .section-secondary, - .section-main { - width: $split-section-width; - } + .section-secondary, + .section-main { + width: $split-section-width; + } - .section-secondary { - --mr-secondary-background-position-y: top; - --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; + .section-secondary { + --mr-secondary-background-position-y: top; + --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; - border-radius: 8px 8px 0 0; - margin: auto auto 0; - height: $small-secondary-section-height; + border-radius: 8px 8px 0 0; + margin: auto auto 0; + height: $small-secondary-section-height; - .hero-image img { - margin: 6px 0; - } + .hero-image img { + margin: 6px 0; + } - .message-text { - margin-inline: auto; - } + .message-text { + margin-inline: auto; + } - h1 { - font-size: 35px; - text-align: center; - white-space: normal; - margin-inline: auto; - margin-block: 14px 6px; - } + h1 { + font-size: 35px; + text-align: center; + white-space: normal; + margin-inline: auto; + margin-block: 14px 6px; + } - &:dir(rtl) { - margin: auto auto 0; - border-radius: 8px 8px 0 0; - } + &:dir(rtl) { + margin: auto auto 0; + border-radius: 8px 8px 0 0; + } - &.with-secondary-section-hidden { - display: none; - } + &.with-secondary-section-hidden { + display: none; } + } - migration-wizard { - &::part(deck){ - min-width: 330px; - margin-inline: 36px; - } + migration-wizard { + &::part(deck){ + min-width: 330px; + margin-inline: 36px; } + } - .section-main { - margin: 0 auto auto; - height: $small-main-section-height; + .section-main { + margin: 0 auto auto; + height: $small-main-section-height; - migration-wizard::part(buttons) { - flex-direction: column; - margin-inline: 46px; - } + migration-wizard::part(buttons) { + flex-direction: column; + margin-inline: 46px; + } + + &[hide-secondary-section='responsive'] { + height: $split-screen-height; + margin: auto; - &[hide-secondary-section='responsive'] { - height: $split-screen-height; + &:dir(rtl) { margin: auto; + } - &:dir(rtl) { - margin: auto; - } + .main-content { + padding: 50px 0 0; + border-radius: 8px; - .main-content { - padding: 50px 0 0; + &:dir(rtl) { border-radius: 8px; - - &:dir(rtl) { - border-radius: 8px; - } } } + } - .main-content { - border-radius: 0 0 8px 8px; - padding: 30px 0 0; + .main-content { + border-radius: 0 0 8px 8px; + padding: 30px 0 0; - .main-content-inner { - align-items: center; - } + .main-content-inner { + align-items: center; + } - .logo-container { - text-align: center; + .logo-container { + text-align: center; - .brand-logo { - min-height: 25px; + .brand-logo { + min-height: 25px; - &, - &:dir(rtl) { - background-position: center; - } + &, + &:dir(rtl) { + background-position: center; } + } - .logo-alt { - width: inherit; - height: inherit; - } + .logo-alt { + width: inherit; + height: inherit; } + } - .welcome-text { - align-items: center; - text-align: center; - margin-inline: 0; - padding-inline: 30px; + .welcome-text { + align-items: center; + text-align: center; + margin-inline: 0; + padding-inline: 30px; - .spacer-bottom, - .spacer-top { - display: none; - } + .spacer-bottom, + .spacer-top { + display: none; } + } - .action-buttons { - text-align: center; - - .checkbox-container { - display: none; - } + .action-buttons { + text-align: center; - .secondary-cta { - position: relative; - margin-block: 10px 0; - bottom: 0; - } + .checkbox-container { + display: none; } - .primary, - .secondary { - min-width: 240px; - margin-inline: 0; + .secondary-cta { + position: relative; + margin-block: 10px 0; + bottom: 0; } + } - .steps { - padding-block: 0; - margin: 0; - - &.progress-bar { - margin-inline: 0; - } - } + .primary, + .secondary { + min-width: 240px; + margin-inline: 0; } - .additional-cta { - &.cta-link { - align-self: center; + .steps { + padding-block: 0; + margin: 0; + + &.progress-bar { + margin-inline: 0; } } + } - .dismiss-button { - top: -$small-secondary-section-height; + .additional-cta { + &.cta-link { + align-self: center; } + } - &:dir(rtl) { - margin: 0 auto auto; + .dismiss-button { + top: -$small-secondary-section-height; + } - .main-content { - border-radius: 0 0 8px 8px; - } + &:dir(rtl) { + margin: 0 auto auto; + + .main-content { + border-radius: 0 0 8px 8px; } } } - &[no-rdm] { - width: 800px; - } } @media only screen and (height <= 650px) { @@ -1805,7 +1800,7 @@ html { .screen:not(.dialog-initial) { .tiles-theme-section, .multi-select-container - { + { transition-delay: 0.2s; } diff --git a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx index 0e140a73b0f7..6e7c9a6858eb 100644 --- a/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx +++ b/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx @@ -508,7 +508,6 @@ export class ProtonScreen extends React.PureComponent { ref={input => { this.mainContentHeader = input; }} - no-rdm={content.no_rdm ? "" : null} > {isCenterPosition ? null : this.renderSecondarySection(content)}
{ this.mainContentHeader = input; - }, - "no-rdm": content.no_rdm ? "" : null + } }, isCenterPosition ? null : this.renderSecondarySection(content), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `section-main ${isEmbeddedMigration ? "embedded-migration" : ""}`, "hide-secondary-section": content.hide_secondary_section ? String(content.hide_secondary_section) : null, diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css index 706b05d95cc1..99875c824a6c 100644 --- a/browser/components/aboutwelcome/content/aboutwelcome.css +++ b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -1650,138 +1650,135 @@ html { } } @media only screen and (width <= 800px) { - .onboardingContainer .screen[pos=split]:not([no-rdm]) { + .onboardingContainer .screen[pos=split] { flex-direction: column; min-height: 550px; } - .onboardingContainer .screen[pos=split]:not([no-rdm])::before { + .onboardingContainer .screen[pos=split]::before { width: 400px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary, - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main { + .onboardingContainer .screen[pos=split] .section-secondary, + .onboardingContainer .screen[pos=split] .section-main { width: 400px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary { + .onboardingContainer .screen[pos=split] .section-secondary { --mr-secondary-background-position-y: top; --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; border-radius: 8px 8px 0 0; margin: auto auto 0; height: 100px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary .hero-image img { + .onboardingContainer .screen[pos=split] .section-secondary .hero-image img { margin: 6px 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary .message-text { + .onboardingContainer .screen[pos=split] .section-secondary .message-text { margin-inline: auto; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary h1 { + .onboardingContainer .screen[pos=split] .section-secondary h1 { font-size: 35px; text-align: center; white-space: normal; margin-inline: auto; margin-block: 14px 6px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary:dir(rtl) { + .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) { margin: auto auto 0; border-radius: 8px 8px 0 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary.with-secondary-section-hidden { + .onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden { display: none; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) migration-wizard::part(deck) { + .onboardingContainer .screen[pos=split] migration-wizard::part(deck) { min-width: 330px; margin-inline: 36px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main { + .onboardingContainer .screen[pos=split] .section-main { margin: 0 auto auto; height: 450px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main migration-wizard::part(buttons) { + .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) { flex-direction: column; margin-inline: 46px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] { + .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] { height: 550px; margin: auto; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive]:dir(rtl) { + .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive]:dir(rtl) { margin: auto; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] .main-content { + .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content { padding: 50px 0 0; border-radius: 8px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) { + .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) { border-radius: 8px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content { + .onboardingContainer .screen[pos=split] .section-main .main-content { border-radius: 0 0 8px 8px; padding: 30px 0 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .main-content-inner { + .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner { align-items: center; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container { + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container { text-align: center; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo { + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo { min-height: 25px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo:dir(rtl) { + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo:dir(rtl) { background-position: center; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .logo-alt { + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt { width: inherit; height: inherit; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text { + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text { align-items: center; text-align: center; margin-inline: 0; padding-inline: 30px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text .spacer-bottom, - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text .spacer-top { + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-bottom, + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top { display: none; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons { + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons { text-align: center; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons .checkbox-container { + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container { display: none; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons .secondary-cta { + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta { position: relative; margin-block: 10px 0; bottom: 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .primary, - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .secondary { + .onboardingContainer .screen[pos=split] .section-main .main-content .primary, + .onboardingContainer .screen[pos=split] .section-main .main-content .secondary { min-width: 240px; margin-inline: 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .steps { + .onboardingContainer .screen[pos=split] .section-main .main-content .steps { padding-block: 0; margin: 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .steps.progress-bar { + .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar { margin-inline: 0; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .additional-cta.cta-link { + .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link { align-self: center; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .dismiss-button { + .onboardingContainer .screen[pos=split] .section-main .dismiss-button { top: -100px; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main:dir(rtl) { + .onboardingContainer .screen[pos=split] .section-main:dir(rtl) { margin: 0 auto auto; } - .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main:dir(rtl) .main-content { + .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content { border-radius: 0 0 8px 8px; } - .onboardingContainer .screen[pos=split][no-rdm] { - width: 800px; - } } @media only screen and (height <= 650px) and (800px <= width <= 990px) { .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top { diff --git a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js index 517d30791716..d53b5acc14e1 100644 --- a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js +++ b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js @@ -722,26 +722,3 @@ add_task(async function test_aboutwelcome_start_screen_configured() { browser.closeBrowser(); sandbox.restore(); }); - -/** - * Test rendering a screen with that doesn't use responsive design - */ -add_task(async function test_aboutwelcome_logo_selection() { - let screens = [makeTestContent(`TEST_NO_RDM`, { no_rdm: "true" })]; - - let sandbox = sinon.createSandbox(); - let browser = await openAboutWelcome(JSON.stringify(screens)); - - let screenPresent = await SpecialPowers.spawn(browser, [], async () => { - // Ensure screen has rendered - await ContentTaskUtils.waitForCondition(() => - content.document.querySelector(".TEST_NO_RDM[no-rdm]") - ); - return true; - }); - - ok(screenPresent, "No-RDM test screen is present with `no-rdm` attribute"); - - browser.closeBrowser(); - sandbox.restore(); -}); diff --git a/browser/components/asrouter/content-src/schemas/MessagingExperiment.schema.json b/browser/components/asrouter/content-src/schemas/MessagingExperiment.schema.json index fbabb109f8fc..a395f4f9904d 100644 --- a/browser/components/asrouter/content-src/schemas/MessagingExperiment.schema.json +++ b/browser/components/asrouter/content-src/schemas/MessagingExperiment.schema.json @@ -752,10 +752,6 @@ "startScreen": { "type": "integer", "description": "Index of first screen to show from message, defaulting to 0" - }, - "no-rdm": { - "type": "boolean", - "description": "If true, prevents the spotlight from entering responsive design mode at widths less than 800px" } }, "additionalProperties": true -- 2.11.4.GIT