Bug 1374298 - Filter ping by type in about:telemetry r=chutten

Allow to select ping by their type. MozReview-Commit-ID: K7ukYocsAbt --HG-- extra : rebase_source : dd9e140ca8a411e02fc85123694e88b4c70eb3a3
2024-10-23 18:26:15 +00:00 · 2017-06-26 15:17:06 +02:00 · 2017-06-26 15:17:06 +02:00 · 4327baa144
commit 4327baa144
parent f892d2204e
5 changed files with 147 additions and 48 deletions
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@ -35,9 +35,31 @@ body {
 }

 .heading {
-  padding-inline-start: 15px;
-  padding-inline-end: 21px;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
  color: var(--in-content-category-text);
+  pointer-events: none;
+  padding: 12px 21px 15px 21px;
+  border-bottom: 1px solid var(--in-content-header-border-color);
+}
+
+.heading > h3 {
+  margin: 0;
+  padding-bottom: 12px;
+}
+
+#ping-type {
+  align-self: center;
+}
+
+.older-ping, .newer-ping {
+  cursor: pointer;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
 }

 .category:not(.has-data) {
@ -132,9 +154,14 @@ body {
 }

 #ping-picker {
-  margin-top: 10px;
-  border: 1px solid lightgrey;
-  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--in-content-header-border-color);
+  padding: 12px 0px;
+}
+
+#ping-picker .title {
+  margin: 4px 0px;
 }

 #ping-source-picker {
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@ -280,10 +280,11 @@ var Settings = {
 var PingPicker = {
  viewCurrentPingData: null,
  _archivedPings: null,
+  TYPE_ALL: bundle.GetStringFromName("telemetryPingTypeAll"),

  attachObservers() {
-    let elements = document.getElementsByName("choose-ping-source");
-    for (let el of elements) {
+    let pingSourceElements = document.getElementsByName("choose-ping-source");
+    for (let el of pingSourceElements) {
      el.addEventListener("change", () => this.onPingSourceChanged());
    }

@ -301,7 +302,10 @@ var PingPicker = {
      this._updateArchivedPingData();
    });
    document.getElementById("choose-ping-id").addEventListener("change", () => {
-      this._updateArchivedPingData()
+      this._updateArchivedPingData();
+    });
+    document.getElementById("choose-ping-type").addEventListener("change", () => {
+      this.filterDisplayedPings();
    });

    document.getElementById("newer-ping")
@ -333,13 +337,37 @@ var PingPicker = {
  render() {
    let pings = bundle.GetStringFromName("pingExplanationLink");
    let pingLink = "<a href=\"http://gecko.readthedocs.io/en/latest/toolkit/components/telemetry/telemetry/concepts/pings.html\">&quot;" + pings + "&quot;</a>";
-    let pingName = "<span class=\"change-ping\">" + this._getSelectedPingName() + "</span>";
+    let pingName = this._getSelectedPingName();

-    let explanation = bundle.formatStringFromName("pingExplanation", [pingLink, pingName], 2);
+    let pingDate = document.getElementById("ping-date");
+    pingDate.textContent = pingName;
+    pingDate.setAttribute("title", pingName);
+
+    let pingType = document.getElementById("ping-type");
+    let older = document.getElementById("older-ping");
+    let newer = document.getElementById("newer-ping");
+    if (pingName !== "current") {
+      pingType.hidden = false;
+      older.hidden = false;
+      newer.hidden = false;
+      pingType.textContent = this._getSelectedPingType();
+    } else {
+      pingType.hidden = true;
+      older.hidden = true;
+      newer.hidden = true;
+    }
+
+    if (pingName !== "current") {
+      pingName += ", " + this._getSelectedPingType();
+    }
+    let pingNameHtml = "<span class=\"change-ping\">" + pingName + "</span>";
+
+    let explanation = bundle.formatStringFromName("pingExplanation", [pingLink, pingNameHtml], 2);
    let pingExplanation = document.getElementById("ping-explanation");

    // eslint-disable-next-line no-unsanitized/property
    pingExplanation.innerHTML = explanation;
+
    GenericSubsection.deleteAllSubSections();
  },

@ -451,21 +479,56 @@ var PingPicker = {
      (p) => p.timestampCreated >= weekRange.startDate.getTime() &&
             p.timestampCreated < weekRange.endDate.getTime());

+    let pingTypes = new Set();
+    pingTypes.add(this.TYPE_ALL);
    for (let p of pings) {
+      pingTypes.add(p.type);
      let date = new Date(p.timestampCreated);
      let text = shortDateString(date)
-                 + " " + shortTimeString(date)
-                 + " - " + p.type;
+                 + " " + shortTimeString(date);

      let option = document.createElement("option");
      let content = document.createTextNode(text);
      option.appendChild(content);
      option.setAttribute("value", p.id);
+      option.dataset.type = p.type;
      if (id && p.id == id) {
        option.selected = true;
      }
      pingSelector.appendChild(option);
    }
+    this._renderPingTypes(pingTypes);
+  },
+
+  filterDisplayedPings() {
+    let pingSelector = document.getElementById("choose-ping-id");
+    let typeSelector = document.getElementById("choose-ping-type");
+    let type = typeSelector.selectedOptions.item(0).value;
+    if (type == this.TYPE_ALL) {
+      Array.from(pingSelector.children).forEach((option) => option.hidden = false);
+      pingSelector.children[0].selected = true;
+    } else {
+      let first = true;
+      Array.from(pingSelector.children).forEach((option) => {
+        if (first && option.dataset.type == type) {
+          option.selected = true;
+          first = false;
+        }
+        option.hidden = option.dataset.type != type;
+      });
+    }
+    this._updateArchivedPingData();
+  },
+
+  _renderPingTypes(pingTypes) {
+    let pingTypeSelector = document.getElementById("choose-ping-type");
+    removeAllChildNodes(pingTypeSelector);
+    pingTypes.forEach((type) => {
+      let option = document.createElement("option");
+      option.appendChild(document.createTextNode(type));
+      option.setAttribute("value", type);
+      pingTypeSelector.appendChild(option);
+    });
  },

  _getSelectedPingName() {
@ -476,6 +539,12 @@ var PingPicker = {
    return selected.textContent;
  },

+  _getSelectedPingType() {
+    let pingSelector = document.getElementById("choose-ping-id");
+    let selected = pingSelector.selectedOptions.item(0);
+    return selected.dataset.type;
+  },
+
  _getSelectedPingId() {
    let pingSelector = document.getElementById("choose-ping-id");
    let selected = pingSelector.selectedOptions.item(0);
@ -483,6 +552,9 @@ var PingPicker = {
  },

  _movePingIndex(offset) {
+    if (this.viewCurrentPingData) {
+      return;
+    }
    const id = this._getSelectedPingId();
    const index = this._archivedPings.findIndex((p) => p.id == id);
    const newIndex = Math.min(Math.max(index + offset, 0), this._archivedPings.length - 1);
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@ -26,7 +26,12 @@

    <div id="categories">
      <div class="heading">
-        <h3>&aboutTelemetry.pageTitle;</h3>
+        <span id="ping-type" hidden="true"></span>
+        <div class="controls">
+          <span id="older-ping" hidden="true">&lt;&lt;</span>
+          <span id="ping-date"></span>
+          <span id="newer-ping" hidden="true">&gt;&gt;</span>
+        </div>
      </div>
      <div id="category-home" class="category has-data selected" value="home">
        <span class="category-name">Home</span>
@ -101,47 +106,36 @@

        <div id="ping-picker">
          <div id="ping-source-picker">
-            &aboutTelemetry.pingDataSource;<br/>
+            <h4 class="title">&aboutTelemetry.pingDataSource;</h4>
            <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
-            &aboutTelemetry.showCurrentPingData;<br />
+            &aboutTelemetry.showCurrentPingData;
            <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
-            &aboutTelemetry.showArchivedPingData;<br />
+            &aboutTelemetry.showArchivedPingData;
          </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>
+            <h4 class="title">&aboutTelemetry.choosePing;</h4>
+            <button class="older-ping" type="button">&aboutTelemetry.showOlderPing;</button>
+            <button class="newer-ping" type="button">&aboutTelemetry.showNewerPing;</button>
+            <div>
+              <h4 class="title">&aboutTelemetry.archiveWeekHeader;</h4>
+              <select id="choose-ping-week"></select>
+            </div>
+            <div>
+              <h4 class="title">&aboutTelemetry.archivePingType;</h4>
+              <select id="choose-ping-type"></select>
+            </div>
+            <div>
+              <h4 class="title">&aboutTelemetry.archivePingHeader;</h4>
+              <select id="choose-ping-id"></select>
+            </div>
+          </div>
+          <div>
+            <h4 class="title">&aboutTelemetry.payloadChoiceHeader;</h4>
+            <select id="choose-payload"></select>
          </div>
-          <table>
-              <tr>
-                  <th>&aboutTelemetry.payloadChoiceHeader;</th>
-              </tr>
-              <tr>
-                  <td>
-                      <select id="choose-payload">
-                      </select>
-                  </td>
-              </tr>
-          </table>
        </div>
      </div>

--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
@ -29,17 +29,21 @@ Choose ping:
 ">

 <!ENTITY aboutTelemetry.showNewerPing "
-&lt;&lt; Newer ping
+Newer ping &gt;&gt;
 ">

 <!ENTITY aboutTelemetry.showOlderPing "
-Older ping &gt;&gt;
+&lt;&lt; Older ping
 ">

 <!ENTITY aboutTelemetry.archiveWeekHeader "
 Week
 ">

+<!ENTITY aboutTelemetry.archivePingType "
+Ping Type
+">
+
 <!ENTITY aboutTelemetry.archivePingHeader "
 Ping
 ">
--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
@ -23,6 +23,8 @@ telemetryEnabled = enabled

 telemetryDisabled = disabled

+telemetryPingTypeAll = all
+
 telemetryLogTitle = Telemetry Log

 telemetryLogHeadingId = Id