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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/extras/chrome/cc/picture_debugger.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/extras/chrome/cc/layer_view.html ('k') | tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.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 7
8 <link rel="import" href="/tracing/base/base64.html"> 8 <link rel="import" href="/tracing/base/base64.html">
9 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> 9 <link rel="import" href="/tracing/extras/chrome/cc/picture.html">
10 <link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> 10 <link rel="import" href="/tracing/ui/analysis/generic_object_view.html">
11 <link rel="import" href="/tracing/ui/base/drag_handle.html"> 11 <link rel="import" href="/tracing/ui/base/drag_handle.html">
12 <link rel="import" href="/tracing/ui/base/hotkey_controller.html"> 12 <link rel="import" href="/tracing/ui/base/hotkey_controller.html">
13 <link rel="import" href="/tracing/ui/base/info_bar.html"> 13 <link rel="import" href="/tracing/ui/base/info_bar.html">
14 <link rel="import" href="/tracing/ui/base/list_view.html"> 14 <link rel="import" href="/tracing/ui/base/list_view.html">
15 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> 15 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html">
16 <link rel="import" href="/tracing/ui/base/overlay.html"> 16 <link rel="import" href="/tracing/ui/base/overlay.html">
17 <link rel="import" href="/tracing/ui/base/utils.html"> 17 <link rel="import" href="/tracing/ui/base/utils.html">
18 <link rel="import" 18 <link rel="import"
19 href="/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html"> 19 href="/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html">
20 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view.htm l"> 20 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view.htm l">
21 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html "> 21 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html ">
22 22
23 <template id="tr-ui-e-chrome-cc-picture-debugger-template"> 23 <template id="tr-ui-e-chrome-cc-picture-debugger-template">
24 <style>
25 * /deep/ tr-ui-e-chrome-cc-picture-debugger {
26 flex: 1 1 auto;
27 flex-direction: row;
28 display: flex;
29 }
30
31 * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-a-generic-object-view {
32 flex-direction: column;
33 display: flex;
34 width: 400px;
35 }
36
37 * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel {
38 flex-direction: column;
39 display: flex;
40 min-width: 300px;
41 }
42
43 * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel > picture-info {
44 flex: 0 0 auto;
45 padding-top: 2px;
46 }
47
48 * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel >
49 picture-info .title {
50 font-weight: bold;
51 margin-left: 5px;
52 margin-right: 5px;
53 }
54
55 * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-b-drag-handle {
56 flex: 0 0 auto;
57 }
58
59 * /deep/ tr-ui-e-chrome-cc-picture-debugger .filename {
60 -webkit-user-select: text;
61 margin-left: 5px;
62 }
63
64 * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel {
65 flex: 1 1 auto;
66 flex-direction: column;
67 display: flex;
68 }
69
70 * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel >
71 tr-ui-e-chrome-cc-picture-ops-chart-view {
72 min-height: 150px;
73 min-width : 0;
74 overflow-x: auto;
75 overflow-y: hidden;
76 }
77
78 /*************************************************/
79
80 * /deep/ tr-ui-e-chrome-cc-picture-debugger raster-area {
81 background-color: #ddd;
82 min-height: 200px;
83 min-width: 200px;
84 overflow-y: auto;
85 padding-left: 5px;
86 }
87 </style>
88
89 <left-panel> 24 <left-panel>
90 <picture-info> 25 <picture-info>
91 <div> 26 <div>
92 <span class='title'>Skia Picture</span> 27 <span class='title'>Skia Picture</span>
93 <span class='size'></span> 28 <span class='size'></span>
94 </div> 29 </div>
95 <div> 30 <div>
96 <input class='filename' type='text' value='skpicture.skp' /> 31 <input class='filename' type='text' value='skpicture.skp' />
97 <button class='export'>Export</button> 32 <button class='export'>Export</button>
98 </div> 33 </div>
(...skipping 22 matching lines...) Expand all
121 56
122 PictureDebugger.prototype = { 57 PictureDebugger.prototype = {
123 __proto__: HTMLDivElement.prototype, 58 __proto__: HTMLDivElement.prototype,
124 59
125 decorate() { 60 decorate() {
126 const node = tr.ui.b.instantiateTemplate( 61 const node = tr.ui.b.instantiateTemplate(
127 '#tr-ui-e-chrome-cc-picture-debugger-template', THIS_DOC); 62 '#tr-ui-e-chrome-cc-picture-debugger-template', THIS_DOC);
128 63
129 Polymer.dom(this).appendChild(node); 64 Polymer.dom(this).appendChild(node);
130 65
66 this.style.display = 'flex';
67 this.style.flexGrow = 1;
68 this.style.flexShrink = 1;
69 this.style.flexBasis = 'auto';
70 this.style.flexDirection = 'row';
71
72 const title = this.querySelector('.title');
73 title.style.fontWeight = 'bold';
74 title.style.marginLeft = '5px';
75 title.style.marginRight = '5px';
76
131 this.pictureAsImageData_ = undefined; 77 this.pictureAsImageData_ = undefined;
132 this.showOverdraw_ = false; 78 this.showOverdraw_ = false;
133 this.zoomScaleValue_ = 1; 79 this.zoomScaleValue_ = 1;
134 80
135 this.sizeInfo_ = Polymer.dom(this).querySelector('.size'); 81 this.sizeInfo_ = Polymer.dom(this).querySelector('.size');
136 this.rasterArea_ = Polymer.dom(this).querySelector('raster-area'); 82 this.rasterArea_ = Polymer.dom(this).querySelector('raster-area');
83 this.rasterArea_.style.backgroundColor = '#ddd';
84 this.rasterArea_.style.minHeight = '200px';
85 this.rasterArea_.style.minWidth = '200px';
86 this.rasterArea_.style.overflowY = 'auto';
87 this.rasterArea_.style.paddingLeft = '5px';
137 this.rasterCanvas_ = Polymer.dom(this.rasterArea_) 88 this.rasterCanvas_ = Polymer.dom(this.rasterArea_)
138 .querySelector('canvas'); 89 .querySelector('canvas');
139 this.rasterCtx_ = this.rasterCanvas_.getContext('2d'); 90 this.rasterCtx_ = this.rasterCanvas_.getContext('2d');
140 91
141 this.filename_ = Polymer.dom(this).querySelector('.filename'); 92 this.filename_ = Polymer.dom(this).querySelector('.filename');
93 this.filename_.style.userSelect = 'text';
94 this.filename_.style.marginLeft = '5px';
142 95
143 this.drawOpsChartSummaryView_ = 96 this.drawOpsChartSummaryView_ =
144 new tr.ui.e.chrome.cc.PictureOpsChartSummaryView(); 97 new tr.ui.e.chrome.cc.PictureOpsChartSummaryView();
145 this.drawOpsChartView_ = new tr.ui.e.chrome.cc.PictureOpsChartView(); 98 this.drawOpsChartView_ = new tr.ui.e.chrome.cc.PictureOpsChartView();
146 this.drawOpsChartView_.addEventListener( 99 this.drawOpsChartView_.addEventListener(
147 'selection-changed', this.onChartBarClicked_.bind(this)); 100 'selection-changed', this.onChartBarClicked_.bind(this));
148 101
149 this.exportButton_ = Polymer.dom(this).querySelector('.export'); 102 this.exportButton_ = Polymer.dom(this).querySelector('.export');
150 this.exportButton_.addEventListener( 103 this.exportButton_.addEventListener(
151 'click', this.onSaveAsSkPictureClicked_.bind(this)); 104 'click', this.onSaveAsSkPictureClicked_.bind(this));
152 105
153 this.trackMouse_(); 106 this.trackMouse_();
154 107
155 const overdrawCheckbox = tr.ui.b.createCheckBox( 108 const overdrawCheckbox = tr.ui.b.createCheckBox(
156 this, 'showOverdraw', 109 this, 'showOverdraw',
157 'pictureView.showOverdraw', false, 110 'pictureView.showOverdraw', false,
158 'Show overdraw'); 111 'Show overdraw');
159 112
160 const chartCheckbox = tr.ui.b.createCheckBox( 113 const chartCheckbox = tr.ui.b.createCheckBox(
161 this, 'showSummaryChart', 114 this, 'showSummaryChart',
162 'pictureView.showSummaryChart', false, 115 'pictureView.showSummaryChart', false,
163 'Show timing summary'); 116 'Show timing summary');
164 117
165 const pictureInfo = Polymer.dom(this).querySelector('picture-info'); 118 const pictureInfo = Polymer.dom(this).querySelector('picture-info');
119 pictureInfo.style.flexGrow = 0;
120 pictureInfo.style.flexShrink = 0;
121 pictureInfo.style.flexBasis = 'auto';
122 pictureInfo.style.paddingTop = '2px';
166 Polymer.dom(pictureInfo).appendChild(overdrawCheckbox); 123 Polymer.dom(pictureInfo).appendChild(overdrawCheckbox);
167 Polymer.dom(pictureInfo).appendChild(chartCheckbox); 124 Polymer.dom(pictureInfo).appendChild(chartCheckbox);
168 125
169 this.drawOpsView_ = new tr.ui.e.chrome.cc.PictureOpsListView(); 126 this.drawOpsView_ = new tr.ui.e.chrome.cc.PictureOpsListView();
170 this.drawOpsView_.addEventListener( 127 this.drawOpsView_.addEventListener(
171 'selection-changed', this.onChangeDrawOps_.bind(this)); 128 'selection-changed', this.onChangeDrawOps_.bind(this));
172 129
173 const leftPanel = Polymer.dom(this).querySelector('left-panel'); 130 const leftPanel = Polymer.dom(this).querySelector('left-panel');
131 leftPanel.style.flexDirection = 'column';
132 leftPanel.style.display = 'flex';
133 leftPanel.style.minWidth = '300px';
174 Polymer.dom(leftPanel).appendChild(this.drawOpsChartSummaryView_); 134 Polymer.dom(leftPanel).appendChild(this.drawOpsChartSummaryView_);
175 Polymer.dom(leftPanel).appendChild(this.drawOpsView_); 135 Polymer.dom(leftPanel).appendChild(this.drawOpsView_);
176 136
177 const middleDragHandle = document.createElement('tr-ui-b-drag-handle'); 137 const middleDragHandle = document.createElement('tr-ui-b-drag-handle');
138 middleDragHandle.style.flexGrow = 0;
139 middleDragHandle.style.flexShrink = 0;
140 middleDragHandle.style.flexBasis = 'auto';
178 middleDragHandle.horizontal = false; 141 middleDragHandle.horizontal = false;
179 middleDragHandle.target = leftPanel; 142 middleDragHandle.target = leftPanel;
180 143
181 const rightPanel = Polymer.dom(this).querySelector('right-panel'); 144 const rightPanel = Polymer.dom(this).querySelector('right-panel');
182 rightPanel.replaceChild( 145 rightPanel.style.flexGrow = 1;
183 this.drawOpsChartView_, Polymer.dom(rightPanel) 146 rightPanel.style.flexShrink = 1;
184 .querySelector('tr-ui-e-chrome-cc-picture-ops-chart-view')); 147 rightPanel.style.flexBasis = 'auto';
148 rightPanel.style.flexDirection = 'column';
149 rightPanel.style.display = 'flex';
150 const chartView = Polymer.dom(rightPanel).querySelector(
151 'tr-ui-e-chrome-cc-picture-ops-chart-view');
152 chartView.style.minHeight = '150px';
153 chartView.style.minWidth = 0;
154 chartView.style.overflowX = 'auto';
155 chartView.style.overflowY = 'hidden';
156 rightPanel.replaceChild(this.drawOpsChartView_, chartView);
185 157
186 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); 158 this.infoBar_ = document.createElement('tr-ui-b-info-bar');
187 Polymer.dom(this.rasterArea_).appendChild(this.infoBar_); 159 Polymer.dom(this.rasterArea_).appendChild(this.infoBar_);
188 160
189 Polymer.dom(this).insertBefore(middleDragHandle, rightPanel); 161 Polymer.dom(this).insertBefore(middleDragHandle, rightPanel);
190 162
191 this.picture_ = undefined; 163 this.picture_ = undefined;
192 164
193 const hkc = document.createElement('tv-ui-b-hotkey-controller'); 165 const hkc = document.createElement('tv-ui-b-hotkey-controller');
194 hkc.addHotKey(new tr.ui.b.HotKey({ 166 hkc.addHotKey(new tr.ui.b.HotKey({
(...skipping 292 matching lines...) Expand 10 before | Expand all | Expand 10 after
487 y: e.clientY - this.rasterArea_.offsetTop 459 y: e.clientY - this.rasterArea_.offsetTop
488 }; 460 };
489 } 461 }
490 }; 462 };
491 463
492 return { 464 return {
493 PictureDebugger, 465 PictureDebugger,
494 }; 466 };
495 }); 467 });
496 </script> 468 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/extras/chrome/cc/layer_view.html ('k') | tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698