mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 11:25:00 +00:00
Bug 1741923 - Add/update template to show large photograph/background image r=Mardak
Differential Revision: https://phabricator.services.mozilla.com/D139064
This commit is contained in:
Meg Viar
parent
2b026c26c5
commit
3d74d61179
@ -9,7 +9,6 @@
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src resource: chrome:; img-src https://www.mozilla.org blob:; object-src 'none'">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<link rel="stylesheet" type="text/css" href="chrome://global/skin/in-content/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/skin/spotlight.css">
|
||||
<link rel="localization" href="branding/brand.ftl">
|
||||
<link rel="localization" href="browser/branding/brandings.ftl">
|
||||
<link rel="localization" href="browser/newtab/asrouter.ftl">
|
||||
|
||||
@ -16,12 +16,21 @@ function cloneTemplate(id) {
|
||||
return document.getElementById(id).content.cloneNode(true);
|
||||
}
|
||||
|
||||
function addStylesheet(href) {
|
||||
const link = document.head.appendChild(document.createElement("link"));
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render content based on Spotlight-specific templates.
|
||||
*/
|
||||
async function renderSpotlight(ready) {
|
||||
const { template, logo = {}, body, extra = {} } = CONFIG;
|
||||
|
||||
// Add Spotlight styles
|
||||
addStylesheet("chrome://browser/skin/spotlight.css");
|
||||
|
||||
// Apply desired message template.
|
||||
const clone = cloneTemplate(template);
|
||||
document.body.classList.add(template);
|
||||
@ -124,9 +133,10 @@ function renderMultistage(ready) {
|
||||
};
|
||||
|
||||
// Update styling to be compatible with about:welcome.
|
||||
const link = document.head.appendChild(document.createElement("link"));
|
||||
link.rel = "stylesheet";
|
||||
link.href = "chrome://activity-stream/content/aboutwelcome/aboutwelcome.css";
|
||||
addStylesheet(
|
||||
"chrome://activity-stream/content/aboutwelcome/aboutwelcome.css"
|
||||
);
|
||||
|
||||
document.body.classList.add("onboardingContainer");
|
||||
document.body.id = "root";
|
||||
|
||||
|
||||
@ -736,7 +736,6 @@ const DEFAULT_RTAMO_CONTENT = {
|
||||
string_id: "mr1-onboarding-welcome-image-caption"
|
||||
}
|
||||
},
|
||||
hide_logo: true,
|
||||
backdrop: "#212121 url(chrome://activity-stream/content/data/content/assets/proton-bkg.avif) center/cover no-repeat fixed",
|
||||
primary_button: {
|
||||
label: {
|
||||
@ -843,24 +842,19 @@ class ProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComp
|
||||
this.mainContentHeader.focus();
|
||||
}
|
||||
|
||||
getLogoStyle(content) {
|
||||
if (!content.hide_logo) {
|
||||
const useDefaultLogo = !content.logo;
|
||||
const logoUrl = useDefaultLogo ? "chrome://branding/content/about-logo.svg" : content.logo.imageURL;
|
||||
const logoSize = useDefaultLogo ? "80px" : content.logo.size;
|
||||
return {
|
||||
background: `url('${logoUrl}') top center / ${logoSize} no-repeat`,
|
||||
height: logoSize,
|
||||
padding: `${logoSize} 0 10px`
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
getLogoStyle({
|
||||
imageURL = "chrome://branding/content/about-logo.svg",
|
||||
height = "80px"
|
||||
}) {
|
||||
return {
|
||||
background: imageURL === "" ? null : `url(${imageURL}) no-repeat center / contain`,
|
||||
height
|
||||
};
|
||||
}
|
||||
|
||||
getScreenClassName(isCornerPosition, isFirstCenteredScreen, isLastCenteredScreen) {
|
||||
const screenClass = isCornerPosition ? "" : `screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
|
||||
return `${isFirstCenteredScreen ? `dialog-initial` : ``} ${isLastCenteredScreen ? `dialog-last` : ``} ${screenClass}`;
|
||||
getScreenClassName(isCornerPosition, isFirstCenteredScreen, isLastCenteredScreen, includeNoodles) {
|
||||
const screenClass = isCornerPosition ? "corner" : `screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
|
||||
return `${isFirstCenteredScreen ? `dialog-initial` : ``} ${isLastCenteredScreen ? `dialog-last` : ``} ${includeNoodles ? `with-noodles` : ``} ${screenClass}`;
|
||||
}
|
||||
|
||||
renderContentTiles() {
|
||||
@ -916,12 +910,13 @@ class ProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComp
|
||||
} = this.props;
|
||||
const includeNoodles = content.has_noodles;
|
||||
const isCornerPosition = content.position === "corner";
|
||||
const hideStepsIndicator = autoAdvance || isCornerPosition; // Assign proton screen style 'screen-1' or 'screen-2' by checking
|
||||
const hideStepsIndicator = autoAdvance || isCornerPosition;
|
||||
const textColorClass = content.text_color ? `${content.text_color}-text` : ""; // Assign proton screen style 'screen-1' or 'screen-2' by checking
|
||||
// if screen order is even or odd.
|
||||
|
||||
const screenClassName = this.getScreenClassName(isCornerPosition, isFirstCenteredScreen, isLastCenteredScreen);
|
||||
const screenClassName = this.getScreenClassName(isCornerPosition, isFirstCenteredScreen, isLastCenteredScreen, includeNoodles);
|
||||
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("main", {
|
||||
className: `screen ${this.props.id || ""} ${screenClassName}`,
|
||||
className: `screen ${this.props.id || ""} ${screenClassName} ${textColorClass}`,
|
||||
role: "dialog",
|
||||
pos: content.position || "center",
|
||||
tabIndex: "-1",
|
||||
@ -944,29 +939,30 @@ class ProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComp
|
||||
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
|
||||
className: "attrib-text"
|
||||
})) : null) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `section-main ${includeNoodles ? "with-noodles" : ""}`
|
||||
className: "section-main"
|
||||
}, content.secondary_button_top ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_4__["SecondaryCTA"], {
|
||||
content: content,
|
||||
handleAction: this.props.handleAction,
|
||||
position: "top"
|
||||
}) : null, this.renderNoodles(includeNoodles, isCornerPosition), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`
|
||||
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `brand-logo ${content.hide_logo ? "hide" : ""}`,
|
||||
style: this.getLogoStyle(content)
|
||||
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`,
|
||||
style: content.background ? {
|
||||
background: content.background
|
||||
} : {}
|
||||
}, content.logo ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `brand-logo`,
|
||||
style: this.getLogoStyle(content.logo)
|
||||
}) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `${isRtamo ? "rtamo-icon" : "hide-rtamo-icon"}`
|
||||
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {
|
||||
className: `${isTheme ? "rtamo-theme-icon" : ""}`,
|
||||
src: this.props.iconURL,
|
||||
role: "presentation",
|
||||
alt: ""
|
||||
})), content.has_fancy_title ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "confetti"
|
||||
}) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
})), /*#__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 ${content.has_fancy_title ? "fancy-headings" : ""}`
|
||||
className: `welcome-text ${content.title_style || ""}`
|
||||
}, /*#__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", {
|
||||
|
||||
@ -49,6 +49,7 @@ body[lwt-newtab-brighttext] {
|
||||
|
||||
:root[dialogroot] {
|
||||
background-color: transparent;
|
||||
min-width: 504px;
|
||||
}
|
||||
:root[dialogroot] body {
|
||||
padding: 0;
|
||||
@ -64,7 +65,6 @@ body[lwt-newtab-brighttext] {
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
height: 100vh;
|
||||
--main-content-min-height: 271px;
|
||||
--transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
|
||||
}
|
||||
@media (prefers-contrast: more) {
|
||||
@ -99,10 +99,8 @@ body[lwt-newtab-brighttext] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.onboardingContainer .section-main.with-noodles {
|
||||
height: 503px;
|
||||
width: 504px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.onboardingContainer .main-content {
|
||||
background-color: var(--in-content-page-background);
|
||||
@ -133,13 +131,41 @@ body[lwt-newtab-brighttext] {
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.onboardingContainer .screen.light-text {
|
||||
--in-content-page-color: rgb(251, 251, 254);
|
||||
--in-content-primary-button-text-color: rgb(43, 42, 51);
|
||||
--in-content-primary-button-text-color-hover: rgb(43, 42, 51);
|
||||
--in-content-primary-button-background: rgb(0, 221, 255);
|
||||
--in-content-primary-button-background-hover: rgb(128, 235, 255);
|
||||
--in-content-primary-button-background-active: rgb(170, 242, 255);
|
||||
--in-content-link-color: var(--in-content-primary-button-background);
|
||||
--in-content-link-color-hover: var(--in-content-primary-button-background-hover);
|
||||
--in-content-link-color-active: var(--in-content-primary-button-background-active);
|
||||
--in-content-link-color-visited: var(--in-content-link-color);
|
||||
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
|
||||
--in-content-button-text-color: var(--in-content-page-color);
|
||||
}
|
||||
.onboardingContainer .screen.dark-text {
|
||||
--in-content-page-color: rgb(21, 20, 26);
|
||||
--in-content-primary-button-text-color: rgb(251, 251, 254);
|
||||
--in-content-primary-button-text-color-hover: rgb(251, 251, 254);
|
||||
--in-content-primary-button-background: #0061E0;
|
||||
--in-content-primary-button-background-hover: #0250BB;
|
||||
--in-content-primary-button-background-active: #053E94;
|
||||
--in-content-primary-button-border-color: transparent;
|
||||
--in-content-primary-button-border-hover: transparent;
|
||||
--in-content-link-color: var(--blue-60);
|
||||
--in-content-link-color-hover: var(--blue-70);
|
||||
--in-content-link-color-active: var(--blue-80);
|
||||
--in-content-link-color-visited: var(--blue-60);
|
||||
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
|
||||
--in-content-button-text-color: var(--in-content-page-color);
|
||||
}
|
||||
.onboardingContainer .screen:dir(rtl) {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.onboardingContainer .brand-logo {
|
||||
background: url("chrome://branding/content/about-logo.svg") top center/80px no-repeat;
|
||||
padding: 80px 0 10px;
|
||||
margin-top: 60px;
|
||||
margin-block: 60px 10px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.onboardingContainer .brand-logo.cta-top {
|
||||
@ -164,7 +190,7 @@ body[lwt-newtab-brighttext] {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin: 0.5em 1em;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.onboardingContainer .welcome-text h1,
|
||||
@ -177,7 +203,6 @@ body[lwt-newtab-brighttext] {
|
||||
font-weight: 600;
|
||||
margin: 0 6px;
|
||||
letter-spacing: -0.02em;
|
||||
width: 283px;
|
||||
outline: none;
|
||||
}
|
||||
.onboardingContainer .welcome-text h2 {
|
||||
@ -188,6 +213,41 @@ body[lwt-newtab-brighttext] {
|
||||
max-width: 750px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.onboardingContainer .welcome-text.larger h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
.onboardingContainer .welcome-text.slim h1 {
|
||||
font-weight: 276;
|
||||
}
|
||||
.onboardingContainer .welcome-text.fancy h1 {
|
||||
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
|
||||
background-size: 400% auto;
|
||||
color: #000;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
animation: shine 50s linear infinite;
|
||||
}
|
||||
@media (prefers-contrast: no-preference) {
|
||||
.onboardingContainer .welcome-text.fancy h1 {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.onboardingContainer .welcome-text.fancy h1 {
|
||||
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 400% center;
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen.light-text .welcome-text.fancy h1 {
|
||||
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
|
||||
}
|
||||
.onboardingContainer .screen.dark-text .welcome-text.fancy h1 {
|
||||
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
|
||||
}
|
||||
.onboardingContainer .welcomeZap span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -652,30 +712,6 @@ 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: top;
|
||||
background-size: 100%;
|
||||
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");
|
||||
}
|
||||
@ -736,8 +772,6 @@ body[lwt-newtab-brighttext] {
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
.onboardingContainer [pos=corner] .section-main {
|
||||
flex-shrink: 0;
|
||||
width: 490px;
|
||||
z-index: 1;
|
||||
}
|
||||
.onboardingContainer [pos=corner] .section-main .main-content {
|
||||
@ -746,6 +780,7 @@ body[lwt-newtab-brighttext] {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 350px;
|
||||
width: 295px;
|
||||
bottom: -60px;
|
||||
inset-inline-end: 80px;
|
||||
transition: var(--transition);
|
||||
@ -791,21 +826,6 @@ body[lwt-newtab-brighttext] {
|
||||
z-index: 1;
|
||||
margin: auto;
|
||||
}
|
||||
.onboardingContainer .screen-1 .section-main .main-content-inner {
|
||||
min-height: var(--main-content-min-height);
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-1 .section-main {
|
||||
width: 450px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 610px) {
|
||||
.onboardingContainer .screen-1 .section-main {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen-1 .outline-L {
|
||||
width: 87px;
|
||||
height: 80px;
|
||||
@ -819,25 +839,11 @@ body[lwt-newtab-brighttext] {
|
||||
transform: rotate(-155deg) translate(11%, -18%);
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-1 .orange-L {
|
||||
width: 448px;
|
||||
height: 568px;
|
||||
transform: rotate(-155deg) translate(12%, -21%);
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen-1 .purple-C {
|
||||
width: 310px;
|
||||
height: 260px;
|
||||
transform: translate(-18%, -67%);
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-1 .purple-C {
|
||||
width: 294px;
|
||||
height: 254px;
|
||||
transform: translate(-20%, -62%);
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen-1 .yellow-circle {
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
@ -846,16 +852,6 @@ body[lwt-newtab-brighttext] {
|
||||
background: #952BB9;
|
||||
transition-delay: -0.2s;
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-1 .yellow-circle {
|
||||
transform: translate(205%, -5%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 610px) {
|
||||
.onboardingContainer .screen-1 .yellow-circle {
|
||||
transform: translate(185%, -5%);
|
||||
}
|
||||
}
|
||||
.onboardingContainer .dialog-initial .brand-logo {
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
@ -883,21 +879,6 @@ body[lwt-newtab-brighttext] {
|
||||
z-index: 1;
|
||||
margin: auto;
|
||||
}
|
||||
.onboardingContainer .screen-2 .section-main .main-content-inner {
|
||||
min-height: var(--main-content-min-height);
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-2 .section-main {
|
||||
width: 450px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 610px) {
|
||||
.onboardingContainer .screen-2 .section-main {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen-2 .outline-L {
|
||||
width: 87px;
|
||||
height: 80px;
|
||||
@ -905,23 +886,12 @@ body[lwt-newtab-brighttext] {
|
||||
transition-delay: 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-2 .outline-L {
|
||||
transform: rotate(250deg) translate(-400%, 280%);
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen-2 .orange-L {
|
||||
height: 800px;
|
||||
width: 660px;
|
||||
transform: rotate(35deg) translate(-10%, -7%);
|
||||
transition-delay: -0.4s;
|
||||
}
|
||||
@media (max-width: 866px) {
|
||||
.onboardingContainer .screen-2 .orange-L {
|
||||
height: 740px;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
.onboardingContainer .screen-2 .purple-C {
|
||||
width: 392px;
|
||||
height: 394px;
|
||||
@ -936,33 +906,6 @@ 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-image: linear-gradient(90deg, #6173FF, #ED1D5F, #F6901E, #6173FF);
|
||||
background-size: 400% auto;
|
||||
color: #000;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
animation: shine 50s linear infinite;
|
||||
}
|
||||
@media (prefers-contrast: no-preference) {
|
||||
.onboardingContainer .fancy-headings h1 {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 400% center;
|
||||
}
|
||||
}
|
||||
.onboardingContainer .fancy-headings h2 {
|
||||
margin: 10px 30px 0;
|
||||
}
|
||||
.onboardingContainer.transition-in .noodle {
|
||||
opacity: 0;
|
||||
rotate: var(--rotate);
|
||||
@ -1054,3 +997,6 @@ body[lwt-newtab-brighttext] {
|
||||
translate: 0 calc(2 * var(--translate));
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
.onboardingContainer .screen.with-noodles:not(.corner) .section-main {
|
||||
height: 503px;
|
||||
}
|
||||
|
||||
@ -28,6 +28,7 @@ const DEFAULT_WELCOME_CONTENT = {
|
||||
order: 0,
|
||||
content: {
|
||||
position: "corner",
|
||||
logo: {},
|
||||
title: {
|
||||
string_id: "mr1-onboarding-pin-header",
|
||||
},
|
||||
@ -75,6 +76,7 @@ const DEFAULT_WELCOME_CONTENT = {
|
||||
id: "AW_SET_DEFAULT",
|
||||
order: 1,
|
||||
content: {
|
||||
logo: {},
|
||||
title: {
|
||||
string_id: "mr1-onboarding-default-header",
|
||||
},
|
||||
@ -105,6 +107,7 @@ const DEFAULT_WELCOME_CONTENT = {
|
||||
id: "AW_LANGUAGE_MISMATCH",
|
||||
order: 2,
|
||||
content: {
|
||||
logo: {},
|
||||
title: { string_id: "onboarding-live-language-header" },
|
||||
subtitle: { string_id: "onboarding-live-language-subtitle" },
|
||||
has_noodles: true,
|
||||
@ -133,6 +136,7 @@ const DEFAULT_WELCOME_CONTENT = {
|
||||
id: "AW_IMPORT_SETTINGS",
|
||||
order: 3,
|
||||
content: {
|
||||
logo: {},
|
||||
title: {
|
||||
string_id: "mr1-onboarding-import-header",
|
||||
},
|
||||
@ -165,6 +169,7 @@ const DEFAULT_WELCOME_CONTENT = {
|
||||
id: "AW_CHOOSE_THEME",
|
||||
order: 4,
|
||||
content: {
|
||||
logo: {},
|
||||
title: {
|
||||
string_id: "mr1-onboarding-theme-header",
|
||||
},
|
||||
|
||||
@ -34,6 +34,7 @@ body {
|
||||
:root {
|
||||
&[dialogroot] {
|
||||
background-color: transparent;
|
||||
min-width: 504px;
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
@ -58,8 +59,6 @@ body {
|
||||
background-color: var(--in-content-page-background);
|
||||
}
|
||||
|
||||
--main-content-min-height: 271px;
|
||||
|
||||
// Transition all of these and reduced motion effectively only does opacity.
|
||||
--transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
|
||||
|
||||
@ -94,11 +93,8 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&.with-noodles {
|
||||
height: 503px;
|
||||
width: 504px;
|
||||
}
|
||||
width: 504px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@ -133,15 +129,45 @@ body {
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
|
||||
&.light-text {
|
||||
--in-content-page-color: rgb(251, 251, 254);
|
||||
--in-content-primary-button-text-color: rgb(43, 42, 51);
|
||||
--in-content-primary-button-text-color-hover: rgb(43, 42, 51);
|
||||
--in-content-primary-button-background: rgb(0, 221, 255);
|
||||
--in-content-primary-button-background-hover: rgb(128, 235, 255);
|
||||
--in-content-primary-button-background-active: rgb(170, 242, 255);
|
||||
--in-content-link-color: var(--in-content-primary-button-background);
|
||||
--in-content-link-color-hover: var(--in-content-primary-button-background-hover);
|
||||
--in-content-link-color-active: var(--in-content-primary-button-background-active);
|
||||
--in-content-link-color-visited: var(--in-content-link-color);
|
||||
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
|
||||
--in-content-button-text-color: var(--in-content-page-color);
|
||||
}
|
||||
|
||||
&.dark-text {
|
||||
--in-content-page-color: rgb(21, 20, 26);
|
||||
--in-content-primary-button-text-color: rgb(251, 251, 254);
|
||||
--in-content-primary-button-text-color-hover: rgb(251, 251, 254);
|
||||
--in-content-primary-button-background: #0061E0;
|
||||
--in-content-primary-button-background-hover: #0250BB;
|
||||
--in-content-primary-button-background-active: #053E94;
|
||||
--in-content-primary-button-border-color: transparent;
|
||||
--in-content-primary-button-border-hover: transparent;
|
||||
--in-content-link-color: var(--blue-60);
|
||||
--in-content-link-color-hover: var(--blue-70);
|
||||
--in-content-link-color-active: var(--blue-80);
|
||||
--in-content-link-color-visited: var(--blue-60);
|
||||
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
|
||||
--in-content-button-text-color: var(--in-content-page-color);
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
background: url('chrome://branding/content/about-logo.svg') top center / $logo-size no-repeat;
|
||||
padding: $logo-size 0 10px;
|
||||
margin-top: 60px;
|
||||
margin-block: 60px 10px;
|
||||
transition: var(--transition);
|
||||
|
||||
&.cta-top {
|
||||
@ -171,7 +197,7 @@ body {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin: 0.5em 1em;
|
||||
transition: var(--transition);
|
||||
|
||||
h1,
|
||||
@ -185,7 +211,6 @@ body {
|
||||
font-weight: 600;
|
||||
margin: 0 6px;
|
||||
letter-spacing: -0.02em;
|
||||
width: 283px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -197,6 +222,50 @@ body {
|
||||
max-width: 750px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
&.larger {
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
&.slim {
|
||||
h1 {
|
||||
font-weight: 276;
|
||||
}
|
||||
}
|
||||
|
||||
&.fancy {
|
||||
h1 {
|
||||
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
|
||||
background-size: 400% auto;
|
||||
color: #000;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
animation: shine 50s linear infinite;
|
||||
@media (prefers-contrast: no-preference) {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 400% center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override light and dark mode fancy title colors for use over light and dark backgrounds
|
||||
.screen.light-text .welcome-text.fancy h1 {
|
||||
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
|
||||
}
|
||||
|
||||
.screen.dark-text .welcome-text.fancy h1 {
|
||||
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
|
||||
}
|
||||
|
||||
.welcomeZap {
|
||||
@ -778,29 +847,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.confetti {
|
||||
display: block;
|
||||
margin: auto;
|
||||
background-image: url('chrome://activity-stream/content/data/content/assets/confetti.svg');
|
||||
background-position: top;
|
||||
background-size: 100%;
|
||||
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');
|
||||
}
|
||||
@ -871,8 +917,6 @@ body {
|
||||
}
|
||||
|
||||
.section-main {
|
||||
flex-shrink: 0;
|
||||
width: 490px;
|
||||
z-index: 1;
|
||||
|
||||
.main-content {
|
||||
@ -881,6 +925,7 @@ body {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 350px;
|
||||
width: 295px;
|
||||
bottom: -60px;
|
||||
inset-inline-end: 80px;
|
||||
transition: var(--transition);
|
||||
@ -937,20 +982,6 @@ body {
|
||||
.section-main {
|
||||
z-index: 1;
|
||||
margin: auto;
|
||||
|
||||
.main-content-inner {
|
||||
min-height: var(--main-content-min-height);
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
width: 450px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-medium) {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//Position of noodles on second screen
|
||||
@ -967,24 +998,12 @@ body {
|
||||
height: 660px;
|
||||
transform: rotate(-155deg) translate(11%, -18%);
|
||||
transition-delay: 0.2s;
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
width: 448px;
|
||||
height: 568px;
|
||||
transform: rotate(-155deg) translate(12%, -21%);
|
||||
}
|
||||
}
|
||||
|
||||
.purple-C {
|
||||
width: 310px;
|
||||
height: 260px;
|
||||
transform: translate(-18%, -67%);
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
width: 294px;
|
||||
height: 254px;
|
||||
transform: translate(-20%, -62%);
|
||||
}
|
||||
}
|
||||
|
||||
.yellow-circle {
|
||||
@ -994,14 +1013,6 @@ body {
|
||||
transform: translate(230%, -5%);
|
||||
background: #952BB9;
|
||||
transition-delay: -0.2s;
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
transform: translate(205%, -5%);
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-medium) {
|
||||
transform: translate(185%, -5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1045,20 +1056,6 @@ body {
|
||||
.section-main {
|
||||
z-index: 1;
|
||||
margin: auto;
|
||||
|
||||
.main-content-inner {
|
||||
min-height: var(--main-content-min-height);
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
width: 450px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-medium) {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Position of noodles on third screen
|
||||
@ -1068,10 +1065,6 @@ body {
|
||||
transform: rotate(250deg) translate(-420%, 425%);
|
||||
transition-delay: 0.2s;
|
||||
z-index: 2;
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
transform: rotate(250deg) translate(-400%, 280%);
|
||||
}
|
||||
}
|
||||
|
||||
.orange-L {
|
||||
@ -1079,11 +1072,6 @@ body {
|
||||
width: 660px;
|
||||
transform: rotate(35deg) translate(-10%, -7%);
|
||||
transition-delay: -0.4s;
|
||||
|
||||
@media (max-width: $break-point-large) {
|
||||
height: 740px;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.purple-C {
|
||||
@ -1103,37 +1091,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.fancy-headings {
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: unset;
|
||||
width: 410px;
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(90deg, #6173FF, #ED1D5F, #F6901E, #6173FF);
|
||||
background-size: 400% auto;
|
||||
color: #000;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
animation: shine 50s linear infinite;
|
||||
|
||||
@media (prefers-contrast: no-preference) {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 400% center;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 10px 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.transition-in {
|
||||
.noodle {
|
||||
opacity: 0;
|
||||
@ -1262,4 +1219,8 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen.with-noodles:not(.corner) .section-main {
|
||||
height: 503px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,33 +51,29 @@ export class ProtonScreen extends React.PureComponent {
|
||||
this.mainContentHeader.focus();
|
||||
}
|
||||
|
||||
getLogoStyle(content) {
|
||||
if (!content.hide_logo) {
|
||||
const useDefaultLogo = !content.logo;
|
||||
const logoUrl = useDefaultLogo
|
||||
? "chrome://branding/content/about-logo.svg"
|
||||
: content.logo.imageURL;
|
||||
const logoSize = useDefaultLogo ? "80px" : content.logo.size;
|
||||
return {
|
||||
background: `url('${logoUrl}') top center / ${logoSize} no-repeat`,
|
||||
height: logoSize,
|
||||
padding: `${logoSize} 0 10px`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
getLogoStyle({
|
||||
imageURL = "chrome://branding/content/about-logo.svg",
|
||||
height = "80px",
|
||||
}) {
|
||||
return {
|
||||
background:
|
||||
imageURL === "" ? null : `url(${imageURL}) no-repeat center / contain`,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
getScreenClassName(
|
||||
isCornerPosition,
|
||||
isFirstCenteredScreen,
|
||||
isLastCenteredScreen
|
||||
isLastCenteredScreen,
|
||||
includeNoodles
|
||||
) {
|
||||
const screenClass = isCornerPosition
|
||||
? ""
|
||||
? "corner"
|
||||
: `screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
|
||||
return `${isFirstCenteredScreen ? `dialog-initial` : ``} ${
|
||||
isLastCenteredScreen ? `dialog-last` : ``
|
||||
} ${screenClass}`;
|
||||
} ${includeNoodles ? `with-noodles` : ``} ${screenClass}`;
|
||||
}
|
||||
|
||||
renderContentTiles() {
|
||||
@ -143,17 +139,22 @@ export class ProtonScreen extends React.PureComponent {
|
||||
const includeNoodles = content.has_noodles;
|
||||
const isCornerPosition = content.position === "corner";
|
||||
const hideStepsIndicator = autoAdvance || isCornerPosition;
|
||||
const textColorClass = content.text_color
|
||||
? `${content.text_color}-text`
|
||||
: "";
|
||||
// Assign proton screen style 'screen-1' or 'screen-2' by checking
|
||||
// if screen order is even or odd.
|
||||
const screenClassName = this.getScreenClassName(
|
||||
isCornerPosition,
|
||||
isFirstCenteredScreen,
|
||||
isLastCenteredScreen
|
||||
isLastCenteredScreen,
|
||||
includeNoodles
|
||||
);
|
||||
|
||||
return (
|
||||
<main
|
||||
className={`screen ${this.props.id || ""} ${screenClassName}`}
|
||||
className={`screen ${this.props.id ||
|
||||
""} ${screenClassName} ${textColorClass}`}
|
||||
role="dialog"
|
||||
pos={content.position || "center"}
|
||||
tabIndex="-1"
|
||||
@ -178,7 +179,7 @@ export class ProtonScreen extends React.PureComponent {
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`section-main ${includeNoodles ? "with-noodles" : ""}`}>
|
||||
<div className="section-main">
|
||||
{content.secondary_button_top ? (
|
||||
<SecondaryCTA
|
||||
content={content}
|
||||
@ -189,11 +190,14 @@ export class ProtonScreen extends React.PureComponent {
|
||||
{this.renderNoodles(includeNoodles, isCornerPosition)}
|
||||
<div
|
||||
className={`main-content ${hideStepsIndicator ? "no-steps" : ""}`}
|
||||
style={content.background ? { background: content.background } : {}}
|
||||
>
|
||||
<div
|
||||
className={`brand-logo ${content.hide_logo ? "hide" : ""}`}
|
||||
style={this.getLogoStyle(content)}
|
||||
/>
|
||||
{content.logo ? (
|
||||
<div
|
||||
className={`brand-logo`}
|
||||
style={this.getLogoStyle(content.logo)}
|
||||
/>
|
||||
) : null}
|
||||
<div className={`${isRtamo ? "rtamo-icon" : "hide-rtamo-icon"}`}>
|
||||
<img
|
||||
className={`${isTheme ? "rtamo-theme-icon" : ""}`}
|
||||
@ -202,13 +206,8 @@ export class ProtonScreen extends React.PureComponent {
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
{content.has_fancy_title ? <div className="confetti" /> : null}
|
||||
<div className="main-content-inner">
|
||||
<div
|
||||
className={`welcome-text ${
|
||||
content.has_fancy_title ? "fancy-headings" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`welcome-text ${content.title_style || ""}`}>
|
||||
<Localized text={content.title}>
|
||||
<h1 id="mainContentHeader" />
|
||||
</Localized>
|
||||
|
||||
@ -68,7 +68,6 @@ export const DEFAULT_RTAMO_CONTENT = {
|
||||
string_id: "mr1-onboarding-welcome-image-caption",
|
||||
},
|
||||
},
|
||||
hide_logo: true,
|
||||
backdrop:
|
||||
"#212121 url(chrome://activity-stream/content/data/content/assets/proton-bkg.avif) center/cover no-repeat fixed",
|
||||
primary_button: {
|
||||
|
||||
@ -430,6 +430,7 @@ const MESSAGES = () => [
|
||||
title: {
|
||||
string_id: "mr1-onboarding-pin-header",
|
||||
},
|
||||
logo: {},
|
||||
hero_text: {
|
||||
string_id: "mr1-welcome-screen-hero-text",
|
||||
},
|
||||
@ -461,9 +462,14 @@ const MESSAGES = () => [
|
||||
id: "AW_SET_DEFAULT",
|
||||
order: 1,
|
||||
content: {
|
||||
logo: {
|
||||
imageURL: "chrome://browser/content/logos/vpn-promo-logo.svg",
|
||||
height: "100px",
|
||||
},
|
||||
title: {
|
||||
string_id: "mr1-onboarding-default-header",
|
||||
},
|
||||
title_style: "slim larger",
|
||||
subtitle: {
|
||||
string_id: "mr1-onboarding-default-subtitle",
|
||||
},
|
||||
@ -486,6 +492,62 @@ const MESSAGES = () => [
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "BACKGROUND_IMAGE",
|
||||
order: 2,
|
||||
content: {
|
||||
background:
|
||||
"url(chrome://activity-stream/content/data/content/assets/proton-bkg.avif) no-repeat center/cover",
|
||||
text_color: "light",
|
||||
logo: {},
|
||||
title: "A dialog with a background image",
|
||||
subtitle: "The text color is configurable",
|
||||
primary_button: {
|
||||
label: "Continue",
|
||||
action: {
|
||||
navigate: true,
|
||||
},
|
||||
},
|
||||
secondary_button: {
|
||||
label: {
|
||||
string_id: "mr1-onboarding-set-default-secondary-button-label",
|
||||
},
|
||||
action: {
|
||||
navigate: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "BACKGROUND_COLOR",
|
||||
order: 3,
|
||||
content: {
|
||||
background: "white",
|
||||
logo: {
|
||||
height: "200px",
|
||||
imageURL: "",
|
||||
},
|
||||
title: "Peace of mind.",
|
||||
title_style: "fancy slim larger",
|
||||
text_color: "dark",
|
||||
subtitle:
|
||||
"For the best privacy protection, keep Firefox in easy reach.",
|
||||
primary_button: {
|
||||
label: "Continue",
|
||||
action: {
|
||||
navigate: true,
|
||||
},
|
||||
},
|
||||
secondary_button: {
|
||||
label: {
|
||||
string_id: "mr1-onboarding-set-default-secondary-button-label",
|
||||
},
|
||||
action: {
|
||||
navigate: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
frequency: { lifetime: 3 },
|
||||
|
||||
@ -72,16 +72,16 @@ add_task(async function test_aboutwelcome_with_customized_logo() {
|
||||
const TEST_LOGO_URL = "chrome://branding/content/icon64.png";
|
||||
const TEST_LOGO_CONTENT = makeTestContent("TEST_LOGO_STEP", {
|
||||
logo: {
|
||||
size: "50px",
|
||||
height: "50px",
|
||||
imageURL: TEST_LOGO_URL,
|
||||
},
|
||||
});
|
||||
const TEST_LOGO_JSON = JSON.stringify([TEST_LOGO_CONTENT]);
|
||||
let browser = await openAboutWelcome(TEST_LOGO_JSON);
|
||||
const LOGO_SIZE = TEST_LOGO_CONTENT.content.logo.size;
|
||||
const EXPECTED_LOGO_STYLE = `background: rgba(0, 0, 0, 0) url("${TEST_LOGO_URL}") no-repeat scroll center top / ${LOGO_SIZE}; height: ${LOGO_SIZE}; padding: ${LOGO_SIZE} 0px 10px;`;
|
||||
const LOGO_HEIGHT = TEST_LOGO_CONTENT.content.logo.height;
|
||||
const EXPECTED_LOGO_STYLE = `background: rgba(0, 0, 0, 0) url("${TEST_LOGO_URL}") no-repeat scroll center center / contain; height: ${LOGO_HEIGHT}`;
|
||||
const DEFAULT_LOGO_STYLE =
|
||||
'background: rgba(0, 0, 0, 0) url("chrome://branding/content/about-logo.svg") no-repeat scroll center top / 80px; height: 80px; padding: 80px 0px 10px;';
|
||||
'background: rgba(0, 0, 0, 0) url("chrome://branding/content/about-logo.svg")';
|
||||
|
||||
await test_screen_content(
|
||||
browser,
|
||||
|
||||
@ -215,6 +215,7 @@ add_task(async function test_multistage_aboutwelcome_experimentAPI() {
|
||||
id: "AW_STEP3",
|
||||
order: 2,
|
||||
content: {
|
||||
logo: {},
|
||||
title: "Step 3",
|
||||
primary_button: {
|
||||
label: "Next",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user