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

Bug 1740623 - Adjust MR2 upgrade spotlight content r=pdahiya,emcminn

Browse Source 
Remove start screen reusing its subtitle on the colorway screen. Get the previous theme before ready as colorway screen is now first and randomly picks a color, so detect testing to remove randomness. Show rounded mostly transparent background for variants now packed more tightly within the disc. Shrink and deemphasize secondary button. Reenable upgrade spotlight after turning off in D131023.

https://www.figma.com/file/blhdnzQOhWYKcdiCzywMuG/MR2-Onboarding?node-id=2548%3A158106

Differential Revision: https://phabricator.services.mozilla.com/D130930
This commit is contained in:
Ed Lee 2021-12-04 00:54:47 +00:00
parent f90e432899
commit 6b84220154
6 changed files with 48 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/app/profile/firefox.js
View File

@ -318,7 +318,7 @@ pref("browser.startup.preXulSkeletonUI", true);
#endif
// Show an upgrade dialog on major upgrades.
pref("browser.startup.upgradeDialog.enabled", false);
pref("browser.startup.upgradeDialog.enabled", true);
// Don't create the hidden window during startup on
// platforms that don't always need it (Win/Linux).

5
browser/base/content/upgradeDialog.html
View File

@ -17,11 +17,12 @@
<link rel="localization" href="browser/upgradeDialog.ftl">
<script src="chrome://browser/content/upgradeDialog.js"></script>
</head>
<body class="confetti"
<body class=""
role="dialog"
aria-labelledby="title"
aria-describedby="subtitle">
<img class="logo" role="presentation"
<img class="logo hidden"
role="presentation"
src="chrome://branding/content/about-logo.svg"/>
<h1 id="title" aria-live="polite"></h1>
<h2 id="subtitle"></h2>

28
browser/base/content/upgradeDialog.js
View File

@ -17,14 +17,9 @@ const NEWTAB_PREF = "browser.newtabpage.enabled";
// Strings for various elements with matching ids on each screen.
const SCREEN_STRINGS = [
{
title: "upgrade-dialog-start-title",
subtitle: "upgrade-dialog-start-subtitle",
primary: "upgrade-dialog-start-primary-button",
secondary: "upgrade-dialog-start-secondary-button",
},
{
title: "upgrade-dialog-colorway-title",
subtitle: "upgrade-dialog-start-subtitle",
primary: "upgrade-dialog-colorway-primary-button",
secondary: "upgrade-dialog-colorway-secondary-button",
},
@ -132,6 +127,11 @@ function triggerTransition(callback) {
// Hook up dynamic behaviors of the dialog.
function onLoad(ready) {
// Testing doesn't have time to overwrite this new window's random method.
if (Cu.isInAutomation) {
Math.random = () => 0;
}
const { body } = document;
const logo = document.querySelector(".logo");
const title = document.getElementById("title");
@ -274,8 +274,6 @@ function onLoad(ready) {
});
// Update content and backdrop for theme screen.
body.classList.remove("confetti");
logo.classList.add("hidden");
colorways.classList.remove("hidden");
adjustModalBackdrop();
@ -337,20 +335,14 @@ function onLoad(ready) {
recordEvent("show", `${SCREEN_STRINGS.length}-screens`);
await document.l10n.ready;
// Make sure we have the previous theme before randomly selecting new one.
await gPrevTheme;
toFocus = showColorways();
} else {
// Handle actions and setup for not-first and not-last screens.
const { l10nId } = target.dataset;
switch (l10nId) {
// Prepare the colorway screen.
case "upgrade-dialog-start-primary-button":
toFocus = showColorways();
break;
// Skip colorway screen.
case "upgrade-dialog-start-secondary-button":
current++;
break;
// New theme is confirmed, so don't revert to previous.
case "upgrade-dialog-colorway-primary-button":
gPrevTheme = null;

65
browser/components/tests/browser/browser_browserGlue_upgradeDialog.js
View File

@ -33,8 +33,6 @@ add_task(async function theme_change() {
);
await showAndWaitForDialog(async win => {
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("primary").click();
await BrowserTestUtils.waitForEvent(win, "variations");
win.document.querySelectorAll("[name=theme]")[3].click();
await TestUtils.waitForCondition(() => theme.isActive, "Theme is active");
@ -49,14 +47,6 @@ add_task(async function theme_change() {
add_task(async function keyboard_focus_okay() {
await showAndWaitForDialog(async win => {
await BrowserTestUtils.waitForEvent(win, "ready");
Assert.equal(
win.document.activeElement,
win.document.getElementById("primary"),
"Primary button has focus"
);
win.document.getElementById("primary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
Assert.equal(
win.document.activeElement.name,
@ -81,8 +71,6 @@ add_task(async function keep_home() {
await showAndWaitForDialog(async win => {
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("primary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
// Click the pre-selected checkbox to keep custom homepage.
win.document.getElementById("checkbox").click();
@ -99,8 +87,6 @@ add_task(async function keep_home() {
add_task(async function revert_home() {
await showAndWaitForDialog(async win => {
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("primary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("secondary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
@ -118,11 +104,6 @@ add_task(async function revert_newtab() {
Services.prefs.setBoolPref("browser.newtabpage.enabled", false);
await showAndWaitForDialog(async win => {
// Always "randomly" select the first colorway.
win.Math.random = () => 0;
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("primary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("secondary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
@ -135,9 +116,7 @@ add_task(async function revert_newtab() {
);
AssertEvents(
"Checkbox shown and kept checked",
["content", "show", "3-screens"],
["content", "show", "upgrade-dialog-start-primary-button"],
["content", "button", "upgrade-dialog-start-primary-button"],
["content", "show", "2-screens"],
["content", "show", "random-1"],
["content", "show", "upgrade-dialog-colorway-home-checkbox"],
["content", "show", "upgrade-dialog-colorway-primary-button"],
@ -148,34 +127,10 @@ add_task(async function revert_newtab() {
);
});
add_task(async function skip_screens() {
await showAndWaitForDialog(async win => {
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("secondary").click();
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("primary").click();
});
AssertEvents(
"Skipped over colorway screen",
["content", "show", "3-screens"],
["content", "show", "upgrade-dialog-start-primary-button"],
["content", "button", "upgrade-dialog-start-secondary-button"],
["content", "show", "upgrade-dialog-thankyou-primary-button"],
["content", "button", "upgrade-dialog-thankyou-primary-button"],
["content", "close", "complete"]
);
});
add_task(async function all_3_screens() {
add_task(async function all_2_screens() {
let accessibleVariant = false;
await showAndWaitForDialog(async win => {
// Always "randomly" select the first colorway.
win.Math.random = () => 0;
await BrowserTestUtils.waitForEvent(win, "ready");
win.document.getElementById("primary").click();
await BrowserTestUtils.waitForEvent(win, "variations");
const variant = win.document.querySelectorAll("[name=variation]")[1];
@ -189,10 +144,8 @@ add_task(async function all_3_screens() {
});
AssertEvents(
"Shows all 3 screens with variations",
["content", "show", "3-screens"],
["content", "show", "upgrade-dialog-start-primary-button"],
["content", "button", "upgrade-dialog-start-primary-button"],
"Shows all 2 screens with variations",
["content", "show", "2-screens"],
["content", "show", "random-1"],
["content", "show", "upgrade-dialog-colorway-primary-button"],
["content", "theme", "variant-1"],
@ -220,8 +173,9 @@ add_task(async function quit_app() {
AssertEvents(
"Dialog closed on quit request",
["content", "show", "3-screens"],
["content", "show", "upgrade-dialog-start-primary-button"],
["content", "show", "2-screens"],
["content", "show", "random-1"],
["content", "show", "upgrade-dialog-colorway-primary-button"],
["content", "close", "quit-application-requested"]
);
});
@ -240,8 +194,9 @@ add_task(async function window_warning() {
AssertEvents(
"Dialog closed when close warning wants to open",
["content", "show", "3-screens"],
["content", "show", "upgrade-dialog-start-primary-button"],
["content", "show", "2-screens"],
["content", "show", "random-1"],
["content", "show", "upgrade-dialog-colorway-primary-button"],
["content", "close", "external"]
);
});

5
browser/components/tests/browser/browser_browserGlue_upgradeDialog_trigger.js
View File

@ -90,8 +90,9 @@ add_task(async function show_major_upgrade() {
AssertEvents(
"Upgrade dialog opened and closed from major upgrade",
["trigger", "reason", "satisfied"],
["content", "show", "3-screens"],
["content", "show", "upgrade-dialog-start-primary-button"],
["content", "show", "2-screens"],
["content", "show", "random-1"],
["content", "show", "upgrade-dialog-colorway-primary-button"],
["content", "close", "external"]
);

39
browser/themes/shared/upgradeDialog.css
View File

@ -36,9 +36,9 @@ body > .hidden:not(:disabled) {
}
#title {
font-size: 24px;
font-size: 1.6em;
font-weight: 600;
line-height: 36px;
line-height: 1.5;
margin: 5px auto;
text-align: center;
white-space: pre-wrap;
@ -48,8 +48,7 @@ body.confetti #title {
-webkit-background-clip: text;
background-image: linear-gradient(90deg, #6173FF, #ED1D5F, #F6901E, #6173FF);
background-size: 400%;
font-size: 36px;
line-height: 48px;
font-size: 2.4em;
}
@media not (prefers-contrast) {
@ -85,14 +84,18 @@ body.confetti #title {
}
#subtitle {
font-size: 18px;
font-size: 1.1em;
font-weight: 400;
line-height: 28px;
margin: 0 auto 16px;
line-height: 1.6;
margin: 0 auto;
max-width: 485px;
text-align: center;
}
body.confetti #subtitle {
font-size: 1.2em;
}
.colorways {
display: flex;
flex: 1;
@ -149,6 +152,8 @@ body.confetti #title {
/* Gradients aren't used for high contrast, so show a solid color instead. */
background-color: var(--in-content-page-background);
background-image: linear-gradient(#F0F0F4, #9F9FAD);
outline: 2px solid var(--in-content-box-border-color);
outline-offset: -2px;
}
.themes > :nth-child(1)::before {
@ -200,7 +205,7 @@ body.confetti #title {
@media not (prefers-contrast) {
.variations {
--in-content-box-border-color: transparent;
--in-content-button-background: transparent;
--in-content-button-background: rgba(0, 0, 0, 0.09);
--in-content-button-background-active: rgba(0, 0, 0, 0.4);
--in-content-button-background-hover: rgba(0, 0, 0, 0.2);
--in-content-button-text-color-hover: var(--in-content-page-color);
@ -220,12 +225,10 @@ body.confetti #title {
border-radius: 100%;
display: flex;
flex-direction: column;
height: 158px;
height: 150px;
justify-content: space-around;
margin: auto;
outline: 2px solid var(--in-content-box-border-color);
outline-offset: -2px;
padding-block: 20px 12px;
padding-block: 20px;
position: relative;
text-align: center;
width: 190px;
@ -328,12 +331,11 @@ body.confetti #title {
/* Make these variation radio buttons appear like regular buttons. */
.variations > input {
border-radius: 2px;
font-size: 12px;
border-radius: 20px;
font-size: .8em;
height: unset;
line-height: 1.2;
margin: auto;
padding: 6px 12px;
padding: 4px 12px;
width: unset;
}
@ -355,7 +357,7 @@ body.confetti #title {
.checkbox {
display: flex;
font-size: 14px;
font-size: .9em;
margin: auto;
max-width: 460px;
padding-bottom: 20px;
@ -367,7 +369,8 @@ button {
}
#secondary {
margin-top: 9px;
font-size: .9em;
margin-top: 16px;
padding: 4px;
}