Bug 1388456 - Make the ping selection in about:telemetry clearer r=gfritzsche
authorflyingrub <flyinggrub@gmail.com>
Wed, 09 Aug 2017 01:31:28 +0200
changeset 373896 b356aa6fa0ef73e115fb50c0027149d0befecd38
parent 373895 b8bfa513549810c1af7bfeb9058ae3b7da7b2768
child 373897 e2360e8fadadbe8145d7e2792328f0c336b892ec
push id48484
push userryanvm@gmail.com
push dateThu, 10 Aug 2017 19:57:46 +0000
treeherderautoland@b356aa6fa0ef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgfritzsche
bugs1388456
milestone57.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 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
@@ -162,20 +162,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;
@@ -185,16 +186,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>