Bug 1515686 - Set multiselected tabs to have the same design spec as active tabs wih a translucent colour (current text colour at 0.2 alpha) on top. r=jaws,dao

1. Selected tabs inherit the same colors as active tabs.
2. On top of that, it's added a translucent (0.2 alpha) overlay :
  2.1. For selected tabs with dark text, the overlay color is black (#000000)
  2.2. For selected tabs with bright text, the overlay color is white (#ffffff)
3. On hover, the overlay becomes just more translucent with its value going down to 0.1 alpha.

Differential Revision: https://phabricator.services.mozilla.com/D16097

--HG--
extra : moz-landing-system : lando

browser/base/content/tabbrowser.xml

@@ -1907,11 +1907,11 @@
            extends="chrome://global/content/bindings/tabbox.xml#tab">
     <content context="tabContextMenu">
       <xul:stack class="tab-stack" flex="1">
-        <xul:vbox xbl:inherits="selected=visuallyselected,fadein"
+        <xul:vbox xbl:inherits="selected=visuallyselected,fadein,multiselected"
                   class="tab-background">
           <xul:hbox xbl:inherits="selected=visuallyselected,multiselected,before-multiselected"
                     class="tab-line"/>
-          <xul:spacer flex="1"/>
+          <xul:spacer flex="1" class="tab-background-inner"/>
           <xul:hbox class="tab-bottom-line"/>
         </xul:vbox>
         <xul:hbox xbl:inherits="pinned,bursting,notselectedsinceload"

browser/themes/shared/tabs.inc.css

@@ -457,11 +457,12 @@
   transition: opacity 150ms ease;
 }
 
-.tabbrowser-tab:not([visuallyselected=true]),
+.tabbrowser-tab:not([visuallyselected=true]):not([multiselected]),
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
+.tabbrowser-tab[multiselected]:-moz-lwtheme,
 .tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
   color: var(--lwt-tab-text, var(--toolbar-color));
 }
@@ -493,6 +494,7 @@
   border-top-style: solid;
 }
 
+.tab-background[multiselected=true],
 .tab-background[selected=true] {
   border-top-color: var(--tabs-border-color);
   background-color: var(--toolbar-bgcolor);
@@ -500,6 +502,12 @@
   background-repeat: repeat-x;
 }
 
+/* Add a translucent color (current text color at .2 alpha) on top of multiselected tabs */
+.tab-background[multiselected=true]:not([selected=true]) > .tab-background-inner {
+  background: currentColor;
+  opacity: .2;
+}
+
 .tab-line[multiselected],
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
@@ -511,6 +519,7 @@
  */
 
 /* Lightweight theme on tabs */
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[multiselected=true]:-moz-lwtheme,
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
   background-attachment: scroll, scroll, fixed;
   background-color: transparent;
@@ -524,11 +533,11 @@
 
 /* Tab hover */
 
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not([multiselected]) {
   background-color: rgba(0,0,0,.1);
 }
 
-#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not([multiselected]) {
   background-color: rgba(255,255,255,.1);
 }
 
@@ -548,21 +557,10 @@
   background-color: rgba(255,255,255,.2);
 }
 
-.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true])[multiselected],
-#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true])[multiselected] {
+.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line[multiselected]:not([selected=true]) {
   opacity: 0.5;
 }
 
-/* Tab multi-selected */
-
-.tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]) {
-  background-color: rgba(0,0,0,.1);
-}
-
-#TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]) {
-  background-color: rgba(255,255,255,.1);
-}
-
 /* Pinned tabs */
 
 /* Pinned tab separators need position: absolute when positioned (during overflow). */

browser/themes/windows/compacttheme.css

@@ -51,9 +51,8 @@
 
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
-     * correct color for the tab hover and multiselect state for the light theme. */
-    .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext,
-    .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
+     * correct color for the tab hover state for the light theme. */
+    .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not([multiselected]):-moz-lwtheme-darktext {
       background-color: rgba(0,0,0,.1) !important;
     }
     .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]):-moz-lwtheme-darktext {