[Nearby] Send log from NS_LOG macro to chrome://nearby-internals.

Allows logging messages of NS_LOG to be displayed in the
logging tab of the internal debug page, with functionality to clear the
log buffer and save the logs that appear on the page. See screenshot
here of how logs will appear on the page:
https://screenshot.googleplex.com/F2HptWvSd0z .

Bug: 1093634
Change-Id: I52b98f007be558e69cec3096681c9c3cff9a3609
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2241338
Commit-Queue: Juliet Levesque <julietlevesque@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Josh Nohle <nohle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785538}

chrome/browser/BUILD.gn

@@ -3304,6 +3304,8 @@ static_library("browser") {
       "nearby_sharing/instantmessaging/stream_parser.h",
       "nearby_sharing/instantmessaging/token_fetcher.cc",
       "nearby_sharing/instantmessaging/token_fetcher.h",
+      "nearby_sharing/logging/log_buffer.h",
+      "nearby_sharing/logging/logging.h",
       "nearby_sharing/nearby_connection.h",
       "nearby_sharing/nearby_connections_manager.h",
       "nearby_sharing/nearby_connections_manager_impl.cc",

chrome/browser/resources/nearby_internals/.eslintrc.js

@@ -0,0 +1,11 @@
+// Copyright 2020 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.
+
+module.exports = {
+  'env': {
+    'browser': true,
+    'es6': true,
+  },
+  'rules': {'eqeqeq': ['error', 'always', {'null': 'ignore'}]},
+};

chrome/browser/resources/nearby_internals/BUILD.gn

@@ -8,28 +8,62 @@ import("//tools/polymer/html_to_js.gni")
 js_type_check("closure_compile") {
   is_polymer3 = true
   deps = [
+    ":log_object",
     ":logging_tab",
     ":nearby_internals",
+    ":nearby_logs_browser_proxy",
+    ":types",
   ]
 }
 
 js_library("nearby_internals") {
   deps = [
+    ":log_object",
     ":logging_tab",
+    ":nearby_logs_browser_proxy",
+    ":types",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:cr.m",
   ]
 }
 
 js_library("logging_tab") {
   deps = [
+    ":log_object",
+    ":nearby_logs_browser_proxy",
+    ":types",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
+  ]
+}
+
+js_library("log_object") {
+  deps = [
+    ":nearby_logs_browser_proxy",
+    ":types",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
 
+js_library("nearby_logs_browser_proxy") {
+  deps = [
+    ":types",
+    "//ui/webui/resources/js:cr.m",
+  ]
+}
+
+js_library("types") {
+}
+
+js_library("shared_style") {
+}
+
 html_to_js("web_components") {
   js_files = [
+    "log_object.js",
     "logging_tab.js",
     "nearby_internals.js",
+    "shared_style.js",
   ]
 }

chrome/browser/resources/nearby_internals/log_object.html

@@ -0,0 +1,45 @@
+<style>
+  :host {
+    --large-font-size: 120%;
+  }
+
+  .warning-log {
+    background-color: rgb(255, 252, 239);
+    color: rgb(49, 34, 0);
+    font-size: var(--large-font-size);
+  }
+
+  .error-log {
+    background-color: rgb(255, 241, 241);
+    color: rgb(239, 0, 0);
+    font-size: var(--large-font-size);
+  }
+
+  #item-metadata {
+    color: #888;
+    display: flex;
+    font-size: 10px;
+    margin-bottom: 4px;
+    padding: 6px;
+  }
+
+  #flex {
+    flex: 1;
+  }
+
+  #text {
+    display: inline-block;
+    margin: 3px;
+    padding: 5px;
+    text-align: left;
+    width: 100%;
+  }
+</style>
+<div id="item" severity="[[item.severity]]">
+  <p id="text">[[item.text]]</p>
+  <div id="item-metadata">
+    <span>[[item.time]]</span>
+    <div id="flex"></div>
+    <span>[[item.file]]:[[item.line]]</span>
+  </div>
+</div>

chrome/browser/resources/nearby_internals/log_object.js

@@ -0,0 +1,41 @@
+// Copyright 2020 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.
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {Severity} from './types.js';
+
+Polymer({
+  is: 'log-object',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /**
+     * Underlying LogMessage data for this item. Contains read-only fields
+     * from the NearbyShare backend, as well as fields computed by logging tab.
+     * Type: {!LogMessage}
+     */
+    item: {
+      type: Object,
+      observer: 'itemChanged_',
+    },
+  },
+
+  /**
+   * Sets the log message style based on severity level.
+   * @private
+   */
+  itemChanged_() {
+    switch (this.item.severity) {
+      case Severity.WARNING:
+        this.$['item'].classList.add('warning-log');
+        break;
+      case Severity.ERROR:
+        this.$['item'].classList.add('error-log');
+        break;
+      default:
+        break;
+    }
+  },
+});

chrome/browser/resources/nearby_internals/logging_tab.html

@@ -1 +1,35 @@
-<h1>Logs page coming soon.</h1>
+<style include="shared-style">
+  :host {
+    --standard-border: 1px solid black;
+  }
+
+  #logs-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  log-object {
+    border-top: var(--standard-border);
+    border-right: var(--standard-border);
+    border-left: var(--standard-border);
+  }
+
+  log-object:last-child {
+    border-bottom: var(--standard-border);
+  }
+</style>
+<cr-button disabled="[[!logList_.length]]" class="internals-button"
+    on-click="onSaveLogsButtonClicked_">
+  Save Logs
+</cr-button>
+<cr-button disabled="[[!logList_.length]]" class="internals-button"
+    on-click="onClearLogsButtonClicked_">
+  Clear Logs
+</cr-button>
+<iron-list items="[[logList_]]" as="log" id="logs-list">
+  <template>
+    <log-object item="[[log]]">
+    </log-object>
+  </template>
+</iron-list>

chrome/browser/resources/nearby_internals/logging_tab.js

@@ -2,10 +2,162 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import './log_object.js';
+import './shared_style.js';
+import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {NearbyLogsBrowserProxy} from './nearby_logs_browser_proxy.js';
+import {LogMessage, Severity} from './types.js';
+
+/**
+ * Converts log message to string format for saved download file.
+ * @param {!LogMessage} log
+ * @return {string}
+ */
+function logToSavedString_(log) {
+  // Convert to string value for |line.severity|.
+  let severity;
+  switch (log.severity) {
+    case Severity.INFO:
+      severity = 'INFO';
+      break;
+    case Severity.WARNING:
+      severity = 'WARNING';
+      break;
+    case Severity.ERROR:
+      severity = 'ERROR';
+      break;
+    case Severity.VERBOSE:
+      severity = 'VERBOSE';
+      break;
+  }
+
+  // Reduce the file path to just the file name for logging simplification.
+  const file = log.file.substring(log.file.lastIndexOf('/') + 1);
+
+  return `[${log.time} ${severity} ${file} (${log.line})] ${log.text}`;
+}
 
 Polymer({
   is: 'logging-tab',
 
   _template: html`{__html_template__}`,
+
+  behaviors: [
+    WebUIListenerBehavior,
+  ],
+
+  properties: {
+
+    /**
+     * @private {!Array<!LogMessage>}
+     */
+    logList_: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  /** @private {?NearbyLogsBrowserProxy}*/
+  browserProxy_: null,
+
+  /**
+   * Initialize |browserProxy_| and |logList_|.
+   * @override
+   */
+  created() {
+    this.browserProxy_ = NearbyLogsBrowserProxy.getInstance();
+  },
+
+  /**
+   * When the page is initialized, notify the C++ layer and load in the
+   * contents of its log buffer. Initialize WebUI Listeners.
+   * @override
+   */
+  attached() {
+    this.addWebUIListener(
+        'log-message-added', log => this.onLogMessageAdded_(log));
+    this.addWebUIListener(
+        'log-buffer-cleared', () => this.onWebUILogBufferCleared_());
+    this.browserProxy_.getLogMessages().then(
+        logs => this.parseAndAddLogs_(logs));
+  },
+
+  /**
+   * Clears javascript logs displayed, but c++ log buffer remains.
+   * @private
+   */
+  onClearLogsButtonClicked_() {
+    this.clearLogBuffer_();
+  },
+
+  /**
+   * Saves and downloads javascript logs that appear on the page.
+   * @private
+   */
+  onSaveLogsButtonClicked_() {
+    const blob = new Blob(
+        this.getSerializedLogStrings_(), {type: 'text/plain;charset=utf-8'});
+    const url = URL.createObjectURL(blob);
+
+    const anchorElement = document.createElement('a');
+    anchorElement.href = url;
+    anchorElement.download =
+        'nearby_internals_logs_' + new Date().toJSON() + '.txt';
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+
+    window.setTimeout(function() {
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(url);
+    }, 0);
+  },
+
+  /**
+   * Iterates through log messages in |logList_| and prepares them for download.
+   * @private
+   * @return
+   */
+  getSerializedLogStrings_() {
+    return this.logList_.map(logToSavedString_);
+  },
+
+  /**
+   * Adds a log message to the javascript log list displayed. Called from the
+   * C++ WebUI handler when a log message is added to the log buffer.
+   * @param {!Array<!LogMessage>} log
+   * @private
+   */
+  onLogMessageAdded_(log) {
+    this.parseAndAddLogs_([log]);
+  },
+
+  /**
+   * Called in response to WebUI handler clearing log buffer.
+   * @private
+   */
+  onWebUILogBufferCleared_() {
+    this.clearLogBuffer_();
+  },
+
+  /**
+   * Parses an array of log messages and adds to the javascript list.
+   * @param {!Array<!LogMessage>} logs
+   * @private
+   */
+  parseAndAddLogs_(logs) {
+    logs.unshift('logList_');
+    this.push.apply(this, logs);
+  },
+
+  /**
+   * Clears the javascript log buffer.
+   * @private
+   */
+  clearLogBuffer_() {
+    this.logList_ = [];
+  },
 });

chrome/browser/resources/nearby_internals/nearby_internals.html

@@ -20,11 +20,10 @@
   }
 
   iron-pages > * {
-    display: flex;
+    display: block;
     height: 100%;
     overflow: auto;
   }
-
 </style>
 <app-header>
   <app-toolbar>Nearby Share Internals</app-toolbar>