(CSS) update menu/panel shadow styles.

(prefs) set menu/panel shadows to enabled by default.
aminomancer · Sep 17, 2022 · a050e33 · a050e33
1 parent ef3a3be
commit a050e33
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -144,7 +144,7 @@ I also recommend setting the following prefs in `about:config`. There are two pr
 | userChrome.contextmenu.reduce-menuseparators | Boolean | false | If true, hide some of the separators in the main context menu to reduce clutter |
 | userChrome.css.hide-promotion | Boolean | false | If true, hide official ads on system pages, e.g. for Mozilla VPN |
 | userChrome.css.mac-ui-fonts | Boolean | true | Replace UI font with SF Pro, the system font for macOS. [Click here for details](#fonts) |
-| userChrome.css.menupopup-shadows | Boolean | false | Add a shadow behind context menus and panels |
+| userChrome.css.menupopup-shadows | Boolean | true | Add a shadow behind context menus and panels |
 | userChrome.css.overlay-scrollbars.in-content | Boolean | false | Overlay scrollbars are already enabled in the chrome UI. This pref enables them in web content |
 | widget.non-native-theme.scrollbar.style | Number | 2 | Enable the GTK scrollbar style in web content, regardless of your OS. Supports: 0 (default), 1 (macOS), 2 (GTK), 3 (android), 4 (win10), 5 (win11) |
 | widget.non-native-theme.scrollbar.size.override | Number | 11 | Make the scrollbar track 11px wide for GTK (scrollbar.style = 2) |

diff --git a/prefs/recommended.js b/prefs/recommended.js
@@ -141,6 +141,8 @@ user_pref("gfx.font_rendering.directwrite.use_gdi_table_loading", false);
 //// at https://github.com/aminomancer/uc.css.js
 user_pref("userChrome.tabs.pinned-tabs.close-buttons.disabled", true);
 user_pref("userChrome.urlbar-results.hide-help-button", true);
+// add a drop shadow on menupopup and panel elements (context menus, addons' popup panels, etc.)
+user_pref("userChrome.css.menupopup-shadows", true);
 //// these are more subjective prefs, but they're important ones
 //// display the all tabs menu in reverse order (newer tabs on top, like history)
 // user_pref("userChrome.tabs.all-tabs-menu.reverse-order", true);
@@ -150,9 +152,5 @@ user_pref("userChrome.urlbar-results.hide-help-button", true);
 // recommended for all operating systems, but not required.
 // must have the fonts installed. check the repo's readme for more details.
 // user_pref("userChrome.css.mac-ui-fonts", true);
-// add a drop shadow on menupopup and panel elements (context menus, addons' popup panels, etc.)
-// the 8px drop shadow area around the menupopup can't be clicked through.
-// this might bother some people so it's disabled by default.
-// user_pref("userChrome.css.menupopup-shadows", true);
 // custom wikipedia dark mode theme
 // user_pref("userChrome.css.wikipedia.dark-theme-enabled", true);
diff --git a/resources/layout/uc-nsRules.au.css b/resources/layout/uc-nsRules.au.css
@@ -3,8 +3,15 @@ I don't register userChrome.au.css that way because
 it would mean I can't live-edit and save the stylesheet
 from the style editor in the browser toolbox. */
 
-@-moz-document regexp("^((chrome|resource|file)://|about:).*$")
-{
+@-moz-document regexp("^((chrome|resource|file)://|about:).*$") {
+  menupopup:not([is="places-popup-arrow"]) {
+    -moz-window-input-region-margin: var(--menupopup-inner-box-margin, 4px) !important;
+  }
+
+  :is(panel, menupopup)[type="arrow"] {
+    -moz-window-input-region-margin: var(--panel-inner-box-margin, 4px) !important;
+  }
+
   panel,
   menupopup,
   :is(menupopup, panel)[type="arrow"] {
@@ -16,8 +23,7 @@ from the style editor in the browser toolbox. */
     -moz-box-flex: 1;
   }
 
-  @-moz-document url(chrome://browser/content/browser.xhtml)
-  {
+  @-moz-document url(chrome://browser/content/browser.xhtml) {
     :is(panel, menupopup)::part(arrow) {
       display: -moz-inline-box;
     }
@@ -332,8 +338,7 @@ from the style editor in the browser toolbox. */
   }
 
   #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"],
-  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before
-  {
+  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before {
     display: -moz-inline-box;
   }
 }
diff --git a/uc-context-menus.css b/uc-context-menus.css
@@ -28,7 +28,7 @@ menupopup:not([type="arrow"]) {
 
 menupopup:not([type="arrow"]) menu > menupopup {
   margin-inline-start: var(--menupopup-child-margin-inline-start) !important;
-  margin-block-start: var(--menupopup-child-margin-block-start) !important;
+  margin-top: var(--menupopup-child-margin-block-start) !important;
 }
 
 menupopup:not([height], .in-menulist) {
@@ -43,13 +43,6 @@ menupopup:not([height], .in-menulist) {
   box-shadow: var(--uc-menupopup-shadow) !important;
 }
 
-.menupopup-arrowscrollbox[orient="vertical"][overflowing="true"] {
-  margin-block: var(
-    --menupopup-overflowing-inner-box-margin,
-    var(--menupopup-inner-box-margin)
-  ) !important;
-}
-
 menupopup:not([type="arrow"]) :is(menuitem, menu),
 panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem {
   appearance: none !important;
@@ -444,8 +437,7 @@ panel > richlistbox > richlistitem {
   margin-inline: var(--menupopup-inner-padding-magnitude);
 }
 
-@-moz-document url(chrome://browser/content/browser.xhtml)
-{
+@-moz-document url(chrome://browser/content/browser.xhtml) {
   panel menulist {
     appearance: none !important;
     background-color: var(--button-bgcolor) !important;
@@ -483,8 +475,7 @@ menuitem[default="true"] {
     display: none !important;
   }
 
-  @-moz-document url(chrome://browser/content/browser.xhtml)
-  {
+  @-moz-document url(chrome://browser/content/browser.xhtml) {
     #contentAreaContextMenu menuseparator:not([id]) {
       display: -moz-box !important;
     }

diff --git a/uc-globals.css b/uc-globals.css
@@ -70,6 +70,7 @@ but other than that these variables should be available everywhere. */
   --light-on-dark-button-text-color: #fff;
 
   --menupopup-inner-box-margin: 0px;
+  --panel-inner-box-margin: 4px;
   --uc-menupopup-shadow: none;
   --uc-panel-shadow: none;
   --searchbar-popup-border: 1px solid var(--uc-menu-border-color);
@@ -82,7 +83,8 @@ but other than that these variables should be available everywhere. */
   --webextension-panel-border-radius: 5px;
   --menupopup-margin: calc(0px - var(--menupopup-inner-box-margin));
   --menupopup-background: transparent;
-  --menupopup-child-margin-block-start: calc(-4px - var(--menupopup-inner-box-margin));
+  /* the "- 1px" below is to account for 1px menu borders */
+  --menupopup-child-margin-block-start: calc(-4px - 1px - var(--menupopup-inner-box-margin));
   --menupopup-child-margin-inline-start: calc(2px - var(--menupopup-inner-box-margin));
   --menupopup-padding: 0px;
   --menupopup-inner-padding-magnitude: 4px;
@@ -487,7 +489,8 @@ popupnotification,
 
 @supports -moz-bool-pref("userChrome.css.menupopup-shadows") {
   :root {
-    --menupopup-inner-box-margin: 8px !important;
+    --menupopup-inner-box-margin: 4px !important;
+    --panel-inner-box-margin: 4px;
     --uc-menupopup-shadow: var(--tooltip-box-shadow) !important;
     --uc-panel-shadow: var(--tooltip-box-shadow) !important;
   }

diff --git a/uc-panels.css b/uc-panels.css
@@ -125,6 +125,7 @@ this connects with .panel-subview-body rules in userChrome.au.css */
 
 #identity-popup[type="arrow"][side="top"][connection="chrome"] {
   margin-inline: -46px !important;
+  margin-top: -9px !important;
 }
 
 #customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"] {

diff --git a/userChrome.au.css b/userChrome.au.css
@@ -10,8 +10,7 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
 
 @import url(chrome://userchrome/content/layout/uc-nsRules.au.css);
 
-@-moz-document regexp("^((chrome|resource|file)://|about:).*$")
-{
+@-moz-document regexp("^((chrome|resource|file)://|about:).*$") {
   :root {
     --avatar-image-url: url(chrome://userchrome/content/fxa/avatar-big.svg);
   }
@@ -89,8 +88,8 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
 
   :is(panel, menupopup)[type="arrow"]::part(content) {
     box-shadow: var(--uc-panel-shadow);
+    margin: var(--panel-inner-box-margin, 4px);
     overflow: hidden;
-    margin-top: 4px;
   }
 
   :is(panel, menupopup)::part(arrow) {
@@ -103,32 +102,32 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
   :is(panel, menupopup)[side="bottom"]::part(arrow) {
     list-style-image: url("chrome://userchrome/content/panelarrow-vertical.svg");
     position: relative;
-    margin-inline: 10px;
+    margin-inline: calc(6px + var(--panel-inner-box-margin, 4px)) !important;
   }
 
   :is(panel, menupopup)[side="top"]::part(arrow) {
-    margin-bottom: -5px;
+    margin-bottom: calc(-1px - var(--panel-inner-box-margin, 4px)) !important;
   }
 
   :is(panel, menupopup)[side="bottom"]::part(arrow) {
     transform: scaleY(-1);
-    margin-top: -5px;
+    margin-top: calc(-1px - var(--panel-inner-box-margin, 4px)) !important;
   }
 
   :is(panel, menupopup)[side="left"]::part(arrow),
   :is(panel, menupopup)[side="right"]::part(arrow) {
     list-style-image: url("chrome://userchrome/content/panelarrow-horizontal.svg");
     position: relative;
-    margin-block: 10px;
+    margin-block: calc(6px + var(--panel-inner-box-margin, 4px)) !important;
   }
 
   :is(panel, menupopup)[side="left"]::part(arrow) {
-    margin-right: -5px;
+    margin-right: calc(-1px - var(--panel-inner-box-margin, 4px)) !important;
   }
 
   :is(panel, menupopup)[side="right"]::part(arrow) {
     transform: scaleX(-1);
-    margin-left: -5px;
+    margin-left: calc(-1px - var(--panel-inner-box-margin, 4px)) !important;
   }
 
   #confirmation-hint[hidearrow]::part(arrowbox) {
@@ -282,12 +281,6 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     padding-inline: 0 !important;
   }
 
-  menupopup::part(content),
-  #ContentSelectDropdown > menupopup::part(content) {
-    padding: var(--menupopup-inner-padding);
-    margin: var(--menupopup-inner-box-margin);
-  }
-
   #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
     height: revert;
   }
@@ -476,12 +469,6 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     stroke: var(--panel-border-color);
   }
 
-  /* other panel arrows */
-  :is(panel, menupopup)::part(arrow) {
-    fill: var(--arrowpanel-background);
-    stroke: var(--panel-border-color);
-  }
-
   @-moz-document regexp("^chrome:(?!\/\/(devtools|mozapps|browser\/content\/(sanitize|places\/places.xhtml)|global\/content\/commonDialog)).*") {
     .panel-footer > button {
       font-weight: var(--uc-font-weight-bold, 600);
@@ -682,8 +669,7 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     font-weight: 500;
   }
 
-  @-moz-document url(chrome://browser/content/browser.xhtml)
-  {
+  @-moz-document url(chrome://browser/content/browser.xhtml) {
     :is(#customization-lwtheme-menu, #customization-uidensity-menu)::part(arrowbox) {
       -moz-box-ordinal-group: 2;
     }
@@ -709,14 +695,6 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     }
   }
 
-  :is(panel, menupopup)[side="top"]::part(arrow) {
-    margin-bottom: -5px;
-  }
-
-  :is(panel, menupopup)[side="bottom"]::part(arrow) {
-    margin-top: -5px;
-  }
-
   #identity-icon {
     list-style-image: var(--default-identity-icon);
   }
@@ -732,8 +710,7 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     url(chrome://mozapps/content/handling/appChooser.xhtml),
     url-prefix(chrome://global/content/print.html),
     url(chrome://browser/content/places/bookmarkProperties.xhtml),
-    url(chrome://browser/content/places/bookmarkProperties2.xhtml)
-  {
+    url(chrome://browser/content/places/bookmarkProperties2.xhtml) {
     menulist:not([native]) {
       padding-inline: 6px;
     }
@@ -1813,13 +1790,11 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     padding: 30px 30px 20px 30px;
   }
 
-  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::part(icon)
-  {
+  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::part(icon) {
     display: none;
   }
 
-  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before
-  {
+  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before {
     width: 16px;
     height: 16px;
     margin-inline: 11px 8px;
@@ -1833,8 +1808,7 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     background-image: url(chrome://userchrome/content/shortcut.svg);
   }
 
-  #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"]
-  {
+  #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"] {
     width: 16px;
     height: 16px;
     margin-inline: 11px 8px;
@@ -1849,8 +1823,7 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
   }
 
   @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
-    url("chrome://global/content/appPicker.xhtml")
-  {
+    url("chrome://global/content/appPicker.xhtml") {
     :root {
       --in-content-page-color: rgb(21, 20, 26);
       --in-content-page-background: #fff;