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..608bc207e3742ba16ca1b7f8ed6dc4faf26c7415
--- /dev/null
+++ b/chrome/browser/resources/task_scheduler_internals/index.js
@@ -0,0 +1,68 @@
+// 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 = {};

[Dan Beam, 2016/10/29 01:13:24]

nit: this could be of the format

var TaskSchedulerInternals = {
  updateHistograms: function(...) {...},
};

[robliao, 2016/11/08 18:14:18]

Done.

+

[Dan Beam, 2016/10/29 01:13:24]

can we get a little more specific?

/** @typedef {min: number, max: number, count: number} */
var Bucket;

/** @typedef {name: string, buckets: !Array<Bucket>} */
var Histogram;

[robliao, 2016/11/08 18:14:18]

Done.

+/**
+ * Updates the histograms on the page.
+ * @param {Array<Object>} histograms Array of histogram objects.

[Dan Beam, 2016/10/29 01:13:24]

nit: !Array<!Histogram>

[robliao, 2016/11/08 18:14:18]

Done.

+ */
+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;

[xiyuan, 2016/10/19 17:49:57]

nit: title.textContent = histogram.name;

avoid using innerHTML when we can.

[robliao, 2016/10/19 21:24:28]

Done.

[Dan Beam, 2016/10/29 01:13:24]

all of these .innerHTML setters could actually use .textContent instead, right?

[robliao, 2016/11/08 18:14:18]

On trunk: textContent was used at commit time.

+    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';

[xiyuan, 2016/10/19 17:49:57]

nit: .innerHTML -> .textContent

[robliao, 2016/10/19 21:24:28]

Done.

+      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;

[xiyuan, 2016/10/19 17:49:57]

nit: .innerHTML -> .textContent

[robliao, 2016/10/19 21:24:28]

Done.

[Dan Beam, 2016/10/29 01:13:24]

btw, we can now use `template replacements`, so this could be:

`${bucket.min}-${bucket.max}`

if you want

[robliao, 2016/11/08 18:14:18]

Done.

+    headerRow.appendChild(header);
+    var data = document.createElement('td');
+    data.innerHTML = bucket.count;

[xiyuan, 2016/10/19 17:49:57]

nit: .innerHTML -> .textContent

[robliao, 2016/10/19 21:24:28]

Done.

+    dataRow.appendChild(data);
+  }
+  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) {
+  $('status').innerHTML =

[xiyuan, 2016/10/19 17:49:57]

nit: .innerHTML -> .textContent

[robliao, 2016/10/19 21:24:28]

Done.

+      data.instantiated ? 'Instantiated' : 'Not Instantiated';
+  $('details').style.visibility = data.instantiated ? 'visible' : 'hidden';

[Dan Beam, 2016/10/29 01:13:24]

$('details').hidden = !data.instantiated;

[robliao, 2016/11/08 18:14:18]

On trunk: This was done at commit time.

+  if (!data.instantiated)
+    return;
+
+  TaskSchedulerInternals.updateHistograms(data.histograms);
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  chrome.send('getTaskSchedulerData');
+});