[Nearby] Minor fixes to chrome://nearby-internals logging tab

(1) Add a newline at the end of each line when saving logs file.
(2) Show logs in chronological order.
(3) Fix issue which showed "../../" at the start of every filename.
(4) Fix issue where logs extend a few pixels past the horizontal width
of the page, resulting in an overflow and making it possible to scroll
left and right.
(5) Clean up some code in the <log-object> element.
(6) Use Polymer's array mutation method for unshift, which notifies
other elements bound to the same array of the changes. This will fix the
issue of needing to refresh to page to show log changes.

Changes 1-5 mirror exactly crrev/c/2372600 and crrev/c/2383790, which
correct the issues on the analogous chrome://multidevice-internals page.

Change-Id: I3bd2d922e291f86be5533716cfac74f67c5bdd2b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2401807
Commit-Queue: Josh Nohle <nohle@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805886}

chrome/browser/resources/nearby_internals/log_object.html

 <style>
-  .warning-log {
+  :host {
+    padding: 3px;
+  }
+
+  :host(.warning-log) {
     background-color: rgb(255, 252, 239);
   }
 
-  .error-log {
+  :host(.error-log) {
     background-color: rgb(255, 241, 241);
   }
 
-  .verbose-log {
+  :host(.verbose-log) {
     background-color: rgb(235, 235, 235);
   }
 
-  .default-log {
+  :host(.default-log) {
     background-color: rgb(255, 255, 255);
   }
 
-  #item-metadata {
+  #log-container {
     color: #888;
     display: flex;
     font-size: 10px;
@@ -28,17 +32,15 @@
 
   #text {
     display: inline-block;
-    margin: 3px;
-    padding: 5px;
-    text-align: left;
+    text-align: start;
     width: 100%;
   }
 </style>
-<div id="item" severity="[[item.severity]]">
-  <p id="text">[[item.text]]</p>
-  <div id="item-metadata">
-    <span>[[item.time]]</span>
+<div>
+  <p id="text">[[logMessage.text]]</p>
+  <div id="log-container">
+    <span>[[logMessage.time]]</span>
     <div id="flex"></div>
-    <span>[[item.file]]:[[item.line]]</span>
+    <span>[[getFilenameWithLine_(logMessage.file, logMessage.line)]]</span>
   </div>
 </div>

chrome/browser/resources/nearby_internals/log_object.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {Severity} from './types.js';
+import {LogMessage, Severity} from './types.js';
 
 Polymer({
   is: 'log-object',
@@ -12,13 +12,12 @@ Polymer({
 
   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}
+     * Log whose metadata is displayed within this element.
+     * @type {!LogMessage}
      */
-    item: {
+    logMessage: {
       type: Object,
-      observer: 'itemChanged_',
+      observer: 'logMessageChanged_',
     },
   },
 
@@ -26,20 +25,34 @@ Polymer({
    * Sets the log message style based on severity level.
    * @private
    */
-  itemChanged_() {
-    switch (this.item.severity) {
+  logMessageChanged_() {
+    switch (this.logMessage.severity) {
       case Severity.WARNING:
-        this.$['item'].className = 'warning-log';
+        this.className = 'warning-log';
         break;
       case Severity.ERROR:
-        this.$['item'].className = 'error-log';
+        this.className = 'error-log';
         break;
       case Severity.VERBOSE:
-        this.$['item'].className = 'verbose-log';
+        this.className = 'verbose-log';
         break;
       default:
-        this.$['item'].className = 'default-log';
+        this.className = 'default-log';
         break;
     }
   },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getFilenameWithLine_() {
+    if (!this.logMessage) {
+      return '';
+    }
+
+    // The filename is prefixed with "../../", so replace it with "//".
+    const filename = this.logMessage.file.replace('../../', '//');
+    return filename + ':' + this.logMessage.line;
+  },
 });

chrome/browser/resources/nearby_internals/logging_tab.html

@@ -30,7 +30,7 @@
 </cr-button>
 <iron-list items="[[logList_]]" as="log" id="logs-list">
   <template>
-    <log-object item="[[log]]">
+    <log-object log-message="[[log]]">
     </log-object>
   </template>
 </iron-list>

chrome/browser/resources/nearby_internals/logging_tab.js

@@ -39,7 +39,7 @@ function logToSavedString_(log) {
   // 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}`;
+  return `[${log.time} ${severity} ${file} (${log.line})] ${log.text}\n`;
 }
 
 Polymer({
@@ -120,10 +120,12 @@ Polymer({
   /**
    * Iterates through log messages in |logList_| and prepares them for download.
    * @private
-   * @return
+   * @return {!Array<string>}
    */
   getSerializedLogStrings_() {
-    return this.logList_.map(logToSavedString_);
+    // Reverse the logs so that the oldest logs appear first and the newest logs
+    // appear last.
+    return this.logList_.map(logToSavedString_).reverse();
   },
 
   /**
@@ -133,7 +135,7 @@ Polymer({
    * @private
    */
   onLogMessageAdded_(log) {
-    this.logList_.unshift(log);
+    this.unshift('logList_', log);
   },
 
   /**