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
2022-01-21 22:52:24 +00:00 · 2022-01-21 22:52:24 +00:00 · c95531067d
--- 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");
      }
    }
--- 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;
--- 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;
--- 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(
--- 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]
--- a/browser/base/content/test/fullscreen/browser_fullscreen_context_menu.js
+++ 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);