Bug 1388456 - Make the ping selection in about:telemetry clearer r?gfritzsche
Show the ping selector popup next to its toggle button in
about:telemetry.
Underline the fact that no archived pings are available.
MozReview-Commit-ID: CwSLOvuhXFn
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -176,20 +176,21 @@ section:not(.active) {
border-bottom-style: solid;
}
#ping-picker.hidden {
display: none;
}
#ping-picker {
- position: absolute;
+ min-width: 300px;
+ position: fixed;
z-index: 2;
- top: 40px;
- right: 40px;
+ top: 32px;
+ left: 12px;
border-radius: 2px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
display: flex;
padding: 24px;
flex-direction: column;
background-color: white;
border: 1px solid var(--in-content-header-border-color);
margin: 12px 0px;
@@ -199,16 +200,20 @@ section:not(.active) {
margin: 4px 0px;
}
#ping-source-picker {
margin-left: 5px;
margin-bottom: 10px;
}
+#ping-source-archive-container.disabled {
+ opacity: 0.5;
+}
+
.stack-title {
font-size: medium;
font-weight: bold;
text-decoration: underline;
}
#histograms, #thread-hang-stats>div {
overflow: hidden;
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -392,17 +392,20 @@ var PingPicker = {
let viewCurrent = document.getElementById("ping-source-current").checked;
let currentChanged = viewCurrent !== this.viewCurrentPingData;
this.viewCurrentPingData = viewCurrent;
// 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);
+ let sourceArchivedContainer = document.getElementById("ping-source-archive-container");
+ let archivedDisabled = (archivedPingList.length == 0);
+ sourceArchived.disabled = archivedDisabled;
+ sourceArchivedContainer.classList.toggle("disabled", archivedDisabled);
if (currentChanged) {
if (this.viewCurrentPingData) {
document.getElementById("current-ping-picker").hidden = false;
document.getElementById("archived-ping-picker").hidden = true;
this._updateCurrentPingData();
} else {
document.getElementById("current-ping-picker").hidden = true;
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -92,20 +92,24 @@
</div>
</div>
<div class="main-content">
<div id="ping-picker" class="hidden">
<div id="ping-source-picker">
<h4 class="title">&aboutTelemetry.pingDataSource;</h4>
- <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
- &aboutTelemetry.showCurrentPingData;
- <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
- &aboutTelemetry.showArchivedPingData;
+ <div>
+ <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
+ &aboutTelemetry.showCurrentPingData;
+ </div>
+ <div id="ping-source-archive-container">
+ <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
+ &aboutTelemetry.showArchivedPingData;
+ </div>
</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">
<h4 class="title">&aboutTelemetry.choosePing;</h4>
<div>
<h4 class="title">&aboutTelemetry.archivePingType;</h4>