Fix uses of /deep/ in trace viewer.

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

Index: tracing/tracing/ui/extras/chrome/cc/picture_debugger.html
diff --git a/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html b/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html
index 408a3d47af7bbdad3ad00ca54af454838ce16610..7f4e7af3c988e800d3c72c3f47eba19c786f0e46 100644
--- a/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html
+++ b/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html
@@ -21,71 +21,6 @@ found in the LICENSE file.
 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html">
 
 <template id="tr-ui-e-chrome-cc-picture-debugger-template">
-  <style>
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger {
-    flex: 1 1 auto;
-    flex-direction: row;
-    display: flex;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-a-generic-object-view {
-    flex-direction: column;
-    display: flex;
-    width: 400px;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel {
-    flex-direction: column;
-    display: flex;
-    min-width: 300px;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel > picture-info {
-    flex: 0 0 auto;
-    padding-top: 2px;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel >
-        picture-info .title {
-    font-weight: bold;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-b-drag-handle {
-    flex: 0 0 auto;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger .filename {
-    -webkit-user-select: text;
-    margin-left: 5px;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel {
-    flex: 1 1 auto;
-    flex-direction: column;
-    display: flex;
-  }
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel >
-        tr-ui-e-chrome-cc-picture-ops-chart-view {
-    min-height: 150px;
-    min-width : 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  /*************************************************/
-
-  * /deep/ tr-ui-e-chrome-cc-picture-debugger raster-area {
-    background-color: #ddd;
-    min-height: 200px;
-    min-width: 200px;
-    overflow-y: auto;
-    padding-left: 5px;
-  }
-  </style>
-
   <left-panel>
     <picture-info>
       <div>
@@ -128,17 +63,35 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
 
       Polymer.dom(this).appendChild(node);
 
+      this.style.display = 'flex';
+      this.style.flexGrow = 1;
+      this.style.flexShrink = 1;
+      this.style.flexBasis = 'auto';
+      this.style.flexDirection = 'row';
+
+      const title = this.querySelector('.title');
+      title.style.fontWeight = 'bold';
+      title.style.marginLeft = '5px';
+      title.style.marginRight = '5px';
+
       this.pictureAsImageData_ = undefined;
       this.showOverdraw_ = false;
       this.zoomScaleValue_ = 1;
 
       this.sizeInfo_ = Polymer.dom(this).querySelector('.size');
       this.rasterArea_ = Polymer.dom(this).querySelector('raster-area');
+      this.rasterArea_.style.backgroundColor = '#ddd';
+      this.rasterArea_.style.minHeight = '200px';
+      this.rasterArea_.style.minWidth = '200px';
+      this.rasterArea_.style.overflowY = 'auto';
+      this.rasterArea_.style.paddingLeft = '5px';
       this.rasterCanvas_ = Polymer.dom(this.rasterArea_)
           .querySelector('canvas');
       this.rasterCtx_ = this.rasterCanvas_.getContext('2d');
 
       this.filename_ = Polymer.dom(this).querySelector('.filename');
+      this.filename_.style.userSelect = 'text';
+      this.filename_.style.marginLeft = '5px';
 
       this.drawOpsChartSummaryView_ =
           new tr.ui.e.chrome.cc.PictureOpsChartSummaryView();
@@ -163,6 +116,10 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Show timing summary');
 
       const pictureInfo = Polymer.dom(this).querySelector('picture-info');
+      pictureInfo.style.flexGrow = 0;
+      pictureInfo.style.flexShrink = 0;
+      pictureInfo.style.flexBasis = 'auto';
+      pictureInfo.style.paddingTop = '2px';
       Polymer.dom(pictureInfo).appendChild(overdrawCheckbox);
       Polymer.dom(pictureInfo).appendChild(chartCheckbox);
 
@@ -171,17 +128,32 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'selection-changed', this.onChangeDrawOps_.bind(this));
 
       const leftPanel = Polymer.dom(this).querySelector('left-panel');
+      leftPanel.style.flexDirection = 'column';
+      leftPanel.style.display = 'flex';
+      leftPanel.style.minWidth = '300px';
       Polymer.dom(leftPanel).appendChild(this.drawOpsChartSummaryView_);
       Polymer.dom(leftPanel).appendChild(this.drawOpsView_);
 
       const middleDragHandle = document.createElement('tr-ui-b-drag-handle');
+      middleDragHandle.style.flexGrow = 0;
+      middleDragHandle.style.flexShrink = 0;
+      middleDragHandle.style.flexBasis = 'auto';
       middleDragHandle.horizontal = false;
       middleDragHandle.target = leftPanel;
 
       const rightPanel = Polymer.dom(this).querySelector('right-panel');
-      rightPanel.replaceChild(
-          this.drawOpsChartView_, Polymer.dom(rightPanel)
-              .querySelector('tr-ui-e-chrome-cc-picture-ops-chart-view'));
+      rightPanel.style.flexGrow = 1;
+      rightPanel.style.flexShrink = 1;
+      rightPanel.style.flexBasis = 'auto';
+      rightPanel.style.flexDirection = 'column';
+      rightPanel.style.display = 'flex';
+      const chartView = Polymer.dom(rightPanel).querySelector(
+          'tr-ui-e-chrome-cc-picture-ops-chart-view');
+      chartView.style.minHeight = '150px';
+      chartView.style.minWidth = 0;
+      chartView.style.overflowX = 'auto';
+      chartView.style.overflowY = 'hidden';
+      rightPanel.replaceChild(this.drawOpsChartView_, chartView);
 
       this.infoBar_ = document.createElement('tr-ui-b-info-bar');
       Polymer.dom(this.rasterArea_).appendChild(this.infoBar_);