Bug 1402578 - Port bug 1401917 to TB [Let tab strip scroll buttons use --toolbarbutton-icon-fill-opacity]. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sun, 24 Sep 2017 15:57:50 +0200
changeset 29041 eb81a4091d3cd18a78ba26caa8b62cd2945aa322
parent 29040 a7227c349261ed3d528db7bf540d90d91f225ab4
child 29042 fdc9f3574d6ece7b18d60bf6fe94b63324e9536d
push id2068
push userclokep@gmail.com
push dateMon, 13 Nov 2017 19:02:14 +0000
treeherdercomm-beta@9c7e7ce8672b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1402578, 1401917
Bug 1402578 - Port bug 1401917 to TB [Let tab strip scroll buttons use --toolbarbutton-icon-fill-opacity]. r=jorgk
mail/themes/linux/mail/messenger.css
mail/themes/linux/mail/tabmail.css
mail/themes/osx/mail/messenger.css
mail/themes/osx/mail/tabmail.css
mail/themes/shared/mail/icons/arrow-dropdown.svg
mail/themes/shared/mail/icons/arrow-left.svg
mail/themes/shared/mail/messenger.css
mail/themes/shared/mail/tabmail.css
mail/themes/windows/mail/messenger.css
mail/themes/windows/mail/tabmail.css
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -19,16 +19,17 @@
 
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
   --toolbarbutton-border-radius: 2px;
+  --toolbarbutton-icon-fill-opacity: 1;
   --toolbarbutton-text-color: #222;
   --toolbarbutton-hover-background: rgba(255, 255, 255, .5) linear-gradient(rgba(255, 255, 255, .5), transparent);
   --toolbarbutton-hover-bordercolor: rgba(0, 0, 0, .25);
   --toolbarbutton-header-bordercolor: rgba(0, 0, 0, .25);
   --toolbarbutton-hover-boxshadow: none;
 
   --toolbarbutton-active-background: rgba(154, 154, 154, .5) linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .3);
@@ -95,16 +96,19 @@ menulist > menupopup >
   .menu-iconic-left {
   display: -moz-box;
 }
 
 /* ::::: toolbarbutton ::::: */
 
 .toolbarbutton-1 {
   -moz-box-orient: vertical;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .toolbarbutton-1:-moz-lwtheme,
 .toolbarbutton-menubutton-button:-moz-lwtheme {
   color: inherit;
 }
 
 toolbox[labelalign="end"] .toolbarbutton-1,
--- a/mail/themes/linux/mail/tabmail.css
+++ b/mail/themes/linux/mail/tabmail.css
@@ -76,17 +76,17 @@ tabpanels {
 
 .tabmail-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
 .tabmail-arrowscrollbox > stack > .scrollbutton-down:not([disabled]):hover {
   background: var(--toolbarbutton-active-background);
 }
 
 .tabmail-arrowscrollbox > .scrollbutton-up[disabled],
 .tabmail-arrowscrollbox > stack > .scrollbutton-down[disabled] {
-  opacity: .4;
+  --toolbarbutton-icon-fill-opacity: .4;
 }
 
 .tabs-alltabs-box-animate {
   background-color: Highlight;
   opacity: 0;
 }
 
 /**
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -17,16 +17,17 @@
 
   --toolbar-non-lwt-bgcolor: #f9f9fa;
   --toolbar-non-lwt-textcolor: #0c0c0d;
   --toolbar-non-lwt-bgimage: none;
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
   --toolbarbutton-border-radius: 3px;
+  --toolbarbutton-icon-fill-opacity: 1;
   --toolbarbutton-hover-background: hsla(0, 0%, 100%, .1)
                                     linear-gradient(hsla(0, 0%, 100%, .3),
                                     hsla(0, 0%, 100%, .1)) padding-box;
   --toolbarbutton-hover-bordercolor: hsla(0, 0%, 0%, .2);
   --toolbarbutton-header-bordercolor: hsla(0, 0%, 0%, .2);
   --toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
                                    0 1px 0 hsla(0, 0%, 100%, .5) inset;
 
@@ -168,16 +169,19 @@ toolbox[labelalign="end"] toolbarpalette
 
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   margin: 0;
 }
 
 .toolbarbutton-1 {
   margin: 4px 2px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .toolbarbutton-1:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
 
 .toolbarbutton-1[open],
--- a/mail/themes/osx/mail/tabmail.css
+++ b/mail/themes/osx/mail/tabmail.css
@@ -144,17 +144,17 @@ tabmail > tabbox > tabpanels {
   .scrollbutton-up:not([disabled="true"]):hover:active,
 #tabs-toolbar[brighttext] .tabmail-arrowscrollbox > stack >
   .scrollbutton-down:not([disabled="true"]):hover:active {
   background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35));
 }
 
 .tabmail-arrowscrollbox > .scrollbutton-up[disabled="true"],
 .tabmail-arrowscrollbox > stack > .scrollbutton-down[disabled="true"] {
-  opacity: .5;
+  --toolbarbutton-icon-fill-opacity: .5;
   background-image: none;
 }
 
 /**
  * All Tabs Buttons
  */
 
 .tabs-alltabs-box {
--- a/mail/themes/shared/mail/icons/arrow-dropdown.svg
+++ b/mail/themes/shared/mail/icons/arrow-dropdown.svg
@@ -1,6 +1,6 @@
 <!-- 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/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M8 12a1 1 0 0 1-.7-.3l-5-5a1 1 0 0 1 1.4-1.4L8 9.6l4.3-4.3a1 1 0 0 1 1.4 1.4l-5 5a1 1 0 0 1-.7.3z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 12a1 1 0 0 1-.7-.3l-5-5a1 1 0 0 1 1.4-1.4L8 9.6l4.3-4.3a1 1 0 0 1 1.4 1.4l-5 5a1 1 0 0 1-.7.3z"/>
 </svg>
--- a/mail/themes/shared/mail/icons/arrow-left.svg
+++ b/mail/themes/shared/mail/icons/arrow-left.svg
@@ -1,6 +1,6 @@
 <!-- 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/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-  <path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"/>
 </svg>
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -1,14 +1,18 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+:root:-moz-lwtheme {
+  --toolbarbutton-icon-fill-opacity: 1;
+}
+
 description.error {
   color: #FF0000;
 }
 
 .toolbar-primary {
   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
 }
 
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -203,19 +203,21 @@
 }
 
 /**
  * Tab Scrollbox Arrow Buttons
  */
 
 .tabmail-arrowscrollbox > .scrollbutton-up,
 .tabmail-arrowscrollbox > stack > .scrollbutton-down {
+  color: inherit;
   list-style-image: url("chrome://messenger/skin/icons/arrow-left.svg");
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .tabmail-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
 .tabmail-arrowscrollbox > stack > .scrollbutton-down:-moz-locale-dir(ltr) {
   transform: scaleX(-1);
 }
 
 /* Tab Overflow */
@@ -261,18 +263,16 @@
 }
 
 /**
  * All Tabs Button
  */
 
 #alltabs-button {
   list-style-image: url("chrome://messenger/skin/icons/arrow-dropdown.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
 }
 
 #alltabs-button .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 #alltabs-button > .toolbarbutton-text,
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -16,16 +16,17 @@
   --tab-line-color: highlight;
 
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
   --toolbarbutton-border-radius: 2px;
+  --toolbarbutton-icon-fill-opacity: 1;
   --toolbarbutton-hover-background: rgba(0, 0, 0, .1);
   --toolbarbutton-hover-bordercolor: rgba(0, 0, 0, .1);
   --toolbarbutton-header-bordercolor: rgba(0, 0, 0, .1);
   --toolbarbutton-hover-boxshadow: none;
 
   --toolbarbutton-active-background: rgba(0, 0, 0, .15);
   --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .15);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
@@ -38,16 +39,18 @@
 @media (-moz-windows-default-theme) {
   :root {
     --tabs-border: rgba(0,0,0,.3);
     --tab-line-color: #0a84ff;
 
     --toolbar-non-lwt-bgcolor: #f9f9fa;
     --toolbar-non-lwt-textcolor: #0c0c0d;
     --toolbar-non-lwt-bgimage: none;
+
+    --toolbarbutton-icon-fill-opacity: 1;
   }
 }
 
 :root:-moz-lwtheme {
   --tabs-border: rgba(0,0,0,.3);
 
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
@@ -77,16 +80,19 @@
 #menubar-items > menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
 /* ::::: toolbarbutton ::::: */
 
 .toolbarbutton-1 {
   -moz-box-orient: vertical;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 toolbox[labelalign="end"] .toolbarbutton-1,
 toolbox[labelalign="end"] .toolbarbutton-1[type="menu-button"]
   > .toolbarbutton-menubutton-button {
   -moz-box-orient: horizontal;
 }
 
--- a/mail/themes/windows/mail/tabmail.css
+++ b/mail/themes/windows/mail/tabmail.css
@@ -73,17 +73,17 @@ tabpanels {
   border-style: none;
   padding: 0 3px;
   margin: 0;
   margin-inline-end: 1px;
 }
 
 .tabmail-arrowscrollbox > .scrollbutton-up[disabled],
 .tabmail-arrowscrollbox > stack > .scrollbutton-down[disabled] {
-  opacity: .4;
+  --toolbarbutton-icon-fill-opacity: .4;
 }
 
 .tabmail-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
 .tabmail-arrowscrollbox > stack > .scrollbutton-down:-moz-locale-dir(ltr) {
   margin-inline-start: 1px;
   margin-inline-end: 0;
 }