Bug 1536005 - Merge Tabs.css and TabBar.css into Tabs.css r=fvsch
authorMellina Yonashiro <yonashiro.mellina@gmail.com>
Tue, 26 Mar 2019 13:19:35 +0000
changeset 527982 3d8735077ec7ed750ec5136b9a0c156ad415b4a1
parent 527981 6a07933fe4cb31d221e2d0921996da27c1576567
child 527983 73a48619739e34609d11f5ed15f3fc1436ee154f
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1536005
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1536005 - Merge Tabs.css and TabBar.css into Tabs.css r=fvsch Differential Revision: https://phabricator.services.mozilla.com/D24663
devtools/client/inspector/index.xhtml
devtools/client/netmonitor/src/assets/styles/httpi.css
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/shared/components/tabs/TabBar.css
devtools/client/shared/components/tabs/Tabs.css
devtools/client/shared/components/tabs/moz.build
devtools/client/shared/components/test/mochitest/test_tabs_menu.html
devtools/client/webconsole/index.html
--- a/devtools/client/inspector/index.xhtml
+++ b/devtools/client/inspector/index.xhtml
@@ -14,17 +14,16 @@
   <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/changes.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/animation.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
-  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/SidebarToggle.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/InspectorTabPanel.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/SplitBox.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tree/TreeView.css"/>
 
   <script type="application/javascript"
--- a/devtools/client/netmonitor/src/assets/styles/httpi.css
+++ b/devtools/client/netmonitor/src/assets/styles/httpi.css
@@ -1,17 +1,16 @@
 /* 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/. */
 
 @import "chrome://devtools/skin/widgets.css";
 @import "resource://devtools/client/shared/components/splitter/SplitBox.css";
 @import "resource://devtools/client/shared/components/tree/TreeView.css";
 @import "resource://devtools/client/shared/components/tabs/Tabs.css";
-@import "resource://devtools/client/shared/components/tabs/TabBar.css";
 @import "chrome://devtools/skin/components-frame.css";
 @import "chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css";
 @import "chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css";
 @import "chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css";
 @import "resource://devtools/client/shared/components/MdnLink.css";
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -1,17 +1,16 @@
 /* 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/. */
 
 @import "resource://devtools/client/shared/components/SidebarToggle.css";
 @import "resource://devtools/client/shared/components/splitter/SplitBox.css";
 @import "resource://devtools/client/shared/components/tree/TreeView.css";
 @import "resource://devtools/client/shared/components/tabs/Tabs.css";
-@import "resource://devtools/client/shared/components/tabs/TabBar.css";
 @import "chrome://devtools/skin/components-frame.css";
 @import "chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css";
 @import "chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css";
 @import "chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css";
 @import "resource://devtools/client/shared/components/MdnLink.css";
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
deleted file mode 100644
--- a/devtools/client/shared/components/tabs/TabBar.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* 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/. */
-
-/* Hides the tab strip in the TabBar */
-div[hidetabs=true] .tabs .tabs-navigation {
-  display: none;
-}
-
-.tabs .tabs-navigation {
-  display: flex;
-  line-height: 15px;
-  height: 24px;
-}
-
-.tabs .tabs-menu-item:first-child {
-  border-inline-start-width: 0;
-}
-
-/* Remove the outline focusring from tabs-menu-item. */
-.tabs .tabs-navigation .tabs-menu-item > a:-moz-focusring {
-  outline: none;
-}
-
-.tabs .tabs-menu-item.is-active {
-  height: 23px;
-}
-
-/* The tab takes entire horizontal space and individual tabs
-  should stretch accordingly. Use flexbox for the behavior.
-  Use also `overflow: hidden` so, 'overflow' and 'underflow'
-  events are fired (it's utilized by the all-tabs-menu). */
-.tabs .tabs-navigation .tabs-menu {
-  overflow: hidden;
-  display: flex;
-}
-
-.tabs .tabs-navigation .tabs-menu-item {
-  flex-grow: 1;
-}
-
-.tabs .tabs-navigation .tabs-menu-item a {
-  text-align: center;
-}
-
--- a/devtools/client/shared/components/tabs/Tabs.css
+++ b/devtools/client/shared/components/tabs/Tabs.css
@@ -7,35 +7,82 @@
 
 .tabs {
   height: 100%;
   background: var(--theme-sidebar-background);
   display: flex;
   flex-direction: column;
 }
 
+/* Hides the tab strip in the TabBar */
+div[hidetabs=true] .tabs .tabs-navigation {
+  display: none;
+}
+
+.tabs .tabs-navigation {
+  display: flex;
+  line-height: 15px;
+  height: 24px;
+  position: relative;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  background: var(--theme-tab-toolbar-background);
+}
+
 .tabs .tabs-menu {
   list-style: none;
   padding: 0;
   margin: 0;
+  flex-grow: 1;
+}
+
+/* The tab takes entire horizontal space and individual tabs
+  should stretch accordingly. Use flexbox for the behavior.
+  Use also `overflow: hidden` so, 'overflow' and 'underflow'
+  events are fired (it's utilized by the all-tabs-menu). */
+.tabs .tabs-navigation .tabs-menu {
+  overflow: hidden;
+  display: flex;
 }
 
 .tabs .tabs-menu-item {
   display: inline-block;
   position: relative;
+  margin: 0;
+  padding: 0;
+  color: var(--theme-toolbar-color);
+}
+
+.tabs .tabs-menu-item.is-active {
+  color: var(--theme-toolbar-selected-color);
+}
+
+.tabs .tabs-menu-item:hover {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.tabs .tabs-menu-item:hover:active:not(.is-active) {
+  background-color: var(--theme-toolbar-hover-active);
 }
 
 .tabs .tabs-menu-item a {
   display: flex;
   justify-content: center;
-  padding: 4px 8px;
+  padding: 3px 10px;
   border: 1px solid transparent;
   font-size: 12px;
   text-decoration: none;
   white-space: nowrap;
+  cursor: default;
+  -moz-user-select: none;
+  text-align: center;
+}
+
+/* Remove the outline focusring from tabs-menu-item. */
+.tabs .tabs-navigation .tabs-menu-item > a:-moz-focusring {
+  outline: none;
 }
 
 .tabs .tabs-menu-item .tab-badge {
   color: var(--theme-highlight-blue);
   font-size: 80%;
   font-style: italic;
   /* Tabs have a 15px padding start/end, so we set the margins here in order to center the
      badge after the tab title, with a 5px effective margin. */
@@ -49,63 +96,19 @@
 }
 
 /* To avoid "select all" commands from selecting content in hidden tabs */
 .tabs .hidden,
 .tabs .hidden * {
   -moz-user-select: none !important;
 }
 
-.tabs .tabs-menu-item a {
-  cursor: default;
-  -moz-user-select: none;
-}
-
 /* Make sure panel content takes entire vertical space. */
 .tabs .panels {
   flex: 1;
   overflow: hidden;
 }
 
 .tabs .tab-panel {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-}
-
-.tabs .tabs-navigation,
-.tabs .tabs-navigation {
-  position: relative;
-  border-bottom: 1px solid var(--theme-splitter-color);
-  background: var(--theme-tab-toolbar-background);
-}
-
-.theme-dark .tabs .tabs-menu-item,
-.theme-light .tabs .tabs-menu-item {
-  margin: 0;
-  padding: 0;
-  color: var(--theme-toolbar-color);
-}
-
-.theme-dark .tabs .tabs-menu-item.is-active,
-.theme-light .tabs .tabs-menu-item.is-active {
-  color: var(--theme-toolbar-selected-color);
-}
-
-.theme-dark .tabs .tabs-menu-item:last-child,
-.theme-light .tabs .tabs-menu-item:last-child {
-  border-inline-end-width: 1px;
-}
-
-.theme-dark .tabs .tabs-menu-item a,
-.theme-light .tabs .tabs-menu-item a {
-  padding: 3px 10px;
-}
-
-.theme-dark .tabs .tabs-menu-item:hover,
-.theme-light .tabs .tabs-menu-item:hover {
-  background-color: var(--theme-toolbar-hover);
-}
-
-.theme-dark .tabs .tabs-menu-item:hover:active:not(.is-active),
-.theme-light .tabs .tabs-menu-item:hover:active:not(.is-active) {
-  background-color: var(--theme-toolbar-hover-active);
-}
+}
\ No newline at end of file
--- a/devtools/client/shared/components/tabs/moz.build
+++ b/devtools/client/shared/components/tabs/moz.build
@@ -1,12 +1,11 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
-    'TabBar.css',
     'TabBar.js',
     'Tabs.css',
     'Tabs.js',
 )
--- a/devtools/client/shared/components/test/mochitest/test_tabs_menu.html
+++ b/devtools/client/shared/components/test/mochitest/test_tabs_menu.html
@@ -9,17 +9,16 @@ Test all-tabs menu.
 <head>
   <meta charset="utf-8">
   <title>Tabs component All-tabs menu test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/variables.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/common.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/Tabs.css">
-  <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/TabBar.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/inspector/components/side-panel.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/inspector/components/InspectorTabPanel.css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = async function () {
--- a/devtools/client/webconsole/index.html
+++ b/devtools/client/webconsole/index.html
@@ -12,17 +12,16 @@
     <link rel="localization" href="toolkit/main-window/editmenu.ftl"/>
     <link rel="stylesheet" href="chrome://global/skin/"/>
     <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/webconsole.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/SmartTrace.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
-    <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/NotificationBox.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/httpi.css"/>
     <link rel="stylesheet" href="resource://devtools/client/webconsole/components/ReverseSearchInput.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css"/>
 
     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="application/javascript"
             src="resource://devtools/client/webconsole/main.js"></script>