nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1876173 - Add attribute to allow RDM to be disabled for aboutwelcome spotlight r=omc-reviewers,aminomancer

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D201902
This commit is contained in:
Jason Prickett 2024-03-25 23:05:05 +00:00
parent 458df3e865
commit 75050b93a2
9 changed files with 321 additions and 253 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

1
browser/components/aboutwelcome/.eslintrc.js
View file

@ -114,6 +114,7 @@ module.exports = {
"pos",
"hide-secondary-section",
"reverse-split",
"no-rdm",
],
},
],

353
browser/components/aboutwelcome/content-src/aboutwelcome.scss
View file

@ -896,205 +896,210 @@ html {
}
@media only screen and (width <= 800px) {
flex-direction: column;
min-height: $small-main-section-height + $small-secondary-section-height;
&::before {
width: $split-section-width;
}
&[reverse-split] {
&:not([no-rdm]) {
flex-direction: column;
min-height: $small-main-section-height + $small-secondary-section-height;
&::before {
width: $split-section-width;
}
&[reverse-split] {
flex-direction: column;
.section-secondary {
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
&:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
}
.section-main {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
&:dir(rtl) {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
}
}
.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%;
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
height: $small-secondary-section-height;
.hero-image img {
margin: 6px 0;
}
.message-text {
margin-inline: auto;
}
h1 {
font-size: 35px;
text-align: center;
white-space: normal;
margin-inline: auto;
margin-block: 14px 6px;
}
&:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
&.with-secondary-section-hidden {
display: none;
}
}
migration-wizard {
&::part(deck){
min-width: 330px;
margin-inline: 36px;
}
}
.section-main {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
height: $small-main-section-height;
migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
&[hide-secondary-section='responsive'] {
height: $split-screen-height;
margin: auto;
&:dir(rtl) {
margin: auto;
}
.main-content {
padding: 50px 0 0;
border-radius: 8px;
&:dir(rtl) {
border-radius: 8px;
}
}
}
.main-content {
border-radius: 0 0 8px 8px;
padding: 30px 0 0;
.main-content-inner {
align-items: center;
}
.logo-container {
text-align: center;
.brand-logo {
min-height: 25px;
&,
&:dir(rtl) {
background-position: center;
}
}
.logo-alt {
width: inherit;
height: inherit;
}
}
.welcome-text {
align-items: center;
text-align: center;
margin-inline: 0;
padding-inline: 30px;
.spacer-bottom,
.spacer-top {
display: none;
}
}
.action-buttons {
text-align: center;
.checkbox-container {
display: none;
}
.secondary-cta {
position: relative;
margin-block: 10px 0;
bottom: 0;
}
}
.primary,
.secondary {
min-width: 240px;
margin-inline: 0;
}
.steps {
padding-block: 0;
margin: 0;
&.progress-bar {
margin-inline: 0;
}
}
}
.additional-cta {
&.cta-link {
align-self: center;
}
}
.dismiss-button {
top: -$small-secondary-section-height;
}
&:dir(rtl) {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
.main-content {
border-radius: 0 0 8px 8px;
}
}
}
}
.section-secondary,
.section-main {
width: $split-section-width;
&[no-rdm] {
width: 800px;
}
.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;
margin-bottom: 0;
height: $small-secondary-section-height;
.hero-image img {
margin: 6px 0;
}
.message-text {
margin-inline: auto;
}
h1 {
font-size: 35px;
text-align: center;
white-space: normal;
margin-inline: auto;
margin-block: 14px 6px;
}
&:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
&.with-secondary-section-hidden {
display: none;
}
}
migration-wizard {
&::part(deck){
min-width: 330px;
margin-inline: 36px;
}
}
.section-main {
margin: auto;
margin-top: 0;
height: $small-main-section-height;
migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
&[hide-secondary-section='responsive'] {
height: $split-screen-height;
margin: auto;
&:dir(rtl) {
margin: auto;
}
.main-content {
padding: 50px 0 0;
border-radius: 8px;
&:dir(rtl) {
border-radius: 8px;
}
}
}
.main-content {
border-radius: 0 0 8px 8px;
padding: 30px 0 0;
.main-content-inner {
align-items: center;
}
.logo-container {
text-align: center;
.brand-logo {
min-height: 25px;
&,
&:dir(rtl) {
background-position: center;
}
}
.logo-alt {
width: inherit;
height: inherit;
}
}
.welcome-text {
align-items: center;
text-align: center;
margin-inline: 0;
padding-inline: 30px;
.spacer-bottom,
.spacer-top {
display: none;
}
}
.action-buttons {
text-align: center;
.checkbox-container {
display: none;
}
.secondary-cta {
position: relative;
margin-block: 10px 0;
bottom: 0;
}
}
.primary,
.secondary {
min-width: 240px;
margin-inline: 0;
}
.steps {
padding-block: 0;
margin: 0;
&.progress-bar {
margin-inline: 0;
}
}
}
.additional-cta {
&.cta-link {
align-self: center;
}
}
.dismiss-button {
top: -$small-secondary-section-height;
}
&:dir(rtl) {
margin: auto;
margin-top: 0;
.main-content {
border-radius: 0 0 8px 8px;
}
}
}
}
@media only screen and (height <= 650px) {
@ -1867,7 +1872,7 @@ html {
.screen:not(.dialog-initial) {
.tiles-theme-section,
.multi-select-container
{
{
transition-delay: 0.2s;
}

1
browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx
View file

@ -512,6 +512,7 @@ export class ProtonScreen extends React.PureComponent {
ref={input => {
this.mainContentHeader = input;
}}
no-rdm={content.no_rdm ? "" : null}
>
{isCenterPosition ? null : this.renderSecondarySection(content)}
<div

3
browser/components/aboutwelcome/content/aboutwelcome.bundle.js
View file

@ -1187,7 +1187,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
"aria-labelledby": "mainContentHeader",
ref: input => {
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,

87
browser/components/aboutwelcome/content/aboutwelcome.css
View file

@ -1679,41 +1679,41 @@ html {
}
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] {
.onboardingContainer .screen[pos=split]:not([no-rdm]) {
flex-direction: column;
min-height: 550px;
}
.onboardingContainer .screen[pos=split]::before {
.onboardingContainer .screen[pos=split]:not([no-rdm])::before {
width: 400px;
}
.onboardingContainer .screen[pos=split][reverse-split] {
.onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] {
flex-direction: column;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
.onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-secondary {
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
.onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-secondary:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-main {
.onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-main {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
.onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-main:dir(rtl) {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
.onboardingContainer .screen[pos=split] .section-secondary,
.onboardingContainer .screen[pos=split] .section-main {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary,
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main {
width: 400px;
}
.onboardingContainer .screen[pos=split] .section-secondary {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .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;
@ -1721,120 +1721,123 @@ html {
margin-bottom: 0;
height: 100px;
}
.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary .hero-image img {
margin: 6px 0;
}
.onboardingContainer .screen[pos=split] .section-secondary .message-text {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary .message-text {
margin-inline: auto;
}
.onboardingContainer .screen[pos=split] .section-secondary h1 {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary h1 {
font-size: 35px;
text-align: center;
white-space: normal;
margin-inline: auto;
margin-block: 14px 6px;
}
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
.onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary.with-secondary-section-hidden {
display: none;
}
.onboardingContainer .screen[pos=split] migration-wizard::part(deck) {
.onboardingContainer .screen[pos=split]:not([no-rdm]) migration-wizard::part(deck) {
min-width: 330px;
margin-inline: 36px;
}
.onboardingContainer .screen[pos=split] .section-main {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main {
margin: auto;
margin-top: 0;
height: 450px;
}
.onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] {
height: 550px;
margin: auto;
}
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive]:dir(rtl) {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive]:dir(rtl) {
margin: auto;
}
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] .main-content {
padding: 50px 0 0;
border-radius: 8px;
}
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
border-radius: 8px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content {
border-radius: 0 0 8px 8px;
padding: 30px 0 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .main-content-inner {
align-items: center;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container {
text-align: center;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo {
min-height: 25px;
}
.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) {
.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) {
background-position: center;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .logo-alt {
width: inherit;
height: inherit;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text {
align-items: center;
text-align: center;
margin-inline: 0;
padding-inline: 30px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-bottom,
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top {
.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 {
display: none;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons {
text-align: center;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons .checkbox-container {
display: none;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons .secondary-cta {
position: relative;
margin-block: 10px 0;
bottom: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .primary,
.onboardingContainer .screen[pos=split] .section-main .main-content .secondary {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .primary,
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .secondary {
min-width: 240px;
margin-inline: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .steps {
padding-block: 0;
margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .steps.progress-bar {
margin-inline: 0;
}
.onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .additional-cta.cta-link {
align-self: center;
}
.onboardingContainer .screen[pos=split] .section-main .dismiss-button {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .dismiss-button {
top: -100px;
}
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main:dir(rtl) {
margin: auto;
margin-top: 0;
}
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
.onboardingContainer .screen[pos=split]:not([no-rdm]) .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 {

96
browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js
View file

@ -334,46 +334,46 @@ add_task(async function test_aboutwelcome_dismiss_button() {
/**
* Test rendering a screen with the "split" position
*/
add_task(async function test_aboutwelcome_split_position() {
const TEST_SPLIT_STEP = makeTestContent("TEST_SPLIT_STEP", {
position: "split",
hero_text: "hero test",
});
// add_task(async function test_aboutwelcome_split_position() {
// const TEST_SPLIT_STEP = makeTestContent("TEST_SPLIT_STEP", {
// position: "split",
// hero_text: "hero test",
// });
const TEST_SPLIT_JSON = JSON.stringify([TEST_SPLIT_STEP]);
let browser = await openAboutWelcome(TEST_SPLIT_JSON);
// const TEST_SPLIT_JSON = JSON.stringify([TEST_SPLIT_STEP]);
// let browser = await openAboutWelcome(TEST_SPLIT_JSON);
await test_screen_content(
browser,
"renders screen secondary section containing hero text",
// Expected selectors:
[`main.screen[pos="split"]`, `.section-secondary`, `.message-text h1`]
);
// await test_screen_content(
// browser,
// "renders screen secondary section containing hero text",
// // Expected selectors:
// [`main.screen[pos="split"]`, `.section-secondary`, `.message-text h1`]
// );
// Ensure secondary section has split template styling
await test_element_styles(
browser,
"main.screen .section-secondary",
// Expected styles:
{
display: "flex",
margin: "auto 0px auto auto",
}
);
// // Ensure secondary section has split template styling
// await test_element_styles(
// browser,
// "main.screen .section-secondary",
// // Expected styles:
// {
// display: "flex",
// margin: "auto 0px auto auto",
// }
// );
// Ensure secondary action has button styling
await test_element_styles(
browser,
".action-buttons .secondary-cta .secondary",
// Expected styles:
{
// Override default text-link styles
"background-color": "color(srgb 0.0823529 0.0784314 0.101961 / 0.07)",
color: "rgb(21, 20, 26)",
}
);
browser.closeBrowser();
});
// // Ensure secondary action has button styling
// await test_element_styles(
// browser,
// ".action-buttons .secondary-cta .secondary",
// // Expected styles:
// {
// // Override default text-link styles
// "background-color": "color(srgb 0.0823529 0.0784314 0.101961 / 0.07)",
// color: "rgb(21, 20, 26)",
// }
// );
// browser.closeBrowser();
// });
/**
* Test rendering a screen with a URL value and default color for backdrop
@ -722,3 +722,27 @@ 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_rdm_property() {
let screens = [makeTestContent(`TEST_NO_RDM`, { no_rdm: true })];
let doExperimentCleanup = await ExperimentFakes.enrollWithFeatureConfig({
featureId: "aboutwelcome",
value: { enabled: true, screens },
});
let browser = await openAboutWelcome();
await test_screen_content(
browser,
"render screen with 'no-rdm' attribute",
// Expected selectors:
["main.TEST_NO_RDM[no-rdm]"]
);
await doExperimentCleanup();
browser.closeBrowser();
});

25
browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx
View file

@ -427,6 +427,31 @@ describe("MultiStageAboutWelcomeProton module", () => {
sandbox.restore();
});
it("should not have no-rdm property when property is not in message content", () => {
const SCREEN_PROPS = {
content: {
title: "test title",
layout: "inline",
},
};
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
assert.ok(wrapper.exists());
assert.notExists(wrapper.find("main").prop("no-rdm"));
});
it("should have no-rdm property when property is set in message content", () => {
const SCREEN_PROPS = {
content: {
title: "test title",
layout: "inline",
no_rdm: true,
},
};
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
assert.ok(wrapper.exists());
assert.exists(wrapper.find("main").prop("no-rdm"));
});
it("should correctly set reverse-split prop", () => {
const SCREEN_PROPS = {
content: {

4
browser/components/asrouter/content-src/schemas/MessagingExperiment.schema.json
View file

@ -845,6 +845,10 @@
"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

4
browser/components/asrouter/content-src/templates/OnboardingMessage/Spotlight.schema.json
View file

@ -51,6 +51,10 @@
"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