Implement "variant 2" version of the main selector page for the migration wizard
Categories
(Firefox :: Migration, enhancement)
Tracking
()
Tracking | Status | |
---|---|---|
firefox111 | --- | fixed |
People
(Reporter: mconley, Assigned: nolan.ishii)
References
(Blocks 1 open bug)
Details
Attachments
(2 files)
Figma link to follow.
This variant adds an expanding and collapsing section to the main selector page in the wizard so that users can choose to expand a list of resource types to import.
Reporter | ||
Updated•2 years ago
|
Reporter | ||
Comment 1•2 years ago
|
||
See this Figma document: https://www.figma.com/file/zGxI9CTrGnUMJQraD2Gtya/Import-Wizard-2.0?node-id=2563%3A66189&t=qA1prvDDBEMRXRhG-4
Variant 2 of the migration dialog encloses the resource type checkboxes ("Bookmarks", "Saved logins and passwords", etc) in an expanding / collapsing section that is collapsed by default. You can pan up with your track pad to see Variant 1 to see the difference.
The work for this will be in migration-wizard.mjs, which is the new migration wizard component that this team will be working on for next year.
I highly recommend reading this documentation for a high-level overview of how the <migration-wizard>
component works.
What I suggest we do is to use <details>
and <summary>
in order to get the behaviour that we want with Variant 2. What I think we can do is to actually share the same markup between the two variants, and use a CSS class or attribute and maybe a tiny bit of JavaScript to differentiate them.
I'll attach a document with a demo of what I have in mind. Load that up, and then read the source.
Reporter | ||
Comment 2•2 years ago
|
||
Reporter | ||
Comment 3•2 years ago
|
||
Note that setting up the two variants can be done here:
One last piece of advice - you can use a tool called Storybook to help more quickly work on this. Storybook packages up the migration wizard component in a way that lets us quickly put it in different states without having to do a full-blown migration every time.
Here's how to use Storybook:
- Open a separate terminal from the one where you're pointed at the Firefox source code
- Browse to your Firefox source directory again in the new terminal
- Type in
./mach storybook install
to install Storybook and its dependencies - Once that completes, do
./mach storybook
to launch it. This might take a few seconds, but it should spit out a http://localhost address that you can browse to. For me, that looks like this:
╭──────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Storybook 6.5.13 for Web-components started │
│ 7.22 s for preview │
│ │
│ Local: http://localhost:5703/ │
│ On your network: http://192.168.1.148:5703/ │
│ │
│ A new version (6.5.14) is available! │
│ │
│ Upgrade now: npx storybook@latest upgrade │
│ │
│ Read full changelog: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────╯
- In your original terminal, use
./mach run
to launch Firefox - Browse to the localhost address that
./mach storybook
emitted. - In the left pane, unfold "Components" and "Migration Wizard"
- "Main Selector Variant 1" and "Main Selector Variant 2" are the two modes you'll be working with. Right now, they look the same. We're going to want Variant 2 to behave more like the spec.
- As you update
migration-wizard.mjs
ormigration-wizard.css
, Storybook will automatically reload those assets so you don't have to rebuild or relaunch Storybook. It should react to you saving the file and reload the component automatically.
Reporter | ||
Comment 4•2 years ago
|
||
Last piece of information - in https://searchfox.org/mozilla-central/rev/57527d50ef5d3df412caa5d99536f0709399be6f/browser/components/migration/content/migration-wizard.mjs#138-146, the state
object will have state.withImportAll
set to false
to indicate that we want "Variant 1", and set to true
to indicate that we want "Variant 2". So you can use that to set your class inside of #onShowingSelection
.
Reporter | ||
Comment 5•2 years ago
|
||
Hey Nolan,
So here's how I think you could approach this:
- Apply the patch in bug 1803447 using
moz-phab patch D165090 --apply-to here
. That patch just needs one more review and then it can land, and it contains some changes that will be useful for you to build on. - In
#onShowingSelection
, get access to thepage-selection
<div>, like this:let selectionPage = this.#shadow.querySelector("div[name='page-selection']");
, and then useselectionPage.toggleAttribute
to set awith-import-all
attribute on the page depending on the value ofwithImportAll
. - In the migration-wizard.css file, you can use an attribute selector and descendant selectors like this:
div[name="page-selection"]:not([with-import-all]) .select-all,
div[name="page-selection"]:not([with-import-all]) summary {
display: none;
}
That will apply hiding rules when the with-import-all
attribute is not set. You can also apply rules when it is set using:
div[name="page-selection"][with-import-all] label:not(.select-all) {
margin-inline-start: 24px;
}
Assignee | ||
Comment 6•2 years ago
|
||
Comment 8•2 years ago
|
||
bugherder |
Description
•