Issue #1138 - Part 1: refactor the JSON Viewer stream converter

Mozilla Bug 1367894

devtools/client/jsonview/converter-child.js

@@ -23,10 +23,6 @@ const childProcessMessageManager =
   Cc["@mozilla.org/childprocessmessagemanager;1"]
     .getService(Ci.nsISyncMessageSender);
 
-// Amount of space that will be allocated for the stream's backing-store.
-// Must be power of 2. Used to copy the data stream in onStopRequest.
-const SEGMENT_SIZE = Math.pow(2, 17);
-
 const JSON_VIEW_MIME_TYPE = "application/vnd.mozilla.json.view";
 const CONTRACT_ID = "@mozilla.org/streamconv;1?from=" +
   JSON_VIEW_MIME_TYPE + "&to=*/*";
@@ -61,9 +57,9 @@ let Converter = Class({
    * 1. asyncConvertData captures the listener
    * 2. onStartRequest fires, initializes stuff, modifies the listener
    *    to match our output type
-   * 3. onDataAvailable transcodes the data into a UTF-8 string
+   * 3. onDataAvailable spits it back to the listener
-   * 4. onStopRequest gets the collected data and converts it,
+   * 4. onStopRequest spits it back to the listener and initializes
-   *    spits it to the listener
+   *    the JSON Viewer
    * 5. convert does nothing, it's just the synchronous version
    *    of asyncConvertData
    */
@@ -76,60 +72,52 @@ let Converter = Class({
   },
 
   onDataAvailable: function (request, context, inputStream, offset, count) {
-    // From https://developer.mozilla.org/en/Reading_textual_data
+    this.listener.onDataAvailable(...arguments);
-    let is = Cc["@mozilla.org/intl/converter-input-stream;1"]
-      .createInstance(Ci.nsIConverterInputStream);
-    is.init(inputStream, this.charset, -1,
-      Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
-
-    // Seed it with something positive
-    while (count) {
-      let str = {};
-      let bytesRead = is.readString(count, str);
-      if (!bytesRead) {
-        break;
-      }
-      count -= bytesRead;
-      this.data += str.value;
-    }
   },
 
   onStartRequest: function (request, context) {
-    this.data = "";
-    this.uri = request.QueryInterface(Ci.nsIChannel).URI.spec;
-
-    // Sets the charset if it is available. (For documents loaded from the
-    // filesystem, this is not set.)
-    this.charset =
-      request.QueryInterface(Ci.nsIChannel).contentCharset || "UTF-8";
-
     this.channel = request;
-    this.channel.contentType = "text/html";
+
-    this.channel.contentCharset = "UTF-8";
+    // Let "save as" save the original JSON, not the viewer.
+    // To save with the proper extension we need the original content type,
+    // which has been replaced by application/vnd.mozilla.json.view
+    let originalType;
+    if (request instanceof Ci.nsIHttpChannel) {
+      try {
+        let header = request.getResponseHeader("Content-Type");
+        originalType = header.split(";")[0];
+      } catch (err) {
+        // Handled below
+      }
+    } else {
+      let uri = request.QueryInterface(Ci.nsIChannel).URI.spec;
+      let match = uri.match(/^data:(.*?)[,;]/);
+      if (match) {
+        originalType = match[1];
+      }
+    }
+    const JSON_TYPES = ["application/json", "application/manifest+json"];
+    if (!JSON_TYPES.includes(originalType)) {
+      originalType = JSON_TYPES[0];
+    }
+    request.QueryInterface(Ci.nsIWritablePropertyBag);
+    request.setProperty("contentType", originalType);
+
+    // Parse source as JSON. This is like text/plain, but enforcing
+    // UTF-8 charset (see bug 741776).
+    request.QueryInterface(Ci.nsIChannel);
+    request.contentType = JSON_TYPES[0];
+    this.charset = request.contentCharset = "UTF-8";
+
     // Because content might still have a reference to this window,
     // force setting it to a null principal to avoid it being same-
     // origin with (other) content.
-    this.channel.loadInfo.resetPrincipalsToNullPrincipal();
+    request.loadInfo.resetPrincipalsToNullPrincipal();
 
-    this.listener.onStartRequest(this.channel, context);
+    this.listener.onStartRequest(request, context);
   },
 
-  /**
-   * This should go something like this:
-   * 1. Make sure we have a unicode string.
-   * 2. Convert it to a Javascript object.
-   * 2.1 Removes the callback
-   * 3. Convert that to HTML? Or XUL?
-   * 4. Spit it back out at the listener
-   */
   onStopRequest: function (request, context, statusCode) {
-    let headers = {
-      response: [],
-      request: []
-    };
-
-    let win = NetworkHelper.getWindowForRequest(request);
-
     let Locale = {
       $STR: key => {
         try {
@@ -141,12 +129,10 @@ let Converter = Class({
       }
     };
 
-    JsonViewUtils.exportIntoContentScope(win, Locale, "Locale");
+    let headers = {
-
+      response: [],
-    Events.once(win, "DOMContentLoaded", event => {
+      request: []
-      win.addEventListener("contentMessage",
+    };
-        this.onContentMessage.bind(this), false, true);
-    });
 
     // The request doesn't have to be always nsIHttpChannel
     // (e.g. in case of data: URLs)
@@ -156,7 +142,6 @@ let Converter = Class({
           headers.response.push({name: name, value: value});
         }
       });
-
       request.visitRequestHeaders({
         visitHeader: function (name, value) {
           headers.request.push({name: name, value: value});
@@ -164,57 +149,57 @@ let Converter = Class({
       });
     }
 
-    let outputDoc = "";
+    let win = NetworkHelper.getWindowForRequest(request);
+    JsonViewUtils.exportIntoContentScope(win, Locale, "Locale");
+    JsonViewUtils.exportIntoContentScope(win, headers, "headers");
 
-    try {
+    win.addEventListener("DOMContentLoaded", event => {
-      headers = JSON.stringify(headers);
+      win.addEventListener("contentMessage",
-      outputDoc = this.toHTML(this.data, headers, this.uri);
+        onContentMessage.bind(this), false, true);
-    } catch (e) {
+      loadJsonViewer(win.document);
-      console.error("JSON Viewer ERROR " + e);
+    }, {once: true});
-      outputDoc = this.toErrorPage(e, this.data, this.uri);
-    }
-
-    let storage = Cc["@mozilla.org/storagestream;1"]
-      .createInstance(Ci.nsIStorageStream);
-
-    storage.init(SEGMENT_SIZE, 0xffffffff, null);
-    let out = storage.getOutputStream(0);
-
-    let binout = Cc["@mozilla.org/binaryoutputstream;1"]
-      .createInstance(Ci.nsIBinaryOutputStream);
-
-    binout.setOutputStream(out);
-    binout.writeUtf8Z(outputDoc);
-    binout.close();
-
-    // We need to trim 4 bytes off the front (this could be underlying bug).
-    let trunc = 4;
-    let instream = storage.newInputStream(trunc);
-
-    // Pass the data to the main content listener
-    this.listener.onDataAvailable(this.channel, context, instream, 0,
-      instream.available());
 
     this.listener.onStopRequest(this.channel, context, statusCode);
-
     this.listener = null;
-  },
+  }
+});
 
-  htmlEncode: function (t) {
+// Chrome <-> Content communication
-    return t !== null ? t.toString()
+function onContentMessage(e) {
-      .replace(/&/g, "&amp;")
+  // Do not handle events from different documents.
-      .replace(/"/g, "&quot;")
+  let win = NetworkHelper.getWindowForRequest(this.channel);
-      .replace(/</g, "&lt;")
+  if (win != e.target) {
-      .replace(/>/g, "&gt;") : "";
+    return;
-  },
+  }
 
-  toHTML: function (json, headers, title) {
+  let value = e.detail.value;
-    let themeClassName = "theme-" + JsonViewUtils.getCurrentTheme();
+  switch (e.detail.type) {
-    let clientBaseUrl = "resource://devtools/client/";
+    case "copy":
-    let baseUrl = clientBaseUrl + "jsonview/";
+      copyString(win, value);
-    let themeVarsUrl = clientBaseUrl + "themes/variables.css";
+      break;
-    let commonUrl = clientBaseUrl + "themes/common.css";
+
-    let toolbarsUrl = clientBaseUrl + "themes/toolbars.css";
+    case "copy-headers":
+      copyHeaders(win, value);
+      break;
+
+    case "save":
+      // The window ID is needed when the JSON Viewer is inside an iframe.
+      let windowID = win.QueryInterface(Ci.nsIInterfaceRequestor)
+        .getInterface(Ci.nsIDOMWindowUtils).outerWindowID;
+      childProcessMessageManager.sendAsyncMessage(
+        "devtools:jsonview:save", {url: value, windowID: windowID});
+  }
+}
+
+// Loads the JSON Viewer into a text/plain document
+function loadJsonViewer(doc) {
+  function addStyleSheet(url) {
+    let link = doc.createElement("link");
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = url;
+    doc.head.appendChild(link);
+  }
 
   let os;
   let platform = Services.appinfo.OS;
@@ -226,73 +211,34 @@ let Converter = Class({
     os = "linux";
   }
 
-    return "<!DOCTYPE html>\n" +
+  doc.documentElement.setAttribute("platform", os);
-      "<html platform=\"" + os + "\" class=\"" + themeClassName + "\">" +
+  doc.documentElement.dataset.contentType = doc.contentType;
-      "<head><title>" + this.htmlEncode(title) + "</title>" +
+  doc.documentElement.classList.add("theme-" + JsonViewUtils.getCurrentTheme());
-      "<base href=\"" + this.htmlEncode(baseUrl) + "\">" +
+  doc.documentElement.dir = Services.locale.isAppLocaleRTL ? "rtl" : "ltr";
-      "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
-        themeVarsUrl + "\">" +
-      "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
-        commonUrl + "\">" +
-      "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
-        toolbarsUrl + "\">" +
-      "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/main.css\">" +
-      "<script data-main=\"viewer-config\" src=\"lib/require.js\"></script>" +
-      "</head><body>" +
-      "<div id=\"content\"></div>" +
-      "<div id=\"json\">" + this.htmlEncode(json) + "</div>" +
-      "<div id=\"headers\">" + this.htmlEncode(headers) + "</div>" +
-      "</body></html>";
-  },
 
-  toErrorPage: function (error, data, uri) {
+  let base = doc.createElement("base");
-    // Escape unicode nulls
+  base.href = "resource://devtools/client/jsonview/";
-    data = data.replace("\u0000", "\uFFFD");
+  doc.head.appendChild(base);
 
-    let errorInfo = error + "";
+  addStyleSheet("../themes/variables.css");
+  addStyleSheet("../themes/common.css");
+  addStyleSheet("../themes/toolbars.css");
+  addStyleSheet("css/main.css");
 
-    let output = "<div id=\"error\">" + "error parsing";
+  let json = doc.querySelector("pre");
-    if (errorInfo.message) {
+  json.id = "json";
-      output += "<div class=\"errormessage\">" + errorInfo.message + "</div>";
+  let content = doc.createElement("div");
+  content.id = "content";
+  content.appendChild(json);
+  doc.body.appendChild(content);
+
+  let script = doc.createElement("script");
+  script.src = "lib/require.js";
+  script.dataset.main = "viewer-config";
+  doc.body.appendChild(script);
 }
 
-    output += "</div><div id=\"json\">" + this.highlightError(data,
+function copyHeaders(win, headers) {
-      errorInfo.line, errorInfo.column) + "</div>";
-
-    return "<!DOCTYPE html>\n" +
-      "<html><head><title>" + this.htmlEncode(uri + " - Error") + "</title>" +
-      "<base href=\"" + this.htmlEncode(this.data.url()) + "\">" +
-      "</head><body>" +
-      output +
-      "</body></html>";
-  },
-
-  // Chrome <-> Content communication
-
-  onContentMessage: function (e) {
-    // Do not handle events from different documents.
-    let win = NetworkHelper.getWindowForRequest(this.channel);
-    if (win != e.target) {
-      return;
-    }
-
-    let value = e.detail.value;
-    switch (e.detail.type) {
-      case "copy":
-        Clipboard.set(value, "text");
-        break;
-
-      case "copy-headers":
-        this.copyHeaders(value);
-        break;
-
-      case "save":
-        childProcessMessageManager.sendAsyncMessage(
-          "devtools:jsonview:save", value);
-    }
-  },
-
-  copyHeaders: function (headers) {
   let value = "";
   let eol = (Services.appinfo.OS !== "WINNT") ? "\n" : "\r\n";
 
@@ -310,9 +256,17 @@ let Converter = Class({
     value += header.name + ": " + header.value + eol;
   }
 
-    Clipboard.set(value, "text");
+  copyString(win, value);
+}
+
+function copyString(win, string) {
+  win.document.addEventListener("copy", event => {
+    event.clipboardData.setData("text/plain", string);
+    event.preventDefault();
+  }, {once: true});
+
+  win.document.execCommand("copy", false, null);
 }
-});
 
 // Stream converter component definition
 let service = xpcom.Service({

devtools/client/jsonview/css/general.css

@@ -28,8 +28,7 @@ pre {
   font-family: var(--monospace-font-family);
 }
 
-#json,
+#json {
-#headers {
   display: none;
 }
 
@@ -44,3 +43,9 @@ body.theme-dark {
 .theme-dark pre {
   background-color: var(--theme-body-background);
 }
+
+/******************************************************************************/
+/* Fixes for quirks mode */  
+table {
+  font: inherit;
+}

devtools/client/jsonview/json-viewer.js

@@ -12,7 +12,6 @@ define(function (require, exports, module) {
   const { MainTabbedArea } = createFactories(require("./components/main-tabbed-area"));
 
   const json = document.getElementById("json");
-  const headers = document.getElementById("headers");
 
   let jsonData;
 
@@ -27,13 +26,12 @@ define(function (require, exports, module) {
     jsonText: json.textContent,
     jsonPretty: null,
     json: jsonData,
-    headers: JSON.parse(headers.textContent),
+    headers: window.headers,
     tabActive: 0,
     prettified: false
   };
 
   json.remove();
-  headers.remove();
 
   /**
    * Application actions/commands. This list implements all commands

devtools/client/jsonview/utils.js

@@ -96,6 +96,8 @@ exports.exportIntoContentScope = function (win, obj, defineAs) {
       Cu.exportFunction(propValue, clone, {
         defineAs: propName
       });
+    } else {
+      clone[propName] = Cu.cloneInto(propValue, win);
     }
   }
 };