1803446 - Implement "variant 2" version of the main selector page for the migration wizard

Status: RESOLVED FIXED

(Firefox :: Migration, enhancement)

Description

[Mike Conley (:mconley) (:⚙️)]

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.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

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.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Attachment: Implementation approach prototype

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Note that setting up the two variants can be done here:

https://searchfox.org/mozilla-central/rev/57527d50ef5d3df412caa5d99536f0709399be6f/browser/components/migration/content/migration-wizard.mjs#138-146

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:

1. Open a separate terminal from the one where you're pointed at the Firefox source code
2. Browse to your Firefox source directory again in the new terminal
3. Type in ./mach storybook install to install Storybook and its dependencies
4. 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   │
│                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────╯

5. In your original terminal, use ./mach run to launch Firefox
6. Browse to the localhost address that ./mach storybook emitted.
7. In the left pane, unfold "Components" and "Migration Wizard"
8. "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.
9. As you update migration-wizard.mjs or migration-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.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

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.

Comment 5

[Mike Conley (:mconley) (:⚙️)]

Hey Nolan,

So here's how I think you could approach this:

1. 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.
2. In #onShowingSelection, get access to the page-selection <div>, like this: let selectionPage = this.#shadow.querySelector("div[name='page-selection']");, and then use selectionPage.toggleAttribute to set a with-import-all attribute on the page depending on the value of withImportAll.
3. 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;
}

Comment 6

[Nolan Ishii]

Attachment: Bug 1803446 Implement 'variant 2' version of the main selector page for the migration wizard. r=mconley

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4fbc2cea28e9
Implement 'variant 2' version of the main selector page for the migration wizard. r=mconley

Comment 8

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/4fbc2cea28e9