Fix uses of /deep/ in trace viewer.

tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html

Index: tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html
diff --git a/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html b/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html
index dd4afdad5da3dadc8a534f3d418238b3cc19cfd6..2201c8f400ee9ef5cd2aa7aa098e54923f079428 100644
--- a/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html
+++ b/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html
@@ -5,8 +5,6 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
-<link rel="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.css">
-
 <link rel="import" href="/tracing/extras/chrome/cc/constants.html">
 <link rel="import" href="/tracing/ui/base/dom_helpers.html">
 <link rel="import" href="/tracing/ui/base/list_view.html">
@@ -37,7 +35,14 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
     __proto__: HTMLDivElement.prototype,
 
     decorate() {
+      this.style.flexDirection = 'column';
+      this.style.borderTop = '1px solid grey';
+      this.style.display = 'flex';
       this.opsList_ = new tr.ui.b.ListView();
+      this.opsList_.style.flexGrow = 1;
+      this.opsList_.style.flexShrink = 1;
+      this.opsList_.style.flexBasis = 'auto';
+      this.opsList_.style.overflow = 'auto';
       Polymer.dom(this).appendChild(this.opsList_);
 
       this.selectedOp_ = undefined;
@@ -79,6 +84,10 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
         if (op.elementInfo.tag || op.elementInfo.id || op.elementInfo.class) {
           const elementInfo = document.createElement('span');
           Polymer.dom(elementInfo).classList.add('elementInfo');
+          elementInfo.style.color = 'purple';
+          elementInfo.style.fontSize = 'small';
+          elementInfo.style.fontWeight = 'bold';
+          elementInfo.style.color = '#777';
           const tag = op.elementInfo.tag ? op.elementInfo.tag : 'unknown';
           const id = op.elementInfo.id ? 'id=' + op.elementInfo.id : undefined;
           const className = op.elementInfo.class ? 'class=' +
@@ -96,6 +105,8 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
         if (op.info.length > 0) {
           const infoItem = document.createElement('div');
           Polymer.dom(infoItem).textContent = JSON.stringify(op.info);
+          infoItem.style.fontSize = 'x-small';
+          infoItem.style.color = '#777';
           Polymer.dom(item).appendChild(infoItem);
         }
 
@@ -105,9 +116,24 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           Polymer.dom(time).classList.add('time');
           const rounded = op.cmd_time.toFixed(4);
           Polymer.dom(time).textContent = '(' + rounded + 'ms)';
+          time.style.fontSize = 'x-small';
+          time.style.color = 'rgb(136, 0, 0)';
           Polymer.dom(item).appendChild(time);
         }
 
+        item.style.borderBottom = '1px solid #555';
+        item.style.fontSize = 'small';
+        item.style.fontWeight = 'bold';
+        item.style.paddingBottom = '5px';
+        item.style.paddingLeft = '5px';
+        item.style.cursor = 'pointer';
+
+        for (const child of item.children) {
+          child.style.fontWeight = 'normal';
+          child.style.marginLeft = '1em';
+          child.style.maxWidth = '300px';
+        }
+
         Polymer.dom(this.opsList_).appendChild(item);
       }
     },
@@ -133,8 +159,10 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           this.selectedOpIndex_ = op.opIndex;
         } else if (beforeSelectedOp) {
           Polymer.dom(op).setAttribute('beforeSelection', 'beforeSelection');
+          op.style.backgroundColor = 'rgb(103, 199, 165)';
         } else {
           Polymer.dom(op).removeAttribute('beforeSelection');
+          op.style.backgroundColor = '';
         }
       }