diff --git a/devtools/client/jsonview/components/headers-panel.js b/devtools/client/jsonview/components/headers-panel.js
index 7cdb4ec4c7a..11ea0011eb8 100644
--- a/devtools/client/jsonview/components/headers-panel.js
+++ b/devtools/client/jsonview/components/headers-panel.js
@@ -50,7 +50,7 @@ var HeadersToolbar = React.createFactory(React.createClass({
render: function() {
return (
Toolbar({},
- ToolbarButton({className: "copy", onClick: this.onCopy},
+ ToolbarButton({className: "btn copy", onClick: this.onCopy},
Locale.$STR("jsonViewer.Copy")
)
)
diff --git a/devtools/client/jsonview/components/json-panel.js b/devtools/client/jsonview/components/json-panel.js
index b81e6e32c68..6d42526f4c0 100644
--- a/devtools/client/jsonview/components/json-panel.js
+++ b/devtools/client/jsonview/components/json-panel.js
@@ -79,10 +79,10 @@ var JsonToolbar = React.createFactory(React.createClass({
render: function() {
return (
Toolbar({},
- ToolbarButton({className: "save", onClick: this.onSave},
+ ToolbarButton({className: "btn save", onClick: this.onSave},
Locale.$STR("jsonViewer.Save")
),
- ToolbarButton({className: "copy", onClick: this.onCopy},
+ ToolbarButton({className: "btn copy", onClick: this.onCopy},
Locale.$STR("jsonViewer.Copy")
),
SearchBox({
diff --git a/devtools/client/jsonview/components/text-panel.js b/devtools/client/jsonview/components/text-panel.js
index 319305b2545..a194ee7e906 100644
--- a/devtools/client/jsonview/components/text-panel.js
+++ b/devtools/client/jsonview/components/text-panel.js
@@ -46,13 +46,13 @@ var TextToolbar = React.createFactory(React.createClass({
render: function() {
return (
Toolbar({},
- ToolbarButton({className: "prettyprint",onClick: this.onPrettify},
+ ToolbarButton({className: "btn prettyprint",onClick: this.onPrettify},
Locale.$STR("jsonViewer.PrettyPrint")
),
- ToolbarButton({className: "save", onClick: this.onSave},
+ ToolbarButton({className: "btn save", onClick: this.onSave},
Locale.$STR("jsonViewer.Save")
),
- ToolbarButton({className: "copy", onClick: this.onCopy},
+ ToolbarButton({className: "btn copy", onClick: this.onCopy},
Locale.$STR("jsonViewer.Copy")
)
)
diff --git a/devtools/client/jsonview/converter-child.js b/devtools/client/jsonview/converter-child.js
index 8bafa79a722..51d64c76b71 100644
--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@@ -199,7 +199,7 @@ var Converter = Class({
var baseUrl = "resource:///modules/devtools/client/jsonview/";
var theme = (themeClassName == "theme-light") ? "light" : "dark";
var themeUrl = '';
+ 'href="css/' + theme + '-theme.css">';
return '\n' +
'' + this.htmlEncode(title) + '' +
diff --git a/devtools/client/jsonview/css/dark-theme.css b/devtools/client/jsonview/css/dark-theme.css
new file mode 100644
index 00000000000..c7ff256a8bf
--- /dev/null
+++ b/devtools/client/jsonview/css/dark-theme.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Dark Theme (copied from themes/dark-theme.css) */
+
+:root {
+ --theme-body-background: #14171a;
+
+ --theme-tab-toolbar-background: #252c33;
+ --theme-toolbar-background: #343c45;
+ --theme-selection-background: #1d4f73;
+ --theme-splitter-color: black;
+ --theme-selection-color: #f5f7fa;
+ --theme-comment: #757873;
+
+ --theme-body-color: #8fa1b2;
+ --theme-body-color-alt: #b6babf;
+ --theme-content-color1: #a9bacb;
+
+ --theme-highlight-green: #70bf53;
+ --theme-highlight-blue: #46afe3;
+ --theme-highlight-orange: #d96629;
+ --theme-highlight-bluegrey: #5e88b0;
+}
diff --git a/devtools/client/jsonview/css/light-theme.css b/devtools/client/jsonview/css/light-theme.css
new file mode 100644
index 00000000000..bec77bba5ec
--- /dev/null
+++ b/devtools/client/jsonview/css/light-theme.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+/******************************************************************************/
+/* Light Theme Constants (copied from themes/light-theme.css) */
+
+:root {
+ --theme-body-background: #fcfcfc;
+
+ --theme-tab-toolbar-background: #ebeced;
+ --theme-toolbar-background: #f0f1f2;
+ --theme-selection-background: #4c9ed9;
+ --theme-splitter-color: #aaaaaa;
+ --theme-selection-color: #f5f7fa;
+ --theme-comment: #757873;
+
+ --theme-body-color: #18191a;
+ --theme-body-color-alt: #585959;
+ --theme-content-color1: #292e33;
+
+ --theme-highlight-green: #2cbb0f;
+ --theme-highlight-blue: #0088cc;
+ --theme-highlight-orange: #f13c00;
+ --theme-highlight-bluegrey: #0072ab;
+}
diff --git a/devtools/client/jsonview/css/moz.build b/devtools/client/jsonview/css/moz.build
index be368cb8bba..71d92ddc09c 100644
--- a/devtools/client/jsonview/css/moz.build
+++ b/devtools/client/jsonview/css/moz.build
@@ -6,10 +6,12 @@
DevToolsModules(
+ 'dark-theme.css',
'dom-tree.css',
'general.css',
'headers-panel.css',
'json-panel.css',
+ 'light-theme.css',
'main.css',
'read-only-prop.svg',
'reps.css',
diff --git a/devtools/client/jsonview/test/doc_frame_script.js b/devtools/client/jsonview/test/doc_frame_script.js
index 28e44fad63b..abf6440fe37 100644
--- a/devtools/client/jsonview/test/doc_frame_script.js
+++ b/devtools/client/jsonview/test/doc_frame_script.js
@@ -71,6 +71,12 @@ addMessageListener("Test:JsonView:WaitForFilter", function(msg) {
let firstRow = content.document.querySelector(
".jsonPanelBox .domTable .memberRow");
+ // Check if the filter is already set.
+ if (firstRow.classList.contains("hidden")) {
+ sendAsyncMessage(msg.name);
+ return;
+ }
+
// Wait till the first row has 'hidden' class set.
var observer = new content.MutationObserver(function(mutations) {
for (let i = 0; i < mutations.length; i++) {