Bug 1232914: Allow switching between structured & raw ping data via radio button. r=dexter
authorpenhlenh <penhlenh@gmail.com>
Sun, 20 Dec 2015 00:11:07 +0700
changeset 277311 054fa50c23c5c0bee40ff3b389cd4711dc675ab9
parent 277310 63f78eaa94e88c96ba58068ab69dd7fd4d8b9cac
child 277312 c0780b68dfcc5aab5a093902a9e0edeb4298ef7b
push id29821
push usercbook@mozilla.com
push dateWed, 23 Dec 2015 10:58:53 +0000
treeherdermozilla-central@1954eb87782e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdexter
bugs1232914
milestone46.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1232914: Allow switching between structured & raw ping data via radio button. r=dexter
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -224,21 +224,18 @@ body[dir="rtl"] .copy-node {
   display: inline;
 }
 
 .filter-blocked {
   display: none;
 }
 
 #raw-ping-data-section {
-  position: absolute;
   width: 100%;
   height: 100%;
-  top: 0px;
-  left: 0px;
   background-color:-moz-Dialog;
 }
 
 #raw-ping-data {
   background-color:white;
   margin: 0px;
 }
 
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -277,57 +277,71 @@ var PingPicker = {
   _archivedPings: null,
 
   attachObservers: function() {
     let elements = document.getElementsByName("choose-ping-source");
     for (let el of elements) {
       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();
     });
 
     document.getElementById("choose-ping-week").addEventListener("change", () => {
       this._renderPingList();
       this._updateArchivedPingData();
     }, false);
     document.getElementById("choose-ping-id").addEventListener("change", () => {
       this._updateArchivedPingData()
     }, false);
 
     document.getElementById("newer-ping")
             .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);
   },
 
   onPingSourceChanged: function() {
     this.update();
   },
 
+  onPingDisplayChanged: function() {
+    this.update();
+  },
+
   update: function() {
     let el = document.getElementById("ping-source-current");
     this.viewCurrentPingData = el.checked;
 
     if (this.viewCurrentPingData) {
       document.getElementById("current-ping-picker").classList.remove("hidden");
       document.getElementById("archived-ping-picker").classList.add("hidden");
       this._updateCurrentPingData();
     } else {
       document.getElementById("current-ping-picker").classList.add("hidden");
       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() {
     const subsession = document.getElementById("show-subsession-data").checked;
     const ping = TelemetryController.getCurrentPingData(subsession);
     if (!ping) {
       return;
     }
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -53,17 +53,23 @@
       <div id="ping-picker">
         <div id="ping-source-picker">
           &aboutTelemetry.pingDataSource;<br/>
           <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
           &aboutTelemetry.showCurrentPingData;<br />
           <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>
         <div id="archived-ping-picker" class="hidden">
           &aboutTelemetry.choosePing;<br />
           <button id="newer-ping" type="button">&aboutTelemetry.showNewerPing;</button>
           <button id="older-ping" type="button">&aboutTelemetry.showOlderPing;</button><br />
           <table>
@@ -93,17 +99,16 @@
                     </select>
                 </td>
             </tr>
         </table>
       </div>
     </header>
 
     <div id="raw-ping-data-section" class="hidden">
-      <div id="hide-raw-ping">&#10006;</div>
       <pre id="raw-ping-data"></pre>
     </div>
 
     <section id="general-data-section" class="data-section">
       <input type="checkbox" class="statebox"/>
       <h1 class="section-name">&aboutTelemetry.generalDataSection;</h1>
       <span class="toggle-caption">&aboutTelemetry.toggle;</span>
       <span class="empty-caption">&aboutTelemetry.emptySection;</span>
--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
@@ -31,16 +31,28 @@ Ping data source:
 <!ENTITY aboutTelemetry.showCurrentPingData "
 Current ping data
 ">
 
 <!ENTITY aboutTelemetry.showArchivedPingData "
 Archived ping data
 ">
 
+<!ENTITY aboutTelemetry.pingDataDisplay "
+Ping data display:
+">
+
+<!ENTITY aboutTelemetry.structured "
+Structured
+">
+
+<!ENTITY aboutTelemetry.raw "
+Raw JSON
+">
+
 <!ENTITY aboutTelemetry.showSubsessionData "
 Show subsession data
 ">
 
 <!ENTITY aboutTelemetry.choosePing "
 Choose ping:
 ">