Bug 1252305 - Use a background image for the .toolbarbutton-menubutton-dropmarker. r=mkmelin a=rkent
authorRichard Marti <richard.marti@gmail.com>
Tue, 01 Mar 2016 12:46:45 +0100
changeset 26823 151317bf199543f86283ac6261d9088820bb8f0a
parent 26822 f19c1ba0792add3d74062aa55c538405861e2814
child 26824 2a9653d2c944a6e664b6d57060eff6ca02f4cd05
push id1850
push userclokep@gmail.com
push dateWed, 08 Mar 2017 19:29:12 +0000
treeherdercomm-esr52@028df196b2d9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin, rkent
bugs1252305
Bug 1252305 - Use a background image for the .toolbarbutton-menubutton-dropmarker. r=mkmelin a=rkent
mail/themes/linux/mail/messenger.css
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -152,38 +152,56 @@ toolbox[labelalign="end"] .toolbarbutton
 .toolbarbutton-1:not([disabled=true]):not(:-moz-any(:active, [open])):hover > .toolbarbutton-menubutton-button,
 .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker {
   background: var(--toolbarbutton-hover-background);
   background-clip: padding-box;
   border-color: var(--toolbarbutton-hover-bordercolor);
   box-shadow: var(--toolbarbutton-hover-boxshadow);
 }
 
-.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  width: 9px;
-  max-height: 7px;
-  margin: 5px;
-}
-
 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
 .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked="true"],:hover:active),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]),
 .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
   background: var(--toolbarbutton-active-background);
   background-clip: padding-box;
   box-shadow: var(--toolbarbutton-active-boxshadow);
   border-color: var(--toolbarbutton-active-bordercolor);
   transition-duration: 10ms;
 }
 
 .toolbarbutton-1[checked="true"]:not(:active):hover {
   background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
   transition: background-color 150ms;
 }
 
+.toolbarbutton-1 .toolbarbutton-menu-dropmarker,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.toolbarbutton-1 .toolbarbutton-menu-dropmarker > .dropmarker-icon,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  width: 9px;
+  height: 7px;
+  background: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png") no-repeat center;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  margin-right: 6px;
+  margin-left: 6px;
+}
+
+toolbar[brighttext] .toolbarbutton-1 .toolbarbutton-menu-dropmarker > .dropmarker-icon,
+toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
+}
+
 .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
   content: "";
   display: -moz-box;
   width: 1px;
   height: 18px;
   margin-inline-start: -1px;
   background-image: linear-gradient(currentColor 0, currentColor 100%);
   background-position: center;
@@ -191,41 +209,20 @@ toolbox[labelalign="end"] .toolbarbutton
   background-size: 1px 18px;
   opacity: .2;
 }
 
 toolbar[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
   opacity: .3;
 }
 
-.toolbarbutton-1 .toolbarbutton-menu-dropmarker,
-.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding-top: 3px;
-  padding-bottom: 2px;
-  list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png");
-}
-
-toolbar[brighttext] .toolbarbutton-1 .toolbarbutton-menu-dropmarker,
-toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-  list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
-}
-
 toolbox:not([labelalign="end"]) toolbar[mode="full"] .toolbarbutton-1 {
   padding-bottom: 0;
 }
 
-toolbox:not([labelalign="end"]) toolbar[mode="full"] .toolbarbutton-1 >
-.toolbarbutton-menubutton-dropmarker {
-  padding-top: 10px;
-  padding-bottom: 9px;
-}
-
 
 .toolbarbutton-1 .toolbarbutton-menu-dropmarker {
   margin-inline-start: 3px;
 }
 
 .toolbarbutton-1 .toolbarbutton-icon,
 .formatting-button .toolbarbutton-icon {
   margin-inline-end: 0;