Bug 1716962 - Style the menuitems in the arrow popup. r=aleca default tip
authorRichard Marti <richard.marti@gmail.com>
Thu, 15 Jul 2021 11:02:38 +0000
changeset 33263 5948875ca52f78e795e96708d6d612cdb263d18d
parent 33262 116543deed453eec3681b9c13b0d0d31e13ad79d
push id19011
push userthunderbird@calypsoblue.org
push dateSat, 24 Jul 2021 22:23:24 +0000
treeherdercomm-central@5948875ca52f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca
bugs1716962
Bug 1716962 - Style the menuitems in the arrow popup. r=aleca Differential Revision: https://phabricator.services.mozilla.com/D119969
mail/themes/linux/customizableui/panelUI.css
mail/themes/osx/customizableui/panelUI.css
mail/themes/shared/customizableui/panelUI.css
mail/themes/windows/customizableui/panelUI.css
--- a/mail/themes/linux/customizableui/panelUI.css
+++ b/mail/themes/linux/customizableui/panelUI.css
@@ -1,14 +1,10 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://messenger/skin/shared/customizableui/panelUI.css");
 
-menuitem.subviewbutton {
-  appearance: none !important;
-}
-
 .subviewradio > .radio-label-box {
   appearance: none;
 }
 
--- a/mail/themes/osx/customizableui/panelUI.css
+++ b/mail/themes/osx/customizableui/panelUI.css
@@ -7,25 +7,25 @@
 .panel-subview-body {
   scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
 }
 
 .restoreallitem > .toolbarbutton-icon {
   display: none;
 }
 
-.subviewbutton.download {
-  padding-inline-start: 14px;
+panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
+  /* 8px + 18px toolbarbutton margin start/padding + 16px icon + 4px label padding start */
+  width: 46px;
 }
 
-panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
-  width: 42px; /* 18px toolbarbutton padding + 16px icon + 8px label padding start */
+menuitem.subviewbutton-iconic > .menu-iconic-left > .menu-iconic-icon {
+  width: 16px;
 }
 
-.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-iconic-left {
-  display: none;
+menuitem.subviewbutton > .menu-text {
+  margin-inline-start: 16px !important;
 }
 
-/* Override OSX-specific toolkit styles for the bookmarks panel */
-menu.subviewbutton > .menu-right {
+menuitem.subviewbutton > .menu-right {
   margin-inline-end: -4px;
   appearance: none;
 }
--- a/mail/themes/shared/customizableui/panelUI.css
+++ b/mail/themes/shared/customizableui/panelUI.css
@@ -206,16 +206,20 @@ toolbarbutton[constrain-size="true"][cui
 #zoom-reset-button > .toolbarbutton-icon {
   display: none;
 }
 
 #customization-palette .toolbarbutton-text {
   display: none;
 }
 
+menuitem.subviewbutton {
+  appearance: none !important;
+}
+
 .subview-subheader,
 panelview .toolbarbutton-1,
 .subviewbutton,
 .widget-overflow-list .toolbarbutton-1 {
   appearance: none;
   margin: 0 8px;
   min-height: 24px;
   padding-inline: 8px;
@@ -224,18 +228,21 @@ panelview .toolbarbutton-1,
   background-color: transparent;
 }
 
 .subviewbutton:focus {
   outline: 0;
 }
 
 .subviewbutton[disabled="true"],
-.subviewbutton[checked="true"][disabled="true"] {
+.subviewbutton[disabled="true"]:hover,
+.subviewbutton[checked="true"][disabled="true"],
+.subviewbutton[checked="true"][disabled="true"]:hover {
   color: var(--panel-description-color);
+  background-color: transparent;
 }
 
 .subviewbutton > .toolbarbutton-text {
   padding: 0;
   padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined below. */
 }
 
 .addon-banner-item > .toolbarbutton-text,
--- a/mail/themes/windows/customizableui/panelUI.css
+++ b/mail/themes/windows/customizableui/panelUI.css
@@ -29,8 +29,40 @@ menuitem.subviewbutton[disabled]:not(.me
   menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
   menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
   .widget-overflow-list .toolbarbutton-1:not([disabled]):is([open],:hover:active),
   .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
     toolbarbutton:not([disabled]):is([open],:hover:active) {
     color: HighlightText;
   }
 }
+
+@media (-moz-windows-non-native-menus: 0) {
+  menupopup[type="arrow"] {
+    appearance: none;
+    -moz-window-shadow: cliprounded;
+    background-color: transparent;
+    border: none;
+    border-radius: 4px;
+  }
+
+  menuitem.subviewbutton[type="checkbox"] > .menu-iconic-left {
+    appearance: none;
+  }
+
+  menuitem.subviewbutton > .menu-text {
+    appearance: none;
+  }
+
+  menuitem.subviewbutton-iconic > .menu-iconic-left > .menu-iconic-icon {
+    display: block;
+  }
+
+  menupopup[type="arrow"]::part(content) {
+    /* Prevent contained items from drawing over the border-radius. */
+    overflow: clip;
+    padding: 8px 0;
+    color: var(--arrowpanel-color);
+    background: var(--arrowpanel-background);
+    border-radius: var(--arrowpanel-border-radius);
+    border: 1px solid var(--arrowpanel-border-color);
+  }
+}