OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2015 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2015 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 | 7 |
8 <link rel="import" href="/tracing/base/color.html"> | 8 <link rel="import" href="/tracing/base/color.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/range.html"> | 10 <link rel="import" href="/tracing/base/math/range.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/unit_scale.html"> | 12 <link rel="import" href="/tracing/base/unit_scale.html"> |
13 <link rel="import" href="/tracing/extras/chrome/cc/debug_colors.html"> | 13 <link rel="import" href="/tracing/extras/chrome/cc/debug_colors.html"> |
14 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> | 14 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> |
15 <link rel="import" href="/tracing/extras/chrome/cc/render_pass.html"> | 15 <link rel="import" href="/tracing/extras/chrome/cc/render_pass.html"> |
16 <link rel="import" href="/tracing/extras/chrome/cc/tile.html"> | 16 <link rel="import" href="/tracing/extras/chrome/cc/tile.html"> |
17 <link rel="import" href="/tracing/extras/chrome/cc/util.html"> | 17 <link rel="import" href="/tracing/extras/chrome/cc/util.html"> |
18 <link rel="import" href="/tracing/model/event_set.html"> | 18 <link rel="import" href="/tracing/model/event_set.html"> |
19 <link rel="import" href="/tracing/ui/base/info_bar.html"> | 19 <link rel="import" href="/tracing/ui/base/info_bar.html"> |
20 <link rel="import" href="/tracing/ui/base/quad_stack_view.html"> | 20 <link rel="import" href="/tracing/ui/base/quad_stack_view.html"> |
21 <link rel="import" href="/tracing/ui/base/utils.html"> | 21 <link rel="import" href="/tracing/ui/base/utils.html"> |
22 | 22 |
23 <style> | |
24 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view { | |
25 position: relative; | |
26 } | |
27 | |
28 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > top-controls { | |
29 flex: 0 0 auto; | |
30 background-image: -webkit-gradient(linear, | |
31 0 0, 100% 0, | |
32 from(#E5E5E5), | |
33 to(#D1D1D1)); | |
34 border-bottom: 1px solid #8e8e8e; | |
35 border-top: 1px solid white; | |
36 display: flex; | |
37 flex-flow: row wrap; | |
38 flex-direction: row; | |
39 font-size: 14px; | |
40 padding-left: 2px; | |
41 overflow: hidden; | |
42 } | |
43 | |
44 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > | |
45 top-controls input[type='checkbox'] { | |
46 vertical-align: -2px; | |
47 } | |
48 | |
49 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > .what-rasterized { | |
50 color: -webkit-link; | |
51 cursor: pointer; | |
52 text-decoration: underline; | |
53 position: absolute; | |
54 bottom: 10px; | |
55 left: 10px; | |
56 } | |
57 | |
58 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > #input-event { | |
59 background-image: url('./images/input-event.png'); | |
60 display: none; | |
61 } | |
62 </style> | |
63 | |
64 <template id='tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template'> | 23 <template id='tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template'> |
| 24 <style> |
| 25 #input-event { |
| 26 background-image: url('./images/input-event.png'); |
| 27 display: none; |
| 28 } |
| 29 </style> |
65 <img id='input-event'/> | 30 <img id='input-event'/> |
66 </template> | 31 </template> |
67 | 32 |
68 <script> | 33 <script> |
69 'use strict'; | 34 'use strict'; |
70 | 35 |
71 /** | 36 /** |
72 * @fileoverview Graphical view of LayerTreeImpl, with controls for | 37 * @fileoverview Graphical view of LayerTreeImpl, with controls for |
73 * type of layer content shown and info bar for content-loading warnings. | 38 * type of layer content shown and info bar for content-loading warnings. |
74 */ | 39 */ |
(...skipping 17 matching lines...) Expand all Loading... |
92 /** | 57 /** |
93 * @constructor | 58 * @constructor |
94 */ | 59 */ |
95 const LayerTreeQuadStackView = | 60 const LayerTreeQuadStackView = |
96 tr.ui.b.define('tr-ui-e-chrome-cc-layer-tree-quad-stack-view'); | 61 tr.ui.b.define('tr-ui-e-chrome-cc-layer-tree-quad-stack-view'); |
97 | 62 |
98 LayerTreeQuadStackView.prototype = { | 63 LayerTreeQuadStackView.prototype = { |
99 __proto__: HTMLDivElement.prototype, | 64 __proto__: HTMLDivElement.prototype, |
100 | 65 |
101 decorate() { | 66 decorate() { |
| 67 this.style.flexGrow = 1; |
| 68 this.style.flexShrink = 1; |
| 69 this.style.flexBasis = '100%'; |
| 70 this.style.flexDirection = 'column'; |
| 71 this.style.minHeight = 0; |
| 72 this.style.display = 'flex'; |
| 73 this.style.width = '100%'; |
| 74 |
102 this.isRenderPassQuads_ = false; | 75 this.isRenderPassQuads_ = false; |
103 this.pictureAsImageData_ = {}; // Maps picture.guid to PictureAsImageData. | 76 this.pictureAsImageData_ = {}; // Maps picture.guid to PictureAsImageData. |
104 this.messages_ = []; | 77 this.messages_ = []; |
105 this.controls_ = document.createElement('top-controls'); | 78 this.controls_ = document.createElement('top-controls'); |
| 79 this.controls_.style.flexGrow = 0; |
| 80 this.controls_.style.flexShrink = 0; |
| 81 this.controls_.style.flexBasis = 'auto'; |
| 82 this.controls_.style.backgroundImage = |
| 83 '-webkit-gradient(linear, 0 0, 100% 0, from(#E5E5E5), to(#D1D1D1))'; |
| 84 this.controls_.style.borderBottom = '1px solid #8e8e8e'; |
| 85 this.controls_.style.borderTop = '1px solid white'; |
| 86 this.controls_.style.display = 'flex'; |
| 87 this.controls_.style.flexDirection = 'row'; |
| 88 this.controls_.style.flexWrap = 'wrap'; |
| 89 this.controls_.style.fontSize = '14px'; |
| 90 this.controls_.style.paddingLeft = '2px'; |
| 91 this.controls_.style.overflow = 'hidden'; |
106 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); | 92 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); |
107 this.quadStackView_ = new tr.ui.b.QuadStackView(); | 93 this.quadStackView_ = new tr.ui.b.QuadStackView(); |
108 this.quadStackView_.addEventListener( | 94 this.quadStackView_.addEventListener( |
109 'selectionchange', this.onQuadStackViewSelectionChange_.bind(this)); | 95 'selectionchange', this.onQuadStackViewSelectionChange_.bind(this)); |
110 this.extraHighlightsByLayerId_ = undefined; | 96 this.extraHighlightsByLayerId_ = undefined; |
111 this.inputEventImageData_ = undefined; | 97 this.inputEventImageData_ = undefined; |
112 | 98 |
113 const m = tr.ui.b.MOUSE_SELECTOR_MODE; | 99 const m = tr.ui.b.MOUSE_SELECTOR_MODE; |
114 const mms = this.quadStackView_.mouseModeSelector; | 100 const mms = this.quadStackView_.mouseModeSelector; |
115 mms.settingsKey = 'tr.e.cc.layerTreeQuadStackView.mouseModeSelector'; | 101 mms.settingsKey = 'tr.e.cc.layerTreeQuadStackView.mouseModeSelector'; |
(...skipping 1087 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1203 event.selection = new tr.model.EventSet(tasks); | 1189 event.selection = new tr.model.EventSet(tasks); |
1204 this.dispatchEvent(event); | 1190 this.dispatchEvent(event); |
1205 } | 1191 } |
1206 }; | 1192 }; |
1207 | 1193 |
1208 return { | 1194 return { |
1209 LayerTreeQuadStackView, | 1195 LayerTreeQuadStackView, |
1210 }; | 1196 }; |
1211 }); | 1197 }); |
1212 </script> | 1198 </script> |
OLD | NEW |