mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
Bug 1653087 - Add default theme as an option to multistage choose a theme screen r=Mardak,fluent-reviewers,flod
Differential Revision: https://phabricator.services.mozilla.com/D83869
This commit is contained in:
Punam Dahiya
parent
fb0dfdd2f7
commit
5ccca093b8
@ -1356,7 +1356,7 @@ pref("trailhead.firstrun.branches", "join-dynamic");
|
||||
// Separate about welcome
|
||||
pref("browser.aboutwelcome.enabled", true);
|
||||
// Used to set multistage welcome UX
|
||||
pref("browser.aboutwelcome.overrideContent", "{\"id\": \"multi-stage-welcome-importable-theme\",\"template\": \"multistage\",\"screens\": [{\"id\": \"AW_GET_STARTED\",\"order\": 0,\"content\": {\"zap\": true,\"title\": {\"string_id\": \"onboarding-multistage-welcome-header\"},\"subtitle\": {\"string_id\": \"onboarding-multistage-welcome-subtitle\"},\"primary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-welcome-primary-button-label\"},\"action\": {\"navigate\": true}},\"secondary_button\": {\"text\": {\"string_id\": \"onboarding-multistage-welcome-secondary-button-text\"},\"label\": {\"string_id\": \"onboarding-multistage-welcome-secondary-button-label\"},\"position\": \"top\",\"action\": {\"type\": \"OPEN_URL\",\"addFlowParams\": true,\"data\": {\"args\": \"https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=activity-stream-firstrun&style=trailhead\",\"where\": \"current\"}}}}}, {\"id\": \"AW_IMPORT_SETTINGS\",\"order\": 1,\"content\": {\"zap\": true,\"title\": {\"string_id\": \"onboarding-multistage-import-header\"},\"subtitle\": {\"string_id\": \"onboarding-multistage-import-subtitle\"},\"tiles\": {\"type\": \"topsites\",\"tooltip\": {\"string_id\": \"onboarding-import-sites-info\"}},\"primary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-import-primary-button-label\"},\"action\": {\"type\": \"SHOW_MIGRATION_WIZARD\",\"navigate\": true}},\"secondary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-import-secondary-button-label\"},\"action\": {\"navigate\": true}}}},{\"id\": \"AW_CHOOSE_THEME\",\"order\": 2,\"content\": {\"zap\": true,\"title\": {\"string_id\": \"onboarding-multistage-theme-header\"},\"subtitle\": {\"string_id\": \"onboarding-multistage-theme-subtitle\"},\"tiles\": {\"type\": \"theme\",\"action\": {\"theme\": \"<event>\"},\"data\": [{\"theme\": \"light\",\"label\": {\"string_id\": \"onboarding-multistage-theme-label-light\"}},{\"theme\": \"dark\",\"label\": {\"string_id\": \"onboarding-multistage-theme-label-dark\"}}]},\"primary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-theme-primary-button-label\"},\"action\": {\"navigate\": true}},\"secondary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-theme-secondary-button-label\"},\"action\": {\"theme\": \"default\",\"navigate\": true}}}}]}");
|
||||
pref("browser.aboutwelcome.overrideContent", "{\"id\": \"multi-stage-welcome-importable-theme\",\"template\": \"multistage\",\"screens\": [{\"id\": \"AW_GET_STARTED\",\"order\": 0,\"content\": {\"zap\": true,\"title\": {\"string_id\": \"onboarding-multistage-welcome-header\"},\"subtitle\": {\"string_id\": \"onboarding-multistage-welcome-subtitle\"},\"primary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-welcome-primary-button-label\"},\"action\": {\"navigate\": true}},\"secondary_button\": {\"text\": {\"string_id\": \"onboarding-multistage-welcome-secondary-button-text\"},\"label\": {\"string_id\": \"onboarding-multistage-welcome-secondary-button-label\"},\"position\": \"top\",\"action\": {\"type\": \"OPEN_URL\",\"addFlowParams\": true,\"data\": {\"args\": \"https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=activity-stream-firstrun&style=trailhead\",\"where\": \"current\"}}}}}, {\"id\": \"AW_IMPORT_SETTINGS\",\"order\": 1,\"content\": {\"zap\": true,\"title\": {\"string_id\": \"onboarding-multistage-import-header\"},\"subtitle\": {\"string_id\": \"onboarding-multistage-import-subtitle\"},\"tiles\": {\"type\": \"topsites\",\"tooltip\": {\"string_id\": \"onboarding-import-sites-info\"}},\"primary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-import-primary-button-label\"},\"action\": {\"type\": \"SHOW_MIGRATION_WIZARD\",\"navigate\": true}},\"secondary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-import-secondary-button-label\"},\"action\": {\"navigate\": true}}}}, {\"id\": \"AW_CHOOSE_THEME\",\"order\": 2,\"content\": {\"zap\": true,\"title\": {\"string_id\": \"onboarding-multistage-theme-header\"},\"subtitle\": {\"string_id\": \"onboarding-multistage-theme-subtitle\"},\"tiles\": {\"type\": \"theme\",\"action\": {\"theme\": \"<event>\"}, \"data\": [{\"theme\": \"automatic\",\"label\": {\"string_id\": \"onboarding-multistage-theme-label-automatic\"}, \"description\": {\"string_id\": \"onboarding-multistage-theme-description-automatic\"}, \"tooltip\": {\"string_id\": \"onboarding-multistage-theme-tooltip-automatic\"}}, {\"theme\": \"light\",\"label\": {\"string_id\": \"onboarding-multistage-theme-label-light\"}, \"tooltip\": {\"string_id\": \"onboarding-multistage-theme-tooltip-light\"}},{\"theme\": \"dark\",\"label\": {\"string_id\": \"onboarding-multistage-theme-label-dark\"}, \"tooltip\": {\"string_id\": \"onboarding-multistage-theme-tooltip-dark\"}}]},\"primary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-theme-primary-button-label\"},\"action\": {\"navigate\": true}},\"secondary_button\": {\"label\": {\"string_id\": \"onboarding-multistage-theme-secondary-button-label\"},\"action\": {\"theme\": \"automatic\",\"navigate\": true}}}}]}");
|
||||
|
||||
// The pref that controls if the What's New panel is enabled.
|
||||
pref("browser.messaging-system.whatsNewPanel.enabled", true);
|
||||
|
||||
@ -46,7 +46,7 @@ const AWTerminate = {
|
||||
const LIGHT_WEIGHT_THEMES = {
|
||||
DARK: "firefox-compact-dark@mozilla.org",
|
||||
LIGHT: "firefox-compact-light@mozilla.org",
|
||||
DEFAULT: "default-theme@mozilla.org",
|
||||
AUTOMATIC: "default-theme@mozilla.org",
|
||||
};
|
||||
|
||||
async function getImportableSites() {
|
||||
|
||||
@ -479,14 +479,21 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
|
||||
|
||||
case "theme":
|
||||
return this.props.content.tiles.data ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "tiles-theme-container"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "tiles-theme-section"
|
||||
}, this.props.content.tiles.data.map(({
|
||||
theme,
|
||||
label
|
||||
}) => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", {
|
||||
className: "theme",
|
||||
label,
|
||||
tooltip,
|
||||
description
|
||||
}) => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
|
||||
key: theme + label,
|
||||
text: typeof tooltip === "object" ? tooltip : {}
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", {
|
||||
className: "theme",
|
||||
value: theme,
|
||||
title: tooltip,
|
||||
onClick: this.handleAction
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: `icon ${theme}`
|
||||
@ -494,7 +501,11 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
|
||||
text: label
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "text"
|
||||
}))))) : null;
|
||||
})), description && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
|
||||
text: description
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "theme-desc"
|
||||
}))))))) : null;
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
@ -317,9 +317,15 @@ body {
|
||||
margin: 0 6px;
|
||||
color: var(--grey-subtitle-1);
|
||||
line-height: 28px; }
|
||||
.multistageContainer .tiles-theme-section {
|
||||
display: flex;
|
||||
.multistageContainer .tiles-theme-container {
|
||||
margin: 10px auto; }
|
||||
.multistageContainer .tiles-theme-section {
|
||||
display: grid;
|
||||
grid-gap: 21px;
|
||||
grid-template-columns: repeat(3, auto); }
|
||||
@media (max-width: 610px) {
|
||||
.multistageContainer .tiles-theme-section {
|
||||
grid-template-columns: repeat(2, auto); } }
|
||||
.multistageContainer .tiles-theme-section .theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -330,10 +336,7 @@ body {
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-inline-start: 21px; }
|
||||
.multistageContainer .tiles-theme-section .theme:first-child {
|
||||
margin-inline-start: 0; }
|
||||
cursor: pointer; }
|
||||
.multistageContainer .tiles-theme-section .theme .icon {
|
||||
background-size: cover;
|
||||
border-top-left-radius: 4px;
|
||||
@ -345,6 +348,8 @@ body {
|
||||
background-image: url("chrome://mozapps/content/extensions/firefox-compact-light.svg"); }
|
||||
.multistageContainer .tiles-theme-section .theme .icon.dark {
|
||||
background-image: url("chrome://mozapps/content/extensions/firefox-compact-dark.svg"); }
|
||||
.multistageContainer .tiles-theme-section .theme .icon.automatic {
|
||||
background-image: url("chrome://mozapps/content/extensions/default-theme.svg"); }
|
||||
.multistageContainer .tiles-theme-section .theme .text {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
@ -352,6 +357,12 @@ body {
|
||||
line-height: 22px;
|
||||
margin-inline-start: 12px;
|
||||
margin-top: 9px; }
|
||||
.multistageContainer .tiles-theme-section .theme .theme-desc {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin-inline-start: 12px;
|
||||
opacity: 0.5; }
|
||||
.multistageContainer .tiles-theme-section .theme.selected {
|
||||
outline: 4px solid #0090ED;
|
||||
outline-offset: -4px; }
|
||||
|
||||
@ -321,9 +321,18 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-theme-section {
|
||||
display: flex;
|
||||
.tiles-theme-container {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.tiles-theme-section {
|
||||
display: grid;
|
||||
grid-gap: 21px;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
|
||||
@media (max-width: $break-point-medium) {
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
@ -336,11 +345,6 @@ body {
|
||||
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-inline-start: 21px;
|
||||
|
||||
&:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-size: cover;
|
||||
@ -359,6 +363,10 @@ body {
|
||||
&.dark {
|
||||
background-image: url('chrome://mozapps/content/extensions/firefox-compact-dark.svg');
|
||||
}
|
||||
|
||||
&.automatic {
|
||||
background-image: url('chrome://mozapps/content/extensions/default-theme.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -370,6 +378,14 @@ body {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.theme-desc {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin-inline-start: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
outline: 4px solid #0090ED;
|
||||
outline-offset: -4px;
|
||||
|
||||
@ -244,22 +244,36 @@ export class WelcomeScreen extends React.PureComponent {
|
||||
) : null;
|
||||
case "theme":
|
||||
return this.props.content.tiles.data ? (
|
||||
<div className="tiles-theme-section">
|
||||
{this.props.content.tiles.data.map(({ theme, label }) => (
|
||||
<button
|
||||
className="theme"
|
||||
key={theme + label}
|
||||
value={theme}
|
||||
onClick={this.handleAction}
|
||||
>
|
||||
<div className={`icon ${theme}`} />
|
||||
{label && (
|
||||
<Localized text={label}>
|
||||
<div className="text" />
|
||||
<div className="tiles-theme-container">
|
||||
<div className="tiles-theme-section">
|
||||
{this.props.content.tiles.data.map(
|
||||
({ theme, label, tooltip, description }) => (
|
||||
<Localized
|
||||
key={theme + label}
|
||||
text={typeof tooltip === "object" ? tooltip : {}}
|
||||
>
|
||||
<button
|
||||
className="theme"
|
||||
value={theme}
|
||||
title={tooltip}
|
||||
onClick={this.handleAction}
|
||||
>
|
||||
<div className={`icon ${theme}`} />
|
||||
{label && (
|
||||
<Localized text={label}>
|
||||
<div className="text" />
|
||||
</Localized>
|
||||
)}
|
||||
{description && (
|
||||
<Localized text={description}>
|
||||
<div className="theme-desc" />
|
||||
</Localized>
|
||||
)}
|
||||
</button>
|
||||
</Localized>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
@ -23,6 +23,8 @@ const TEST_MULTISTAGE_CONTENT = {
|
||||
{
|
||||
theme: "test-theme-1",
|
||||
label: "theme-1",
|
||||
description: "test-desc",
|
||||
tooltip: "test-tooltip",
|
||||
},
|
||||
{
|
||||
theme: "test-theme-2",
|
||||
@ -190,6 +192,8 @@ add_task(async function test_Multistage_About_Welcome_branches() {
|
||||
"div.secondary-cta.top",
|
||||
"button.secondary",
|
||||
"button.theme",
|
||||
"button[title='test-tooltip']",
|
||||
"div.theme-desc",
|
||||
"div.indicator.current",
|
||||
],
|
||||
// Unexpected selectors:
|
||||
@ -208,7 +212,13 @@ add_task(async function test_Multistage_About_Welcome_branches() {
|
||||
"div.tiles-container.info",
|
||||
],
|
||||
// Unexpected selectors:
|
||||
["main.AW_STEP1", "main.AW_STEP3", "div.secondary-cta.top", "h1.welcomeZap"]
|
||||
[
|
||||
"main.AW_STEP1",
|
||||
"main.AW_STEP3",
|
||||
"div.secondary-cta.top",
|
||||
"h1.welcomeZap",
|
||||
"div.theme-desc",
|
||||
]
|
||||
);
|
||||
await onButtonClick(browser, "button.primary");
|
||||
await test_screen_content(
|
||||
|
||||
@ -58,16 +58,6 @@ onboarding-multistage-import-subtitle = Coming from another browser? It’s easy
|
||||
onboarding-multistage-import-primary-button-label = Start Import
|
||||
onboarding-multistage-import-secondary-button-label = Not now
|
||||
|
||||
# The <span data-l10n-name="zap"></span> in this string allows a "zap" underline style to be
|
||||
# automatically added to the text inside it. "look" should stay inside the span.
|
||||
onboarding-multistage-theme-header = Choose a <span data-l10n-name="zap">look</span>
|
||||
onboarding-multistage-theme-subtitle = Personalize { -brand-short-name } with a theme.
|
||||
onboarding-multistage-theme-primary-button-label = Save Theme
|
||||
onboarding-multistage-theme-secondary-button-label = Not now
|
||||
onboarding-multistage-theme-label-light = Light
|
||||
onboarding-multistage-theme-label-dark = Dark
|
||||
onboarding-multistage-theme-label-colorful = Colorful
|
||||
|
||||
# Tooltip displayed on hover of top sites in import settings screen during onboarding flow.
|
||||
# This support welcome screen showing top sites imported from the user's default browser.
|
||||
# Title text is kept multiline to ensure tooltip container width is not more than 40 characters.
|
||||
@ -86,6 +76,55 @@ onboarding-import-sites-info =
|
||||
onboarding-welcome-steps-indicator =
|
||||
.aria-label = Getting started: screen { $current } of { $total }
|
||||
|
||||
# The <span data-l10n-name="zap"></span> in this string allows a "zap" underline style to be
|
||||
# automatically added to the text inside it. "look" should stay inside the span.
|
||||
onboarding-multistage-theme-header = Choose a <span data-l10n-name="zap">look</span>
|
||||
onboarding-multistage-theme-subtitle = Personalize { -brand-short-name } with a theme.
|
||||
onboarding-multistage-theme-primary-button-label = Save Theme
|
||||
onboarding-multistage-theme-secondary-button-label = Not now
|
||||
|
||||
# Automatic theme uses operating system color settings
|
||||
onboarding-multistage-theme-label-automatic = Automatic
|
||||
|
||||
# System refers to the operating system
|
||||
onboarding-multistage-theme-description-automatic = Use system theme
|
||||
onboarding-multistage-theme-label-light = Light
|
||||
onboarding-multistage-theme-label-dark = Dark
|
||||
onboarding-multistage-theme-label-colorful = Colorful
|
||||
|
||||
## Please make sure to split the content of the title attribute into lines whose
|
||||
## width corresponds to about 40 Latin characters, to ensure that the tooltip
|
||||
## doesn't become too long. Line breaks will be preserved when displaying the
|
||||
## tooltip.
|
||||
|
||||
# Tooltip displayed on hover of automatic theme
|
||||
onboarding-multistage-theme-tooltip-automatic =
|
||||
.title =
|
||||
Inherit the appearance of your operating
|
||||
system for buttons, menus, and windows.
|
||||
.aria-label = { onboarding-multistage-theme-tooltip-automatic.title }
|
||||
|
||||
# Tooltip displayed on hover of light theme
|
||||
onboarding-multistage-theme-tooltip-light =
|
||||
.title =
|
||||
Use a light appearance for buttons,
|
||||
menus, and windows.
|
||||
.aria-label = { onboarding-multistage-theme-tooltip-light.title }
|
||||
|
||||
# Tooltip displayed on hover of dark theme
|
||||
onboarding-multistage-theme-tooltip-dark =
|
||||
.title =
|
||||
Use a dark appearance for buttons,
|
||||
menus, and windows.
|
||||
.aria-label = { onboarding-multistage-theme-tooltip-dark.title }
|
||||
|
||||
# Tooltip displayed on hover of colorful theme
|
||||
onboarding-multistage-theme-tooltip-colorful =
|
||||
.title =
|
||||
Use a colorful appearance for buttons,
|
||||
menus, and windows.
|
||||
.aria-label = { onboarding-multistage-theme-tooltip-colorful.title }
|
||||
|
||||
## Welcome full page string
|
||||
|
||||
onboarding-fullpage-welcome-subheader = Let’s start exploring everything you can do.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user