Add Embedded Migration Wizard support for spotlight dialog
Categories
(Firefox :: Messaging System, enhancement, P1)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox116 | --- | verified |
People
(Reporter: pdahiya, Assigned: nsauermann, NeedInfo)
References
(Blocks 1 open bug)
Details
Attachments
(4 files)
spotlight-dialog-with-embedded-wizard-tiles.png
With Bug 1820640 we have added card that shows embedded migration wizard in about:welcome
Trying the same screen inside spotlight using below steps doesn't open embedded wizard in spotlight tab or window modal dialog. It's possible embedded migration wizard currently supports being invoked from content process and doesn't handle when screen is loaded in main process with spotlight dialog.
To test embedded screen in spotlight:
- Set pref
browser.newtabpage.activity-stream.asrouter.devtoolsEnabledto true - Open about:newtab#devtools
- Search for message
MULTISTAGE_SPOTLIGHT_MESSAGE - Add below inside screen with id
AW_PIN_FIREFOXat same level as logo property
"tiles": { "type": "migration-wizard" },
- Hit Modify
Expected
- Screen with Embedded Migration wizard should show up in Spotlight dialog
Actual
- Migration wizard custom elements shows up in html but not visible in Spotlight dialog
|
Reporter | |
Comment 1•11 months ago
|
||
Including @mconley to help scope work needed to show embedded migration wizard from spotlight dialog
|
||
Comment 2•11 months ago
|
||
Hi pdahiya,
The problem is that the spotlight document both needs to import the migration wizard strings and modules, but also needs to be added to the list of URIs that can use the migration wizard (in BrowserGlue.sys.mjs). This patch allows the wizard to show up in the spotlight modal for me:
diff --git a/browser/base/content/spotlight.html b/browser/base/content/spotlight.html
--- a/browser/base/content/spotlight.html
+++ b/browser/base/content/spotlight.html
@@ -16,15 +16,22 @@
type="text/css"
href="chrome://global/skin/in-content/common.css"
/>
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="toolkit/branding/brandings.ftl" />
<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>
diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
--- a/browser/components/BrowserGlue.sys.mjs
+++ b/browser/components/BrowserGlue.sys.mjs
@@ -617,16 +617,17 @@ let JSWINDOWACTORS = {
includeChrome: true,
allFrames: true,
matches: [
"about:welcome",
"about:welcome?*",
"about:preferences",
"chrome://browser/content/migration/migration-dialog-window.html",
+ "chrome://browser/content/spotlight.html",
],
},
PageInfo: {
child: {
esModuleURI: "resource:///actors/PageInfoChild.sys.mjs",
},
|
||
Updated•11 months ago
|
Hi Mike! Wondering if moving MigrationWizard from BrowserGlue to it's own MigrationUtils services impacts the ability to add Embedded Wizard to Spotlight modals in any way (that's the only thing I can think of that's changed) or if I'm missing something obvious?
I followed the same steps you mentioned above but added "chrome://browser/content/spotlight.html" in the matches array in browser/components/migration/MigrationUtils.sys.mjs instead but encountering an issue where I see the content but it's all in a loading state. The aria-state is set to busy and the content is in loading-blocks.
I do see a CSP error in console:
Content-Security-Policy: The page's settings blocked the loading of a resource at inline ("default-src"). 2 customElements.js:499:24
Content-Security-Policy: The page's settings blocked the loading of a resource at inline ("default-src"). panel.js:62:22
But it's not obvious to me why this would be blocked since it's a chrome resource (unless this isn't an issue at all).
|
|
||
Comment 5•11 months ago
|
||
Spoke to negin about this yesterday - this is due to bug 1838056. Thanks for spotting that, negin!
|
||
Updated•11 months ago
|
|
|
||
Updated•11 months ago
|
Hi Gabrielle! Was looking to get some feedback on the spotlight styles for embedded import wizard. I tried to the best of my ability to maintain our other spotlight styles/spacing and center alignment but open to any suggestions/fixes. This is currently only for internal use/testing.
|
|
||
Updated•10 months ago
|
|
|
Reporter | |
Updated•10 months ago
|
Hi Mike! Hopefully last poke on my end, but wondering if you might have any ideas why a test checking for the PANEL-LIST seems to fail consistently only on linux? Anything I might be missing specifically for Linux OS?
let [panelList] = win.document.querySelector("migration-wizard").children;
Assert.equal(panelList.tagName, "PANEL-LIST");
|
||
Comment 10•10 months ago
|
||
Pushed by nsauermann@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/c6d0b3c48379 Add Embedded Migration Wizard support for spotlight dialog r=omc-reviewers,pdahiya,mconley
|
||
Comment 11•10 months ago
|
||
| bugherder | ||
|
||
Comment 13•9 months ago
|
||
I have verified this enhancement using the latest Firefox Beta 116.0b8 (Build ID: 20230720200012) installed on Windows 10 x64, macOS 13.4.1, and Linux Mint 21.1. I can confirm the following:
- The "Embedded Migration Wizard" spotlight is successfully triggered if the "Show" button related to the "IMPORT_SETTINGS_EMBEDDED" from the ASRouter page is clicked.
- All the available information is successfully imported into the browser if the spotlight's "Import" button is clicked.
Description
•