Bug 1591040 - show both fullscreen and normal toolbar/tabstrip context menus in full screen, r=jaws,Gijs

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

browser/base/content/browser-fullScreenAndPointerLock.js

@@ -870,24 +870,11 @@ var FullScreen = {
     for (let el of document.querySelectorAll(
       "toolbar[fullscreentoolbar=true]"
     )) {
+      // Set the inFullscreen attribute to allow specific styling
+      // in fullscreen mode
       if (aEnterFS) {
-        // Give the main nav bar and the tab bar the fullscreen context menu,
-        // otherwise remove context menu to prevent breakage
-        el.setAttribute("saved-context", el.getAttribute("context"));
-        if (el.id == "nav-bar" || el.id == "TabsToolbar") {
-          el.setAttribute("context", "autohide-context");
-        } else {
-          el.removeAttribute("context");
-        }
-
-        // Set the inFullscreen attribute to allow specific styling
-        // in fullscreen mode
         el.setAttribute("inFullscreen", true);
       } else {
-        if (el.hasAttribute("saved-context")) {
-          el.setAttribute("context", el.getAttribute("saved-context"));
-          el.removeAttribute("saved-context");
-        }
         el.removeAttribute("inFullscreen");
       }
     }

browser/base/content/browser.js

@@ -6367,6 +6367,16 @@ nsBrowserAccess.prototype = {
   },
 };
 
+function showFullScreenViewContextMenuItems(popup) {
+  for (let node of popup.querySelectorAll('[contexttype="fullscreen"]')) {
+    node.hidden = !window.fullScreen;
+  }
+  let autoHide = popup.querySelector(".fullscreen-context-autohide");
+  if (autoHide) {
+    FullScreen.getAutohide(autoHide);
+  }
+}
+
 function onViewToolbarsPopupShowing(aEvent, aInsertPoint) {
   var popup = aEvent.target;
   if (popup != aEvent.currentTarget) {
@@ -6418,6 +6428,9 @@ function onViewToolbarsPopupShowing(aEvent, aInsertPoint) {
   let removeFromToolbar = popup.querySelector(
     ".customize-context-removeFromToolbar"
   );
+  // Show/hide fullscreen context menu items and set the
+  // autohide item's checked state to mirror the autohide pref.
+  showFullScreenViewContextMenuItems(popup);
   // View -> Toolbars menu doesn't have the moveToPanel or removeFromToolbar items.
   if (!moveToPanel || !removeFromToolbar) {
     return;

browser/base/content/main-popupset.inc.xhtml

@@ -92,6 +92,15 @@
               data-lazy-l10n-id="tab-context-reopen-closed-tabs"
               data-l10n-args='{"tabCount": 1}'
               observes="History:UndoCloseTab"/>
+    <menuseparator contexttype="fullscreen"/>
+    <menuitem class="fullscreen-context-autohide"
+              contexttype="fullscreen"
+              type="checkbox"
+              data-lazy-l10n-id="full-screen-autohide"
+              oncommand="FullScreen.setAutohide();"/>
+    <menuitem contexttype="fullscreen"
+              data-lazy-l10n-id="full-screen-exit"
+              oncommand="BrowserFullScreen();"/>
   </menupopup>
 
   <!-- bug 415444/582485: event.stopPropagation is here for the cloned version
@@ -394,6 +403,15 @@
               observes="cmd_CustomizeToolbars"
               class="viewCustomizeToolbar"
               data-lazy-l10n-id="toolbar-context-menu-view-customize-toolbar-2"/>
+    <menuseparator contexttype="fullscreen"/>
+    <menuitem class="fullscreen-context-autohide"
+              contexttype="fullscreen"
+              type="checkbox"
+              data-lazy-l10n-id="full-screen-autohide"
+              oncommand="FullScreen.setAutohide();"/>
+    <menuitem contexttype="fullscreen"
+              data-lazy-l10n-id="full-screen-exit"
+              oncommand="BrowserFullScreen();"/>
   </menupopup>
 
   <menupopup id="blockedPopupOptions"
@@ -411,15 +429,6 @@
     <menuseparator id="blockedPopupsSeparator"/>
   </menupopup>
 
-  <menupopup id="autohide-context"
-         onpopupshowing="FullScreen.getAutohide(this.firstChild);">
-    <menuitem type="checkbox" data-l10n-id="full-screen-autohide"
-              oncommand="FullScreen.setAutohide();"/>
-    <menuseparator/>
-    <menuitem data-l10n-id="full-screen-exit"
-              oncommand="BrowserFullScreen();"/>
-  </menupopup>
-
   <menupopup id="contentAreaContextMenu" pagemenu="#page-menu-separator"
              onpopupshowing="if (event.target != this)
                                return true;

browser/base/content/tabbrowser.js

@@ -7026,6 +7026,10 @@ var TabContextMenu = {
     document.getElementById("context_undoCloseTab").disabled =
       SessionStore.getClosedTabCount(window) == 0;
 
+    // Show/hide fullscreen context menu items and set the
+    // autohide item's checked state to mirror the autohide pref.
+    showFullScreenViewContextMenuItems(aPopupMenu);
+
     // Only one of Reload_Tab/Reload_Selected_Tabs should be visible.
     document.getElementById("context_reloadTab").hidden = multiselectionContext;
     document.getElementById(

browser/base/content/test/fullscreen/browser.ini

@@ -23,3 +23,4 @@ https_first_disabled = true
 support-files = fullscreen.html FullscreenFrame.jsm
 [browser_fullscreen_warning.js]
 support-files = fullscreen.html
+[browser_fullscreen_context_menu.js]

browser/base/content/test/fullscreen/browser_fullscreen_context_menu.js

@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+async function openContextMenu(itemElement, win = window) {
+  let popupShownPromise = BrowserTestUtils.waitForEvent(
+    itemElement.ownerDocument,
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    itemElement,
+    {
+      type: "contextmenu",
+      button: 2,
+    },
+    win
+  );
+  let { target } = await popupShownPromise;
+  return target;
+}
+
+async function testContextMenu() {
+  await BrowserTestUtils.withNewTab("about:blank", async () => {
+    let panelUIMenuButton = document.getElementById("PanelUI-menu-button");
+    let contextMenu = await openContextMenu(panelUIMenuButton);
+    let result1 = verifyContextMenu(contextMenu, [
+      ".customize-context-moveToPanel",
+      ".customize-context-removeFromToolbar",
+      "#toolbarItemsMenuSeparator",
+      "#toggle_toolbar-menubar",
+      "#toggle_PersonalToolbar",
+      "#viewToolbarsMenuSeparator",
+      ".viewCustomizeToolbar",
+    ]);
+    ok(!result1, "Expected no errors verifying context menu items");
+    contextMenu.hidePopup();
+    let onFullscreen = BrowserTestUtils.waitForEvent(window, "fullscreen");
+    document.getElementById("View:FullScreen").doCommand();
+    info("waiting for fullscreen");
+    await onFullscreen;
+    // make sure the toolbox is visible if it's autohidden
+    document.getElementById("Browser:OpenLocation").doCommand();
+    info("trigger the context menu");
+    let contextMenu2 = await openContextMenu(panelUIMenuButton);
+    info("context menu should be open, verify its menu items");
+    let result2 = verifyContextMenu(contextMenu2, [
+      ".customize-context-moveToPanel",
+      ".customize-context-removeFromToolbar",
+      "#toolbarItemsMenuSeparator",
+      "#toggle_toolbar-menubar",
+      "#toggle_PersonalToolbar",
+      "#viewToolbarsMenuSeparator",
+      ".viewCustomizeToolbar",
+      `menuseparator[contexttype="fullscreen"]`,
+      `.fullscreen-context-autohide`,
+      `menuitem[contexttype="fullscreen"]`,
+    ]);
+    ok(!result2, "Expected no errors verifying context menu items");
+    let onExitFullscreen = BrowserTestUtils.waitForEvent(window, "fullscreen");
+    document.getElementById("View:FullScreen").doCommand();
+    await onExitFullscreen;
+  });
+}
+
+function verifyContextMenu(contextMenu, itemSelectors) {
+  // Ignore hidden nodes
+  let items = Array.from(contextMenu.children).filter(n =>
+    BrowserTestUtils.is_visible(n)
+  );
+  let menuAsText = items
+    .map(n => {
+      return n.nodeName == "menuseparator"
+        ? "---"
+        : `${n.label} (${n.command})`;
+    })
+    .join("\n");
+  info("Got actual context menu items: \n" + menuAsText);
+
+  try {
+    is(
+      items.length,
+      itemSelectors.length,
+      "Context menu has the expected number of items"
+    );
+    for (let i = 0; i < items.length; i++) {
+      let selector = itemSelectors[i];
+      ok(
+        items[i].matches(selector),
+        `Item at ${i} matches expected selector: ${selector}`
+      );
+    }
+  } catch (ex) {
+    return ex;
+  }
+  return null;
+}
+
+add_task(testContextMenu);