Fix uses of /deep/ in trace viewer.

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

Index: tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html
diff --git a/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html b/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html
index 4119b1c62bc44d94decfad482dbe82600e4a0034..0eedda75b28d011216fef31024ade3c72f0251fb 100644
--- a/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html
+++ b/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html
@@ -20,48 +20,13 @@ found in the LICENSE file.
 <link rel="import" href="/tracing/ui/base/quad_stack_view.html">
 <link rel="import" href="/tracing/ui/base/utils.html">
 
-<style>
-* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view {
-  position: relative;
-}
-
-* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > top-controls {
-  flex: 0 0 auto;
-  background-image: -webkit-gradient(linear,
-                                     0 0, 100% 0,
-                                     from(#E5E5E5),
-                                     to(#D1D1D1));
-  border-bottom: 1px solid #8e8e8e;
-  border-top: 1px solid white;
-  display: flex;
-  flex-flow: row wrap;
-  flex-direction: row;
-  font-size:  14px;
-  padding-left: 2px;
-  overflow: hidden;
-}
-
-* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view >
-      top-controls input[type='checkbox'] {
-  vertical-align: -2px;
-}
-
-* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > .what-rasterized {
-  color: -webkit-link;
-  cursor: pointer;
-  text-decoration: underline;
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-}
-
-* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > #input-event {
-  background-image: url('./images/input-event.png');
-  display: none;
-}
-</style>
-
 <template id='tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template'>
+  <style>
+  #input-event {
+    background-image: url('./images/input-event.png');
+    display: none;
+  }
+  </style>
   <img id='input-event'/>
 </template>
 
@@ -99,10 +64,31 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
     __proto__: HTMLDivElement.prototype,
 
     decorate() {
+      this.style.flexGrow = 1;
+      this.style.flexShrink = 1;
+      this.style.flexBasis = '100%';
+      this.style.flexDirection = 'column';
+      this.style.minHeight = 0;
+      this.style.display = 'flex';
+      this.style.width = '100%';
+
       this.isRenderPassQuads_ = false;
       this.pictureAsImageData_ = {}; // Maps picture.guid to PictureAsImageData.
       this.messages_ = [];
       this.controls_ = document.createElement('top-controls');
+      this.controls_.style.flexGrow = 0;
+      this.controls_.style.flexShrink = 0;
+      this.controls_.style.flexBasis = 'auto';
+      this.controls_.style.backgroundImage =
+        '-webkit-gradient(linear, 0 0, 100% 0, from(#E5E5E5), to(#D1D1D1))';
+      this.controls_.style.borderBottom = '1px solid #8e8e8e';
+      this.controls_.style.borderTop = '1px solid white';
+      this.controls_.style.display = 'flex';
+      this.controls_.style.flexDirection = 'row';
+      this.controls_.style.flexWrap = 'wrap';
+      this.controls_.style.fontSize = '14px';
+      this.controls_.style.paddingLeft = '2px';
+      this.controls_.style.overflow = 'hidden';
       this.infoBar_ = document.createElement('tr-ui-b-info-bar');
       this.quadStackView_ = new tr.ui.b.QuadStackView();
       this.quadStackView_.addEventListener(
@@ -154,6 +140,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Other layers/passes');
       showOtherLayersCheckbox.title =
           'When checked, show all layers, selected or not.';
+      showOtherLayersCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showOtherLayersCheckbox);
 
       const showInvalidationsCheckbox = tr.ui.b.createCheckBox(
@@ -162,6 +149,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Invalidations');
       showInvalidationsCheckbox.title =
           'When checked, compositing invalidations are highlighted in red';
+      showInvalidationsCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showInvalidationsCheckbox);
 
       const showUnrecordedRegionCheckbox = tr.ui.b.createCheckBox(
@@ -170,6 +158,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Unrecorded area');
       showUnrecordedRegionCheckbox.title =
           'When checked, unrecorded areas are highlighted in yellow';
+      showUnrecordedRegionCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showUnrecordedRegionCheckbox);
 
       const showBottlenecksCheckbox = tr.ui.b.createCheckBox(
@@ -178,6 +167,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Bottlenecks');
       showBottlenecksCheckbox.title =
           'When checked, scroll bottlenecks are highlighted';
+      showBottlenecksCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showBottlenecksCheckbox);
 
       const showLayoutRectsCheckbox = tr.ui.b.createCheckBox(
@@ -186,6 +176,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Layout rects');
       showLayoutRectsCheckbox.title =
           'When checked, shows rects for regions where layout happened';
+      showLayoutRectsCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showLayoutRectsCheckbox);
 
       const showContentsCheckbox = tr.ui.b.createCheckBox(
@@ -194,6 +185,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Contents');
       showContentsCheckbox.title =
           'When checked, show the rendered contents inside the layer outlines';
+      showContentsCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showContentsCheckbox);
 
       const showAnimationBoundsCheckbox = tr.ui.b.createCheckBox(
@@ -202,6 +194,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Animation Bounds');
       showAnimationBoundsCheckbox.title = 'When checked, show a border around' +
           ' a layer showing the extent of its animation.';
+      showAnimationBoundsCheckbox.style.verticalAlign = '-2px';

[fmeawad, 2017/09/27 20:51:24]

Can we move -2px into a const called VERTICAL_ALIGN_PX or something?

       Polymer.dom(this.controls_).appendChild(showAnimationBoundsCheckbox);
 
       const showInputEventsCheckbox = tr.ui.b.createCheckBox(
@@ -210,6 +203,7 @@ tr.exportTo('tr.ui.e.chrome.cc', function() {
           'Input events');
       showInputEventsCheckbox.title = 'When checked, input events are ' +
           'displayed as circles.';
+      showInputEventsCheckbox.style.verticalAlign = '-2px';
       Polymer.dom(this.controls_).appendChild(showInputEventsCheckbox);
 
       this.whatRasterizedLink_ = document.createElement('a');