Fix uses of /deep/ in trace viewer.

tracing/tracing/ui/base/quad_stack_view.html

Index: tracing/tracing/ui/base/quad_stack_view.html
diff --git a/tracing/tracing/ui/base/quad_stack_view.html b/tracing/tracing/ui/base/quad_stack_view.html
index 63b0c5e7df541de5784de2416cc38e17cb8b7d06..03c83935c39ce70cb944f79539cb5c99ca70e22a 100644
--- a/tracing/tracing/ui/base/quad_stack_view.html
+++ b/tracing/tracing/ui/base/quad_stack_view.html
@@ -15,54 +15,29 @@ found in the LICENSE file.
 <link rel="import" href="/tracing/ui/base/mouse_tracker.html">
 <link rel="import" href="/tracing/ui/base/utils.html">
 
-<style>
-* /deep/ quad-stack-view {
-  display: block;
-  float: left;
-  height: 100%;
-  overflow: hidden;
-  position: relative; /* For the absolute positioned mouse-mode-selector */
-  width: 100%;
-}
-
-* /deep/ quad-stack-view > #header {
-  position: absolute;
-  font-size: 70%;
-  top: 10px;
-  left: 10px;
-  width: 800px;
-}
-* /deep/ quad-stack-view > #stacking-distance-slider {
-  position: absolute;
-  font-size: 70%;
-  top: 10px;
-  right: 10px;
-}
-
-* /deep/ quad-stack-view > #chrome-left {
-  background-image: url('../images/chrome-left.png');
-  display: none;
-}
-
-* /deep/ quad-stack-view > #chrome-mid {
-  background-image: url('../images/chrome-mid.png');
-  display: none;
-}
-
-* /deep/ quad-stack-view > #chrome-right {
-  background-image: url('../images/chrome-right.png');
-  display: none;
-}
-</style>
-
-<template id='quad-stack-view-template'>
+<template id="quad-stack-view-template">
+  <style>
+  #chrome-left {
+    background-image: url('../images/chrome-left.png');
+    display: none;
+  }
+  #chrome-mid {
+    background-image: url('../images/chrome-mid.png');
+    display: none;
+  }
+  #chrome-right {
+    background-image: url('../images/chrome-right.png');
+    display: none;
+  }
+  </style>
+
   <div id="header"></div>
   <input id="stacking-distance-slider" type="range" min=1 max=400 step=1>
   </input>
-  <canvas id='canvas'></canvas>
-  <img id='chrome-left'/>
-  <img id='chrome-mid'/>
-  <img id='chrome-right'/>
+  <canvas id="canvas"></canvas>
+  <img id="chrome-left"/>
+  <img id="chrome-mid"/>
+  <img id="chrome-right"/>
 </template>
 
 <script>
@@ -376,11 +351,24 @@ tr.exportTo('tr.ui.b', function() {
 
     decorate() {
       this.className = 'quad-stack-view';
+      this.style.display = 'block';
+      this.style.float = 'left';
+      this.style.height = '100%';
+      this.style.overflow = 'hidden';
+      this.style.position = 'relative';
+      this.style.width = '100%';
 
       const node = tr.ui.b.instantiateTemplate('#quad-stack-view-template',
           THIS_DOC);
       Polymer.dom(this).appendChild(node);
       this.updateHeaderVisibility_();
+      const header = Polymer.dom(this).querySelector('#header');
+      header.style.position = 'absolute';
+      header.style.fontSize = '70%';
+      header.style.top = '10px';
+      header.style.left = '10px';
+      header.style.width = '800px';
+
       this.canvas_ = Polymer.dom(this).querySelector('#canvas');
       this.chromeImages_ = {
         left: Polymer.dom(this).querySelector('#chrome-left'),
@@ -390,6 +378,10 @@ tr.exportTo('tr.ui.b', function() {
 
       const stackingDistanceSlider = Polymer.dom(this).querySelector(
           '#stacking-distance-slider');
+      stackingDistanceSlider.style.position = 'absolute';
+      stackingDistanceSlider.style.fontSize = '70%';
+      stackingDistanceSlider.style.top = '10px';
+      stackingDistanceSlider.style.right = '10px';
       stackingDistanceSlider.value = tr.b.Settings.get(
           'quadStackView.stackingDistance', 45);
       stackingDistanceSlider.addEventListener(
@@ -397,6 +389,12 @@ tr.exportTo('tr.ui.b', function() {
       stackingDistanceSlider.addEventListener(
           'input', this.onStackingDistanceChange_.bind(this));
 
+      const chromeLeft = Polymer.dom(this).querySelector('#chrome-left');
+
+      const chromeMid = Polymer.dom(this).querySelector('#chrome-mid');
+
+      const chromeRight = Polymer.dom(this).querySelector('#chrome-right');
+
       this.trackMouse_();
 
       this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_);