Bug 1388456 - Make the ping selection in about:telemetry clearer r?gfritzsche draft
authorflyingrub <flyinggrub@gmail.com>
Wed, 09 Aug 2017 01:31:28 +0200
changeset 644141 d0183e9ee9358f757e404746baac88103aa35da9
parent 644033 6279348d2e61950a4d74fadb73eca6780b1e4524
child 725505 ea2a569bb6fe83fa61e1143ab00f8a78a25cb986
push id73322
push userbmo:flyinggrub@gmail.com
push dateThu, 10 Aug 2017 15:05:53 +0000
reviewersgfritzsche
bugs1388456
milestone57.0a1
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
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
--- 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>