From c95531067db6cf9c9166ca26a54d785b96b8e00a Mon Sep 17 00:00:00 2001
From: aminomancer <shmediaproductions@gmail.com>
Date: Fri, 21 Jan 2022 22:52:24 +0000
Subject: [PATCH] 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-fullScreenAndPointerLock.js       |  17 +--
 browser/base/content/browser.js               |  13 ++
 browser/base/content/main-popupset.inc.xhtml  |  27 ++--
 browser/base/content/tabbrowser.js            |   4 +
 .../base/content/test/fullscreen/browser.ini  |   1 +
 .../browser_fullscreen_context_menu.js        | 142 ++++++++++++++++++
 6 files changed, 180 insertions(+), 24 deletions(-)
 create mode 100644 browser/base/content/test/fullscreen/browser_fullscreen_context_menu.js

diff --git a/browser/base/content/browser-fullScreenAndPointerLock.js b/browser/base/content/browser-fullScreenAndPointerLock.js
index 8a08c7f88f9b..37cfc0fffb00 100644
--- a/browser/base/content/browser-fullScreenAndPointerLock.js
+++ b/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");
       }
     }
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 8544f39868ae..9a4f86720d61 100644
--- a/browser/base/content/browser.js
+++ b/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;
diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
index c531d2b0ce10..01b6e51c05ed 100644
--- a/browser/base/content/main-popupset.inc.xhtml
+++ b/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;
diff --git a/browser/base/content/tabbrowser.js b/browser/base/content/tabbrowser.js
index 2065617eb4c3..d14977814085 100644
--- a/browser/base/content/tabbrowser.js
+++ b/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(
diff --git a/browser/base/content/test/fullscreen/browser.ini b/browser/base/content/test/fullscreen/browser.ini
index 0241eb0abc26..fb5943edca6b 100644
--- a/browser/base/content/test/fullscreen/browser.ini
+++ b/browser/base/content/test/fullscreen/browser.ini
@@ -22,3 +22,4 @@ https_first_disabled = true
 support-files = fullscreen.html FullscreenFrame.jsm
 [browser_fullscreen_warning.js]
 support-files = fullscreen.html
+[browser_fullscreen_context_menu.js]
diff --git a/browser/base/content/test/fullscreen/browser_fullscreen_context_menu.js b/browser/base/content/test/fullscreen/browser_fullscreen_context_menu.js
new file mode 100644
index 000000000000..ec874f1a3f31
--- /dev/null
+++ b/browser/base/content/test/fullscreen/browser_fullscreen_context_menu.js
@@ -0,0 +1,142 @@
+/* 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 array1 = AppConstants.MENUBAR_CAN_AUTOHIDE
+      ? [
+          ".customize-context-moveToPanel",
+          ".customize-context-removeFromToolbar",
+          "#toolbarItemsMenuSeparator",
+          "#toggle_toolbar-menubar",
+          "#toggle_PersonalToolbar",
+          "#viewToolbarsMenuSeparator",
+          ".viewCustomizeToolbar",
+        ]
+      : [
+          ".customize-context-moveToPanel",
+          ".customize-context-removeFromToolbar",
+          "#toolbarItemsMenuSeparator",
+          "#toggle_PersonalToolbar",
+          "#viewToolbarsMenuSeparator",
+          ".viewCustomizeToolbar",
+        ];
+    let result1 = verifyContextMenu(contextMenu, array1);
+    ok(!result1, "Expected no errors verifying context menu items");
+    contextMenu.hidePopup();
+    let onFullscreen = Promise.all([
+      BrowserTestUtils.waitForEvent(window, "fullscreen"),
+      BrowserTestUtils.waitForEvent(
+        window,
+        "sizemodechange",
+        false,
+        e => window.fullScreen
+      ),
+      BrowserTestUtils.waitForPopupEvent(contextMenu, "hidden"),
+    ]);
+    document.getElementById("View:FullScreen").doCommand();
+    contextMenu.hidePopup();
+    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 array2 = AppConstants.MENUBAR_CAN_AUTOHIDE
+      ? [
+          ".customize-context-moveToPanel",
+          ".customize-context-removeFromToolbar",
+          "#toolbarItemsMenuSeparator",
+          "#toggle_toolbar-menubar",
+          "#toggle_PersonalToolbar",
+          "#viewToolbarsMenuSeparator",
+          ".viewCustomizeToolbar",
+          `menuseparator[contexttype="fullscreen"]`,
+          `.fullscreen-context-autohide`,
+          `menuitem[contexttype="fullscreen"]`,
+        ]
+      : [
+          ".customize-context-moveToPanel",
+          ".customize-context-removeFromToolbar",
+          "#toolbarItemsMenuSeparator",
+          "#toggle_PersonalToolbar",
+          "#viewToolbarsMenuSeparator",
+          ".viewCustomizeToolbar",
+          `menuseparator[contexttype="fullscreen"]`,
+          `.fullscreen-context-autohide`,
+          `menuitem[contexttype="fullscreen"]`,
+        ];
+    let result2 = verifyContextMenu(contextMenu2, array2);
+    ok(!result2, "Expected no errors verifying context menu items");
+    let onExitFullscreen = Promise.all([
+      BrowserTestUtils.waitForEvent(window, "fullscreen"),
+      BrowserTestUtils.waitForEvent(
+        window,
+        "sizemodechange",
+        false,
+        e => !window.fullScreen
+      ),
+      BrowserTestUtils.waitForPopupEvent(contextMenu2, "hidden"),
+    ]);
+    document.getElementById("View:FullScreen").doCommand();
+    contextMenu2.hidePopup();
+    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);