Bug 1394268 - Implements the new photon tab line in the devtools tabbar. r=bgrins

devtools/client/framework/components/toolbox-tab.js

@@ -55,10 +55,20 @@ module.exports = createClass({
         onFocus: () => focusButton(id),
         onClick: () => selectTool(id),
       },
+      span(
+        {
+          className: "devtools-tab-line"
+        }
+      ),
       ...this.renderIcon(panelDefinition, isHighlighted),
-      iconOnly ? null : span({
-        className: "devtools-tab-label"
-      }, label)
+      iconOnly ?
+        null :
+        span(
+          {
+            className: "devtools-tab-label"
+          },
+          label
+        )
     );
   }
 });

devtools/client/shared/components/tabs/tabs.css

@@ -81,10 +81,6 @@
 .theme-light .tabs .tabs-menu-item {
   margin: 0;
   padding: 0;
-  border-style: solid;
-  border-width: 0;
-  border-inline-start-width: 1px;
-  border-color: var(--theme-splitter-color);
   color: var(--theme-content-color1);
 }
 
@@ -98,8 +94,8 @@
   padding: 3px 15px;
 }
 
-.theme-dark .tabs .tabs-menu-item:hover:not(.is-active),
-.theme-light .tabs .tabs-menu-item:hover:not(.is-active) {
+.theme-dark .tabs .tabs-menu-item:hover,
+.theme-light .tabs .tabs-menu-item:hover {
   background-color: var(--theme-toolbar-hover);
 }
 
@@ -108,12 +104,6 @@
   background-color: var(--theme-toolbar-hover-active);
 }
 
-.theme-dark .tabs .tabs-menu-item.is-active,
-.theme-light .tabs .tabs-menu-item.is-active {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
 /* Dark Theme */
 
 .theme-dark .tabs .tabs-menu-item {

devtools/client/shared/components/tabs/tabs.js

@@ -263,6 +263,7 @@ define(function (require, exports, module) {
               ref,
               role: "presentation",
             },
+              DOM.span({className: "devtools-tab-line"}),
               DOM.a({
                 id: id ? id + "-tab" : "tab-" + index,
                 tabIndex: isTabSelected ? 0 : -1,

devtools/client/themes/common.css

@@ -7,6 +7,16 @@
 
 :root {
   font: message-box;
+
+  --tab-line-selected-color: highlight;
+}
+
+:root.theme-light {
+  --tab-line-hover-color: rgba(0,0,0,.2);
+}
+
+:root.theme-dark {
+  --tab-line-hover-color: rgba(255,255,255,.2);
 }
 
 :root[platform="mac"] {
@@ -683,6 +693,30 @@ checkbox:-moz-focusring {
   background-position: center;
 }
 
+.devtools-tab-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: transparent;
+}
+
+.devtools-tab:hover .devtools-tab-line,
+.tabs-menu-item:hover .devtools-tab-line {
+  background: var(--tab-line-hover-color);
+}
+
+.devtools-tab.selected .devtools-tab-line,
+.tabs-menu-item.is-active .devtools-tab-line {
+  background: var(--tab-line-selected-color);
+}
+
+/* Hide the tab line in the firebug theme */
+.theme-firebug .devtools-tab-line {
+  background: transparent !important;
+}
+
 /* No result message styles */
 
 .devtools-sidepanel-no-result {

devtools/client/themes/toolbox.css

@@ -89,6 +89,7 @@
 }
 
 /* Toolbox tabs */
+
 .devtools-tab {
   position: relative;
   display: flex;
@@ -97,16 +98,13 @@
   min-height: 24px;
   margin: 0;
   padding: 0;
-  border-style: solid;
-  border-width: 0;
-  border-inline-start-width: 1px;
+  border: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   background-color: transparent;
 }
 
-
 .devtools-tab-label {
   mask-image: linear-gradient(to left, transparent 0, black 6px);
   /* Set the end padding on the label to make sure the label gets faded out properly */
@@ -196,12 +194,6 @@
   flex-shrink: 0;
 }
 
-/* Support invertable icon flags and make icon white when it's on a blue background */
-.theme-light .devtools-tab.icon-invertable-light-theme:not(.selected) > img,
-.devtools-tab.icon-invertable-dark-theme.selected > img {
-  filter: invert(1);
-}
-
 /* Don't apply any filter to non-invertable command button icons */
 .command-button:not(.command-button-invertable),
 /* icon-invertable-light-theme icons are white, so do not invert them for the dark theme */
@@ -222,12 +214,6 @@
   opacity: 1;
 }
 
-.devtools-tabbar .devtools-tab.selected,
-.devtools-tabbar .devtools-tab.selected:hover:active {
-  color: var(--theme-selection-color);
-  background-color: var(--theme-selection-background);
-}
-
 .toolbox-tabs .devtools-tab.selected,
 .toolbox-tabs .devtools-tab.highlighted,
 .toolbox-tabs .devtools-tab.selected + .devtools-tab,