From 46d4e4667ed00764db93bf51059b51aca6792c6c Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Mon, 22 Jan 2024 12:05:34 +0000
Subject: [PATCH] Bug 1875079 - Part 2: Reduce max-height by zoom factor
 r=desktop-theme-reviewers,dao

Differential Revision: https://phabricator.services.mozilla.com/D198803
---
 .../customizableui/PanelMultiView.sys.mjs     |  8 ++++-
 browser/themes/windows/browser.css            | 31 -------------------
 toolkit/themes/shared/popup.css               |  5 +++
 3 files changed, 12 insertions(+), 32 deletions(-)

diff --git a/browser/components/customizableui/PanelMultiView.sys.mjs b/browser/components/customizableui/PanelMultiView.sys.mjs
index ba540544a232..520060415ab2 100644
--- a/browser/components/customizableui/PanelMultiView.sys.mjs
+++ b/browser/components/customizableui/PanelMultiView.sys.mjs
@@ -1219,7 +1219,13 @@ export var PanelMultiView = class extends AssociatedToNode {
     // this value will be easy to adjust.
     const EXTRA_MARGIN_PX = 20;
     maxHeight -= EXTRA_MARGIN_PX;
-    return maxHeight;
+
+    // if zoom factor is applied by touchmode then max-height will be zoomed
+    // too, which we do not want.
+    let zoomFactor = Number(
+      this._panel.ownerGlobal.getComputedStyle(this._panel).zoom ?? 1
+    );
+    return maxHeight / zoomFactor;
   }
 
   handleEvent(aEvent) {
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 5698fb3d9915..70270fd5d9d8 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -357,37 +357,6 @@
   margin-bottom: -10px;
 }
 
-/* Make menu items larger when opened through touch. */
-panel[touchmode],
-menupopup[touchmode] {
-  --arrowpanel-menuitem-padding-block: 12px;
-  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
-  /* The value for the header back icon padding is selected in a way that the
-   * height of the header and its separator will be equal to the panel inner
-   * top padding plus standard menuitem, so that the header's separator will
-   * be located excatly where a normal toolbarseparator would be located after
-   * the first menuitem, in a menu without a header. */
-  --arrowpanel-header-back-icon-padding: 10px;
-}
-
-:root[uidensity="compact"] panel[touchmode] {
-  --arrowpanel-header-back-icon-padding: 12px;
-}
-
-menupopup[touchmode] :is(menu, menuitem, menucaption) {
-  /* Use the var set in the rule above to increase menu items height in menupopups when
-   * they are opened through touch.
-   * Panel menu items already have their padding set in panelUI-shared.css with the same var. */
-  padding-block: var(--arrowpanel-menuitem-padding-block);
-}
-
-#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
-  /* The navigation menuitems are bigger to begin with because of their inner padding,
-   * so calculate the padding-block to match normal menuitems height when in touchmode.
-   * 3.5em is the desired menuitem height (~42px), minus the menuitem actual height devided by 2. */
-  padding-block: calc((3.5em - 32px) / 2);
-}
-
 /* Other menu separators don't extend all the way to the menu edges, but the
    one below the navigation buttons in the content context menu should. */
 #context-sep-navigation {
diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
index 6f231c4e8ca8..c0552c216d00 100644
--- a/toolkit/themes/shared/popup.css
+++ b/toolkit/themes/shared/popup.css
@@ -94,6 +94,11 @@ panel {
       padding: 0;
     }
   }
+
+  /* Make menu items larger when opened through touch. */
+  &[touchmode] {
+    zoom: 1.3;
+  }
 }
 
 menupopup {