Bug 1886362 - Fix about:welcome import button not collapsing on panel click r=mconley,reusable-components-reviewers,migration-reviewers,mstriemer

Differential Revision: https://phabricator.services.mozilla.com/D206946

browser/components/migration/content/migration-wizard.mjs

@@ -333,6 +333,7 @@ export class MigrationWizard extends HTMLElement {
     this.#getPermissionsButton.addEventListener("click", this);
 
     this.#browserProfileSelector.addEventListener("click", this);
+    this.#browserProfileSelector.addEventListener("mousedown", this);
     this.#resourceTypeList = shadow.querySelector("#resource-type-list");
     this.#resourceTypeList.addEventListener("change", this);
 
@@ -1396,9 +1397,7 @@ export class MigrationWizard extends HTMLElement {
     }
   }
 
-  handleEvent(event) {
+  #handleClickEvent(event) {
-    switch (event.type) {
-      case "click": {
     if (
       event.target == this.#importButton ||
       event.target == this.#importFromFileButton
@@ -1411,8 +1410,6 @@ export class MigrationWizard extends HTMLElement {
       this.dispatchEvent(
         new CustomEvent("MigrationWizard:Close", { bubbles: true })
       );
-        } else if (event.target == this.#browserProfileSelector) {
-          this.#browserProfileSelectorList.show(event);
     } else if (
       event.currentTarget == this.#browserProfileSelectorList &&
       event.target != this.#browserProfileSelectorList
@@ -1472,9 +1469,9 @@ export class MigrationWizard extends HTMLElement {
     } else if (event.target == this.#getPermissionsButton) {
       this.#getPermissions();
     }
-        break;
   }
-      case "change": {
+
+  #handleChangeEvent(event) {
     if (event.target == this.#browserProfileSelector) {
       this.#onBrowserProfileSelectionChanged();
     } else if (event.target == this.#selectAllCheckbox) {
@@ -1497,6 +1494,25 @@ export class MigrationWizard extends HTMLElement {
       this.#selectAllCheckbox.checked = allVisibleChecked;
       this.#displaySelectedResources();
     }
+  }
+
+  handleEvent(event) {
+    if (
+      event.target == this.#browserProfileSelector &&
+      (event.type == "mousedown" ||
+        (event.type == "click" &&
+          event.mozInputSource == MouseEvent.MOZ_SOURCE_KEYBOARD))
+    ) {
+      this.#browserProfileSelectorList.toggle(event);
+      return;
+    }
+    switch (event.type) {
+      case "click": {
+        this.#handleClickEvent(event);
+        break;
+      }
+      case "change": {
+        this.#handleChangeEvent(event);
         break;
       }
     }

browser/components/migration/tests/browser/browser_disabled_migrator.js

@@ -17,7 +17,7 @@ add_task(async function test_enabled_migrator() {
     let wizard = dialog.querySelector("migration-wizard");
     let shadow = wizard.openOrClosedShadowRoot;
     let selector = shadow.querySelector("#browser-profile-selector");
-    selector.click();
+    EventUtils.synthesizeMouseAtCenter(selector, {}, prefsWin);
 
     await new Promise(resolve => {
       shadow
@@ -78,7 +78,7 @@ add_task(async function test_disabling_migrator() {
     let wizard = dialog.querySelector("migration-wizard");
     let shadow = wizard.openOrClosedShadowRoot;
     let selector = shadow.querySelector("#browser-profile-selector");
-    selector.click();
+    EventUtils.synthesizeMouseAtCenter(selector, {}, prefsWin);
 
     await new Promise(resolve => {
       shadow

browser/components/migration/tests/browser/browser_do_migration.js

@@ -106,7 +106,7 @@ add_task(async function test_successful_migrations() {
     );
 
     let dialogClosed = BrowserTestUtils.waitForEvent(dialog, "close");
-    doneButton.click();
+    EventUtils.synthesizeMouseAtCenter(doneButton, {}, prefsWin);
     await dialogClosed;
     assertQuantitiesShown(wizard, [
       MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PASSWORDS,

browser/components/migration/tests/browser/browser_file_migration.js

@@ -132,7 +132,7 @@ add_task(async function test_file_migration() {
 
     // Now select our DummyFileMigrator from the list.
     let selector = shadow.querySelector("#browser-profile-selector");
-    selector.click();
+    EventUtils.synthesizeMouseAtCenter(selector, {}, prefsWin);
 
     info("Waiting for panel-list shown");
     await new Promise(resolve => {
@@ -246,7 +246,7 @@ add_task(async function test_file_migration_error() {
 
     // Now select our DummyFileMigrator from the list.
     let selector = shadow.querySelector("#browser-profile-selector");
-    selector.click();
+    EventUtils.synthesizeMouseAtCenter(selector, {}, prefsWin);
 
     info("Waiting for panel-list shown");
     await new Promise(resolve => {

browser/components/migration/tests/browser/head.js

@@ -332,7 +332,7 @@ async function selectResourceTypesAndStartMigration(
 
   // First, select the InternalTestingProfileMigrator browser.
   let selector = shadow.querySelector("#browser-profile-selector");
-  selector.click();
+  EventUtils.synthesizeMouseAtCenter(selector, {}, wizard.ownerGlobal);
 
   await new Promise(resolve => {
     shadow

browser/components/migration/tests/chrome/test_migration_wizard.html

@@ -147,7 +147,7 @@
         // Test that the resource type checkboxes are shown or hidden depending on
         // which resourceTypes are included with the MigratorProfileInstance.
         for (let migratorInstance of MIGRATOR_PROFILE_INSTANCES) {
-          selector.click();
+          synthesizeMouseAtCenter(selector, {}, gWiz.ownerGlobal);
           await new Promise(resolve => {
             gShadowRoot
               .querySelector("panel-list")
@@ -248,7 +248,7 @@
         ok(isHidden(preamble), "preamble should be hidden.");
 
         let selector = gShadowRoot.querySelector("#browser-profile-selector");
-        selector.click();
+        synthesizeMouseAtCenter(selector, {}, gWiz.ownerGlobal);
         await new Promise(resolve => {
           let panelList = gShadowRoot.querySelector("panel-list");
           if (panelList) {

toolkit/content/widgets/panel-list/panel-list.js

@@ -439,10 +439,6 @@
             // using the mouse. Ignore the first focusin event if it's on the
             // triggering target.
             this.focusHasChanged = true;
-          } else if (!target || !inPanelList) {
-            // If the target isn't in the panel, hide. This will close when focus
-            // moves out of the panel.
-            this.hide();
           } else {
             // Just record that there was a focusin event.
             this.focusHasChanged = true;