Add chrome:://device-log

chrome/browser/resources/chromeos/device_log_ui/device_log_ui.js

Index: chrome/browser/resources/chromeos/device_log_ui/device_log_ui.js
diff --git a/chrome/browser/resources/chromeos/device_log_ui/device_log_ui.js b/chrome/browser/resources/chromeos/device_log_ui/device_log_ui.js
new file mode 100644
index 0000000000000000000000000000000000000000..2b950907076d6ce72528fa722ae8c163b05abd15
--- /dev/null
+++ b/chrome/browser/resources/chromeos/device_log_ui/device_log_ui.js
@@ -0,0 +1,148 @@
+// Copyright 2014 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 DeviceLogUI = (function() {
+  'use strict';
+
+  /**
+   * Create a tag for the log level.

[michaelpg, 2014/12/11 01:41:45]

nit: Creates, same as below

[stevenjb, 2014/12/11 19:57:52]

Done.

+   *
+   * @param {string} level A string that represents log level.
+   * @return {DOMElement} The created span element.

[xiyuan, 2014/12/11 04:36:09]

nit: DOMElement -> HTMLSpanElement (or HTMLElement).

[stevenjb, 2014/12/11 19:57:51]

Done.

+   */
+  var createLevelTag = function(level) {
+    var tag = document.createElement('span');
+    tag.className = 'level-tag';
+    tag.textContent = level;
+    var levelClass = 'log-level-' + level.toLowerCase();
+    tag.classList.add(levelClass);

[xiyuan, 2014/12/11 04:36:09]

nit: This can be combined with tag.className assignment.

[stevenjb, 2014/12/11 19:57:51]

Done.

+    return tag;
+  };
+
+  /**
+   * Create a tag for the log type.
+   *
+   * @param {string} level A string that represents log type.
+   * @return {DOMElement} The created span element.

[xiyuan, 2014/12/11 04:36:09]

nit: DOMElement -> HTMLSpanElement

[stevenjb, 2014/12/11 19:57:51]

Done.

+   */
+  var createTypeTag = function(type) {
+    var tag = document.createElement('span');
+    tag.className = 'type-tag';
+    tag.textContent = type;
+    var typeClass = 'log-type-' + type.toLowerCase();
+    tag.classList.add(typeClass);

[xiyuan, 2014/12/11 04:36:09]

nit: same here.

[stevenjb, 2014/12/11 19:57:51]

Done.

+    return tag;
+  };
+
+  /**
+   * Creates an element that contains the time, the event, the level and
+   * the description of the given log entry.
+   *
+   * @param {Object} logEntry An object that represents a single line of log.
+   * @return {DOMElement}  The created p element that represents the log entry.

[xiyuan, 2014/12/11 04:36:09]

nit: @return {DOMElement} -> @return {?HTMLParagraphElement} since the return is
either a <p> or null.

[stevenjb, 2014/12/11 19:57:51]

Done.

+   */
+  var createLogEntryText = function(logEntry) {
+    var level = logEntry['level'];
+    var levelCheckbox = 'log-level-' + level.toLowerCase();
+    if ($(levelCheckbox) && !$(levelCheckbox).checked)
+      return null;
+
+    var type = logEntry['type'];
+    var typeCheckbox = 'log-type-' + type.toLowerCase();
+    if ($(typeCheckbox) && !$(typeCheckbox).checked)
+      return null;
+
+    var res = document.createElement('p');
+    var textWrapper = document.createElement('span');
+    var fileinfo = '';
+    if ($('log-fileinfo').checked)
+      fileinfo = logEntry['file'];
+    var timestamp = '';
+    if ($('log-timedetail').checked)
+      timestamp = logEntry['timestamp'];
+    else
+      timestamp = logEntry['timestampshort'];
+    textWrapper.textContent = loadTimeData.getStringF(
+      'logEntryFormat',
+      timestamp,
+      fileinfo,
+      logEntry['event']);
+    res.appendChild(createTypeTag(type));
+    res.appendChild(createLevelTag(level));
+    res.appendChild(textWrapper);
+    return res;
+  };
+
+  /**
+   * Create event log entries.

[michaelpg, 2014/12/11 01:41:45]

nit: Creates

[stevenjb, 2014/12/11 19:57:52]

Done.

+   *
+   * @param {Array.<string>} logEntries A array of strings that each string
+   *     represents a log event in JSON format.

[michaelpg, 2014/12/11 01:41:45]

nit: english
"A[n] array of strings that each [-string ]represent[-s]..."

[stevenjb, 2014/12/11 19:57:52]

Sigh, interns. (This was all copy/pasted). Done.

+   */
+  var createEventLog = function(logEntries) {
+    var container = $('log-container');
+    container.textContent = '';
+    for (var i = 0; i < logEntries.length; ++i) {
+      var entry = createLogEntryText(JSON.parse(logEntries[i]));
+      if (entry)
+        container.appendChild(entry);
+    }
+  };
+
+  /**
+   * This callback function is triggered when the log is received.
+   *
+   * @param {Object} data A JSON structure of event log entries.
+   */
+  var getLogCallback = function(data) {
+    createEventLog(JSON.parse(data));
+  };
+
+  /**
+   * Requests a log update.
+   */
+  var requestLog = function() {
+    chrome.send('DeviceLog.getLog');
+  };
+
+  /**
+   * Sets refresh rate if the interval is found in the url.
+   */
+  var setRefresh = function() {
+    var interval = parseQueryParams(window.location)['refresh'];
+    if (interval && interval != '')
+      setInterval(requestLog, parseInt(interval) * 1000);
+  };
+
+  /**
+   * Get log information from WebUI.

[michaelpg, 2014/12/11 01:41:45]

nit: Gets

[stevenjb, 2014/12/11 19:57:51]

Done.

+   */
+  document.addEventListener('DOMContentLoaded', function() {
+    $('log-refresh').onclick = requestLog;
+    $('log-level-error').checked = true;
+    $('log-level-error').onclick = requestLog;

[michaelpg, 2014/12/11 01:41:45]

Why not set the checked attributes in the HTML?

And how about something like:

var checkboxes = document.querySelectorAll('#log-checkbox-container
input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; ++i)
  checkboxes[i].onclick = requestLog;

[stevenjb, 2014/12/11 19:57:52]

I don't like putting logic in html (i.e. which default to checked) but I will
use some loops here.

+    $('log-level-user').checked = true;
+    $('log-level-user').onclick = requestLog;
+    $('log-level-event').checked = true;
+    $('log-level-event').onclick = requestLog;
+    $('log-level-debug').checked = false;
+    $('log-level-debug').onclick = requestLog;
+    $('log-type-login').checked = true;
+    $('log-type-login').onclick = requestLog;
+    $('log-type-network').checked = true;
+    $('log-type-network').onclick = requestLog;
+    $('log-type-power').checked = true;
+    $('log-type-power').onclick = requestLog;
+    $('log-fileinfo').checked = false;
+    $('log-fileinfo').onclick = requestLog;
+    $('log-timedetail').checked = false;
+    $('log-timedetail').onclick = requestLog;
+    setRefresh();
+    requestLog();
+  });
+
+  return {
+    getLogCallback: getLogCallback
+  };
+})();