[Nearby] Update logging tab to make it more readable for users.

Reverse the order of logs appearing on the logging tab so newest logs
appear on top, as well as change the color of verbose logging to gray,
as seen here: https://screenshot.googleplex.com/rAtwCW4rJbN.

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

chrome/browser/resources/nearby_internals/contact_tab.js

@@ -47,7 +47,7 @@ Polymer({
    */
   attached() {
     this.addWebUIListener(
-        'contacts-updated', contact => this.onContactUpdateAdded_([contact]));
+        'contacts-updated', contact => this.onContactUpdateAdded_(contact));
     this.browserProxy_.initialize();
   },
 
@@ -81,11 +81,10 @@ Polymer({
 
   /**
    * Adds contact sent in from WebUI listener to the list of displayed contacts.
-   * @param {!Array<!ContactUpdate>} contacts
+   * @param {!ContactUpdate} contact
    * @private
    */
-  onContactUpdateAdded_(contacts) {
-    contacts.unshift('contactList_');
-    this.unshift.apply(this, contacts);
+  onContactUpdateAdded_(contact) {
+    this.contactList_.unshift(contact);
   },
 });

chrome/browser/resources/nearby_internals/http_tab.js

@@ -94,16 +94,6 @@ Polymer({
    * @private
    */
   onHttpMessageAdded_(message) {
-    this.parseAndAddMessages_([message]);
-  },
-
-  /**
-   * Parses an array of HTTP messages and adds to the javascript list.
-   * @param {!Array<!HttpMessage>} messages
-   * @private
-   */
-  parseAndAddMessages_(messages) {
-    messages.unshift('httpMessageList_');
-    this.unshift.apply(this, messages);
+    this.httpMessageList_.unshift(message);
   },
 });

chrome/browser/resources/nearby_internals/log_object.html

@@ -7,11 +7,18 @@
     background-color: rgb(255, 241, 241);
   }
 
+  .verbose-log {
+    background-color: rgb(235, 235, 235);
+  }
+
+  .default-log {
+    background-color: rgb(255, 255, 255);
+  }
+
   #item-metadata {
     color: #888;
     display: flex;
     font-size: 10px;
-    margin-bottom: 4px;
     padding: 6px;
   }
 

chrome/browser/resources/nearby_internals/log_object.js

@@ -29,12 +29,16 @@ Polymer({
   itemChanged_() {
     switch (this.item.severity) {
       case Severity.WARNING:
-        this.$['item'].classList.add('warning-log');
+        this.$['item'].className = 'warning-log';
         break;
       case Severity.ERROR:
-        this.$['item'].classList.add('error-log');
+        this.$['item'].className = 'error-log';
+        break;
+      case Severity.VERBOSE:
+        this.$['item'].className = 'verbose-log';
         break;
       default:
+        this.$['item'].className = 'default-log';
         break;
     }
   },

chrome/browser/resources/nearby_internals/logging_tab.js

@@ -7,6 +7,7 @@ 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';
@@ -83,7 +84,7 @@ Polymer({
     this.addWebUIListener(
         'log-buffer-cleared', () => this.onWebUILogBufferCleared_());
     this.browserProxy_.getLogMessages().then(
-        logs => this.parseAndAddLogs_(logs));
+        logs => this.onGetLogMessages_(logs));
   },
 
   /**
@@ -132,7 +133,7 @@ Polymer({
    * @private
    */
   onLogMessageAdded_(log) {
-    this.parseAndAddLogs_([log]);
+    this.logList_.unshift(log);
   },
 
   /**
@@ -144,13 +145,13 @@ Polymer({
   },
 
   /**
-   * Parses an array of log messages and adds to the javascript list.
+   * Parses an array of log messages and adds to the javascript list sent in
+   * from the initial page load.
    * @param {!Array<!LogMessage>} logs
    * @private
    */
-  parseAndAddLogs_(logs) {
-    logs.unshift('logList_');
-    this.push.apply(this, logs);
+  onGetLogMessages_(logs) {
+    this.logList_ = logs.reverse().concat(this.logList_);
   },
 
   /**

chrome/browser/resources/nearby_internals/types.js

@@ -8,10 +8,10 @@
  * @enum {number}
  */
 export const Severity = {
+  VERBOSE: -1,
   INFO: 0,
   WARNING: 1,
   ERROR: 2,
-  VERBOSE: 3
 };
 
 /**