Bug 1518613 - [release 118] Re-style tabs (#7585). r=dwalsh

dothq · Jan 9, 2019 · f20f95b · f20f95b
1 parent d7225cf
commit f20f95b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/devtools/client/debugger/new/dist/debugger.css b/devtools/client/debugger/new/dist/debugger.css
@@ -1296,11 +1296,14 @@ html[dir="rtl"] .managed-tree .tree .node > div {
   background-color: var(--theme-comment);
   width: 8px;
   height: 8px;
-  transition: all 0.15s ease-in-out;
   padding: 0;
   margin-top: 0;
 }
 
+.close-btn .close:hover {
+  background-color: var(--theme-comment);
+}
+
 .close-btn:hover .img.close {
   background-color: white;
 }
@@ -1340,6 +1343,7 @@ img.close::before {
   position: relative;
   padding: 0px 5px;
   fill: currentColor;
+  min-width: 30px;
 }
 
 .command-bar-button:disabled {
@@ -1369,10 +1373,10 @@ img.close::before {
   transform: translate(0, 0px);
   transition: transform 0.25s ease-in-out;
   padding: 5px;
-}
-
-.toggle-button .togglePanes {
-  vertical-align: -2px;
+  -webkit-border-start: 1px solid;
+  border-inline-start: 1px solid;
+  border-image: var(--separator-border-image) 1 1;
+  height: inherit;
 }
 
 .toggle-button svg {
@@ -4367,19 +4371,17 @@ html .welcomebox .toggle-button-end.collapsed {
 }
 
 .source-tab {
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
   display: inline-flex;
   align-items: center;
   position: relative;
-  transition: all 0.15s ease;
   min-width: 40px;
   max-width: 100%;
   overflow: hidden;
   padding: 5px;
   cursor: default;
   height: 30px;
   font-size: 12px;
+  background-color: transparent;
 }
 
 .source-tab::before {
@@ -4412,9 +4414,6 @@ html .welcomebox .toggle-button-end.collapsed {
 .source-tab.active {
   color: var(--theme-toolbar-selected-color);
   border-bottom-color: transparent;
-  border-left: 1px solid var(--theme-splitter-color);
-  border-right: 1px solid var(--theme-splitter-color);
-  background-color: var(--theme-body-background);
 }
 
 .source-tab.active::before {
@@ -4464,21 +4463,6 @@ html .welcomebox .toggle-button-end.collapsed {
   fill: var(--theme-body-color);
 }
 
-img.moreTabs {
-  mask: url("resource://devtools/client/debugger/new/images/command-chevron.svg") no-repeat;
-  mask-size: 100%;
-  width: 12px;
-  height: 12px;
-  display: block;
-  background: var(--theme-body-color);
-  margin-left: 6px;
-}
-
-html[dir="rtl"] .img.moreTabs {
-  transform: rotate(180deg);
-  margin-right: 6px;
-}
-
 .source-tab .filename {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4502,6 +4486,11 @@ html[dir="rtl"] .img.moreTabs {
   visibility: visible;
 }
 
+.source-tab.active .close {
+  visibility: visible;
+  background-color: var(--theme-toolbar-selected-color);
+}
+
 .source-tab:hover .close-btn {
   visibility: visible;
 }
@@ -4546,6 +4535,20 @@ html[dir="rtl"] .dropdown {
   width: 24px;
 }
 
+.more-tabs {
+  mask: url("resource://devtools/client/debugger/new/images/command-chevron.svg") no-repeat;
+  mask-size: 100%;
+  width: 12px;
+  display: block;
+  background: var(--theme-body-color);
+  margin-left: 6px;
+}
+
+html[dir="rtl"] .img.more-tabs {
+  transform: rotate(180deg);
+  margin-right: 6px;
+}
+
 .dropdown li {
   transition: all 0.25s ease;
   padding: 2px 10px 10px 5px;

diff --git a/devtools/client/debugger/new/src/components/Editor/Tabs.js b/devtools/client/debugger/new/src/components/Editor/Tabs.js
@@ -165,7 +165,7 @@ class Tabs extends PureComponent<Props, State> {
     }
 
     const Panel = <ul>{hiddenTabs.map(this.renderDropdownSource)}</ul>;
-    const icon = <AccessibleImage className="moreTabs" />;
+    const icon = <AccessibleImage className="more-tabs" />;
 
     return <Dropdown panel={Panel} icon={icon} />;
   }

diff --git a/devtools/client/debugger/new/src/components/shared/Dropdown.js b/devtools/client/debugger/new/src/components/shared/Dropdown.js
@@ -45,6 +45,7 @@ export class Dropdown extends Component<Props, State> {
 
   renderButton() {
     return (
+      // eslint-disable-next-line prettier/prettier
       <button className="dropdown-button" onClick={this.toggleDropdown}>
         {this.props.icon}
       </button>