1811933 - Replace placeholder <select> and <options> in MigrationWizard with a <button> and a <panel-list>

Status: RESOLVED FIXED

(Firefox :: Migration, task, P3)

Description

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

The <select> dropdown inside of the new MigrationWizard was always a placeholder while we built out the infrastructure that will eventually allow us to show richer content than a traditional <select> can be default.

Now that a bunch of the <panel-list> dependencies have landed, this bug is about replacing the existing <select> / <option> code with:

1. A <button> element that (for now) will list the browser name for the currently selected migrator
2. A <panel-item>'s to instead of <option> elements to be inserted into a <panel-list> that exists within a <slot> of the MigrationWizard.

This whole slotting thing might be confusing. Effectively, it allows somebody embedding the <migration-wizard> element to supply the <panel-list> that the <panel-item> elements will be injected into. This is useful because the variant of the MigrationWizard in, for example, the stand-alone XUL window, will need to be able to display this <panel-list> outside of the bounds of the window. This will also be necessary for this list to extend outside of the SubDialog frame after bug 1811281 puts it in there.

So the steps are:

1. Add a <slot> to the MigrationWizard markup. Just after the <named-deck> is probably good: https://searchfox.org/mozilla-central/rev/c5eeb9f4fcfe52b028e7774054444f2982feccc3/browser/components/migration/content/migration-wizard.mjs#84
2. Update migration-dialog-window.html to include an empty <panel-list> as the first and only child inside of the migration wizard here: migration-dialog-window.html
3. Update the MigrationWizard stories in https://searchfox.org/mozilla-central/rev/c5eeb9f4fcfe52b028e7774054444f2982feccc3/browser/components/storybook/stories/migration-wizard.stories.mjs to include a <panel-list> under the dynamically created <migration-wizard> here: https://searchfox.org/mozilla-central/rev/c5eeb9f4fcfe52b028e7774054444f2982feccc3/browser/components/storybook/stories/migration-wizard.stories.mjs#31.
4. Update this query selector to find the first <panel-list> child item here and set that as #browserProfileSelector.
5. Have this code here create <panel-item> elements rather than <option> elements, and appendChild them into the #browserProfileSelector.
6. Replace the <select> with a <button> that just has the name of the currently selected browser set as the .textContent of it in #onShowingSelection
7. Set up a click event handler on the button added in (6) to call toggle on #browserProfileSelector, passing that toggle call the click event as the only argument.
8. Update the migration-wizard documentation to mention that a <panel-list> is expected to be a child of the <migration-wizard> in order to work properly.

The end result is that we should be able to see a <panel-list> open up inside of Storybook upon clicking on the button added in (6), and it should list the "fake migrators" that the Storybook story provides.

Comment 1

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

More details on <slot> and slotted elements in general is here: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot.

Comment 3

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

Figma spec: https://www.figma.com/file/PcMkM0ZaSSy3zmS3CYGWNj/Handover---students?node-id=10%3A5968&t=har1ZiTk1WuSc5Vm-4

Comment 4

[portiawuu]

Attachment: Bug 1811933 -Replace placeholder <select> and <options> in MigrationWizard with a <button> and a <panel-list>. r=mconley!,kpatenio!,niklas!,gijs!

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e9f6febb0fcc
Replace placeholder <select> and <options> in MigrationWizard with a <button> and a <panel-list>. r=mconley,settings-reviewers

Comment 6

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/e9f6febb0fcc