Plumb Task Scheduler Histograms to the Task Scheduler Internals Page

chrome/browser/resources/task_scheduler_internals/index.js

Index: chrome/browser/resources/task_scheduler_internals/index.js
diff --git a/chrome/browser/resources/task_scheduler_internals/index.js b/chrome/browser/resources/task_scheduler_internals/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..aaeb75372463c9d81a9915d0578e59d11c80e362
--- /dev/null
+++ b/chrome/browser/resources/task_scheduler_internals/index.js
@@ -0,0 +1,69 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var TaskSchedulerInternals = {};
+
+/**
+ * Updates the histograms on the page.
+ * @param {Array<Object>} histograms Array of histogram objects.
+ */
+TaskSchedulerInternals.updateHistograms = function(histograms) {
+  var histogramContainer = $('histogram-container');
+  for (var i in histograms) {
+    var histogram = histograms[i];
+    var title = document.createElement('div');
+    title.innerHTML = histogram.name;
+    histogramContainer.appendChild(title);
+    if (histogram.buckets.length > 0) {
+      histogramContainer.appendChild(
+          TaskSchedulerInternals.createHistogramTable(histogram.buckets));
+    } else {
+      var unavailable = document.createElement('div');
+      unavailable.innerHTML = 'No Data Recorded';
+      histogramContainer.appendChild(unavailable);
+    }
+  }
+};
+
+/**
+ * Returns a table representation of the histogram buckets.
+ * @param {Object} buckets The histogram buckets.
+ * @return {Object} A table element representation of the histogram buckets.
+ */
+TaskSchedulerInternals.createHistogramTable = function(buckets) {
+  var table = document.createElement('table');
+  var headerRow = document.createElement('tr');
+  var dataRow = document.createElement('tr');
+  for (var i in buckets) {
+    var bucket = buckets[i];
+    var header = document.createElement('th');
+    header.innerHTML = bucket.min + '-' + bucket.max;
+    headerRow.appendChild(header);
+    var data = document.createElement('td');
+    data.innerHTML = bucket.count;
+    dataRow.appendChild(data);

[fdoray, 2016/10/14 20:59:06]

Could we reuse the ASCII charts from chrome://histograms/?

[robliao, 2016/10/17 22:36:57]

We're going to have spiffy HTML tables that will update dynamically :-).

+  }
+  table.appendChild(headerRow);
+  table.appendChild(dataRow);
+  return table;
+};
+
+/**
+ * Handles callback from onGetTaskSchedulerData.
+ * @param {Object} data Dictionary containing all task scheduler metrics.
+ */
+TaskSchedulerInternals.onGetTaskSchedulerData = function(data) {
+  console.log(data);
+  $('status').innerHTML =
+      data.instantiated ? 'Instantiated' : 'Not Instantiated';
+  $('details').style.visibility = data.instantiated ? 'visible' : 'hidden';
+  if (!data.instantiated)
+    return;
+
+  TaskSchedulerInternals.updateHistograms(data.histograms);
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  chrome.send('getTaskSchedulerData');
+});