Bug 1388691 - Use the firefox json viewer in about:telemetry r=gfritzsche

Allow to open the full ping data in the firefox json viewer.

MozReview-Commit-ID: C8rqxmY3qtT

--HG--
extra : rebase_source : 8cf91dfd51961c196facda5405a4c4884baaa529

toolkit/content/aboutTelemetry.css

@@ -30,10 +30,6 @@ body {
   left: 0;
 }
 
-#category-raw.selected {
-   background-color: var(--in-content-category-background-active);
-}
-
 .heading {
   display: flex;
   flex-direction: column;

toolkit/content/aboutTelemetry.js

@@ -994,17 +994,6 @@ var StackRenderer = {
   }
 };
 
-var RawPayload = {
-  /**
-   * Renders the raw payload
-   */
-  render(aPing) {
-    setHasData("raw-ping-data-section", true);
-    let pre = document.getElementById("raw-ping-data");
-    pre.textContent = JSON.stringify(aPing, null, 2);
-  }
-};
-
 function SymbolicationRequest(aPrefix, aRenderHeader,
                               aMemoryMap, aStacks, aDurations = null) {
   this.prefix = aPrefix;
@@ -1893,13 +1882,18 @@ function changeUrlPath(selectedSection, subSection) {
  * Change the section displayed
  */
 function show(selected) {
+  let selectedValue = selected.getAttribute("value");
+  if (selectedValue === "raw-json-viewer") {
+    openJsonInFirefoxJsonViewer(JSON.stringify(gPingData, null, 2));
+    return;
+  }
+
   let current_button = document.querySelector(".category.selected");
   current_button.classList.remove("selected");
   selected.classList.add("selected");
   // Hack because subsection text appear selected. See Bug 1375114.
   document.getSelection().empty();
 
-  let selectedValue = selected.getAttribute("value");
   let current_section = document.querySelector("section.active");
   let selected_section = document.getElementById(selectedValue);
   if (current_section == selected_section)
@@ -2047,6 +2041,10 @@ function urlStateRestore() {
   }
 }
 
+function openJsonInFirefoxJsonViewer(json) {
+  window.open("data:application/json;base64," + btoa(json));
+}
+
 function onLoad() {
   window.removeEventListener("load", onLoad);
 
@@ -2295,7 +2293,7 @@ function togglePingSections(isMainPing) {
                                 "home",
                                 "general-data-section",
                                 "environment-data-section",
-                                "raw-ping-data-section"]);
+                                "raw-json-viewer"]);
 
   let elements = document.querySelectorAll(".category");
   for (let section of elements) {
@@ -2308,9 +2306,6 @@ function togglePingSections(isMainPing) {
 
 function displayPingData(ping, updatePayloadList = false) {
   gPingData = ping;
-  // Render raw ping data.
-  RawPayload.render(ping);
-
   try {
     PingPicker.render();
     displayRichPingData(ping, updatePayloadList);

toolkit/content/aboutTelemetry.xhtml

@@ -87,7 +87,7 @@
       <div class="category" value="late-writes-section">
         <span class="category-name">&aboutTelemetry.lateWritesSection;</span>
       </div>
-      <div id="category-raw" class="category has-data" value="raw-ping-data-section">
+      <div id="category-raw" class="category has-data" value="raw-json-viewer">
           <span class="category-name">&aboutTelemetry.raw;</span>
       </div>
     </div>
@@ -147,10 +147,6 @@
         <p id="ping-explanation"></p>
       </section>
 
-      <section id="raw-ping-data-section">
-        <pre id="raw-ping-data"></pre>
-      </section>
-
       <section id="general-data-section">
         <div id="general-data" class="data"></div>
       </section>