This this awkward mechanism that we have now where embedders can slot in a <xul:panel> with a <panel-list> child, or a <panel-list> itself, depending on what context they're in, and then the Migration Wizard populates the <panel-list> with items representing the various options in the selection dropdown.

That whole thing is pretty unwieldy and non-obvious. What we might want to investigate doing is having the Migration Wizard take responsibility for creating the panel-list, and then (if it detects it's in a XUL context), having it insert it into a <xul:panel>, before placing it within its own shadow DOM. That way, it's easier for us to style the panel / panel-list.

Comment on attachment 9327214 [details]
Bug 1823489 - Making the Migration Wizard panel / panel-list the exact width as the selector. r=mconley,kpatenio

Revision D174801 was moved to bug 1825070. Setting attachment 9327214 [details] to obsolete.

So part of the issue here is that the panel-list doesn't appear to be designed to live within closed shadow roots. The panel-list has a mousedown event listener on the document element to detect clicks outside of the panel-list to hide it, and when within a closed shadow root, it can't correctly determine if a click had occurred within it and will always close.

There are ways we can deal with that in privileged scopes using things like composedTarget.flattenedTreeParentNode and other ChromeOnly goodies, but that doesn't work in embedded environments like about:welcome.

So I think the decision here is either:

1. Stick with the current somewhat awkward configuration
2. Open the shadow root

This involves opening the shadow root of the migration wizard, as the panel-list
really isn't designed to handle being embedded within a closed shadow root.

The CSS rule changes here allow for the list to get long and then become scrollable.

The script change is because it seems that there's a race of some kind where the
XUL panel will often have size 0x0 the first time it is opened unless we wait
for an rAF and another tick of the event loop.

Backed out 2 changesets (Bug 1823489) for causing failures in test_panel_list_min_width_from_anchor.html

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&collapsedPushes=842382&selectedTaskRun=ejqGTePWSwa6CG4GaQ4DqA.0&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=abe4ae7a4c01c2d74c5443568aa322bfdc4a5abf

Log: https://treeherder.mozilla.org/logviewer?job_id=421901634&repo=autoland&lineNumber=5753
https://treeherder.mozilla.org/logviewer?job_id=421901751&repo=autoland&lineNumber=11411
https://treeherder.mozilla.org/logviewer?job_id=421903328&repo=autoland&lineNumber=4901

Backout: https://hg.mozilla.org/integration/autoland/rev/79048d572b16037b647c43078f228b6f8d500900

Backed out for causing multiple bc failures.

• Backout link

• Push with failures - bc failures on browser_aboutwelcome_multistage_mr.js
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | browser/components/newtab/test/browser/browser_aboutwelcome_multistage_mr.js | Found the <panel-list>. - null == true - got null, expected true (operator ==)

• Push with failures - bc failures on browser_multistage_spotlight.js
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | browser/components/newtab/test/browser/browser_multistage_spotlight.js | Uncaught exception in test bound test_embedded_import - at chrome://mochitests/content/browser/browser/components/newtab/test/browser/browser_multistage_spotlight.js:85 - TypeError: can't access property "tagName", panelList is undefined

Backed out 2 changesets (bug 1823489) for causing bc failures at browser_multistage_spotlight.js

Backout: https://hg.mozilla.org/integration/autoland/rev/9def1c737c0c78c4e0b43f5e591fad2ae87a4239

Failure push: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=6846482526724b81af0a56de1a5892492a8ba2c2&selectedTaskRun=UmDWG_boSLqOLm2xQoFWgQ.0

Failure log:
https://treeherder.mozilla.org/logviewer?job_id=422136256&repo=autoland&lineNumber=7295

https://hg.mozilla.org/mozilla-central/rev/e57b37964732
https://hg.mozilla.org/mozilla-central/rev/7826f701a72e