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_ALIG
|
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'); |