diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css index 39ade6486080..6acf82c201fb 100644 --- a/toolkit/content/aboutTelemetry.css +++ b/toolkit/content/aboutTelemetry.css @@ -229,6 +229,14 @@ body[dir="rtl"] .copy-node { display: inline; } +.processes-ui { + display: none; +} + +.has-data.expanded .processes-ui { + display: initial; +} + .filter-blocked { display: none; } @@ -257,3 +265,7 @@ body[dir="rtl"] .copy-node { font-size: larger; margin: 5px 0; } + +.process-picker { + margin: 0 0.5em; +} diff --git a/toolkit/content/aboutTelemetry.js b/toolkit/content/aboutTelemetry.js index 13aa26e382a3..dd636990d48c 100644 --- a/toolkit/content/aboutTelemetry.js +++ b/toolkit/content/aboutTelemetry.js @@ -306,6 +306,10 @@ var PingPicker = { .addEventListener("click", () => this._movePingIndex(1), false); document.getElementById("choose-payload") .addEventListener("change", () => displayPingData(gPingData), false); + document.getElementById("histograms-processes") + .addEventListener("change", () => displayPingData(gPingData), false); + document.getElementById("keyed-histograms-processes") + .addEventListener("change", () => displayPingData(gPingData), false); }, onPingSourceChanged: function() { @@ -1782,6 +1786,33 @@ function sortStartupMilestones(aSimpleMeasurements) { return result; } +function renderProcessList(ping, selectEl) { + removeAllChildNodes(selectEl); + let option = document.createElement("option"); + option.appendChild(document.createTextNode("parent")); + option.setAttribute("value", ""); + option.selected = true; + selectEl.appendChild(option); + + if (!("processes" in ping.payload)) { + selectEl.disabled = true; + return; + } + selectEl.disabled = false; + + for (let process of Object.keys(ping.payload.processes)) { + // TODO: parent hgrams are on root payload, not in payload.processes.parent + // When/If that gets moved, you'll need to remove this: + if (process === "parent") { + continue; + } + option = document.createElement("option"); + option.appendChild(document.createTextNode(process)); + option.setAttribute("value", process); + selectEl.appendChild(option); + } +} + function renderPayloadList(ping) { // Rebuild the payload select with options: // Parent Payload (selected) @@ -1850,9 +1881,11 @@ function displayPingData(ping, updatePayloadList = false) { const keysHeader = bundle.GetStringFromName("keysHeader"); const valuesHeader = bundle.GetStringFromName("valuesHeader"); - // Update the payload list + // Update the payload list and process lists if (updatePayloadList) { renderPayloadList(ping); + renderProcessList(ping, document.getElementById("histograms-processes")); + renderProcessList(ping, document.getElementById("keyed-histograms-processes")); } // Show general data. @@ -1929,8 +1962,18 @@ function displayPingData(ping, updatePayloadList = false) { removeAllChildNodes(hgramDiv); let histograms = payload.histograms; + + let hgramsSelect = document.getElementById("histograms-processes"); + let hgramsOption = hgramsSelect.selectedOptions.item(0); + let hgramsProcess = hgramsOption.getAttribute("value"); + if (hgramsProcess && + "processes" in ping.payload && + hgramsProcess in ping.payload.processes) { + histograms = ping.payload.processes[hgramsProcess].histograms; + } + hasData = Object.keys(histograms).length > 0; - setHasData("histograms-section", hasData); + setHasData("histograms-section", hasData || hgramsSelect.options.length); if (hasData) { for (let [name, hgram] of Object.entries(histograms)) { @@ -1950,8 +1993,18 @@ function displayPingData(ping, updatePayloadList = false) { let keyedDiv = document.getElementById("keyed-histograms"); removeAllChildNodes(keyedDiv); - setHasData("keyed-histograms-section", false); let keyedHistograms = payload.keyedHistograms; + + let keyedHgramsSelect = document.getElementById("keyed-histograms-processes"); + let keyedHgramsOption = keyedHgramsSelect.selectedOptions.item(0); + let keyedHgramsProcess = keyedHgramsOption.getAttribute("value"); + if (keyedHgramsProcess && + "processes" in ping.payload && + keyedHgramsProcess in ping.payload.processes) { + keyedHistograms = ping.payload.processes[keyedHgramsProcess].keyedHistograms; + } + + setHasData("keyed-histograms-section", keyedHgramsSelect.options.length); if (keyedHistograms) { let hasData = false; for (let [id, keyed] of Object.entries(keyedHistograms)) { @@ -1960,7 +2013,7 @@ function displayPingData(ping, updatePayloadList = false) { KeyedHistogram.render(keyedDiv, id, keyed, {unpacked: true}); } } - setHasData("keyed-histograms-section", hasData); + setHasData("keyed-histograms-section", hasData || keyedHgramsSelect.options.length); } // Show addon histogram data diff --git a/toolkit/content/aboutTelemetry.xhtml b/toolkit/content/aboutTelemetry.xhtml index b6d1a80300ad..8049e3057812 100644 --- a/toolkit/content/aboutTelemetry.xhtml +++ b/toolkit/content/aboutTelemetry.xhtml @@ -152,6 +152,9 @@ &aboutTelemetry.filterText; +
+ +
@@ -161,6 +164,9 @@

&aboutTelemetry.keyedHistogramsSection;

&aboutTelemetry.toggle; &aboutTelemetry.emptySection; +
+ +