replicate edge's context menu spacing #37

chrome/global/popup.css

@@ -1,22 +1,42 @@
 /* EdgeFr-Fox by bmFtZQ - popup.css */
 
 :root {
+  --panel-subview-body-padding: 2px 0 !important;
   --arrowpanel-border-radius: 8px !important;
-  --panel-subview-body-padding: 4px 0 !important;
   --arrowpanel-menuitem-border-radius: 4px !important;
-  --arrowpanel-menuitem-margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important;
+  --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
   --arrowpanel-menuitem-padding-block: 6px !important;
-  --arrowpanel-menuitem-padding-inline: 11px !important;
+  --arrowpanel-menuitem-padding-inline: 10px !important;
   --uc-arrowpanel-menuicon-margin-inline: 14px;
-  --panel-separator-margin-vertical: 4px !important;
+  --uc-arrowpanel-menuitem-margin-inline: 4px;
+  --uc-arrowpanel-menuitem-margin-block: 2px;
+  --panel-separator-margin-vertical: 2px !important;
   --panel-separator-margin-horizontal: 0 !important;
+
   --uc-panel-zoom-button-padding: 8px;
   --uc-panel-zoom-button-inline-padding: 9px;
+  --uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block));
+
   --uc-autocomplete-panel-menuitem-margin: 4px;
   --uc-autocomplete-panel-menuicon-padding-inline: 14px;
   --uc-autocomplete-panel-separator-margin-vertical: 4px;
-  --uc-arrowpanel-menuitem-margin-inline: 4px;
+
-  --uc-panel-zoom-padding-block: var(--panel-separator-margin-vertical);
+  --uc-permission-itemcontainer-padding-block: 8px;
+  --uc-permission-item-margin-block: 4px;
+  --uc-permission-item-padding-inline: 16px;
+
+  --uc-contextmenu-border-radius: 8px;
+  --uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0;
+  --uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width));
+  --uc-contextmenu-menuitem-padding-block: 6px;
+  --uc-contextmenu-menuitem-padding-inline: 10px;
+  --uc-contextmenu-menuitem-border-width: 2px;
+  --uc-contextmenu-menuicon-margin-inline: 12px;
+  --uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width));
+  --uc-contextmenu-menuitem-margin-block: 0px;
+  --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline);
+  --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width));
+  --uc-contextmenu-separator-horizontal: 0;
 }
 
 /* app menu */
@@ -28,7 +48,8 @@
   border-radius: var(--arrowpanel-menuitem-border-radius) !important;
 }
 
-#appMenu-fxa-label2>vbox>label {
+#appMenu-fxa-label2 label,
+#PanelUI-fxa-menu-syncnow-button label {
   margin-block: 0 !important;
 }
 
@@ -92,7 +113,7 @@
 
 /* #appMenu-zoomReduce-button2, */
 #appMenu-zoom-controls2>#appMenu-fullscreen-button2 {
-  margin-left: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important;
+  margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important;
 }
 
 #appMenu-zoom-controls2>#appMenu-fullscreen-button2::before {
@@ -102,7 +123,7 @@
   position: relative;
   height: 32px;
   margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
-  transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - var(--panel-separator-margin-vertical) - 1px));
+  transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
 }
 
 #appMenu-zoomReset-button2 {
@@ -130,11 +151,39 @@
   stroke: none !important;
 }
 
+#appMenu-zoomReset-button2>.toolbarbutton-text,
 #appMenu-fullscreen-button2>.toolbarbutton-icon {
   background-color: transparent !important;
   padding: 0 !important;
 }
 
+.subviewbutton[shortcut]::after {
+  opacity: 0.7 !important;
+}
+
+#widget-overflow-mainView .panel-subview-body {
+  padding-bottom: 0 !important;
+}
+
+.PanelUI-subView>.panel-header+toolbarseparator {
+  margin-bottom: 0 !important;
+}
+
+.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body {
+  padding-top: var(--panel-separator-margin-vertical) !important;
+}
+
+#identity-popup-security-button {
+  margin-bottom: var(--panel-separator-margin-vertical) !important;
+}
+
+#permission-popup-mainView-panel-header,
+#identity-popup-mainView-panel-header,
+#protections-popup-mainView-panel-header,
+.panel-header {
+  min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important;
+}
+
 /* URL bar popup */
 .panel-footer>button {
   border-radius: 2px !important;
@@ -156,13 +205,47 @@
   margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important;
 }
 
+#identity-popup-mainView-panel-header-span,
+#permission-popup-mainView-panel-header-span,
+#identity-popup-mainView-panel-header label,
+#permission-popup-mainView-panel-header label,
+#protections-popup-mainView-panel-header-span {
+  margin-block: 0 !important;
+}
+
+.permission-popup-section {
+  padding-block: var(--uc-permission-itemcontainer-padding-block) !important;
+}
+
+#permission-popup-permissions-content {
+  padding-inline: var(--uc-permission-item-padding-inline) !important;
+}
+
+.permission-popup-permission-item,
+#permission-popup-storage-access-permission-list-header {
+  margin-block: var(--uc-permission-item-margin-block) !important;
+}
+
+.permission-popup-permission-label,
+.permission-popup-permission-header-label {
+  margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
+}
+
+#editBookmarkPanel > #editBookmarkHeaderSeparator,
+#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
+  margin-inline: 0 !important;
+}
+
 /* subview */
 .panel-header {
   padding: 4px;
   padding-top: 4px !important;
 }
 
-.panel-header+toolbarseparator {
+.panel-header+toolbarseparator,
+#identity-popup-mainView-panel-header+toolbarseparator,
+#permission-popup-mainView-panel-header+toolbarseparator,
+#protections-popup-mainView-panel-header-section+toolbarseparator {
   margin-block-start: 0 !important;
 }
 
@@ -217,6 +300,11 @@
   padding: 1.5em 16px 1.7em !important;
 }
 
+#downloadsHistory .button-text {
+  margin-block: 0 !important;
+  margin-inline: 0 !important;
+}
+
 .PanelUI-subView .subviewbutton-nav::after,
 #PlacesToolbar menu>.menu-right,
 .subviewbutton>.menu-right {
@@ -233,24 +321,22 @@
 #PopupAutoComplete .autocomplete-richlistitem[originaltype="loginsFooter"] {
   -moz-box-pack: start !important;
   color: inherit !important;
-  border: 0 !important;
-  border-color: var(--panel-separator-color) !important;
   background-color: transparent !important;
   height: 28px !important;
   min-height: 28px !important;
-  padding-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
+  padding-inline-start: var(--uc-contextmenu-menuitem-padding-inline) !important;
   position: relative !important;
   overflow: visible !important;
-  margin-top: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important;
+  margin-top: calc(var(--uc-contextmenu-separator-vertical) * 2 + 1px) !important;
 }
 
 .autocomplete-richlistitem[originaltype="loginsFooter"]::before {
   content: "";
-  width: calc(100% + var(--uc-arrowpanel-menuitem-margin-inline) * 2);
+  width: calc(100% + var(--uc-contextmenu-menuitem-margin-inline) * 2);
   border-top: 1px solid var(--panel-separator-color);
   position: absolute;
-  top: calc(var(--panel-separator-margin-vertical) * -1 - 1px);
+  top: calc((var(--uc-contextmenu-separator-vertical) + var(--uc-contextmenu-menuitem-border-width)) * -1 - 1px);
-  left: calc(var(--uc-arrowpanel-menuitem-margin-inline) * -1);
+  left: calc(var(--uc-contextmenu-menuitem-margin-inline) * -1);
 }
 
 #PopupAutoComplete .autocomplete-richlistitem:hover {
@@ -272,13 +358,32 @@
   margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !important;
 }
 
+/* workaround for inaccessible shadow-root element
+ moves the shadow-root element underneath, and away from panel edges */
+#PopupAutoComplete {
+  padding-block: 10px !important;
+  padding-inline: 2px !important;
+}
+
+panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox {
+  margin-block: -10px !important;
+  margin-inline: -2px !important;
+  padding: var(--uc-contextmenu-padding) !important;
+  border-radius: var(--uc-contextmenu-border-radius) !important;
+  color: inherit !important;
+}
+
+#PopupAutoComplete>richlistbox>richlistitem>.two-line-wrapper {
+  padding-block: 0 !important;
+  padding-inline-end: calc((var(--uc-autocomplete-panel-menuitem-margin) + var(--arrowpanel-menuitem-padding-inline)) * 2) !important;
+}
+
 #PlacesToolbar menuitem,
 #PlacesToolbar menu,
-.subview-subheader,
 panelview .toolbarbutton-1,
 .subviewbutton,
 .widget-overflow-list .toolbarbutton-1 {
-  min-height: calc(16px + var(--arrowpanel-menuitem-padding-block) * 2) !important;
+  min-height: calc(16px + var(--uc-contextmenu-menuitem-padding-block) * 2) !important;
 }
 
 /* Context Menu */
@@ -308,19 +413,24 @@ panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
 
 /* make room for menu shadow */
 menupopup {
-  padding: 8px 16px 26px !important;
+  padding: 4px 12px 20px !important;
-  margin: -12px -16px -22px !important;
+  margin: -6px -12px -16px !important;
+}
+
+#bookmarks-menu-button menupopup {
+  padding: 4px 12px 20px !important;
+  margin: -8px -24px -16px -12px !important;
 }
 
 /* cut off shadow so it doesn't get in the way of the menubar items */
 menubar menupopup {
-  padding: 1px 10px 26px !important;
+  padding: 1px 8px 20px !important;
-  margin: -1px -10px -22px !important;
+  margin: -1px -4px -16px !important;
 }
 
 .menupopup-arrowscrollbox {
   box-shadow:
-    0 10px 16px #0003,
+    0 8px 12px #0003,
     0 4px 5px #0002,
     0 2px 4px #0002,
     0 0 0 1px #0001 !important;
@@ -330,7 +440,7 @@ menubar menupopup {
 @media (prefers-color-scheme:dark) {
   .menupopup-arrowscrollbox {
     box-shadow:
-      0 10px 18px #0003,
+      0 8px 12px #0003,
       0 4px 5px #0003,
       0 2px 4px #0002,
       0 0 0 1px #0002 !important;
@@ -338,11 +448,10 @@ menubar menupopup {
 }
 
 .popup-internal-box,
-panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
 .menupopup-arrowscrollbox {
   margin: 0 !important;
-  padding: var(--panel-subview-body-padding) !important;
+  padding: var(--uc-contextmenu-padding) !important;
-  border-radius: var(--arrowpanel-border-radius) !important;
+  border-radius: var(--uc-contextmenu-border-radius) !important;
   color: inherit !important;
 }
 
@@ -367,7 +476,7 @@ menupopup menu:hover:active:not([disabled=true]) {
 }
 
 menupopup menuseparator {
-  margin: var(--panel-separator-margin-vertical) 0 !important;
+  margin: var(--uc-contextmenu-separator-vertical) 0 !important;
   padding: 0 !important;
   background: none !important;
   border-top: 1px solid var(--panel-separator-color) !important;
@@ -381,14 +490,18 @@ menupopup menu,
 menupopup menuitem,
 menupopup menucaption,
 #PopupAutoComplete>richlistbox>richlistitem {
-  padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important;
+  padding: var(--uc-contextmenu-menuitem-padding-block) var(--uc-contextmenu-menuitem-padding-inline) !important;
-  margin: var(--arrowpanel-menuitem-margin) !important;
+  margin: var(--uc-contextmenu-menuitem-margin) !important;
-  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
+  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
+  border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important;
+  background-clip: padding-box !important;
+  min-height: calc(16px + (var(--uc-contextmenu-menuitem-padding-block) + var(--uc-contextmenu-menuitem-border-width)) * 2) !important;
 }
 
 :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
-:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) {
+:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current),
-  padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
+:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menucaption {
+  padding-inline-start: calc(var(--uc-contextmenu-menuitem-padding-inline) + 16px + var(--uc-contextmenu-menuicon-margin-inline)) !important;
 }
 
 .menu-iconic-icon {
@@ -397,16 +510,9 @@ menupopup menucaption,
   margin-inline-start: 0 !important;
 }
 
-.subviewbutton>.menu-iconic-text,
 menu>.menu-iconic-text,
-menuitem>.menu-iconic-text,
+menuitem>.menu-iconic-text {
-.addon-banner-item>.toolbarbutton-text,
+  padding-inline-start: var(--uc-contextmenu-menuicon-margin-inline) !important;
-.subviewbutton-iconic>.toolbarbutton-text,
-.subviewbutton[image]>.toolbarbutton-text,
-.subviewbutton[targetURI]>.toolbarbutton-text,
-.subviewbutton.bookmark-item>.toolbarbutton-text,
-.subviewbutton[checked="true"]>.toolbarbutton-text {
-  padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
 }
 
 .menu-text,
@@ -415,8 +521,17 @@ menuitem>.menu-iconic-text,
   padding-block: 0 !important;
 }
 
-.menu-iconic-left {
+.menu-accel,
+.menu-iconic-accel {
+  margin-inline-end: 0 !important;
+  padding-block: 0 !important;
+  opacity: 0.7 !important;
+}
+
+.menu-iconic>.menu-iconic-left,
+.menuitem-iconic>.menu-iconic-left {
   padding-inline-end: 0 !important;
+  padding-block: 0 !important;
 }
 
 menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon {
@@ -443,23 +558,6 @@ menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before {
   display: none !important;
 }
 
-/* workaround for inaccessible shadow-root element
-   moves the shadow-root element underneath, and away from panel edges */
-#PopupAutoComplete {
-  padding-block: 10px !important;
-  padding-inline: 2px !important;
-}
-
-panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox {
-  margin-block: -10px !important;
-  margin-inline: -2px !important;
-}
-
-#PopupAutoComplete>richlistbox>richlistitem>.two-line-wrapper {
-  padding-block: 0 !important;
-  padding-inline-end: calc((var(--uc-autocomplete-panel-menuitem-margin) + var(--arrowpanel-menuitem-padding-inline)) * 2) !important;
-}
-
 menuitem:is([type="checkbox"], [checked="true"], [type="radio"])>.menu-iconic-left>.menu-iconic-icon {
   display: -moz-box !important;
 }
@@ -472,7 +570,7 @@ menuitem[checked="true"]>.menu-iconic-left,
 
 #context-navigation:not([hidden]) {
   padding: 0 !important;
-  --menuitem-min-width: calc(16px + var(--arrowpanel-menuitem-padding-inline) * 2) !important;
+  --menuitem-min-width: calc(16px + var(--uc-contextmenu-menuitem-padding-inline) * 2) !important;
   min-width: calc(4 * var(--menuitem-min-width));
 }
 
@@ -483,7 +581,7 @@ menuitem[checked="true"]>.menu-iconic-left,
 }
 
 #context-navigation {
-  margin-inline: var(--uc-arrowpanel-menuitem-margin-inline) !important;
+  margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important;
 }
 
 #context-navigation>.menuitem-iconic {
@@ -506,3 +604,21 @@ menuitem[checked="true"]>.menu-iconic-left,
 #context-bookmarkpage[starred] .menu-iconic-icon {
   fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
 }
+
+@media (-moz-platform: windows) {
+  .menu-text,
+  .menu-iconic-text,
+  panel .toolbarbutton-text {
+    margin-inline-start: 0 !important;
+    margin-block: -3px -1px !important;
+    padding-block: 0 !important;
+  }
+
+  .menu-text,
+  .menu-iconic-text,
+  panel .toolbarbutton-text,
+  #appMenu-fxa-status2,
+  .panel-header {
+    font-size: 13.6px !important;
+  }
+}