Bug 1366239 - Display the raw JSON before loading JSON Viewer. r=Honza
authorOriol <oriol-bugzilla@hotmail.com>
Fri, 19 May 2017 08:03:00 -0400
changeset 584695 51c3bc48cf825ebd87d20bc86a3b992c029befc3
parent 584685 6037b902d6523133f8761dc3ad42cb9022fdd290
child 584696 9883fe74207112ee8451d127a834835f2ac28604
push id60843
push userbschouten@mozilla.com
push dateThu, 25 May 2017 21:57:22 +0000
reviewersHonza
bugs1366239
milestone55.0a1
Bug 1366239 - Display the raw JSON before loading JSON Viewer. r=Honza
devtools/client/jsonview/converter-child.js
devtools/client/jsonview/css/general.css
--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@@ -253,19 +253,19 @@ Converter.prototype = {
         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>" +
+      "<div id=\"content\">" +
+      "<pre id=\"json\">" + this.htmlEncode(json) + "</pre>" +
+      "</div><div id=\"headers\">" + this.htmlEncode(headers) + "</div>" +
       "</body></html>";
   },
 
   toErrorPage: function (error, data) {
     // Escape unicode nulls
     data = data.replace("\u0000", "\uFFFD");
 
     let errorInfo = error + "";
--- a/devtools/client/jsonview/css/general.css
+++ b/devtools/client/jsonview/css/general.css
@@ -10,30 +10,36 @@ html, body, #content {
   height: 100%;
 }
 
 body {
   color: var(--theme-body-color);
   background-color: var(--theme-body-background);
   padding: 0;
   margin: 0;
-  overflow-x: hidden;
 }
 
 *:focus {
   outline: none !important;
 }
 
 pre {
   background-color: white;
   border: none;
   font-family: var(--monospace-font-family);
 }
 
-#json,
+#content {
+  display: flow-root;
+}
+
+#json {
+  margin: 8px;
+}
+
 #headers {
   display: none;
 }
 
 /******************************************************************************/
 /* Dark Theme */
 
 body.theme-dark {