Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(109)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/base/quad_stack_view.html

Issue 3017523002: Fix uses of /deep/ in trace viewer. (Closed)
Patch Set: fix tests Created 3 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « tracing/tracing/ui/base/list_view.html ('k') | tracing/tracing/ui/base/tool_button.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2013 The Chromium Authors. All rights reserved. 3 Copyright (c) 2013 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 <link rel="import" href="/tracing/base/math/bbox2.html"> 7 <link rel="import" href="/tracing/base/math/bbox2.html">
8 <link rel="import" href="/tracing/base/math/math.html"> 8 <link rel="import" href="/tracing/base/math/math.html">
9 <link rel="import" href="/tracing/base/math/quad.html"> 9 <link rel="import" href="/tracing/base/math/quad.html">
10 <link rel="import" href="/tracing/base/math/rect.html"> 10 <link rel="import" href="/tracing/base/math/rect.html">
11 <link rel="import" href="/tracing/base/raf.html"> 11 <link rel="import" href="/tracing/base/raf.html">
12 <link rel="import" href="/tracing/base/settings.html"> 12 <link rel="import" href="/tracing/base/settings.html">
13 <link rel="import" href="/tracing/ui/base/camera.html"> 13 <link rel="import" href="/tracing/ui/base/camera.html">
14 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> 14 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html">
15 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> 15 <link rel="import" href="/tracing/ui/base/mouse_tracker.html">
16 <link rel="import" href="/tracing/ui/base/utils.html"> 16 <link rel="import" href="/tracing/ui/base/utils.html">
17 17
18 <style> 18 <template id="quad-stack-view-template">
19 * /deep/ quad-stack-view { 19 <style>
20 display: block; 20 #chrome-left {
21 float: left; 21 background-image: url('../images/chrome-left.png');
22 height: 100%; 22 display: none;
23 overflow: hidden; 23 }
24 position: relative; /* For the absolute positioned mouse-mode-selector */ 24 #chrome-mid {
25 width: 100%; 25 background-image: url('../images/chrome-mid.png');
26 } 26 display: none;
27 }
28 #chrome-right {
29 background-image: url('../images/chrome-right.png');
30 display: none;
31 }
32 </style>
27 33
28 * /deep/ quad-stack-view > #header {
29 position: absolute;
30 font-size: 70%;
31 top: 10px;
32 left: 10px;
33 width: 800px;
34 }
35 * /deep/ quad-stack-view > #stacking-distance-slider {
36 position: absolute;
37 font-size: 70%;
38 top: 10px;
39 right: 10px;
40 }
41
42 * /deep/ quad-stack-view > #chrome-left {
43 background-image: url('../images/chrome-left.png');
44 display: none;
45 }
46
47 * /deep/ quad-stack-view > #chrome-mid {
48 background-image: url('../images/chrome-mid.png');
49 display: none;
50 }
51
52 * /deep/ quad-stack-view > #chrome-right {
53 background-image: url('../images/chrome-right.png');
54 display: none;
55 }
56 </style>
57
58 <template id='quad-stack-view-template'>
59 <div id="header"></div> 34 <div id="header"></div>
60 <input id="stacking-distance-slider" type="range" min=1 max=400 step=1> 35 <input id="stacking-distance-slider" type="range" min=1 max=400 step=1>
61 </input> 36 </input>
62 <canvas id='canvas'></canvas> 37 <canvas id="canvas"></canvas>
63 <img id='chrome-left'/> 38 <img id="chrome-left"/>
64 <img id='chrome-mid'/> 39 <img id="chrome-mid"/>
65 <img id='chrome-right'/> 40 <img id="chrome-right"/>
66 </template> 41 </template>
67 42
68 <script> 43 <script>
69 'use strict'; 44 'use strict';
70 45
71 /** 46 /**
72 * @fileoverview QuadStackView controls the content and viewing angle a 47 * @fileoverview QuadStackView controls the content and viewing angle a
73 * QuadStack. 48 * QuadStack.
74 */ 49 */
75 tr.exportTo('tr.ui.b', function() { 50 tr.exportTo('tr.ui.b', function() {
(...skipping 293 matching lines...) Expand 10 before | Expand all | Expand 10 after
369 /** 344 /**
370 * @constructor 345 * @constructor
371 */ 346 */
372 const QuadStackView = tr.ui.b.define('quad-stack-view'); 347 const QuadStackView = tr.ui.b.define('quad-stack-view');
373 348
374 QuadStackView.prototype = { 349 QuadStackView.prototype = {
375 __proto__: HTMLDivElement.prototype, 350 __proto__: HTMLDivElement.prototype,
376 351
377 decorate() { 352 decorate() {
378 this.className = 'quad-stack-view'; 353 this.className = 'quad-stack-view';
354 this.style.display = 'block';
355 this.style.float = 'left';
356 this.style.height = '100%';
357 this.style.overflow = 'hidden';
358 this.style.position = 'relative';
359 this.style.width = '100%';
379 360
380 const node = tr.ui.b.instantiateTemplate('#quad-stack-view-template', 361 const node = tr.ui.b.instantiateTemplate('#quad-stack-view-template',
381 THIS_DOC); 362 THIS_DOC);
382 Polymer.dom(this).appendChild(node); 363 Polymer.dom(this).appendChild(node);
383 this.updateHeaderVisibility_(); 364 this.updateHeaderVisibility_();
365 const header = Polymer.dom(this).querySelector('#header');
366 header.style.position = 'absolute';
367 header.style.fontSize = '70%';
368 header.style.top = '10px';
369 header.style.left = '10px';
370 header.style.width = '800px';
371
384 this.canvas_ = Polymer.dom(this).querySelector('#canvas'); 372 this.canvas_ = Polymer.dom(this).querySelector('#canvas');
385 this.chromeImages_ = { 373 this.chromeImages_ = {
386 left: Polymer.dom(this).querySelector('#chrome-left'), 374 left: Polymer.dom(this).querySelector('#chrome-left'),
387 mid: Polymer.dom(this).querySelector('#chrome-mid'), 375 mid: Polymer.dom(this).querySelector('#chrome-mid'),
388 right: Polymer.dom(this).querySelector('#chrome-right') 376 right: Polymer.dom(this).querySelector('#chrome-right')
389 }; 377 };
390 378
391 const stackingDistanceSlider = Polymer.dom(this).querySelector( 379 const stackingDistanceSlider = Polymer.dom(this).querySelector(
392 '#stacking-distance-slider'); 380 '#stacking-distance-slider');
381 stackingDistanceSlider.style.position = 'absolute';
382 stackingDistanceSlider.style.fontSize = '70%';
383 stackingDistanceSlider.style.top = '10px';
384 stackingDistanceSlider.style.right = '10px';
393 stackingDistanceSlider.value = tr.b.Settings.get( 385 stackingDistanceSlider.value = tr.b.Settings.get(
394 'quadStackView.stackingDistance', 45); 386 'quadStackView.stackingDistance', 45);
395 stackingDistanceSlider.addEventListener( 387 stackingDistanceSlider.addEventListener(
396 'change', this.onStackingDistanceChange_.bind(this)); 388 'change', this.onStackingDistanceChange_.bind(this));
397 stackingDistanceSlider.addEventListener( 389 stackingDistanceSlider.addEventListener(
398 'input', this.onStackingDistanceChange_.bind(this)); 390 'input', this.onStackingDistanceChange_.bind(this));
399 391
392 const chromeLeft = Polymer.dom(this).querySelector('#chrome-left');
393
394 const chromeMid = Polymer.dom(this).querySelector('#chrome-mid');
395
396 const chromeRight = Polymer.dom(this).querySelector('#chrome-right');
397
400 this.trackMouse_(); 398 this.trackMouse_();
401 399
402 this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_); 400 this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_);
403 this.camera_.addEventListener('renderrequired', 401 this.camera_.addEventListener('renderrequired',
404 this.onRenderRequired_.bind(this)); 402 this.onRenderRequired_.bind(this));
405 this.cameraWasReset_ = false; 403 this.cameraWasReset_ = false;
406 this.camera_.canvas = this.canvas_; 404 this.camera_.canvas = this.canvas_;
407 405
408 this.viewportRect_ = tr.b.math.Rect.fromXYWH(0, 0, 0, 0); 406 this.viewportRect_ = tr.b.math.Rect.fromXYWH(0, 0, 0, 0);
409 407
(...skipping 273 matching lines...) Expand 10 before | Expand all | Expand 10 after
683 e.quads = res; 681 e.quads = res;
684 this.dispatchEvent(e); 682 this.dispatchEvent(e);
685 } 683 }
686 }; 684 };
687 685
688 return { 686 return {
689 QuadStackView, 687 QuadStackView,
690 }; 688 };
691 }); 689 });
692 </script> 690 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/base/list_view.html ('k') | tracing/tracing/ui/base/tool_button.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698