Bug 1232914: Allow switching between structured & raw ping data via radio button. r=dexter

toolkit/content/aboutTelemetry.css

@@ -229,11 +229,8 @@ body[dir="rtl"] .copy-node {
 }
 
 #raw-ping-data-section {
-  position: absolute;
   width: 100%;
   height: 100%;
-  top: 0px;
-  left: 0px;
   background-color:-moz-Dialog;
 }
 

toolkit/content/aboutTelemetry.js

@@ -282,6 +282,11 @@ var PingPicker = {
       el.addEventListener("change", () => this.onPingSourceChanged(), false);
     }
 
+    let displays = document.getElementsByName("choose-ping-display");
+    for (let el of displays) {
+      el.addEventListener("change", () => this.onPingDisplayChanged(), false);
+    }
+
     document.getElementById("show-subsession-data").addEventListener("change", () => {
       this._updateCurrentPingData();
     });
@@ -298,10 +303,6 @@ var PingPicker = {
             .addEventListener("click", () => this._movePingIndex(-1), false);
     document.getElementById("older-ping")
             .addEventListener("click", () => this._movePingIndex(1), false);
-    document.getElementById("show-raw-ping")
-            .addEventListener("click", () => this._showRawPingData(), false);
-    document.getElementById("hide-raw-ping")
-            .addEventListener("click", () => this._hideRawPingData(), false);
     document.getElementById("choose-payload")
             .addEventListener("change", () => displayPingData(gPingData), false);
   },
@@ -310,6 +311,10 @@ var PingPicker = {
     this.update();
   },
 
+  onPingDisplayChanged: function() {
+    this.update();
+  },
+
   update: function() {
     let el = document.getElementById("ping-source-current");
     this.viewCurrentPingData = el.checked;
@@ -323,6 +328,15 @@ var PingPicker = {
       this._updateArchivedPingList().then(() =>
         document.getElementById("archived-ping-picker").classList.remove("hidden"));
     }
+
+    let element = document.getElementById("ping-source-structured");
+    this.viewCurrentPingData = element.checked;
+
+    if (this.viewCurrentPingData) {
+      this._hideRawPingData();
+    } else {
+      this._showRawPingData();
+    }
   },
 
   _updateCurrentPingData: function() {

toolkit/content/aboutTelemetry.xhtml

@@ -58,7 +58,13 @@
           <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
           &aboutTelemetry.showArchivedPingData;<br />
         </div>
-        <button id="show-raw-ping" type="button">&aboutTelemetry.rawPingData;</button>
+        <div id="ping-source-picker">
+          &aboutTelemetry.pingDataDisplay;<br/>
+          <input type="radio" id="ping-source-structured" name="choose-ping-display" value="structured" checked="checked" />
+          &aboutTelemetry.structured;<br />
+          <input type="radio" id="ping-source-raw" name="choose-ping-display" value="raw" />
+          &aboutTelemetry.raw;<br />
+        </div>
         <div id="current-ping-picker">
           <input id="show-subsession-data" type="checkbox" />&aboutTelemetry.showSubsessionData;
         </div>
@@ -98,7 +104,6 @@
     </header>
 
     <div id="raw-ping-data-section" class="hidden">
-      <div id="hide-raw-ping">&#10006;</div>
       <pre id="raw-ping-data"></pre>
     </div>
 

toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd

@@ -36,6 +36,18 @@ Current ping data
 Archived ping data
 ">
 
+<!ENTITY aboutTelemetry.pingDataDisplay "
+Ping data display:
+">
+
+<!ENTITY aboutTelemetry.structured "
+Structured
+">
+
+<!ENTITY aboutTelemetry.raw "
+Raw JSON
+">
+
 <!ENTITY aboutTelemetry.showSubsessionData "
 Show subsession data
 ">