--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -1,29 +1,60 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.hidden {
+@import url("chrome://global/skin/in-content/common.css");
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+#categories {
+  padding-top: 0px;
+  min-width: 300px;
+}
+
+#category-raw {
+  border-top: 1px solid var(--in-content-header-border-color);
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  min-width: inherit;
+}
+
+.heading {
+  padding-inline-start: 21px;
+  padding-inline-end: 21px;
+  color: var(--in-content-category-text);
+}
+
+.category:not(.has-data) {
   display: none;
 }
 
-html {
-  background-color: -moz-Dialog;
-  color: -moz-DialogText;
-  font: message-box;
+.category {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-body {
-  padding: 0px;
-  margin: 0px;
+.category-name {
+  pointer-events: none;
 }
 
-h2 {
-  font-size: medium;
+.main-content {
+  width: 100%;
 }
 
 #page-description {
   border: 1px solid threedshadow;
   margin: 0px;
   padding: 10px;
 }
 
@@ -51,32 +82,21 @@ h2 {
   padding: 5px;
 }
 
 #ping-source-picker {
   margin-left: 5px;
   margin-bottom: 10px;
 }
 
-.data-section,
-.data-subsection {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border-top: 1px solid threedshadow;
-  border-bottom: 1px solid threedshadow;
-  margin: 0px;
-  padding: 10px;
-}
-
 .data-section:not(.has-data),
 .data-subsection:not(.has-subdata) {
   color: gray;
 }
 
-
 .section-name {
   font-size: x-large;
   display: inline;
 }
 
 .has-data .section-name {
   cursor: pointer;
 }
@@ -108,17 +128,16 @@ h2 {
   display: none;
 }
 
 .has-data.expanded .data,
 .has-subdata.expanded .subdata {
   display: block;
 }
 
-
 .stack-title {
   font-size: medium;
   font-weight: bold;
   text-decoration: underline;
 }
 
 #histograms, #addon-histograms, #thread-hang-stats>div {
   overflow: hidden;
@@ -155,17 +174,16 @@ body[dir="rtl"] .histogram {
   text-overflow: ellipsis;
   width: 100%;
   margin: 10px;
   font-weight: bold;
   font-size: 120%;
   white-space: nowrap;
 }
 
-
 .bar {
   width: 2em;
   margin: 2px;
   text-align: center;
   float: left;
   font-family: monospace;
 }
 
@@ -209,22 +227,20 @@ body[dir="rtl"] caption {
 body[dir="rtl"] .copy-node {
   left: 1px;
 }
 
 .histogram:hover .copy-node {
   visibility: visible;
 }
 
-
 .statebox {
   display: none;
 }
 
-
 .filter-ui {
   padding-inline-start: 10em;
   display: none;
 }
 
 .has-data.expanded .filter-ui {
   display: inline;
 }
@@ -239,21 +255,19 @@ body[dir="rtl"] .copy-node {
 
 .filter-blocked {
   display: none;
 }
 
 #raw-ping-data-section {
   width: 100%;
   height: 100%;
-  background-color:-moz-Dialog;
 }
 
 #raw-ping-data {
-  background-color:white;
   margin: 0px;
 }
 
 #hide-raw-ping {
   float: right;
   cursor: pointer;
   font-size: 20px;
   background-color:#d8d8d8;
@@ -263,9 +277,9 @@ body[dir="rtl"] .copy-node {
 /* addon subsection style */
 .addon-caption {
   font-size: larger;
   margin: 5px 0;
 }
 
 .process-picker {
   margin: 0 0.5em;
-}
+}
\ No newline at end of file

--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -252,29 +252,28 @@ var Settings = {
    * Updates the button & text at the top of the page to reflect Telemetry state.
    */
   render() {
     for (let setting of this.SETTINGS) {
       let enabledElement = document.getElementById(setting.descriptionEnabledId);
       let disabledElement = document.getElementById(setting.descriptionDisabledId);
 
       if (Preferences.get(setting.pref, setting.defaultPrefValue)) {
-        enabledElement.classList.remove("hidden");
-        disabledElement.classList.add("hidden");
+        enabledElement.hidden = false;
+        disabledElement.hidden = true;
       } else {
-        enabledElement.classList.add("hidden");
-        disabledElement.classList.remove("hidden");
+        enabledElement.hidden = true;
+        disabledElement.hidden = false;
       }
     }
   }
 };
 
 var PingPicker = {
   viewCurrentPingData: null,
-  viewStructuredPingData: null,
   _archivedPings: null,
 
   attachObservers() {
     let elements = document.getElementsByName("choose-ping-source");
     for (let el of elements) {
       el.addEventListener("change", () => this.onPingSourceChanged());
     }
 
@@ -318,45 +317,34 @@ var PingPicker = {
   },
 
   onPingDisplayChanged() {
     this.update();
   },
 
   async update() {
     let viewCurrent = document.getElementById("ping-source-current").checked;
-    let viewStructured = document.getElementById("ping-source-structured").checked;
     let currentChanged = viewCurrent !== this.viewCurrentPingData;
-    let structuredChanged = viewStructured !== this.viewStructuredPingData;
     this.viewCurrentPingData = viewCurrent;
-    this.viewStructuredPingData = viewStructured;
 
     // If we have no archived pings, disable the ping archive selection.
     // This can happen on new profiles or if the ping archive is disabled.
     let archivedPingList = await TelemetryArchive.promiseArchivedPingList();
     let sourceArchived = document.getElementById("ping-source-archive");
     sourceArchived.disabled = (archivedPingList.length == 0);
 
     if (currentChanged) {
       if (this.viewCurrentPingData) {
-        document.getElementById("current-ping-picker").classList.remove("hidden");
-        document.getElementById("archived-ping-picker").classList.add("hidden");
+        document.getElementById("current-ping-picker").hidden = false;
+        document.getElementById("archived-ping-picker").hidden = true;
         this._updateCurrentPingData();
       } else {
-        document.getElementById("current-ping-picker").classList.add("hidden");
+        document.getElementById("current-ping-picker").hidden = true;
         await this._updateArchivedPingList(archivedPingList);
-        document.getElementById("archived-ping-picker").classList.remove("hidden");
-      }
-    }
-
-    if (structuredChanged) {
-      if (this.viewStructuredPingData) {
-        this._showStructuredPingData();
-      } else {
-        this._showRawPingData();
+        document.getElementById("archived-ping-picker").hidden = false;
       }
     }
   },
 
   _updateCurrentPingData() {
     const subsession = document.getElementById("show-subsession-data").checked;
     const ping = TelemetryController.getCurrentPingData(subsession);
     if (!ping) {
@@ -475,23 +463,21 @@ var PingPicker = {
     const options = document.getElementById("choose-ping-week").options;
     options.item(weekIndex).selected = true;
 
     this._renderPingList(ping.id);
     this._updateArchivedPingData();
   },
 
   _showRawPingData() {
-    document.getElementById("raw-ping-data-section").classList.remove("hidden");
-    document.getElementById("structured-ping-data-section").classList.add("hidden");
+    show(document.getElementById("category-raw"));
   },
 
   _showStructuredPingData() {
-    document.getElementById("raw-ping-data-section").classList.add("hidden");
-    document.getElementById("structured-ping-data-section").classList.remove("hidden");
+    show(document.getElementById("category-home"));
   },
 };
 
 var GeneralData = {
   /**
    * Renders the general data
    */
   render(aPing) {
@@ -732,17 +718,17 @@ var SlowSQL = {
     let otherThreadCount = Object.keys(otherThreads).length;
     if (mainThreadCount == 0 && otherThreadCount == 0) {
       setHasData("slow-sql-section", false);
       return;
     }
 
     setHasData("slow-sql-section", true);
     if (debugSlowSql) {
-      document.getElementById("sql-warning").classList.remove("hidden");
+      document.getElementById("sql-warning").hidden = false;
     }
 
     let slowSqlDiv = document.getElementById("slow-sql-tables");
     removeAllChildNodes(slowSqlDiv);
 
     // Main thread
     if (mainThreadCount > 0) {
       let table = document.createElement("table");
@@ -858,21 +844,21 @@ var StackRenderer = {
   },
   renderStacks: function StackRenderer_renderStacks(aPrefix, aStacks,
                                                     aMemoryMap, aRenderHeader) {
     let div = document.getElementById(aPrefix + "-data");
     removeAllChildNodes(div);
 
     let fetchE = document.getElementById(aPrefix + "-fetch-symbols");
     if (fetchE) {
-      fetchE.classList.remove("hidden");
+      fetchE.hidden = false;
     }
     let hideE = document.getElementById(aPrefix + "-hide-symbols");
     if (hideE) {
-      hideE.classList.add("hidden");
+      hideE.hidden = true;
     }
 
     if (aStacks.length == 0) {
       return;
     }
 
     setHasData(aPrefix + "-section", true);
 
@@ -930,19 +916,19 @@ function SymbolicationRequest(aPrefix, a
  * the symbolicated one returned by the symbolication server.
  */
 SymbolicationRequest.prototype.handleSymbolResponse =
 function SymbolicationRequest_handleSymbolResponse() {
   if (this.symbolRequest.readyState != 4)
     return;
 
   let fetchElement = document.getElementById(this.prefix + "-fetch-symbols");
-  fetchElement.classList.add("hidden");
+  fetchElement.hidden = true;
   let hideElement = document.getElementById(this.prefix + "-hide-symbols");
-  hideElement.classList.remove("hidden");
+  hideElement.hidden = false;
   let div = document.getElementById(this.prefix + "-data");
   removeAllChildNodes(div);
   let errorMessage = bundle.GetStringFromName("errorFetchingSymbols");
 
   if (this.symbolRequest.status != 200) {
     div.appendChild(document.createTextNode(errorMessage));
     return;
   }
@@ -1675,16 +1661,20 @@ var Events = {
  * Helper function for showing either the toggle element or "No data collected" message for a section
  *
  * @param aSectionID ID of the section element that needs to be changed
  * @param aHasData true (default) indicates that toggle should be displayed
  */
 function setHasData(aSectionID, aHasData) {
   let sectionElement = document.getElementById(aSectionID);
   sectionElement.classList[aHasData ? "add" : "remove"]("has-data");
+
+  // Display or Hide the section in the sidebar
+  let sectionCategory = document.querySelector(".category[value=" + aSectionID + "]");
+  sectionCategory.classList[aHasData ? "add" : "remove"]("has-data");
 }
 
 /**
  * Helper function that expands and collapses sections +
  * changes caption on the toggle text
  */
 function toggleSection(aEvent) {
   let parentElement = aEvent.target.parentElement;
@@ -1711,22 +1701,48 @@ function setupPageHeader() {
   let subtitleText = bundle.formatStringFromName(
     "pageSubtitle", [serverOwner, brandName], 2);
 
   let subtitleElement = document.getElementById("page-subtitle");
   subtitleElement.appendChild(document.createTextNode(subtitleText));
 }
 
 /**
+ * Change the section displayed
+ */
+function show(selected) {
+    let current_section = document.querySelector(".active");
+    let selected_section = document.getElementById(selected.getAttribute("value"));
+    if (current_section == selected_section)
+      return;
+    current_section.classList.remove("active");
+    current_section.hidden = true;
+    selected_section.classList.add("active");
+    selected_section.hidden = false;
+
+    let current_button = document.querySelector("[selected=true]");
+    current_button.removeAttribute("selected");
+    selected.setAttribute("selected", "true");
+    document.getElementById("sectionTitle").textContent = selected.textContent;
+}
+
+/**
  * Initializes load/unload, pref change and mouse-click listeners
  */
 function setupListeners() {
   Settings.attachObservers();
   PingPicker.attachObservers();
 
+  let menu = document.getElementById("categories");
+  menu.addEventListener("click", (e) => {
+    if (e.target && e.target.parentNode == menu) {
+      show(e.target)
+    }
+  });
+
   // Clean up observers when page is closed
   window.addEventListener("unload",
     function(aEvent) {
       Settings.detachObservers();
   }, {once: true});
 
   document.getElementById("chrome-hangs-fetch-symbols").addEventListener("click",
     function() {
@@ -2074,51 +2090,45 @@ function renderPayloadList(ping) {
     text = bundle.formatStringFromName("childPayloadN", [payloadIndex], 1);
     content = document.createTextNode(text);
     option.appendChild(content);
     option.setAttribute("value", payloadIndex);
     listEl.appendChild(option);
   }
 }
 
-function toggleElementHidden(element, isHidden) {
-  if (isHidden) {
-    element.classList.add("hidden");
-  } else {
-    element.classList.remove("hidden");
-  }
-}
-
 function togglePingSections(isMainPing) {
   // We always show the sections that are "common" to all pings.
   // The raw payload section is only used for pings other than "main" and "saved-session".
   let commonSections = new Set(["general-data-section", "environment-data-section"]);
   let otherPingSections = new Set(["raw-payload-section"]);
 
-  let elements = document.getElementById("structured-ping-data-section").children;
+  let elements = document.getElementById("categories").children;
   for (let section of elements) {
     if (commonSections.has(section.id)) {
       continue;
     }
 
     let showElement = isMainPing != otherPingSections.has(section.id);
-    toggleElementHidden(section, !showElement);
+    section.hidden = !showElement;
   }
 }
 
 function displayPingData(ping, updatePayloadList = false) {
   gPingData = ping;
 
   // Render raw ping data.
   let pre = document.getElementById("raw-ping-data");
   pre.textContent = JSON.stringify(gPingData, null, 2);
 
+
   try {
     displayRichPingData(ping, updatePayloadList);
   } catch (err) {
+    console.log(err);
     PingPicker._showRawPingData();
   }
 }
 
 function displayRichPingData(ping, updatePayloadList) {
   // Update the payload list and process lists
   if (updatePayloadList) {
     renderPayloadList(ping);

--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -17,298 +17,300 @@
 
     <link rel="stylesheet" href="chrome://global/content/aboutTelemetry.css"
           type="text/css"/>
 
     <script type="application/javascript"
             src="chrome://global/content/aboutTelemetry.js"/>
   </head>
 
-  <body dir="&locale.dir;">
-
-    <header id="page-description">
-      <h1>&aboutTelemetry.pageTitle;</h1>
-
-      <h2 id="page-subtitle"></h2>
+  <body id="body" dir="&locale.dir;">
 
-      <table id="settings">
-        <tr>
-          <td>
-            <p id="description-upload-enabled" class="description-enabled">&aboutTelemetry.uploadEnabled;</p>
-            <p id="description-upload-disabled" class="description-disabled">&aboutTelemetry.uploadDisabled;</p>
-          </td>
-          <td>
-            <a href="" class="change-data-choices-link">&aboutTelemetry.changeDataChoices;</a>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <p id="description-extended-recording-enabled" class="description-enabled">&aboutTelemetry.extendedRecordingEnabled;</p>
-            <p id="description-extended-recording-disabled" class="description-disabled">&aboutTelemetry.extendedRecordingDisabled;</p>
-          </td>
-          <td>
-            <a href="" class="change-data-choices-link">&aboutTelemetry.changeDataChoices;</a>
-          </td>
-        </tr>
-      </table>
+    <div id="categories">
+      <div class="heading">
+        <h3>&aboutTelemetry.pageTitle;</h3>
+      </div>
+      <div id="category-home" class="category has-data" selected="true" value="home">
+        <span class="category-name">Home</span>
+      </div>
+      <div class="category" value="general-data-section">
+        <span class="category-name">&aboutTelemetry.generalDataSection;</span>
+      </div>
+      <div class="category" value="environment-data-section">
+        <span class="category-name">&aboutTelemetry.environmentDataSection;</span>
+      </div>
+      <div class="category" value="session-info-section">
+        <span class="category-name">&aboutTelemetry.sessionInfoSection;</span>
+      </div>
+      <div class="category" value="scalars-section">
+        <span class="category-name">&aboutTelemetry.scalarsSection;</span>
+      </div>
+      <div class="category" value="keyed-scalars-section">
+        <span class="category-name">&aboutTelemetry.keyedScalarsSection;</span>
+      </div>
+      <div class="category" value="histograms-section">
+        <span class="category-name">&aboutTelemetry.histogramsSection;</span>
+      </div>
+      <div class="category" value="keyed-histograms-section">
+        <span class="category-name">&aboutTelemetry.keyedHistogramsSection;</span>
+      </div>
+      <div class="category" value="events-section">
+        <span class="category-name">&aboutTelemetry.eventsSection;</span>
+      </div>
+      <div class="category" value="simple-measurements-section">
+        <span class="category-name">&aboutTelemetry.simpleMeasurementsSection;</span>
+      </div>
+      <div class="category" value="telemetry-log-section">
+        <span class="category-name">&aboutTelemetry.telemetryLogSection;</span>
+      </div>
+      <div class="category" value="slow-sql-section">
+        <span class="category-name">&aboutTelemetry.slowSqlSection;</span>
+      </div>
+      <div class="category" value="chrome-hangs-section">
+        <span class="category-name">&aboutTelemetry.chromeHangsSection;</span>
+      </div>
+      <div class="category" value="thread-hang-stats-section">
+        <span class="category-name">&aboutTelemetry.threadHangStatsSection;</span>
+      </div>
+      <div class="category" value="late-writes-section">
+        <span class="category-name">&aboutTelemetry.lateWritesSection;</span>
+      </div>
+      <div class="category" value="addon-details-section">
+        <span class="category-name">&aboutTelemetry.addonDetailsSection;</span>
+      </div>
+      <div class="category" value="addon-histograms-section">
+        <span class="category-name">&aboutTelemetry.addonHistogramsSection;</span>
+      </div>
+      <div class="category" value="captured-stacks-section">
+        <span class="category-name">&aboutTelemetry.capturedStacksSection;</span>
+      </div>
+      <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">
+          <span class="category-name">&aboutTelemetry.raw;</span>
+      </div>
+    </div>
 
-      <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>
-        <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" checked="checked" />&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 />
+    <div class="main-content">
+      <div class="header">
+          <div id="sectionTitle" class="header-name">
+              &aboutTelemetry.pageTitle;
+          </div>
+      </div>
+      <div id="home" class="tab active">
+
+        <h3 id="page-subtitle"></h3>
+
+        <table id="settings">
+          <tr>
+            <td>
+              <p id="description-upload-enabled" class="description-enabled">&aboutTelemetry.uploadEnabled;</p>
+              <p id="description-upload-disabled" class="description-disabled">&aboutTelemetry.uploadDisabled;</p>
+            </td>
+            <td>
+              <a href="" class="change-data-choices-link">&aboutTelemetry.changeDataChoices;</a>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p id="description-extended-recording-enabled" class="description-enabled">&aboutTelemetry.extendedRecordingEnabled;</p>
+              <p id="description-extended-recording-disabled" class="description-disabled">&aboutTelemetry.extendedRecordingDisabled;</p>
+            </td>
+            <td>
+              <a href="" class="change-data-choices-link">&aboutTelemetry.changeDataChoices;</a>
+            </td>
+          </tr>
+        </table>
+
+        <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>
+          <div id="current-ping-picker">
+            <input id="show-subsession-data" type="checkbox" checked="checked" />&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>
+              <tr>
+                  <th>&aboutTelemetry.archiveWeekHeader;</th>
+                  <th>&aboutTelemetry.archivePingHeader;</th>
+              </tr>
+              <tr>
+                  <td>
+                      <select id="choose-ping-week">
+                      </select>
+                  </td>
+                  <td>
+                      <select id="choose-ping-id">
+                      </select>
+                  </td>
+              </tr>
+            </table>
+          </div>
           <table>
-            <tr>
-                <th>&aboutTelemetry.archiveWeekHeader;</th>
-                <th>&aboutTelemetry.archivePingHeader;</th>
-            </tr>
-            <tr>
-                <td>
-                    <select id="choose-ping-week">
-                    </select>
-                </td>
-                <td>
-                    <select id="choose-ping-id">
-                    </select>
-                </td>
-            </tr>
+              <tr>
+                  <th>&aboutTelemetry.payloadChoiceHeader;</th>
+              </tr>
+              <tr>
+                  <td>
+                      <select id="choose-payload">
+                      </select>
+                  </td>
+              </tr>
           </table>
         </div>
-        <table>
-            <tr>
-                <th>&aboutTelemetry.payloadChoiceHeader;</th>
-            </tr>
-            <tr>
-                <td>
-                    <select id="choose-payload">
-                    </select>
-                </td>
-            </tr>
-        </table>
       </div>
-    </header>
-
-    <div id="raw-ping-data-section" class="hidden">
-      <pre id="raw-ping-data"></pre>
-    </div>
 
-    <div id="structured-ping-data-section">
-      <section id="general-data-section" class="data-section">
+      <div id="raw-ping-data-section" class="tab" hidden="true">
+        <pre id="raw-ping-data"></pre>
+      </div>
+
+      <section id="general-data-section" class="tab data-section expanded" hidden="true">
         <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>
         <div id="general-data" class="data">
         </div>
       </section>
 
-      <section id="environment-data-section" class="data-section">
+      <section id="environment-data-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.environmentDataSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="environment-data" class="data">
         </div>
       </section>
 
-      <section id="session-info-section" class="data-section">
+      <section id="session-info-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.sessionInfoSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="session-info" class="data">
         </div>
       </section>
 
-      <section id="scalars-section" class="data-section">
+      <section id="scalars-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.scalarsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div class="processes-ui">
           <select id="scalars-processes" class="process-picker"></select>
         </div>
         <div id="scalars" class="data">
         </div>
       </section>
 
-      <section id="keyed-scalars-section" class="data-section">
+      <section id="keyed-scalars-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.keyedScalarsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div class="processes-ui">
           <select id="keyed-scalars-processes" class="process-picker"></select>
         </div>
         <div id="keyed-scalars" class="data">
         </div>
       </section>
 
-      <section id="histograms-section" class="data-section">
+      <section id="histograms-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.histogramsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <span class="filter-ui">
           &aboutTelemetry.filterText; <input type="text" class="filter" id="histograms-filter" target_id="histograms"/>
         </span>
         <div class="processes-ui">
           <select id="histograms-processes" class="process-picker"></select>
         </div>
         <div id="histograms" class="data">
         </div>
       </section>
 
-      <section id="keyed-histograms-section" class="data-section">
+      <section id="keyed-histograms-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.keyedHistogramsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div class="processes-ui">
           <select id="keyed-histograms-processes" class="process-picker"></select>
         </div>
         <div id="keyed-histograms" class="data">
         </div>
       </section>
 
-      <section id="events-section" class="data-section">
+      <section id="events-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.eventsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div class="processes-ui">
           <select id="events-processes" class="process-picker"></select>
         </div>
         <div id="events" class="data">
         </div>
       </section>
 
-      <section id="simple-measurements-section" class="data-section">
+      <section id="simple-measurements-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.simpleMeasurementsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="simple-measurements" class="data">
         </div>
       </section>
 
-      <section id="telemetry-log-section" class="data-section">
+      <section id="telemetry-log-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.telemetryLogSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="telemetry-log" class="data">
         </div>
       </section>
 
-      <section id="slow-sql-section" class="data-section">
+      <section id="slow-sql-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.slowSqlSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="slow-sql-tables" class="data">
           <p id="sql-warning" class="hidden">&aboutTelemetry.fullSqlWarning;</p>
         </div>
       </section>
 
-      <section id="chrome-hangs-section" class="data-section">
+      <section id="chrome-hangs-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.chromeHangsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="chrome-hangs" class="data">
           <a id="chrome-hangs-fetch-symbols" href="#">&aboutTelemetry.fetchStackSymbols;</a>
           <a id="chrome-hangs-hide-symbols" class="hidden" href="#">&aboutTelemetry.hideStackSymbols;</a>
           <br/>
           <br/>
           <div id="chrome-hangs-data">
           </div>
         </div>
       </section>
 
-      <section id="thread-hang-stats-section" class="data-section">
+      <section id="thread-hang-stats-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.threadHangStatsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="thread-hang-stats" class="data">
         </div>
       </section>
 
-      <section id="late-writes-section" class="data-section">
+      <section id="late-writes-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.lateWritesSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="late-writes" class="data">
           <a id="late-writes-fetch-symbols" href="#">&aboutTelemetry.fetchStackSymbols;</a>
           <a id="late-writes-hide-symbols" class="hidden" href="#">&aboutTelemetry.hideStackSymbols;</a>
           <br/>
           <br/>
           <div id="late-writes-data">
           </div>
         </div>
       </section>
 
-      <section id="addon-details-section" class="data-section">
+      <section id="addon-details-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.addonDetailsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="addon-details" class="data">
         </div>
       </section>
 
-      <section id="addon-histograms-section" class="data-section">
+      <section id="addon-histograms-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.addonHistogramsSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="addon-histograms" class="data">
         </div>
       </section>
 
-      <section id="captured-stacks-section" class="data-section">
+      <section id="captured-stacks-section" class="tab data-section expanded" hidden="true">
         <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.capturedStacksSection;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
         <div id="captured-stacks" class="data">
           <a id="captured-stacks-fetch-symbols" href="#">&aboutTelemetry.fetchStackSymbols;</a>
           <a id="captured-stacks-hide-symbols" class="hidden" href="#">&aboutTelemetry.hideStackSymbols;</a>
           <br/>
           <br/>
           <div id="captured-stacks-data">
           </div>
         </div>
       </section>
-
-      <section id="raw-payload-section" class="data-section">
-        <input type="checkbox" class="statebox"/>
-        <h1 class="section-name">&aboutTelemetry.rawPayload;</h1>
-        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
-        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
-        <div id="raw-payload-data" class="data">
-          <pre id="raw-payload-data-pre"></pre>
-        </div>
-      </section>
     </div>
 
   </body>
 
 </html>