[CrOS MultiDevice] Fix padding on chrome://multidevice-internal logs

Previously, logs would extend a few pixels past the horizontal width of
the page, resulting in an overflow and making it possible to scroll left
and right. This CL fixes that, and also cleans up some code in the
<log-object> element.

Change-Id: I5f5d191368f2c4e7717ae2d9aaedf3c9990a3f31
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2383790
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Auto-Submit: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802945}

chrome/browser/resources/chromeos/multidevice_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: 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>[[getFilenameWithLine_(item.file, item.line)]]</span>
+    <span>[[getFilenameWithLine_(logMessage.file, logMessage.line)]]</span>
   </div>
 </div>

chrome/browser/resources/chromeos/multidevice_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 Multidevice 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,19 +25,19 @@ 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;
     }
   },
@@ -48,12 +47,12 @@ Polymer({
    * @private
    */
   getFilenameWithLine_() {
-    if (!this.item) {
+    if (!this.logMessage) {
       return '';
     }
 
     // The filename is prefixed with "../../", so replace it with "//".
-    let filename = this.item.file.replace('../../', '//');
-    return filename + ':' + this.item.line;
+    let filename = this.logMessage.file.replace('../../', '//');
+    return filename + ':' + this.logMessage.line;
   },
 });

chrome/browser/resources/chromeos/multidevice_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>