1 files changed, 128 insertions, 0 deletions
diff --git a/devtools/client/shared/components/tabs/Tabs.css b/devtools/client/shared/components/tabs/Tabs.css
new file mode 100644
index 0000000000..d483925a75
--- /dev/null
+++ b/devtools/client/shared/components/tabs/Tabs.css
@@ -0,0 +1,128 @@
+/* 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/. */
+
+/* Tabs General Styles */
+
+.tabs {
+  --tab-height: var(--theme-toolbar-height);
+  height: 100%;
+  background: var(--theme-sidebar-background);
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs.tabs-tall {
+  --tab-height: var(--theme-toolbar-tall-height);
+}
+
+/* Hides the tab strip in the TabBar */
+div[hidetabs=true] .tabs .tabs-navigation {
+  display: none;
+}
+
+.tabs .tabs-navigation {
+  box-sizing: border-box;
+  display: flex;
+  /* Reserve 1px for the border */
+  height: calc(var(--tab-height) + 1px);
+  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;
+  margin-inline-end: 15px;
+  flex-grow: 1;
+  /* Adjust outline so it's not clipped */
+  outline-offset: -2px;
+}
+
+/* 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;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+
+.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 {
+  --text-height: 16px;
+  --devtools-tab-border-width: 1px;
+  display: flex;
+  justify-content: center;
+  /* Vertically center text, calculate space remaining by taking the full height and removing
+  the block borders and text. Divide by 2 to distribute above and below.  */
+  padding: calc((var(--tab-height) - var(--text-height) - (var(--devtools-tab-border-width) * 2)) / 2) 10px;
+  border: var(--devtools-tab-border-width) solid transparent;
+  font-size: 12px;
+  line-height: var(--text-height);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+  text-align: center;
+}
+
+.tabs .tabs-navigation .tabs-menu-item > a {
+  outline-offset: -2px;
+}
+
+.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. */
+  margin-inline-start: 5px;
+  margin-inline-end: -10px;
+}
+
+.tabs .tabs-menu-item.is-active .tab-badge {
+  /* Use the same color as the tab-item when active */
+  color: inherit;
+}
+
+/* To avoid "select all" commands from selecting content in hidden tabs */
+.tabs .hidden,
+.tabs .hidden * {
+  user-select: none !important;
+}
+
+/* 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;
+}