From 67cde17efe0ed211dfe11a004688f7a0418ccf3d Mon Sep 17 00:00:00 2001
From: Oriol Brufau <oriol-bugzilla@hotmail.com>
Date: Sun, 15 Oct 2017 18:45:41 +0200
Subject: [PATCH] Bug 1405456 - Update JSON Viewer theme when the devtools
 theme changes. r=Honza

MozReview-Commit-ID: F4tJRCDGfQn

--HG--
extra : rebase_source : bc89deda4c022a1e92f78d11268b157e254ec22a
---
 devtools/client/jsonview/converter-child.js   | 13 +++++++
 devtools/client/jsonview/test/browser.ini     |  1 +
 .../jsonview/test/browser_jsonview_theme.js   | 34 +++++++++++++++++++
 .../client/jsonview/test/doc_frame_script.js  |  7 ++++
 devtools/client/jsonview/test/head.js         |  8 +++++
 5 files changed, 63 insertions(+)
 create mode 100644 devtools/client/jsonview/test/browser_jsonview_theme.js

diff --git a/devtools/client/jsonview/converter-child.js b/devtools/client/jsonview/converter-child.js
index fa33a6c8fd64..ad151252185d 100644
--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@@ -124,6 +124,7 @@ Converter.prototype = {
     win.addEventListener("DOMContentLoaded", event => {
       win.addEventListener("contentMessage", onContentMessage, false, true);
     }, {once: true});
+    keepThemeUpdated(win);
 
     // Send the initial HTML code.
     let bytes = encoder.encode(initialHTML(win.document));
@@ -322,6 +323,18 @@ function initialHTML(doc) {
     startTag("plaintext", {"id": "json"});
 }
 
+function keepThemeUpdated(win) {
+  let listener = function () {
+    let theme = Services.prefs.getCharPref("devtools.theme");
+    win.document.documentElement.className = "theme-" + theme;
+  };
+  Services.prefs.addObserver("devtools.theme", listener);
+  win.addEventListener("unload", function (event) {
+    Services.prefs.removeObserver("devtools.theme", listener);
+    win = null;
+  }, {once: true});
+}
+
 // Chrome <-> Content communication
 function onContentMessage(e) {
   // Do not handle events from different documents.
diff --git a/devtools/client/jsonview/test/browser.ini b/devtools/client/jsonview/test/browser.ini
index 276d50de4f86..1a2c574f0720 100644
--- a/devtools/client/jsonview/test/browser.ini
+++ b/devtools/client/jsonview/test/browser.ini
@@ -43,6 +43,7 @@ skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32
 [browser_jsonview_save_json.js]
 support-files =
   !/toolkit/content/tests/browser/common/mockTransfer.js
+[browser_jsonview_theme.js]
 [browser_jsonview_slash.js]
 [browser_jsonview_valid_json.js]
 [browser_json_refresh.js]
diff --git a/devtools/client/jsonview/test/browser_jsonview_theme.js b/devtools/client/jsonview/test/browser_jsonview_theme.js
new file mode 100644
index 000000000000..8679f26e1864
--- /dev/null
+++ b/devtools/client/jsonview/test/browser_jsonview_theme.js
@@ -0,0 +1,34 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_JSON_URL = URL_ROOT + "valid_json.json";
+
+add_task(function* () {
+  info("Test JSON theme started.");
+
+  let oldPref = SpecialPowers.getCharPref("devtools.theme");
+  SpecialPowers.setCharPref("devtools.theme", "light");
+
+  yield addJsonViewTab(TEST_JSON_URL);
+
+  is(yield getTheme(), "theme-light", "The initial theme is light");
+
+  SpecialPowers.setCharPref("devtools.theme", "dark");
+  is(yield getTheme(), "theme-dark", "Theme changed to dark");
+
+  SpecialPowers.setCharPref("devtools.theme", "firebug");
+  is(yield getTheme(), "theme-firebug", "Theme changed to firebug");
+
+  SpecialPowers.setCharPref("devtools.theme", "light");
+  is(yield getTheme(), "theme-light", "Theme changed to light");
+
+  SpecialPowers.setCharPref("devtools.theme", oldPref);
+});
+
+function getTheme() {
+  return getElementAttr(":root", "class");
+}
diff --git a/devtools/client/jsonview/test/doc_frame_script.js b/devtools/client/jsonview/test/doc_frame_script.js
index c461e1b2e269..626f8ac99b21 100644
--- a/devtools/client/jsonview/test/doc_frame_script.js
+++ b/devtools/client/jsonview/test/doc_frame_script.js
@@ -58,6 +58,13 @@ addMessageListener("Test:JsonView:GetElementVisibleText", function (msg) {
   sendAsyncMessage(msg.name, {text: text});
 });
 
+addMessageListener("Test:JsonView:GetElementAttr", function (msg) {
+  let {selector, attr} = msg.data;
+  let element = content.document.querySelector(selector);
+  let text = element ? element.getAttribute(attr) : null;
+  sendAsyncMessage(msg.name, {text: text});
+});
+
 addMessageListener("Test:JsonView:FocusElement", function (msg) {
   let {selector} = msg.data;
   let element = content.document.querySelector(selector);
diff --git a/devtools/client/jsonview/test/head.js b/devtools/client/jsonview/test/head.js
index 87e95bd6607a..d5ea9b3fffca 100644
--- a/devtools/client/jsonview/test/head.js
+++ b/devtools/client/jsonview/test/head.js
@@ -123,6 +123,14 @@ function getElementText(selector) {
   });
 }
 
+function getElementAttr(selector, attr) {
+  info("Get attribute '" + attr + "' for element '" + selector + "'");
+
+  let data = {selector, attr};
+  return executeInContent("Test:JsonView:GetElementAttr", data)
+  .then(result => result.text);
+}
+
 function focusElement(selector) {
   info("Focus element: '" + selector + "'");