Bug 1394268 - Part 4: Implement the photon tab line for the selected sidebar tab. r=bgrins
MozReview-Commit-ID: bnx6bWjnm1
--- 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) {