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_); |