Bug 1648175, remove history and library panel views from the main panel and place in template r=Gijs

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

browser/base/content/browser.css

@@ -860,6 +860,13 @@ menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
   transform: rotate(180deg);
 }
 
+/* Pocket */
+:root[pocketdisabled=true] #context-pocket,
+:root[pocketdisabled=true] #context-savelinktopocket,
+:root[pocketdisabled=true] #appMenu-library-pocket-button {
+  display: none;
+}
+
 /*  Full Screen UI */
 
 #fullscr-toggler {

browser/base/content/browser.xhtml

@@ -717,7 +717,92 @@
       </panel>
     </html:template>
   </popupset>
-  <box id="appMenu-viewCache" hidden="true"/>
+
+  <html:template id="appMenu-viewCache">
+    <panelview id="PanelUI-history" flex="1">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appMenuViewHistorySidebar"
+                       label="&appMenuHistory.viewSidebar.label;"
+                       label-checked="&appMenuHistory.hideSidebar.label;"
+                       label-unchecked="&appMenuHistory.viewSidebar.label;"
+                       type="checkbox"
+                       class="subviewbutton subviewbutton-iconic"
+                       key="key_gotoHistory"
+                       oncommand="SidebarUI.toggle('viewHistorySidebar');">
+                       <observes element="sidebar-box" attribute="positionend"/>
+        </toolbarbutton>
+        <toolbarbutton id="appMenuClearRecentHistory"
+                       label="&appMenuHistory.clearRecent.label;"
+                       class="subviewbutton subviewbutton-iconic"
+                       command="Tools:Sanitize"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appMenuRecentlyClosedTabs"
+                       label="&historyUndoMenu.label;"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedTabs', this)"/>
+        <toolbarbutton id="appMenuRecentlyClosedWindows"
+                       label="&historyUndoWindowMenu.label;"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedWindows', this)"/>
+        <toolbarseparator/>
+        <label value="&appMenuHistory.recentHistory.label;"
+               class="subview-subheader"/>
+        <toolbaritem id="appMenu_historyMenu"
+                     orient="vertical"
+                     smoothscroll="false"
+                     flatList="true"
+                     tooltip="bhTooltip">
+          <!-- history menu items will go here -->
+        </toolbaritem>
+      </vbox>
+      <toolbarbutton id="PanelUI-historyMore"
+                     class="panel-subview-footer subviewbutton"
+                     label="&appMenuHistory.showAll.label;"
+                     oncommand="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
+    </panelview>
+    <panelview id="appMenu-libraryView" class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appMenu-library-bookmarks-button"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       label="&bookmarksSubview.label;"
+                       closemenu="none"
+                       oncommand="BookmarkingUI.showSubView(this);"/>
+        <toolbarbutton id="appMenu-library-pocket-button"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&pocketMenuitem.label;"
+                       oncommand="Pocket.openList(event)"/>
+        <toolbarbutton id="appMenu-library-history-button"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       label="&historyMenu.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('PanelUI-history', this)"/>
+        <toolbarbutton id="appMenu-library-downloads-button"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       label="&libraryDownloads.label;"
+                       closemenu="none"
+                       oncommand="DownloadsSubview.show(this);"/>
+        <toolbarbutton id="appMenu-library-remotetabs-button"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav sync-ui-item"
+                       label="&appMenuRemoteTabs.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('PanelUI-remotetabs', this)"/>
+        <toolbarseparator hidden="true"/>
+        <label value="&appMenuRecentHighlights.label;"
+               hidden="true"
+               class="subview-subheader"/>
+        <toolbaritem id="appMenu-library-recentHighlights"
+                     hidden="true"
+                     orient="vertical"
+                     smoothscroll="false"
+                     flatList="true"
+                     tooltip="bhTooltip">
+          <!-- Recent Highlights will go here -->
+        </toolbaritem>
+      </vbox>
+    </panelview>
+  </html:template>
 
   <!-- Temporary wrapper until we move away from XUL flex to allow a negative
        margin-top to slide the toolbox off screen in fullscreen layout.-->

browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js

@@ -62,9 +62,9 @@ add_task(async function testAppMenuButtonWrongKey() {
 add_task(async function testLibraryButtonPress() {
   let button = document.getElementById("library-button");
   forceFocus(button);
+  EventUtils.synthesizeKey(" ");
   let view = document.getElementById("appMenu-libraryView");
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
-  EventUtils.synthesizeKey(" ");
   await focused;
   ok(true, "Focus inside Library menu after toolbar button pressed");
   let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);

browser/base/content/test/keyboard/browser_toolbarKeyNav.js

@@ -265,9 +265,9 @@ add_task(async function testArrowsOverflowButton() {
 add_task(async function testArrowsInPanelMultiView() {
   let button = document.getElementById("library-button");
   forceFocus(button);
+  EventUtils.synthesizeKey(" ");
   let view = document.getElementById("appMenu-libraryView");
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
-  EventUtils.synthesizeKey(" ");
   let focusEvt = await focused;
   ok(true, "Focus inside Library menu after toolbar button pressed");
   EventUtils.synthesizeKey("KEY_ArrowLeft");

browser/components/customizableui/PanelMultiView.jsm

@@ -328,6 +328,19 @@ var PanelMultiView = class extends AssociatedToNode {
       panelNode.remove();
     }
   }
+  /**
+   * Returns the element with the given id.
+   * For nodes that are lazily loaded and not yet in the DOM, the node should
+   * be retrieved from the view cache template.
+   */
+  static getViewNode(doc, id) {
+    let viewCacheTemplate = doc.getElementById("appMenu-viewCache");
+
+    return (
+      doc.getElementById(id) ||
+      viewCacheTemplate.content.querySelector("#" + id)
+    );
+  }
 
   /**
    * Ensures that when the specified window is closed all the <panelmultiview>
@@ -616,7 +629,7 @@ var PanelMultiView = class extends AssociatedToNode {
     // Node.children and Node.children is live to DOM changes like the
     // ones we're about to do, so iterate over a static copy:
     let subviews = Array.from(this._viewStack.children);
-    let viewCache = this.document.getElementById(viewCacheId);
+    let viewCache = this.document.getElementById("appMenu-viewCache");
     for (let subview of subviews) {
       viewCache.appendChild(subview);
     }
@@ -649,7 +662,7 @@ var PanelMultiView = class extends AssociatedToNode {
   async _showSubView(viewIdOrNode, anchor) {
     let viewNode =
       typeof viewIdOrNode == "string"
-        ? this.document.getElementById(viewIdOrNode)
+        ? PanelMultiView.getViewNode(this.document, viewIdOrNode)
         : viewIdOrNode;
     if (!viewNode) {
       Cu.reportError(new Error(`Subview ${viewIdOrNode} doesn't exist.`));

browser/components/customizableui/content/panelUI.inc.xhtml

@@ -437,49 +437,6 @@
 #endif
       </vbox>
     </panelview>
-    <panelview id="PanelUI-history" flex="1">
-      <vbox class="panel-subview-body">
-        <toolbarbutton id="appMenuViewHistorySidebar"
-                       label="&appMenuHistory.viewSidebar.label;"
-                       label-checked="&appMenuHistory.hideSidebar.label;"
-                       label-unchecked="&appMenuHistory.viewSidebar.label;"
-                       type="checkbox"
-                       class="subviewbutton subviewbutton-iconic"
-                       key="key_gotoHistory"
-                       oncommand="SidebarUI.toggle('viewHistorySidebar');">
-                       <observes element="sidebar-box" attribute="positionend"/>
-        </toolbarbutton>
-        <toolbarbutton id="appMenuClearRecentHistory"
-                       label="&appMenuHistory.clearRecent.label;"
-                       class="subviewbutton subviewbutton-iconic"
-                       command="Tools:Sanitize"/>
-        <toolbarseparator/>
-        <toolbarbutton id="appMenuRecentlyClosedTabs"
-                       label="&historyUndoMenu.label;"
-                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedTabs', this)"/>
-        <toolbarbutton id="appMenuRecentlyClosedWindows"
-                       label="&historyUndoWindowMenu.label;"
-                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedWindows', this)"/>
-        <toolbarseparator/>
-        <label value="&appMenuHistory.recentHistory.label;"
-               class="subview-subheader"/>
-        <toolbaritem id="appMenu_historyMenu"
-                     orient="vertical"
-                     smoothscroll="false"
-                     flatList="true"
-                     tooltip="bhTooltip">
-          <!-- history menu items will go here -->
-        </toolbaritem>
-      </vbox>
-      <toolbarbutton id="PanelUI-historyMore"
-                     class="panel-subview-footer subviewbutton"
-                     label="&appMenuHistory.showAll.label;"
-                     oncommand="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
-    </panelview>
 
     <panelview id="appMenu-library-recentlyClosedTabs"/>
     <panelview id="appMenu-library-recentlyClosedWindows"/>
@@ -794,47 +751,6 @@
       </vbox>
     </panelview>
 
-    <panelview id="appMenu-libraryView" class="PanelUI-subView">
-      <vbox class="panel-subview-body">
-        <toolbarbutton id="appMenu-library-bookmarks-button"
-                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                       label="&bookmarksSubview.label;"
-                       closemenu="none"
-                       oncommand="BookmarkingUI.showSubView(this);"/>
-        <toolbarbutton id="appMenu-library-pocket-button"
-                       class="subviewbutton subviewbutton-iconic"
-                       label="&pocketMenuitem.label;"
-                       oncommand="Pocket.openList(event)"/>
-        <toolbarbutton id="appMenu-library-history-button"
-                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                       label="&historyMenu.label;"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('PanelUI-history', this)"/>
-        <toolbarbutton id="appMenu-library-downloads-button"
-                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                       label="&libraryDownloads.label;"
-                       closemenu="none"
-                       oncommand="DownloadsSubview.show(this);"/>
-        <toolbarbutton id="appMenu-library-remotetabs-button"
-                       class="subviewbutton subviewbutton-iconic subviewbutton-nav sync-ui-item"
-                       label="&appMenuRemoteTabs.label;"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('PanelUI-remotetabs', this)"/>
-        <toolbarseparator hidden="true"/>
-        <label value="&appMenuRecentHighlights.label;"
-               hidden="true"
-               class="subview-subheader"/>
-        <toolbaritem id="appMenu-library-recentHighlights"
-                     hidden="true"
-                     orient="vertical"
-                     smoothscroll="false"
-                     flatList="true"
-                     tooltip="bhTooltip">
-          <!-- Recent Highlights will go here -->
-        </toolbaritem>
-      </vbox>
-    </panelview>
-
     <panelview id="PanelUI-fxa" title="&fxa.menu.account.label;" class="PanelUI-subView" descriptionheightworkaround="true">
       <vbox id="PanelUI-fxa-menu" class="panel-subview-body">
         <toolbarbutton id="fxa-manage-account-button"

browser/components/customizableui/content/panelUI.js

@@ -41,8 +41,6 @@ const PanelUI = {
       mainView: "appMenu-mainView",
       multiView: "appMenu-multiView",
       helpView: "PanelUI-helpView",
-      libraryView: "appMenu-libraryView",
-      libraryRecentHighlights: "appMenu-library-recentHighlights",
       menuButton: "PanelUI-menu-button",
       panel: "appMenu-popup",
       addonNotificationContainer: "appMenu-addon-banners",
@@ -192,7 +190,9 @@ const PanelUI = {
     this.menuButton.removeEventListener("mousedown", this);
     this.menuButton.removeEventListener("keypress", this);
     CustomizableUI.removeListener(this);
+    if (this.libraryView) {
       this.libraryView.removeEventListener("ViewShowing", this);
+    }
     this.whatsNewPanel.removeEventListener("ViewShowing", this);
   },
 
@@ -433,7 +433,8 @@ const PanelUI = {
     }
 
     this._ensureEventListenersAdded();
-    let viewNode = document.getElementById(aViewId);
+
+    let viewNode = PanelMultiView.getViewNode(document, aViewId);
     if (!viewNode) {
       Cu.reportError("Could not show panel subview with id: " + aViewId);
       return;
@@ -480,6 +481,7 @@ const PanelUI = {
       multiView.setAttribute("id", "customizationui-widget-multiview");
       multiView.setAttribute("viewCacheId", "appMenu-viewCache");
       multiView.setAttribute("mainViewId", viewNode.id);
+      multiView.appendChild(viewNode);
       tempPanel.appendChild(multiView);
       viewNode.classList.add("cui-widget-panelview");
 
@@ -529,10 +531,14 @@ const PanelUI = {
    * @param {panelview} viewNode The library view.
    */
   ensureLibraryInitialized(viewNode) {
-    if (viewNode != this.libraryView || viewNode._initialized) {
+    if (viewNode.id != "appMenu-libraryView" || viewNode._initialized) {
       return;
     }
 
+    if (!this.libraryView) {
+      this.libraryView = viewNode;
+    }
+
     viewNode._initialized = true;
     viewNode.addEventListener("ViewShowing", this);
   },
@@ -552,6 +558,12 @@ const PanelUI = {
       return;
     }
 
+    if (!this.libraryRecentHighlights) {
+      this.libraryRecentHighlights = document.getElementById(
+        "appMenu-library-recentHighlights"
+      );
+    }
+
     // Make the elements invisible synchronously, before the view is shown.
     this.makeLibraryRecentHighlightsInvisible();
 

browser/components/customizableui/test/browser_947914_button_history.js

@@ -36,9 +36,10 @@ add_task(async function() {
   let historyButton = document.getElementById("history-panelmenu");
   ok(historyButton, "History button appears in Panel Menu");
 
+  historyButton.click();
+
   let historyPanel = document.getElementById("PanelUI-history");
   let promise = BrowserTestUtils.waitForEvent(historyPanel, "ViewShown");
-  historyButton.click();
   await promise;
   ok(historyPanel.getAttribute("visible"), "History Panel is in view");
 

browser/components/customizableui/test/browser_ctrl_click_panel_opening.js

@@ -37,12 +37,12 @@ add_task(async function test_appMenu_libraryView() {
     return;
   }
 
-  const libraryView = document.getElementById("appMenu-libraryView");
   const button = document.getElementById("library-button");
 
-  let shownPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
   // Should still open the panel when Ctrl key is pressed.
   EventUtils.synthesizeMouseAtCenter(button, { ctrlKey: true });
+  const libraryView = document.getElementById("appMenu-libraryView");
+  let shownPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
   await shownPromise;
   ok(true, "Library menu shown after button pressed");
 

browser/components/customizableui/test/browser_library_after_appMenu.js

@@ -11,9 +11,9 @@ add_task(async function test_library_after_appMenu() {
   await gCUITestUtils.openMainMenu();
 
   // Show the Library view as a subview of the main menu.
+  document.getElementById("appMenu-library-button").click();
   let libraryView = document.getElementById("appMenu-libraryView");
   let promise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
-  document.getElementById("appMenu-library-button").click();
   await promise;
 
   // Show the Library view as the main view of the Library panel.
@@ -22,9 +22,9 @@ add_task(async function test_library_after_appMenu() {
   await promise;
 
   // Navigate to the History subview.
+  document.getElementById("appMenu-library-history-button").click();
   let historyView = document.getElementById("PanelUI-history");
   promise = BrowserTestUtils.waitForEvent(historyView, "ViewShown");
-  document.getElementById("appMenu-library-history-button").click();
   await promise;
 
   Assert.ok(PanelView.forNode(historyView).active);

browser/components/places/tests/browser/browser_enable_toolbar_sidebar.js

@@ -19,9 +19,9 @@ async function selectAppMenuView(buttonId, viewId) {
     btn = document.getElementById(buttonId);
     return btn;
   }, "Should have the " + buttonId + "button");
+  btn.click();
   let view = document.getElementById(viewId);
   let viewPromise = BrowserTestUtils.waitForEvent(view, "ViewShown");
-  btn.click();
   await viewPromise;
 }
 

browser/components/places/tests/browser/browser_panelview_bookmarks_delete.js

@@ -23,9 +23,9 @@ add_task(async function test_panelview_bookmarks_delete() {
 
   await gCUITestUtils.openMainMenu();
 
+  document.getElementById("appMenu-library-button").click();
   let libraryView = document.getElementById("appMenu-libraryView");
   let promise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
-  document.getElementById("appMenu-library-button").click();
   await promise;
 
   let bookmarksView = document.getElementById("PanelUI-bookmarks");

browser/components/places/tests/browser/browser_stayopenmenu.js

@@ -134,10 +134,10 @@ add_task(async function testStayopenBookmarksClicks() {
   );
   appMenu.click();
   await PopupShownPromise;
-  let libView = document.getElementById("appMenu-libraryView");
   let libraryBtn = document.getElementById("appMenu-library-button");
-  let ViewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
   libraryBtn.click();
+  let libView = document.getElementById("appMenu-libraryView");
+  let ViewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
   await ViewShownPromise;
   info("Library panel shown.");
   let bookmarks = document.getElementById("appMenu-library-bookmarks-button");

browser/components/places/tests/browser/browser_toolbar_library_downloads.js

@@ -9,9 +9,9 @@
 
 async function openDownloadsInLibraryToolbarButton() {
   let libraryBtn = document.getElementById("library-button");
+  libraryBtn.click();
   let libView = document.getElementById("appMenu-libraryView");
   let viewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
-  libraryBtn.click();
   await viewShownPromise;
 
   let downloadsButton;

browser/components/places/tests/browser/browser_toolbar_library_open_recent.js

@@ -23,9 +23,9 @@ let openedTabs = [];
 
 async function openBookmarksPanelInLibraryToolbarButton() {
   let libraryBtn = document.getElementById("library-button");
+  libraryBtn.click();
   let libView = document.getElementById("appMenu-libraryView");
   let viewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
-  libraryBtn.click();
   await viewShownPromise;
 
   let bookmarksButton;

browser/components/pocket/content/SaveToPocket.jsm

@@ -303,14 +303,10 @@ var SaveToPocket = {
   },
 
   updateElementsInWindow(win, enabled) {
-    let elementIds = [
+    if (enabled) {
-      "context-pocket",
+      win.document.documentElement.removeAttribute("pocketdisabled");
-      "context-savelinktopocket",
+    } else {
-      "appMenu-library-pocket-button",
+      win.document.documentElement.setAttribute("pocketdisabled", "true");
-    ];
-    let document = win.document;
-    for (let id of elementIds) {
-      document.getElementById(id).hidden = !enabled;
     }
   },
 

browser/components/pocket/test/browser_pocket_library_menu_action.js

@@ -20,11 +20,11 @@ add_task(async function() {
   );
 
   let libraryButton = document.getElementById("library-button");
-  let libraryView = document.getElementById("appMenu-libraryView");
 
   info("opening library menu");
-  let libraryPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
   libraryButton.click();
+  let libraryView = document.getElementById("appMenu-libraryView");
+  let libraryPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
   await libraryPromise;
 
   let pocketLibraryButton = document.getElementById(

browser/components/pocket/test/browser_pocket_ui_check.js

@@ -17,9 +17,18 @@ add_task(async function test_setup() {
 add_task(async function() {
   await promisePocketEnabled();
 
-  checkElements(true, ["pocket-button", "appMenu-library-pocket-button"]);
+  let libraryButton = document.getElementById("library-button");
-  let button = document.getElementById("pocket-button");
+  libraryButton.click();
-  is(button.hidden, false, "Button should not have been hidden");
+
+  let libraryView = document.getElementById("appMenu-libraryView");
+  let popupShown = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
+  await popupShown;
+
+  checkElementsShown(true, ["appMenu-library-pocket-button"]);
+
+  // Close the Library panel.
+  let popupHidden = BrowserTestUtils.waitForEvent(document, "popuphidden");
+  libraryView.closest("panel").hidePopup();
 
   // check context menu exists
   info("checking content context menu");
@@ -29,8 +38,8 @@ add_task(async function() {
   );
 
   let contextMenu = document.getElementById("contentAreaContextMenu");
-  let popupShown = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
+  popupShown = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
-  let popupHidden = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
+  popupHidden = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
   await BrowserTestUtils.synthesizeMouseAtCenter(
     "body",
     {
@@ -41,7 +50,7 @@ add_task(async function() {
   );
   await popupShown;
 
-  checkElements(true, ["context-pocket"]);
+  checkElementsShown(true, ["pocket-button", "context-pocket"]);
 
   contextMenu.hidePopup();
   await popupHidden;
@@ -57,7 +66,7 @@ add_task(async function() {
   );
   await popupShown;
 
-  checkElements(true, ["context-savelinktopocket"]);
+  checkElementsShown(true, ["context-savelinktopocket"]);
 
   contextMenu.hidePopup();
   await popupHidden;
@@ -65,26 +74,35 @@ add_task(async function() {
 
   await promisePocketDisabled();
 
-  checkElements(false, [
+  checkElementsShown(false, [
-    "appMenu-library-pocket-button",
     "context-pocket",
     "context-savelinktopocket",
+    "appMenu-library-pocket-button",
+    "pocket-button",
   ]);
-  button = document.getElementById("pocket-button");
-  is(button.hidden, true, "Button should have been hidden");
 
   let newWin = await BrowserTestUtils.openNewBrowserWindow();
-  checkElements(
+  libraryButton = newWin.document.getElementById("library-button");
+  libraryButton.click();
+
+  libraryView = newWin.document.getElementById("appMenu-libraryView");
+  popupShown = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
+  await popupShown;
+
+  checkElementsShown(
     false,
     [
-      "appMenu-library-pocket-button",
       "context-pocket",
       "context-savelinktopocket",
+      "appMenu-library-pocket-button",
+      "pocket-button",
     ],
     newWin
   );
-  button = newWin.document.getElementById("pocket-button");
+
-  is(button.hidden, true, "Button should have been hidden");
+  // Close the Library panel.
+  popupHidden = BrowserTestUtils.waitForEvent(newWin.document, "popuphidden");
+  libraryView.closest("panel").hidePopup();
 
   await BrowserTestUtils.closeWindow(newWin);
 

browser/components/pocket/test/head.js

@@ -61,3 +61,17 @@ function checkElements(expectPresent, l, win = window) {
     );
   }
 }
+
+function checkElementsShown(expectPresent, l, win = window) {
+  for (let id of l) {
+    let el =
+      win.document.getElementById(id) ||
+      win.gNavToolbox.palette.querySelector("#" + id);
+    let elShown = window.getComputedStyle(el).display != "none";
+    is(
+      elShown,
+      expectPresent,
+      "element " + id + (expectPresent ? " is" : " is not") + " present"
+    );
+  }
+}

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

@@ -33,9 +33,9 @@ var AppMenu = {
         );
         await reopenAppMenu(browserWindow);
 
+        browserWindow.document.getElementById("appMenu-library-button").click();
         let view = browserWindow.document.getElementById("appMenu-libraryView");
         let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
-        browserWindow.document.getElementById("appMenu-library-button").click();
         await promiseViewShown;
       },