Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-10 03:45:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1730571 - Add Thank You page to about:welcome flow r=pdahiya,fluent-reviewers,flod

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D126406
This commit is contained in:
Emily McMinn 2021-10-01 15:06:27 +00:00
parent cf5b13f1b0
commit 1003079ad2
9 changed files with 181 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
View File

@ -413,6 +413,7 @@ const MultiStageAboutWelcome = props => {
id: screen.id,
totalNumberOfScreens: props.screens.length,
order: order,
autoClose: screen.autoClose,
content: screen.content,
navigate: handleTransition,
topSites: topSites,
@ -543,6 +544,7 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
content: this.props.content,
id: this.props.id,
order: this.props.order,
autoClose: this.props.autoClose,
activeTheme: this.props.activeTheme,
totalNumberOfScreens: this.props.totalNumberOfScreens - 1,
handleAction: this.handleAction
@ -752,13 +754,26 @@ class MultiStageProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.
render() {
const {
autoClose,
content,
totalNumberOfScreens: total
} = this.props;
const isWelcomeScreen = this.props.order === 0; // Assign proton screen style 'screen-1' or 'screen-2' by checking
const isWelcomeScreen = this.props.order === 0;
const isLastScreen = this.props.order === total;
const autoCloseTime = 20000; // Assign proton screen style 'screen-1' or 'screen-2' by checking
// if screen order is even or odd.
const screenClassName = isWelcomeScreen ? "screen-0" : `${this.props.order === 1 ? `dialog-initial` : ``} ${this.props.order === total ? `dialog-last` : ``} screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
if (this.props.order === total && autoClose) {
let currentURL = window.location.href;
setTimeout(function () {
if (window.location.href === currentURL) {
window.location.href = "about:home";
}
}, autoCloseTime);
}
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("main", {
className: `screen ${this.props.id} ${screenClassName}`
}, isWelcomeScreen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
@ -795,10 +810,12 @@ class MultiStageProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.
className: "main-content"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: `brand-logo ${content.hideLogo ? "hide" : ""}`
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
}), isLastScreen && content.hasFancyTitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "confetti"
}) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "main-content-inner"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "welcome-text"
className: `welcome-text ${content.hasFancyTitle ? "fancy-headings" : ""}`
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
text: content.title
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {

47
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
View File

@ -484,6 +484,30 @@ body[lwt-newtab-brighttext] {
.onboardingContainer .noodle:dir(rtl) {
scale: -1 1;
}
.onboardingContainer .confetti {
display: block;
margin: auto;
background-image: url("chrome://activity-stream/content/data/content/assets/confetti.svg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 438px;
width: 504px;
position: absolute;
z-index: -1;
}
@media (max-width: 866px) {
.onboardingContainer .confetti {
height: 400px;
width: 450px;
}
}
@media (max-width: 610px) {
.onboardingContainer .confetti {
height: 370px;
width: 420px;
}
}
.onboardingContainer .outline-L {
background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg");
}
@ -750,6 +774,29 @@ body[lwt-newtab-brighttext] {
transform: translate(160%, 130%);
background: #E7258C;
}
.onboardingContainer .fancy-headings h1 {
font-size: 36px;
line-height: unset;
width: 410px;
padding-bottom: 16px;
position: relative;
text-align: center;
background: linear-gradient(70deg, rgba(220, 171, 32, 0) 5%, #2A613A 22%, #D198A1 41%, #844D9E 59%, #E27B50 78%, rgba(220, 171, 32, 0) 95%), linear-gradient(#dcab20, #dcab20);
background-size: 400% auto;
color: #000;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 50s linear infinite;
}
@keyframes shine {
to {
background-position: 400% center;
}
}
.onboardingContainer .fancy-headings h2 {
margin: 10px 30px 0;
}
.onboardingContainer.transition-in .noodle {
opacity: 0;
rotate: var(--rotate);

20
browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm
View File

@ -311,6 +311,26 @@ const DEFAULT_WELCOME_CONTENT = {
},
},
},
{
id: "AW_THANKS",
order: 4,
autoClose: true,
content: {
hasFancyTitle: true,
title: { string_id: "mr2-onboarding-thank-you-header" },
subtitle: {
string_id: "mr2-onboarding-thank-you-text",
},
primary_button: {
label: {
string_id: "mr2-onboarding-start-browsing-button-label",
},
action: {
navigate: true,
},
},
},
},
],
};

58
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
View File

@ -548,6 +548,29 @@ body {
}
}
.confetti {
display: block;
margin: auto;
background-image: url('chrome://activity-stream/content/data/content/assets/confetti.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 438px;
width: 504px;
position: absolute;
z-index: -1;
@media (max-width: $break-point-large) {
height: 400px;
width: 450px;
}
@media (max-width: $break-point-medium) {
height: 370px;
width: 420px;
}
}
.outline-L {
background-image: url('chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg');
}
@ -854,6 +877,41 @@ body {
}
}
.fancy-headings {
h1 {
font-size: 36px;
line-height: unset;
width: 410px;
padding-bottom: 16px;
position: relative;
text-align: center;
background: linear-gradient(70deg,
rgba(220, 171, 32, 0) 5%,
#2A613A 22%,
#D198A1 41%,
#844D9E 59%,
#E27B50 78%,
rgba(220, 171, 32, 0) 95%
), linear-gradient(rgba(220, 171, 32, 100), rgba(220, 171, 32, 100));
background-size: 400% auto;
color: #000;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 50s linear infinite;
}
@keyframes shine {
to {
background-position: 400% center;
}
}
h2 {
margin: 10px 30px 0;
}
}
&.transition-in {
.noodle {
opacity: 0;

2
browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
View File

@ -154,6 +154,7 @@ export const MultiStageAboutWelcome = props => {
id={screen.id}
totalNumberOfScreens={props.screens.length}
order={order}
autoClose={screen.autoClose}
content={screen.content}
navigate={handleTransition}
topSites={topSites}
@ -287,6 +288,7 @@ export class WelcomeScreen extends React.PureComponent {
content={this.props.content}
id={this.props.id}
order={this.props.order}
autoClose={this.props.autoClose}
activeTheme={this.props.activeTheme}
totalNumberOfScreens={this.props.totalNumberOfScreens - 1}
handleAction={this.handleAction}

22
browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
View File

@ -14,8 +14,10 @@ export class MultiStageProtonScreen extends React.PureComponent {
}
render() {
const { content, totalNumberOfScreens: total } = this.props;
const { autoClose, content, totalNumberOfScreens: total } = this.props;
const isWelcomeScreen = this.props.order === 0;
const isLastScreen = this.props.order === total;
const autoCloseTime = 20000;
// Assign proton screen style 'screen-1' or 'screen-2' by checking
// if screen order is even or odd.
const screenClassName = isWelcomeScreen
@ -24,6 +26,15 @@ export class MultiStageProtonScreen extends React.PureComponent {
this.props.order === total ? `dialog-last` : ``
} screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
if (this.props.order === total && autoClose) {
let currentURL = window.location.href;
setTimeout(function() {
if (window.location.href === currentURL) {
window.location.href = "about:home";
}
}, autoCloseTime);
}
return (
<main className={`screen ${this.props.id} ${screenClassName}`}>
{isWelcomeScreen ? (
@ -57,8 +68,15 @@ export class MultiStageProtonScreen extends React.PureComponent {
<div className={`noodle yellow-circle`} />
<div className="main-content">
<div className={`brand-logo ${content.hideLogo ? "hide" : ""}`} />
{isLastScreen && content.hasFancyTitle ? (
<div className="confetti" />
) : null}
<div className="main-content-inner">
<div className="welcome-text">
<div
className={`welcome-text ${
content.hasFancyTitle ? "fancy-headings" : ""
}`}
>
<Localized text={content.title}>
<h1
tabIndex="-1"

4
browser/components/newtab/data/content/assets/confetti.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

8
browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx
View File

@ -67,28 +67,28 @@ describe("MultiStageAboutWelcomeProton module", () => {
);
assert.propertyVal(data.screens[0], "id", "AW_PIN_FIREFOX");
assert.propertyVal(data.screens[1], "id", "AW_SET_DEFAULT");
assert.lengthOf(data.screens, 4);
assert.lengthOf(data.screens, 5);
});
it("should keep 'pin' and remove 'default' if already default", async () => {
const data = await prepConfig({ needPin: true });
assert.propertyVal(data.screens[0], "id", "AW_PIN_FIREFOX");
assert.propertyVal(data.screens[1], "id", "AW_IMPORT_SETTINGS");
assert.lengthOf(data.screens, 3);
assert.lengthOf(data.screens, 4);
});
it("should switch to 'default' if already pinned", async () => {
const data = await prepConfig({ needDefault: true });
assert.propertyVal(data.screens[0], "id", "AW_ONLY_DEFAULT");
assert.propertyVal(data.screens[1], "id", "AW_IMPORT_SETTINGS");
assert.lengthOf(data.screens, 3);
assert.lengthOf(data.screens, 4);
});
it("should switch to 'start' if already pinned and default", async () => {
const data = await prepConfig();
assert.propertyVal(data.screens[0], "id", "AW_GET_STARTED");
assert.propertyVal(data.screens[1], "id", "AW_IMPORT_SETTINGS");
assert.lengthOf(data.screens, 3);
assert.lengthOf(data.screens, 4);
});
it("should have a FxA button", async () => {
const data = await prepConfig();

6
browser/locales/en-US/browser/newtab/onboarding.ftl
View File

@ -212,3 +212,9 @@ mr2-onboarding-default-theme-tooltip =
# Selector description for default themes
mr2-onboarding-default-theme-description =
.aria-description = Explore default themes.
## Strings for Thank You page
mr2-onboarding-thank-you-header = Thank you for choosing us
mr2-onboarding-thank-you-text = { -brand-short-name } is an independent browser backed by a non-profit. Together, we’re making the web safer, healthier, and more private.
mr2-onboarding-start-browsing-button-label = Start browsing