Bug 1724962, when the uitour highlight opens from the show how button on the session restore infobar, also highlight the restore session option from the history menu when it is opened, r=Gijs

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

browser/base/content/appmenu-viewcache.inc.xhtml

@@ -172,7 +172,7 @@
                      class="subviewbutton subviewbutton-nav"
                      closemenu="none"
                      oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedWindows', this)"/>
-      <toolbarbutton id="appMenuRestoreSession"
+      <toolbarbutton id="appMenu-restoreSession"
                      data-l10n-id="appmenu-restore-session"
                      class="subviewbutton"
                      command="Browser:RestoreLastSession"/>

browser/components/customizableui/CustomizableWidgets.jsm

@@ -135,7 +135,7 @@ const CustomizableWidgets = [
 
       PanelMultiView.getViewNode(
         document,
-        "appMenuRestoreSession"
+        "appMenu-restoreSession"
       ).hidden = !SessionStore.canRestoreLastSession;
 
       // We restrict the amount of results to 42. Not 50, but 42. Why? Because 42.

browser/components/customizableui/test/browser_history_restore_session.js

@@ -20,7 +20,7 @@ add_task(async function testRestoreSession() {
   await openHistoryPanel(win.document);
 
   let restorePrevSessionBtn = win.document.getElementById(
-    "appMenuRestoreSession"
+    "appMenu-restoreSession"
   );
 
   Assert.ok(
@@ -41,7 +41,7 @@ add_task(async function testRestoreSession() {
 
   await openHistoryPanel(win.document);
 
-  restorePrevSessionBtn = win.document.getElementById("appMenuRestoreSession");
+  restorePrevSessionBtn = win.document.getElementById("appMenu-restoreSession");
   Assert.ok(
     !restorePrevSessionBtn.hidden,
     "Restore previous session button is visible"

browser/components/uitour/UITour.jsm

@@ -151,7 +151,14 @@ var UITour = {
       },
     ],
     ["help", { query: "#appMenu-help-button2" }],
-    ["history", { query: "#appMenu-history-button" }],
+    [
+      "history",
+      {
+        query: "#appMenu-history-button",
+        subItem: "restorePreviousSession",
+        level: "top",
+      },
+    ],
     ["home", { query: "#home-button" }],
     [
       "logins",
@@ -179,6 +186,7 @@ var UITour = {
       },
     ],
     ["readerMode-urlBar", { query: "#reader-mode-button" }],
+    ["restorePreviousSession", { query: "#appMenu-restoreSession" }],
     [
       "search",
       {
@@ -828,6 +836,20 @@ var UITour = {
     this.hideHighlight(aWindow);
     this.hideInfo(aWindow);
 
+    await this.removePanelListeners(aWindow, true);
+
+    this.noautohideMenus.clear();
+
+    // If there are no more tour tabs left in the window, teardown the tour for the whole window.
+    if (!openTourBrowsers || openTourBrowsers.size == 0) {
+      this.teardownTourForWindow(aWindow);
+    }
+  },
+
+  /**
+   * Remove the listeners to a panel when tearing the tour down.
+   */
+  async removePanelListeners(aWindow, aHidePanels = false) {
     let panels = [
       {
         name: "appMenu",
@@ -836,12 +858,14 @@ var UITour = {
           ["popuphidden", this.onPanelHidden],
           ["popuphiding", this.onAppMenuHiding],
           ["ViewShowing", this.onAppMenuSubviewShowing],
+          ["ViewShown", this.onAppMenuSubviewShown],
+          ["ViewHiding", this.onAppMenuSubviewHiding],
         ],
       },
     ];
     for (let panel of panels) {
       // Ensure the menu panel is hidden and clean up panel listeners after calling hideMenu.
-      if (panel.node.state != "closed") {
+      if (aHidePanels && panel.node.state != "closed") {
         await new Promise(resolve => {
           panel.node.addEventListener("popuphidden", resolve, { once: true });
           this.hideMenu(aWindow, panel.name);
@@ -851,13 +875,6 @@ var UITour = {
         panel.node.removeEventListener(name, listener);
       }
     }
-
-    this.noautohideMenus.clear();
-
-    // If there are no more tour tabs left in the window, teardown the tour for the whole window.
-    if (!openTourBrowsers || openTourBrowsers.size == 0) {
-      this.teardownTourForWindow(aWindow);
-    }
   },
 
   /**
@@ -961,6 +978,8 @@ var UITour = {
             targetName: aTargetName,
             widgetName: targetObject.widgetName,
             allowAdd: targetObject.allowAdd,
+            level: targetObject.level,
+            subItem: targetObject.subItem,
           });
         })
         .catch(log.error);
@@ -1118,6 +1137,16 @@ var UITour = {
       highlighter.parentElement.setAttribute("targetName", aTarget.targetName);
       highlighter.parentElement.hidden = false;
 
+      if (aTarget.subItem) {
+        // This is a subitem in the app menu, so mark it as one not to hide.
+        this.noautohideMenus.add("appMenu");
+        highlighter.parentElement.setAttribute("subitem", aTarget.subItem);
+      }
+
+      if (aTarget.level) {
+        highlighter.parentElement.setAttribute("level", aTarget.level);
+      }
+
       let highlightAnchor = aAnchorEl;
       let targetRect = highlightAnchor.getBoundingClientRect();
       let highlightHeight = targetRect.height;
@@ -1413,6 +1442,8 @@ var UITour = {
       menu.node = aWindow.PanelUI.panel;
       menu.onPopupHiding = this.onAppMenuHiding;
       menu.onViewShowing = this.onAppMenuSubviewShowing;
+      menu.onViewShown = this.onAppMenuSubviewShown;
+      menu.onViewHiding = this.onAppMenuSubviewHiding;
       menu.show = () => aWindow.PanelUI.show();
 
       if (!aOptions.autohide) {
@@ -1428,6 +1459,8 @@ var UITour = {
       menu.node.addEventListener("popuphidden", menu.onPanelHidden);
       menu.node.addEventListener("popuphiding", menu.onPopupHiding);
       menu.node.addEventListener("ViewShowing", menu.onViewShowing);
+      menu.node.addEventListener("ViewShown", menu.onViewShown);
+      menu.node.addEventListener("ViewHiding", menu.onViewHiding);
       menu.show();
     } else if (aMenuName == "bookmarks") {
       let menuBtn = aWindow.document.getElementById("bookmarks-menu-button");
@@ -1556,12 +1589,80 @@ var UITour = {
     UITour._hideAnnotationsForPanel(aEvent, false, UITour.targetIsInAppMenu);
   },
 
+  onAppMenuSubviewShown(aEvent) {
+    let win = aEvent.target.ownerGlobal;
+    let subItemName = UITour.getSubItem(win);
+    if (
+      subItemName &&
+      UITour.isSubItemToHighlight(win, subItemName, aEvent.target.id)
+    ) {
+      let highlighter = UITour.getHighlightAndMaybeCreate(win.document);
+      UITour.recreatePopup(highlighter.parentElement);
+
+      UITour.getTarget(win, subItemName).then(subItem => {
+        if (!subItem.node.hidden) {
+          UITour.showHighlight(win, subItem, "focus-outline", {
+            autohide: true,
+          });
+        }
+      });
+    } else if (subItemName && aEvent.target.id != "appMenu-protonMainView") {
+      UITour.stopSubViewHandling(win);
+    }
+  },
+
+  onAppMenuSubviewHiding(aEvent) {
+    let win = aEvent.target.ownerGlobal;
+
+    let subItem = UITour.getSubItem(win);
+    if (subItem) {
+      if (UITour.isSubItemToHighlight(win, subItem, aEvent.target.id)) {
+        UITour.hideHighlight(win);
+        UITour.stopSubViewHandling(win);
+      }
+    }
+  },
+
   onPanelHidden(aEvent) {
+    if (UITour.getSubItem(aEvent.target.ownerGlobal)) {
+      UITour.stopSubViewHandling(aEvent.target.ownerGlobal);
+    }
+
     aEvent.target.removeAttribute("noautohide");
     UITour.recreatePopup(aEvent.target);
     UITour.clearAvailableTargetsCache();
   },
 
+  getSubItem(aWindow) {
+    // Get the subitem that should be highlighted in the app menu's subview.
+    let highlighter = UITour.getHighlightContainerAndMaybeCreate(
+      aWindow.document
+    );
+    return highlighter.getAttribute("subitem");
+  },
+
+  isSubItemToHighlight(aWindow, aSubItem, aExpectedId) {
+    let targetObject = UITour.targets.get(aSubItem);
+    if (targetObject) {
+      let node = UITour.getNodeFromDocument(
+        aWindow.document,
+        targetObject.query
+      );
+      return aExpectedId == node?.closest("panelview")?.id;
+    }
+
+    return false;
+  },
+
+  stopSubViewHandling(aWindow) {
+    UITour.removePanelListeners(aWindow);
+    UITour.noautohideMenus.delete("appMenu");
+
+    let highlighter = UITour.getHighlightAndMaybeCreate(aWindow.document);
+    highlighter.parentElement.removeAttribute("level");
+    highlighter.parentElement.removeAttribute("subitem");
+  },
+
   recreatePopup(aPanel) {
     // After changing popup attributes that relate to how the native widget is created
     // (e.g. @noautohide) we need to re-create the frame/widget for it to take effect.

browser/components/uitour/test/browser_UITour_availableTargets.js

@@ -22,6 +22,7 @@ function getExpectedTargets() {
     "privateWindow",
     ...(hasQuit ? ["quit"] : []),
     "readerMode-urlBar",
+    "restorePreviousSession",
     "urlbar",
   ];
 }