Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-23 10:15:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1370513 - Add a sidebar and use Common.css style in about:telemetry r=chutten

Browse Source 
Allow about:telemetry design to be consistent with others about:* pages.


MozReview-Commit-ID: FG7tAmWcg9

--HG--
extra : rebase_source : 4f4e7be20c6617e4b5f622e337135cceb862acb4
This commit is contained in:
flyingrub 2017-06-06 15:25:15 +02:00
parent e87565613f
commit 9f943f4b48
3 changed files with 253 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
toolkit/content/aboutTelemetry.css
View File

@ -2,23 +2,54 @@
* 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 {
display: none;
}
@import url("chrome://global/skin/in-content/common.css");
html {
background-color: -moz-Dialog;
color: -moz-DialogText;
font: message-box;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
display: flex;
align-items: stretch;
height: 100%;
}
h2 {
font-size: medium;
#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;
}
.category {
cursor: pointer;
display: flex;
align-items: center;
}
.category-name {
pointer-events: none;
}
.main-content {
width: 100%;
}
#page-description {
@ -56,22 +87,11 @@ h2 {
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;
@ -113,7 +133,6 @@ h2 {
display: block;
}
.stack-title {
font-size: medium;
font-weight: bold;
@ -160,7 +179,6 @@ body[dir="rtl"] .histogram {
white-space: nowrap;
}
.bar {
width: 2em;
margin: 2px;
@ -214,12 +232,10 @@ body[dir="rtl"] .copy-node {
visibility: visible;
}
.statebox {
display: none;
}
.filter-ui {
padding-inline-start: 10em;
display: none;
@ -244,11 +260,9 @@ body[dir="rtl"] .copy-node {
#raw-ping-data-section {
width: 100%;
height: 100%;
background-color:-moz-Dialog;
}
#raw-ping-data {
background-color:white;
margin: 0px;
}
@ -268,4 +282,4 @@ body[dir="rtl"] .copy-node {
.process-picker {
margin: 0 0.5em;
}
}

88
toolkit/content/aboutTelemetry.js
View File

@ -263,11 +263,11 @@ var Settings = {
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;
}
}
}
@ -275,7 +275,6 @@ var Settings = {
var PingPicker = {
viewCurrentPingData: null,
viewStructuredPingData: null,
_archivedPings: null,
attachObservers() {
@ -329,11 +328,8 @@ var PingPicker = {
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.
@ -343,21 +339,13 @@ var PingPicker = {
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;
}
}
},
@ -486,13 +474,11 @@ var PingPicker = {
},
_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"));
},
};
@ -743,7 +729,7 @@ var SlowSQL = {
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");
@ -869,11 +855,11 @@ var StackRenderer = {
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) {
@ -941,9 +927,9 @@ function SymbolicationRequest_handleSymbolResponse() {
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");
@ -1686,6 +1672,10 @@ var Events = {
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");
}
/**
@ -1721,6 +1711,25 @@ function setupPageHeader() {
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
*/
@ -1728,6 +1737,13 @@ 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) {
@ -2085,28 +2101,20 @@ function renderPayloadList(ping) {
}
}
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;
}
}
@ -2117,9 +2125,11 @@ function displayPingData(ping, updatePayloadList = false) {
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();
}
}

322
toolkit/content/aboutTelemetry.xhtml
View File

@ -22,124 +22,175 @@
src="chrome://global/content/aboutTelemetry.js"/>
</head>
<body dir="&locale.dir;">
<body id="body" dir="&locale.dir;">
<header id="page-description">
<h1>&aboutTelemetry.pageTitle;</h1>
<h2 id="page-subtitle"></h2>
<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="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 />
<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.payloadChoiceHeader;</th>
</tr>
<tr>
<td>
<select id="choose-payload">
</select>
</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>
</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 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.payloadChoiceHeader;</th>
</tr>
<tr>
<td>
<select id="choose-payload">
</select>
</td>
</tr>
</table>
</div>
</div>
<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>
@ -147,11 +198,8 @@
</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>
@ -159,11 +207,8 @@
</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>
@ -174,11 +219,8 @@
</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>
@ -186,11 +228,8 @@
</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>
@ -198,39 +237,27 @@
</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>
@ -241,20 +268,14 @@
</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>
@ -265,29 +286,20 @@
</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>
@ -297,16 +309,6 @@
</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>