Bug 1388138 - Use lightweight themes' accent color to highlight the selected tab. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Sat, 12 Aug 2017 16:15:50 +0200
changeset 645303 46c5a0e218a4a556c60bd4ca5eb42c0f872a13ec
parent 645074 80ff3f300e05f38f96c385b03d1973a966a2bd35
child 725887 dcde5e376852793a0cfe8f10f4d603f592ab5acf
push id73737
push userdgottwald@mozilla.com
push dateSat, 12 Aug 2017 14:16:21 +0000
reviewersjohannh
bugs1388138
milestone57.0a1
Bug 1388138 - Use lightweight themes' accent color to highlight the selected tab. r?johannh MozReview-Commit-ID: BisVuYlkTSO
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -7,16 +7,18 @@
    there are overrides for each platform in their compacttheme.css files. */
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: var(--chrome-secondary-background-color);
   --toolbar-gbimage: none;
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--chrome-color);
   --toolbar-non-lwt-bgimage: none;
+
+  --tab-line-color: highlight;
 }
 
 :root:-moz-lwtheme-brighttext {
   /* Chrome */
   --chrome-background-color: hsl(240, 5%, 5%);
   --chrome-color: rgb(249, 249, 250);
   --chrome-secondary-background-color: hsl(240, 1%, 20%);
   --chrome-navigator-toolbox-separator-color: hsla(240, 5%, 5%, .1);
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,27 +1,32 @@
 %if 0
 /* 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/. */
 %endif
 
 :root {
   --tab-toolbar-navbar-overlap: 1px;
+  --tab-line-color: highlight;
   --tab-min-height: 33px;
 }
 
 :root[uidensity=compact] {
   --tab-min-height: 29px;
 }
 
 :root[uidensity=touch] {
   --tab-min-height: 41px;
 }
 
+:root:-moz-lwtheme {
+  --tab-line-color: var(--lwt-accent-color);
+}
+
 #tabbrowser-tabs,
 .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
   min-height: var(--tab-min-height);
 }
 
 .tab-stack {
   min-height: inherit;
 }
@@ -310,17 +315,17 @@
   background-repeat: repeat-x;
 }
 
 :root:not([sizemode=normal]) .tabbrowser-tab[first-visible-tab] > .tab-stack > .tab-background[selected=true] {
   border-inline-start-style: none;
 }
 
 .tab-line[selected=true] {
-  background-color: Highlight;
+  background-color: var(--tab-line-color);
 }
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
  * image to the lwt-header-image variable, used in each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */