8 files changed, 268 insertions, 0 deletions
diff --git a/devtools/client/jsonview/css/general.css b/devtools/client/jsonview/css/general.css
new file mode 100644
index 0000000000..1fb15fdfc3
--- /dev/null
+++ b/devtools/client/jsonview/css/general.css
@@ -0,0 +1,48 @@
+/* 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/. */
+
+/******************************************************************************/
+/* General */
+
+html, body, #content {
+  height: 100%;
+}
+
+body {
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
+  padding: 0;
+  margin: 0;
+}
+
+*:focus {
+  outline: none !important;
+}
+
+pre {
+  background-color: white;
+  border: none;
+  font-family: var(--monospace-font-family);
+}
+
+#content {
+  display: flow-root;
+}
+
+#json {
+  margin: 8px;
+  white-space: pre-wrap;
+}
+
+/******************************************************************************/
+/* Dark Theme */
+
+body.theme-dark {
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
+}
+
+.theme-dark pre {
+  background-color: var(--theme-body-background);
+}
diff --git a/devtools/client/jsonview/css/headers-panel.css b/devtools/client/jsonview/css/headers-panel.css
new file mode 100644
index 0000000000..b37340b51a
--- /dev/null
+++ b/devtools/client/jsonview/css/headers-panel.css
@@ -0,0 +1,66 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Headers Panel */
+
+.headersPanelBox {
+  height: 100%;
+}
+
+.headersPanelBox .netInfoHeadersTable {
+  overflow: auto;
+  height: 100%;
+}
+
+.headersPanelBox .netHeadersGroup {
+  padding: 10px;
+}
+
+.headersPanelBox td {
+  vertical-align: bottom;
+}
+
+.headersPanelBox .netInfoHeadersGroup {
+  color: var(--theme-toolbar-color);
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding-top: 8px;
+  padding-bottom: 4px;
+  font-weight: bold;
+  user-select: none;
+}
+
+.headersPanelBox .netInfoParamValue {
+  word-wrap: break-word;
+}
+
+.headersPanelBox .netInfoParamName {
+  padding: 2px 10px 0 0;
+  font-weight: bold;
+  vertical-align: top;
+  text-align: right;
+  white-space: nowrap;
+}
+
+/******************************************************************************/
+/* Theme colors have been generated/copied from Network Panel's header view */
+
+/* Light Theme */
+.theme-light .netInfoParamName {
+  color: var(--theme-highlight-red);
+}
+
+.theme-light .netInfoParamValue {
+  color: var(--theme-highlight-purple);
+}
+
+/* Dark Theme */
+.theme-dark .netInfoParamName {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-dark .netInfoParamValue {
+  color: var(--theme-highlight-gray);
+}
diff --git a/devtools/client/jsonview/css/json-panel.css b/devtools/client/jsonview/css/json-panel.css
new file mode 100644
index 0000000000..98c228e87e
--- /dev/null
+++ b/devtools/client/jsonview/css/json-panel.css
@@ -0,0 +1,18 @@
+/* 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/. */
+
+/******************************************************************************/
+/* JSON Panel */
+
+.jsonPrimitiveValue,
+.jsonParseError {
+  font-size: 12px;
+  font-family: Lucida Grande, Tahoma, sans-serif;
+  line-height: 15px;
+  padding: 10px;
+}
+
+.jsonParseError {
+  color: var(--theme-text-color-error);
+}
diff --git a/devtools/client/jsonview/css/main.css b/devtools/client/jsonview/css/main.css
new file mode 100644
index 0000000000..996b6b7a4d
--- /dev/null
+++ b/devtools/client/jsonview/css/main.css
@@ -0,0 +1,44 @@
+/* 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/variables.css";
+@import "chrome://devtools/skin/common.css";
+@import "chrome://devtools/skin/toolbars.css";
+
+@import "chrome://devtools/content/shared/components/tree/TreeView.css";
+@import "chrome://devtools/content/shared/components/tabs/Tabs.css";
+
+@import "general.css";
+@import "search-box.css";
+@import "toolbar.css";
+@import "json-panel.css";
+@import "text-panel.css";
+@import "headers-panel.css";
+
+/******************************************************************************/
+/* Panel Content */
+
+.tab-panel-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panelContent {
+  direction: ltr;
+  overflow-y: auto;
+  width: 100%;
+  flex: 1;
+}
+
+/* The tree takes the entire horizontal space within the panel content. */
+.panelContent .treeTable {
+  width: 100%;
+  font-family: var(--monospace-font-family);
+}
+
+/* Make sure there is a little space between label and value columns. */
+.panelContent .treeTable .treeLabelCell {
+  padding-right: 17px;
+}
diff --git a/devtools/client/jsonview/css/moz.build b/devtools/client/jsonview/css/moz.build
new file mode 100644
index 0000000000..53ebea91b0
--- /dev/null
+++ b/devtools/client/jsonview/css/moz.build
@@ -0,0 +1,15 @@
+# -*- 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(
+    "general.css",
+    "headers-panel.css",
+    "json-panel.css",
+    "main.css",
+    "search-box.css",
+    "text-panel.css",
+    "toolbar.css",
+)
diff --git a/devtools/client/jsonview/css/search-box.css b/devtools/client/jsonview/css/search-box.css
new file mode 100644
index 0000000000..25828c6b76
--- /dev/null
+++ b/devtools/client/jsonview/css/search-box.css
@@ -0,0 +1,20 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Search Box */
+
+.devtools-searchbox {
+  background-color: var(--theme-body-background);
+}
+
+.devtools-filterinput {
+  margin-inline-start: auto; /* Align to the right */
+}
+
+/* JSONView doesn't load dark-theme.css */
+.theme-dark .devtools-filterinput {
+  background-color: rgba(24, 29, 32, 1);
+  color: rgba(184, 200, 217, 1);
+}
diff --git a/devtools/client/jsonview/css/text-panel.css b/devtools/client/jsonview/css/text-panel.css
new file mode 100644
index 0000000000..b656918898
--- /dev/null
+++ b/devtools/client/jsonview/css/text-panel.css
@@ -0,0 +1,18 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Text Panel */
+
+.textPanelBox {
+  height: 100%;
+}
+
+.textPanelBox pre {
+  margin: 8px;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: var(--monospace-font-family);
+  color: var(--theme-text-color-strong);
+}
diff --git a/devtools/client/jsonview/css/toolbar.css b/devtools/client/jsonview/css/toolbar.css
new file mode 100644
index 0000000000..58349d887c
--- /dev/null
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -0,0 +1,39 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Toolbar */
+
+.toolbar {
+  display: flex;
+  height: 22px;
+  padding: 1px;
+  padding-inline-start: 2px;
+  background: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.toolbar .btn {
+  margin-inline-start: 5px;
+  color: var(--theme-body-color);
+  background: var(--toolbarbutton-background);
+  border: none;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  padding: 0 3px;
+  border-radius: 2px;
+}
+
+.toolbar .btn:hover {
+  background: var(--toolbarbutton-hover-background);
+}
+
+.toolbar .btn:not([disabled]):hover:active {
+  background-color: var(--theme-selection-background-hover);
+}