commit 080ae42458a55154c890c14983456bee8f80e80f
parent 7d9b687c2debe2f3a1532e947fe24099c5f06c02
Author: Jason Prickett <jprickett@mozilla.com>
Date: Thu, 6 Nov 2025 00:22:53 +0000
Bug 1952300 - Refactor AW fullscreen styles to support lengthy content r=mviar,omc-reviewers
Differential Revision: https://phabricator.services.mozilla.com/D271300
Diffstat:
3 files changed, 173 insertions(+), 26 deletions(-)
diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
@@ -193,6 +193,13 @@ html {
transform: rotateY(180deg);
}
+ &:has([pos='split'][fullscreen]) {
+ min-height: 100vh;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ }
+
.section-main {
display: flex;
flex-direction: column;
@@ -1069,15 +1076,24 @@ html {
$split-section-width: 50%;
$split-screen-height: 100%;
+ min-height:100vh;
+
.section-secondary,
.section-main {
width: $split-section-width;
- height: $split-screen-height;
+ height: auto;
+ }
+
+ .section-main {
+ margin: 0;
+ display: flex;
}
.section-main .main-content {
border-radius: 0;
padding: 0;
+ flex: 1;
+ height: auto;
h1 {
width: auto;
@@ -1088,6 +1104,7 @@ html {
flex-grow: 0;
padding-inline: 110px;
margin-block: auto;
+ padding-block: 40px;
@media only screen and (width <= 800px) {
padding-block: 20px;
@@ -1285,6 +1302,9 @@ html {
.section-main {
height: 75%;
+ flex-grow: 1;
+ margin: 0;
+ display: flex;
&[hide-secondary-section='responsive'] {
height: 100%;
@@ -1292,6 +1312,7 @@ html {
.main-content {
border-radius: 0;
padding: 0;
+ height: auto;
}
}
}
@@ -1311,6 +1332,8 @@ html {
.section-secondary {
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
+ height: 250px;
+
.hero-image {
img {
width: 25%;
@@ -1321,6 +1344,8 @@ html {
}
@media only screen and (width <= 800px) {
+ height: 100%;
+
@include narrow-split-fullscreen;
}
@@ -1577,38 +1602,38 @@ html {
@include narrow-split;
}
- @media only screen and (height <= 650px) {
- // Hide the "Sign in" button on the welcome screen when it would
- // otherwise overlap the screen. We'd reposition it, but then it would
- // overlap the dismiss button. We may change the alignment so they don't
- // overlap in a future revision.
- @media (800px <= width <= 990px) {
- &:where(:not([fullscreen])) {
+ &:where(:not([fullscreen])) {
+ @media only screen and (height <= 650px) {
+ // Hide the "Sign in" button on the welcome screen when it would
+ // otherwise overlap the screen. We'd reposition it, but then it would
+ // overlap the dismiss button. We may change the alignment so they don't
+ // overlap in a future revision.
+ @media (800px <= width <= 990px) {
.section-main .secondary-cta.top {
display: none;
}
}
- }
- // Reposition the "Sign in" button on the welcome screen to move inside
- // the screen when it would otherwise overlap the screen.
- @mixin extra-narrow-secondary-cta {
- .section-main .secondary-buttons-top-container {
- position: absolute;
- padding: 0;
- top: 0;
- inset-inline-end: 0;
+ // Reposition the "Sign in" button on the welcome screen to move inside
+ // the screen when it would otherwise overlap the screen.
+ @mixin extra-narrow-secondary-cta {
+ .section-main .secondary-buttons-top-container {
+ position: absolute;
+ padding: 0;
+ top: 0;
+ inset-inline-end: 0;
+ }
}
- }
-
- @media (width <= 620px) {
- @include extra-narrow-secondary-cta;
- }
- [narrow] & {
@media (width <= 620px) {
@include extra-narrow-secondary-cta;
}
+
+ [narrow] & {
+ @media (width <= 620px) {
+ @include extra-narrow-secondary-cta;
+ }
+ }
}
}
}
@@ -2517,6 +2542,7 @@ html {
inset-inline-end: 10px;
width: auto;
height: auto;
+ z-index: 2;
.secondary-cta.top {
position: relative;
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -1122,6 +1122,12 @@ html {
.onboardingContainer:dir(rtl) {
transform: rotateY(180deg);
}
+.onboardingContainer:has([pos=split][fullscreen]) {
+ min-height: 100vh;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+}
.onboardingContainer .section-main {
display: flex;
flex-direction: column;
@@ -1885,14 +1891,23 @@ html {
margin: auto;
margin-inline-start: 0;
}
+.onboardingContainer .screen[pos=split][fullscreen] {
+ min-height: 100vh;
+}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary,
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
width: 50%;
- height: 100%;
+ height: auto;
+}
+.onboardingContainer .screen[pos=split][fullscreen] .section-main {
+ margin: 0;
+ display: flex;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content {
border-radius: 0;
padding: 0;
+ flex: 1;
+ height: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content h1 {
width: auto;
@@ -1902,6 +1917,7 @@ html {
flex-grow: 0;
padding-inline: 110px;
margin-block: auto;
+ padding-block: 40px;
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
@@ -2072,12 +2088,18 @@ html {
margin: auto;
}
@media only screen and (width <= 800px) {
+ .onboardingContainer .screen[pos=split][fullscreen] {
+ height: 100%;
+ }
.onboardingContainer .screen[pos=split][fullscreen] .section-main,
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
width: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
height: 75%;
+ flex-grow: 1;
+ margin: 0;
+ display: flex;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
height: 100%;
@@ -2085,6 +2107,7 @@ html {
.onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
border-radius: 0;
padding: 0;
+ height: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
inset-block-end: 0;
@@ -2096,6 +2119,7 @@ html {
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
+ height: 250px;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
width: 25%;
@@ -2108,6 +2132,9 @@ html {
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main {
height: 75%;
+ flex-grow: 1;
+ margin: 0;
+ display: flex;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
height: 100%;
@@ -2115,6 +2142,7 @@ html {
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
border-radius: 0;
padding: 0;
+ height: auto;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
inset-block-end: 0;
@@ -2126,6 +2154,7 @@ html {
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
+ height: 250px;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
width: 25%;
@@ -2511,7 +2540,7 @@ html {
}
}
@media only screen and (height <= 650px) and (width <= 620px) {
- .onboardingContainer .screen[pos=split] .section-main .secondary-buttons-top-container {
+ .onboardingContainer .screen[pos=split]:where(:not([fullscreen])) .section-main .secondary-buttons-top-container {
position: absolute;
padding: 0;
top: 0;
@@ -2519,7 +2548,7 @@ html {
}
}
@media only screen and (height <= 650px) and (width <= 620px) {
- [narrow] .onboardingContainer .screen[pos=split] .section-main .secondary-buttons-top-container {
+ [narrow] .onboardingContainer .screen[pos=split]:where(:not([fullscreen])) .section-main .secondary-buttons-top-container {
position: absolute;
padding: 0;
top: 0;
@@ -3282,6 +3311,7 @@ html {
inset-inline-end: 10px;
width: auto;
height: auto;
+ z-index: 2;
}
.onboardingContainer .secondary-buttons-top-container .secondary-cta.top {
position: relative;
diff --git a/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js b/browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js
@@ -1017,3 +1017,94 @@ add_task(async function test_secondary_button_top_configuration() {
await doExperimentCleanup();
browser.closeBrowser();
});
+
+/**
+ * Test rendering a fullscreen split screen that supports lengthy content
+ */
+add_task(async function test_aboutwelcome_fullscreen_split_layout_styles() {
+ let screens = [
+ makeTestContent("TEST_FULLSCREEN_SPLIT", {
+ fullscreen: true,
+ position: "split",
+ background:
+ "var(--mr-secondary-position) var(--mr-screen-background-color)",
+ secondary_button_top: [
+ {
+ label: {
+ raw: "Sign in",
+ },
+ action: {
+ navigate: true,
+ },
+ },
+ ],
+ }),
+ ];
+
+ let doExperimentCleanup = await NimbusTestUtils.enrollWithFeatureConfig({
+ featureId: "aboutwelcome",
+ value: { enabled: true, screens },
+ });
+
+ let browser = await openAboutWelcome();
+
+ await test_screen_content(
+ browser,
+ "render fullscreen split screen",
+ // Expected selectors:
+ ["main.TEST_FULLSCREEN_SPLIT[pos='split'][fullscreen]"]
+ );
+
+ await test_element_styles(
+ browser,
+ ".onboardingContainer",
+ // Expected styles:
+ {
+ display: "flex",
+ flexDirection: "column",
+ }
+ );
+
+ await test_element_styles(
+ browser,
+ ".section-main",
+ // Expected styles:
+ {
+ margin: "0px",
+ display: "flex",
+ }
+ );
+
+ await test_element_styles(
+ browser,
+ ".section-main .main-content",
+ // Expected styles:
+ {
+ flex: "1 1 0%",
+ borderRadius: "0px",
+ padding: "0px",
+ }
+ );
+
+ await test_element_styles(
+ browser,
+ ".section-main .main-content .main-content-inner",
+ // Expected styles:
+ {
+ paddingTop: "40px",
+ paddingBottom: "40px",
+ }
+ );
+
+ await test_element_styles(
+ browser,
+ ".secondary-buttons-top-container",
+ // Expected styles:
+ {
+ zIndex: "2",
+ }
+ );
+
+ await doExperimentCleanup();
+ browser.closeBrowser();
+});
