Introduce new rich browser / profile selection dropdown
Categories
(Firefox :: Migration, enhancement, P3)
Tracking
()
People
(Reporter: mconley, Unassigned)
References
(Blocks 1 open bug)
Details
The current implementation of the new MigrationWizard uses a very simple <select> as the (temporary) browser and profile selector.
This bug tracks the work for introducing the new browser / profile selector that is spec'd out in Figma here: https://www.figma.com/file/PcMkM0ZaSSy3zmS3CYGWNj/Handover---students?node-id=10%3A5968&t=w22HZzLzgXLJAJF8-4
This work can be broken down into 3 parts:
- Adding a
<slot>
to the MigrationWizard template. This will make it so that users of the MigrationWizard can supply the panel-list like so:
<migration-wizard>
<panel-list/>
</migration-wizard>
We need the <panel-list> to be able to be slotted into the migration-wizard
because in the dialog case, we need it to be embedded in a XUL <panel> (bug 1802215) so that it can extend outside of the dialog area. The XUL <panel> work will happen later in this bug.
-
Replace the
<select>
with a<button>
. For now, this can be a simple button that just displays the name of the currently selected browser / profile. Make it so that when the button is clicked, thepanel-list
is toggled. -
In
MigrationWizard::#onShowingSelection
, update the function to createpanel-item
elements instead ofoption
elements, and to insert those into thepanel-list
. At this point, you should be able to open Storybook, click on the button, and see the list of browsers / profiles that Storybook includes as the dummy set. -
Make it so that when a panel-item is selected, the button added in (2) is updated.
-
Update migration-dialog.js to programmatically insert a XUL panel as the parent of the panel-list with the dialog's migration-wizard. This is a bit awkward, but we have to do it with
document.createXULElement
because our HTML5 parser has no idea what XUL is.
This will require tests - probably a new test task in browser/components/migration/test/chrome/test_migration_wizard.html
.
Updated•1 year ago
|
Reporter | ||
Updated•1 year ago
|
Reporter | ||
Updated•1 year ago
|
Description
•