Bug 1394268 - Part 4: Implement the photon tab line for the selected sidebar tab. r=bgrins draft
authorGabriel Luong <gabriel.luong@gmail.com>
Sun, 27 Aug 2017 21:24:45 -0400
changeset 653786 7287396fcd797c5f24223651ee063b47de9647ca
parent 653785 f148d45f6b29d108ea2909c0abdfcd7cfdd9d736
child 654324 597113a3dc4039bd43c36569d9d335edd6c6685b
push id76406
push userbmo:gl@mozilla.com
push dateMon, 28 Aug 2017 01:25:15 +0000
reviewersbgrins
bugs1394268
milestone57.0a1
Bug 1394268 - Part 4: Implement the photon tab line for the selected sidebar tab. r=bgrins MozReview-Commit-ID: bnx6bWjnm1
devtools/client/shared/components/tabs/tabs.js
devtools/client/themes/common.css
devtools/client/themes/toolbox.css
--- a/devtools/client/shared/components/tabs/tabs.js
+++ b/devtools/client/shared/components/tabs/tabs.js
@@ -258,16 +258,17 @@ define(function (require, exports, modul
           // See also `onKeyDown()` event handler.
           return (
             DOM.li({
               className,
               key: index,
               ref,
               role: "presentation",
             },
+              DOM.span({className: "devtools-tab-line"}),
               DOM.a({
                 id: id ? id + "-tab" : "tab-" + index,
                 tabIndex: isTabSelected ? 0 : -1,
                 "aria-controls": id ? id + "-panel" : "panel-" + index,
                 "aria-selected": isTabSelected,
                 role: "tab",
                 onClick: this.onClickTab.bind(this, index),
               },
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -2,16 +2,19 @@
  * 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/. */
 
 @import url("resource://devtools/client/themes/splitters.css");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
   font: message-box;
+
+  --tab-line-hover-color: var(--grey-30);
+  --tab-line-selected-color: var(--blue-50);
 }
 
 :root[platform="mac"] {
   --monospace-font-family: Menlo, monospace;
 }
 
 :root[platform="win"] {
   --monospace-font-family: Consolas, monospace;
@@ -682,16 +685,43 @@ checkbox:-moz-focusring {
   border-inline-start: 1px solid var(--theme-splitter-color);
 
   background: var(--theme-tab-toolbar-background);
   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
   background-repeat: no-repeat;
   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:not(.is-active) .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:hover .devtools-tab-line,
+.theme-firebug .devtools-tab.selected .devtools-tab-line,
+.theme-firebug .tabs-menu-item:hover:not(.is-active) .devtools-tab-line,
+.theme-firebug .tabs-menu-item.is-active .devtools-tab-line {
+  background: transparent;
+}
+
 /* No result message styles */
 
 .devtools-sidepanel-no-result {
   font-style: italic;
   text-align: center;
   padding: 0.5em;
   -moz-user-select: none;
   font-size: 12px;
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -14,19 +14,16 @@
   --command-responsive-image: url(images/command-responsivemode.svg);
   --command-scratchpad-image: url(images/tool-scratchpad.svg);
   --command-pick-image: url(images/command-pick.svg);
   --command-frames-image: url(images/command-frames.svg);
   --command-splitconsole-image: url(images/command-console.svg);
   --command-noautohide-image: url(images/command-noautohide.svg);
   --command-rulers-image: url(images/command-rulers.svg);
   --command-measure-image: url(images/command-measure.svg);
-
-  --toolbox-tab-hover-color: var(--grey-30);
-  --toolbox-tab-selected-color: var(--blue-50);
 }
 
 .theme-firebug {
   --close-button-image: url(chrome://devtools/skin/images/firebug/close.svg);
   --dock-bottom-image: url(chrome://devtools/skin/images/firebug/dock-bottom.svg);
   --dock-side-image: url(chrome://devtools/skin/images/firebug/dock-side.svg);
   --dock-undock-image: url(chrome://devtools/skin/images/firebug/dock-undock.svg);
 
@@ -104,39 +101,16 @@
   padding: 0;
   border: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   background-color: transparent;
 }
 
-.devtools-tab-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: transparent;
-}
-
-.devtools-tab:hover .devtools-tab-line {
-  background: var(--toolbox-tab-hover-color);
-}
-
-.devtools-tab.selected .devtools-tab-line {
-  background: var(--toolbox-tab-selected-color);
-}
-
-/* Hide the devtools tab line in the firebug theme */
-.theme-firebug .devtools-tab:hover .devtools-tab-line,
-.theme-firebug .devtools-tab.selected .devtools-tab-line {
-  background: 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 */
   padding-inline-end: 10px;
   min-width: 1px;
 }
 
 .devtools-tab-label:-moz-locale-dir(rtl) {