corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1837051 - Add Embedded Migration Wizard support for spotlight dialog r=omc-reviewers,pdahiya,mconley

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D180713
This commit is contained in:
negin
2023-06-23 19:23:51 +00:00
parent bc562dd605
commit b882e48890
8 changed files with 114 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
browser/base/content/spotlight.html
View File

@@ -21,10 +21,17 @@
<link rel="localization" href="browser/newtab/asrouter.ftl" />
<link rel="localization" href="browser/newtab/onboarding.ftl" />
<link rel="localization" href="browser/spotlight.ftl" />
<link rel="localization" href="browser/migrationWizard.ftl" />
</head>
<body role="dialog" aria-labelledby="title" aria-describedby="content">
<script src="resource://activity-stream/vendor/react.js"></script>
<script src="resource://activity-stream/vendor/react-dom.js"></script>
<script src="chrome://browser/content/spotlight.js"></script>
<script src="chrome://global/content/elements/named-deck.js" async></script>
<script src="chrome://global/content/elements/panel-list.js" async></script>
<script
src="chrome://browser/content/migration/migration-wizard.mjs"
type="module"
></script>
</body>
</html>

1
browser/components/migration/MigrationUtils.sys.mjs
View File

@@ -156,6 +156,7 @@ class MigrationUtils {
"about:welcome?*",
"about:preferences",
"chrome://browser/content/migration/migration-dialog-window.html",
"chrome://browser/content/spotlight.html",
],
});
}

14
browser/components/migration/content/migration-wizard.mjs
View File

@@ -36,7 +36,7 @@ export class MigrationWizard extends HTMLElement {
<link rel="stylesheet" href="chrome://browser/skin/migration/migration-wizard.css">
<named-deck id="wizard-deck" selected-view="page-loading" aria-busy="true" part="deck">
<div name="page-loading">
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
<h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
<div class="loading-block large"></div>
<div class="loading-block small"></div>
<div class="loading-block small"></div>
@@ -49,7 +49,7 @@ export class MigrationWizard extends HTMLElement {
</div>
<div name="page-selection">
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
<h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
<button id="browser-profile-selector" aria-haspopup="menu" aria-labelledby="migrator-name profile-name">
<span class="migrator-icon" role="img"></span>
<div class="migrator-description" role="presentation">
@@ -107,7 +107,7 @@ export class MigrationWizard extends HTMLElement {
</div>
<div name="page-progress">
<h1 id="progress-header" data-l10n-id="migration-wizard-progress-header"></h1>
<h1 id="progress-header" data-l10n-id="migration-wizard-progress-header" part="header"></h1>
<div class="resource-progress">
<div data-resource-type="BOOKMARKS" class="resource-progress-group">
<span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
@@ -181,7 +181,7 @@ export class MigrationWizard extends HTMLElement {
</div>
<div name="page-file-import-progress">
<h1 id="file-import-progress-header"></h1>
<h1 id="file-import-progress-header"part="header"></h1>
<div class="resource-progress">
<div data-resource-type="PASSWORDS_FROM_FILE" class="resource-progress-group">
<span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
@@ -215,7 +215,7 @@ export class MigrationWizard extends HTMLElement {
</div>
<div name="page-safari-password-permission">
<h1 data-l10n-id="migration-safari-password-import-header"></h1>
<h1 data-l10n-id="migration-safari-password-import-header" part="header"></h1>
<span data-l10n-id="migration-safari-password-import-steps-header"></span>
<ol>
<li data-l10n-id="migration-safari-password-import-step1"></li>
@@ -233,7 +233,7 @@ export class MigrationWizard extends HTMLElement {
</div>
<div name="page-safari-permission">
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
<h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
<div data-l10n-id="migration-wizard-safari-permissions-sub-header"></div>
<ol>
<li data-l10n-id="migration-wizard-safari-instructions-continue"></li>
@@ -246,7 +246,7 @@ export class MigrationWizard extends HTMLElement {
</div>
<div name="page-no-browsers-found">
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
<h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
<div class="no-browsers-found error-message">
<span class="error-icon" role="img"></span>
<div class="no-browsers-found-message" data-l10n-id="migration-wizard-import-browser-no-browsers"></div>

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

@@ -549,6 +549,18 @@ html {
.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover {
color: #E0E0E6;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard {
padding: 5px 60px;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) {
text-align: center;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) {
margin: 32px auto 0;
}
.onboardingContainer .screen:not([pos=split]) .welcome-text:empty {
margin: 0;
}
.onboardingContainer .screen[pos=split] {
margin: auto;
min-height: 550px;

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

@@ -360,6 +360,24 @@ html {
}
}
}
migration-wizard {
padding: 5px 60px;
&::part(header){
text-align: center;
}
&::part(buttons){
margin: 32px auto 0;
}
}
.welcome-text {
&:empty {
margin: 0;
}
}
}
&[pos='split'] {

36
browser/components/newtab/lib/PanelTestProvider.sys.mjs
View File

@@ -612,6 +612,42 @@ const MESSAGES = () => [
trigger: { id: "backgroundTaskMessage" },
frequency: { lifetime: 3 },
},
{
id: "IMPORT_SETTINGS_EMBEDDED",
groups: ["panel-test-provider"],
template: "spotlight",
content: {
template: "multistage",
backdrop: "transparent",
screens: [
{
id: "IMPORT_SETTINGS_EMBEDDED",
content: {
logo: {},
tiles: { type: "migration-wizard" },
progress_bar: true,
migrate_start: {
action: {},
},
migrate_close: {
action: {
navigate: true,
},
},
secondary_button: {
label: {
string_id: "mr2022-onboarding-secondary-skip-button-label",
},
action: {
navigate: true,
},
has_arrow_icon: true,
},
},
},
],
},
},
];
export const PanelTestProvider = {

32
browser/components/newtab/test/browser/browser_multistage_spotlight.js
View File

@@ -56,3 +56,35 @@ add_task(async function test_specialAction() {
specialActionStub.restore();
});
add_task(async function test_embedded_import() {
await SpecialPowers.pushPrefEnv({
set: [["browser.migrate.internal-testing.enabled", true]],
});
let message = (await PanelTestProvider.getMessages()).find(
m => m.id === "IMPORT_SETTINGS_EMBEDDED"
);
let browser = BrowserWindowTracker.getTopWindow().gBrowser.selectedBrowser;
let win = await showDialog({ message, browser });
let migrationWizardReady = BrowserTestUtils.waitForEvent(
win,
"MigrationWizard:Ready"
);
await TestUtils.waitForCondition(() =>
win.document.querySelector("migration-wizard")
);
Assert.ok(
win.document.querySelector("migration-wizard"),
"Migration Wizard rendered"
);
await migrationWizardReady;
let [panelList] = win.document.querySelector("migration-wizard").children;
Assert.equal(panelList.tagName, "PANEL-LIST");
Assert.equal(panelList.firstChild.tagName, "PANEL-ITEM");
win.close();
await SpecialPowers.popPrefEnv();
});

2
browser/components/newtab/test/xpcshell/test_PanelTestProvider.js
View File

@@ -23,7 +23,7 @@ add_task(async function test_PanelTestProvider() {
milestone_message: 0,
update_action: 1,
whatsnew_panel_message: 7,
spotlight: 2,
spotlight: 3,
pb_newtab: 2,
toast_notification: 2,
};