Bug 1439358 - Part 7 - Close the main view synchronously before opening it in a different panel. r=Gijs

This also updates the AppMenu mozscreenshots module to work with the Photon main menu.

MozReview-Commit-ID: FciQH815F95

--HG--
extra : rebase_source : 5c129b0d4aa824bbe899066f2bb197106d1c0408

browser/components/customizableui/PanelMultiView.jsm

@@ -378,7 +378,7 @@ this.PanelMultiView = class extends this.AssociatedToNode {
 
     // Proxy these public properties and methods, as used elsewhere by various
     // parts of the browser, to this instance.
-    ["goBack", "showMainView", "showSubView"].forEach(method => {
+    ["goBack", "showSubView"].forEach(method => {
       Object.defineProperty(this.node, method, {
         enumerable: true,
         value: (...args) => this[method](...args)
@@ -509,7 +509,7 @@ this.PanelMultiView = class extends this.AssociatedToNode {
           }
         }
         // Allow any of the ViewShowing handlers to prevent showing the main view.
-        if (!(await this.showMainView())) {
+        if (!(await this._showMainView())) {
           cancelCallback();
         }
       } catch (ex) {
@@ -547,7 +547,7 @@ this.PanelMultiView = class extends this.AssociatedToNode {
    * state of the anchor, and the panel is already invisible.
    */
   hidePopup() {
-    if (!this.node) {
+    if (!this.node || !this.connected) {
       return;
     }
 
@@ -560,6 +560,11 @@ this.PanelMultiView = class extends this.AssociatedToNode {
     } else {
       this._openPopupCancelCallback();
     }
+
+    // We close all the views synchronously, so that they are ready to be opened
+    // in other PanelMultiView instances. The "popuphidden" handler may also
+    // call this function, but the second time openViews will be empty.
+    this.closeAllViews();
   }
 
   /**
@@ -659,12 +664,19 @@ this.PanelMultiView = class extends this.AssociatedToNode {
   /**
    * Prepares the main view before showing the panel.
    */
-  async showMainView() {
+  async _showMainView() {
     if (!this.node || !this._mainViewId) {
       return false;
     }
 
     let nextPanelView = PanelView.forNode(this._mainView);
+
+    // If the view is already open in another panel, close the panel first.
+    let oldPanelMultiViewNode = nextPanelView.node.panelMultiView;
+    if (oldPanelMultiViewNode) {
+      PanelMultiView.forNode(oldPanelMultiViewNode).hidePopup();
+    }
+
     if (!(await this._openView(nextPanelView))) {
       return false;
     }
@@ -762,6 +774,16 @@ this.PanelMultiView = class extends this.AssociatedToNode {
     panelView.node.panelMultiView = null;
   }
 
+  /**
+   * Closes all the views that are currently open.
+   */
+  closeAllViews() {
+    // Raise ViewHiding events for open views in reverse order.
+    while (this.openViews.length) {
+      this._closeLatestView();
+    }
+  }
+
   /**
    * Apply a transition to 'slide' from the currently active view to the next
    * one.
@@ -1094,10 +1116,7 @@ this.PanelMultiView = class extends this.AssociatedToNode {
         this.hideAllViewsExcept(null);
         this.window.removeEventListener("keydown", this);
         this._panel.removeEventListener("mousemove", this);
-        // Raise ViewHiding events for open views in reverse order.
-        while (this.openViews.length) {
-          this._closeLatestView();
-        }
+        this.closeAllViews();
 
         // Clear the main view size caches. The dimensions could be different
         // when the popup is opened again, e.g. through touch mode sizing.

browser/components/customizableui/content/panelUI.js

@@ -336,15 +336,6 @@ const PanelUI = {
     this._isReady = true;
   },
 
-  /**
-   * Switch the panel to the main view if it's not already
-   * in that view.
-   */
-  showMainView() {
-    this._ensureEventListenersAdded();
-    this.multiView.showMainView();
-  },
-
   /**
    * Switch the panel to the help view if it's not already
    * in that view.
@@ -415,19 +406,11 @@ const PanelUI = {
       tempPanel.classList.toggle("cui-widget-panelWithFooter",
                                  viewNode.querySelector(".panel-subview-footer"));
 
-      // If the panelview is already selected in another PanelMultiView instance
-      // as a subview, make sure to properly hide it there.
-      let oldMultiView = viewNode.panelMultiView;
-      if (oldMultiView && oldMultiView.current == viewNode) {
-        await oldMultiView.showMainView();
-      }
-
       let multiView = document.createElement("panelmultiview");
       multiView.setAttribute("id", "customizationui-widget-multiview");
       multiView.setAttribute("viewCacheId", "appMenu-viewCache");
       multiView.setAttribute("mainViewId", viewNode.id);
       multiView.setAttribute("ephemeral", true);
-      document.getElementById("appMenu-viewCache").appendChild(viewNode);
       tempPanel.appendChild(multiView);
       viewNode.classList.add("cui-widget-panelview");
 

browser/tools/mozscreenshots/mozscreenshots/extension/configurations/AppMenu.jsm

@@ -7,43 +7,31 @@
 this.EXPORTED_SYMBOLS = ["AppMenu"];
 
 ChromeUtils.import("resource://gre/modules/Services.jsm");
+ChromeUtils.import("resource://testing-common/BrowserTestUtils.jsm");
 
 this.AppMenu = {
 
   init(libDir) {},
 
   configurations: {
-    appMenuClosed: {
+    appMenuMainView: {
       selectors: ["#appMenu-popup"],
       async applyConfig() {
         let browserWindow = Services.wm.getMostRecentWindow("navigator:browser");
-        browserWindow.PanelUI.hide();
-      },
-    },
-
-    appMenuMainView: {
-      selectors: ["#appMenu-popup"],
-      applyConfig() {
-        let browserWindow = Services.wm.getMostRecentWindow("navigator:browser");
-        let promise = browserWindow.PanelUI.show();
-        browserWindow.PanelUI.showMainView();
-        return promise;
+        await reopenAppMenu(browserWindow);
       },
     },
 
     appMenuHistorySubview: {
       selectors: ["#appMenu-popup"],
       async applyConfig() {
-        // History has a footer
-        if (isCustomizing()) {
-          return "Can't show subviews while customizing";
-        }
         let browserWindow = Services.wm.getMostRecentWindow("navigator:browser");
-        await browserWindow.PanelUI.show();
-        browserWindow.PanelUI.showMainView();
-        browserWindow.document.getElementById("history-panelmenu").click();
+        await reopenAppMenu(browserWindow);
 
-        return undefined;
+        let view = browserWindow.document.getElementById("appMenu-libraryView");
+        let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
+        browserWindow.document.getElementById("appMenu-library-button").click();
+        await promiseViewShown;
       },
 
       verifyConfig: verifyConfigHelper,
@@ -52,15 +40,13 @@ this.AppMenu = {
     appMenuHelpSubview: {
       selectors: ["#appMenu-popup"],
       async applyConfig() {
-        if (isCustomizing()) {
-          return "Can't show subviews while customizing";
-        }
         let browserWindow = Services.wm.getMostRecentWindow("navigator:browser");
-        await browserWindow.PanelUI.show();
-        browserWindow.PanelUI.showMainView();
-        browserWindow.document.getElementById("PanelUI-help").click();
+        await reopenAppMenu(browserWindow);
 
-        return undefined;
+        let view = browserWindow.document.getElementById("PanelUI-helpView");
+        let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
+        browserWindow.document.getElementById("appMenu-help-button").click();
+        await promiseViewShown;
       },
 
       verifyConfig: verifyConfigHelper,
@@ -69,6 +55,14 @@ this.AppMenu = {
   },
 };
 
+async function reopenAppMenu(browserWindow) {
+  browserWindow.PanelUI.hide();
+  let view = browserWindow.document.getElementById("appMenu-mainView");
+  let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
+  await browserWindow.PanelUI.show();
+  await promiseViewShown;
+}
+
 function verifyConfigHelper() {
   if (isCustomizing()) {
     return "navigator:browser has the customizing attribute";