1 files changed, 112 insertions, 0 deletions
diff --git a/devtools/client/webconsole/net/components/net-info-body.css b/devtools/client/webconsole/net/components/net-info-body.css
new file mode 100644
index 000000000..2d0bac70e
--- /dev/null
+++ b/devtools/client/webconsole/net/components/net-info-body.css
@@ -0,0 +1,112 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Network Info Body */
+
+.netInfoBody {
+  margin: 10px 0 0 0;
+  width: 100%;
+  cursor: default;
+  display: block;
+}
+
+.netInfoBody *:focus {
+  outline: 0 !important;
+}
+
+.netInfoBody .panelContent {
+  word-break: break-all;
+}
+
+/******************************************************************************/
+/* Network Info Body Tabs */
+
+.netInfoBody > .tabs {
+  background-color: transparent;
+  background-image: none;
+  height: 100%;
+}
+
+.netInfoBody > .tabs .tabs-navigation {
+  border-bottom-color: var(--net-border);
+  background-color: transparent;
+  text-decoration: none;
+  padding-top: 3px;
+  padding-left: 7px;
+  padding-bottom: 1px;
+  border-bottom: 1px solid var(--net-border);
+}
+
+.netInfoBody > .tabs .tabs-menu {
+  display: table;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* This is the trick that makes the tab bottom border invisible */
+.netInfoBody > .tabs .tabs-menu-item {
+  position: relative;
+  bottom: -2px;
+  float: left;
+}
+
+.netInfoBody > .tabs .tabs-menu-item a {
+  display: block;
+  border: 1px solid transparent;
+  text-decoration: none;
+  padding: 5px 8px 4px 8px;;
+  font-weight: bold;
+  color: var(--theme-body-color);
+  border-radius: 4px 4px 0 0;
+}
+
+.netInfoBody > .tabs .tab-panel {
+  background-color: var(--theme-body-background);
+  border: 1px solid transparent;
+  border-top: none;
+  padding: 10px;
+  overflow: auto;
+  height: calc(100% - 31px); /* minus the height of the tab bar */
+}
+
+.netInfoBody > .tabs .tab-panel > div,
+.netInfoBody > .tabs .tab-panel > div > div {
+  height: 100%;
+}
+
+.netInfoBody > .tabs .tabs-menu-item.is-active a,
+.netInfoBody > .tabs .tabs-menu-item.is-active a:focus,
+.netInfoBody > .tabs .tabs-menu-item.is-active:hover a {
+  background-color: var(--theme-body-background);
+  border: 1px solid transparent;
+  border-bottom-color: var(--theme-highlight-bluegrey);
+  color: var(--theme-highlight-bluegrey);
+}
+
+.netInfoBody > .tabs .tabs-menu-item:hover a {
+  border: 1px solid transparent;
+  border-bottom: 1px solid var(--net-border);
+  background-color: var(--theme-body-background);
+}
+
+
+/******************************************************************************/
+/* Themes */
+
+.theme-firebug .netInfoBody > .tabs .tab-panel {
+  border-color: var(--net-border);
+}
+
+.theme-firebug .netInfoBody > .tabs .tabs-menu-item.is-active a,
+.theme-firebug .netInfoBody > .tabs .tabs-menu-item.is-active:hover a,
+.theme-firebug .netInfoBody > .tabs .tabs-menu-item.is-active a:focus {
+  border: 1px solid var(--net-border);
+  border-bottom-color: transparent;
+}
+
+.theme-firebug .netInfoBody > .tabs .tabs-menu-item:hover a {
+  border-bottom-color: transparent;
+}