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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/extras/chrome/cc/display_item_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/base/tool_button.css ('k') | tracing/tracing/ui/extras/chrome/cc/display_item_list_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) 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/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" href="/tracing/ui/extras/chrome/cc/display_item_list_item.htm l"> 18 <link rel="import" href="/tracing/ui/extras/chrome/cc/display_item_list_item.htm l">
19 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html "> 19 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html ">
20 20
21 <template id="tr-ui-e-chrome-cc-display-item-debugger-template"> 21 <template id="tr-ui-e-chrome-cc-display-item-debugger-template">
22 <style>
23 * /deep/ tr-ui-e-chrome-cc-display-item-debugger {
24 flex: 1 1 auto;
25 display: flex;
26 }
27
28 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel {
29 flex-direction: column;
30 display: flex;
31 min-width: 300px;
32 overflow-y: auto;
33 }
34
35 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel >
36 display-item-info {
37 flex: 1 1 auto;
38 padding-top: 2px;
39 }
40
41 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel >
42 display-item-info .title {
43 font-weight: bold;
44 margin-left: 5px;
45 margin-right: 5px;
46 }
47
48 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel >
49 display-item-info .export {
50 margin: 5px;
51 }
52
53 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > tr-ui-b-drag-handle {
54 flex: 0 0 auto;
55 }
56
57 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel {
58 flex: 1 1 auto;
59 display: flex;
60 }
61
62 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel >
63 display-item-info > header {
64 border-bottom: 1px solid #555;
65 }
66
67 /*************************************************/
68
69 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel >
70 tr-ui-e-chrome-cc-picture-ops-list-view.hasPictureOps {
71 display: block;
72 }
73
74 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel >
75 tr-ui-b-drag-handle.hasPictureOps {
76 display: block;
77 }
78
79 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel >
80 tr-ui-e-chrome-cc-picture-ops-list-view {
81 display: none;
82 overflow-y: auto;
83 }
84
85 * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel >
86 tr-ui-b-drag-handle {
87 display: none;
88 }
89
90 * /deep/ tr-ui-e-chrome-cc-display-item-debugger raster-area {
91 flex: 1 1 auto;
92 background-color: #ddd;
93 min-height: 200px;
94 min-width: 200px;
95 overflow-y: auto;
96 padding-left: 5px;
97 }
98 </style>
99
100 <left-panel> 22 <left-panel>
101 <display-item-info> 23 <display-item-info>
102 <header> 24 <header>
103 <span class='title'>Display Item List</span> 25 <span class='title'>Display Item List</span>
104 <span class='size'></span> 26 <span class='size'></span>
105 <div class='export'> 27 <div class='export'>
106 <input class='dlfilename' type='text' value='displayitemlist.json' /> 28 <input class='dlfilename' type='text' value='displayitemlist.json' />
107 <button class='dlexport'>Export display item list</button> 29 <button class='dlexport'>Export display item list</button>
108 </div> 30 </div>
109 <div class='export'> 31 <div class='export'>
(...skipping 24 matching lines...) Expand all
134 'tr-ui-e-chrome-cc-display-item-debugger'); 56 'tr-ui-e-chrome-cc-display-item-debugger');
135 57
136 DisplayItemDebugger.prototype = { 58 DisplayItemDebugger.prototype = {
137 __proto__: HTMLDivElement.prototype, 59 __proto__: HTMLDivElement.prototype,
138 60
139 decorate() { 61 decorate() {
140 const node = tr.ui.b.instantiateTemplate( 62 const node = tr.ui.b.instantiateTemplate(
141 '#tr-ui-e-chrome-cc-display-item-debugger-template', THIS_DOC); 63 '#tr-ui-e-chrome-cc-display-item-debugger-template', THIS_DOC);
142 64
143 Polymer.dom(this).appendChild(node); 65 Polymer.dom(this).appendChild(node);
66 this.style.flexGrow = 1;
67 this.style.flexShrink = 1;
68 this.style.flexBasis = 'auto';
69 this.style.display = 'flex';
144 70
145 this.pictureAsImageData_ = undefined; 71 this.pictureAsImageData_ = undefined;
146 this.zoomScaleValue_ = 1; 72 this.zoomScaleValue_ = 1;
147 73
148 this.sizeInfo_ = Polymer.dom(this).querySelector('.size'); 74 this.sizeInfo_ = Polymer.dom(this).querySelector('.size');
149 this.rasterArea_ = Polymer.dom(this).querySelector('raster-area'); 75 this.rasterArea_ = Polymer.dom(this).querySelector('raster-area');
76 this.rasterArea_.style.flexGrow = 1;
77 this.rasterArea_.style.flexShrink = 1;
78 this.rasterArea_.style.flexBasis = 'auto';
79 this.rasterArea_.style.backgroundColor = '#ddd';
80 this.rasterArea_.style.minHeight = '200px';
81 this.rasterArea_.style.minWidth = '200px';
82 this.rasterArea_.style.overflowY = 'auto';
83 this.rasterArea_.style.paddingLeft = '5px';
150 this.rasterCanvas_ = 84 this.rasterCanvas_ =
151 Polymer.dom(this.rasterArea_).querySelector('canvas'); 85 Polymer.dom(this.rasterArea_).querySelector('canvas');
152 this.rasterCtx_ = this.rasterCanvas_.getContext('2d'); 86 this.rasterCtx_ = this.rasterCanvas_.getContext('2d');
153 87
154 this.trackMouse_(); 88 this.trackMouse_();
155 89
156 this.displayItemInfo_ = 90 this.displayItemInfo_ =
157 Polymer.dom(this).querySelector('display-item-info'); 91 Polymer.dom(this).querySelector('display-item-info');
158 this.displayItemInfo_.addEventListener( 92 this.displayItemInfo_.addEventListener(
159 'click', this.onDisplayItemInfoClick_.bind(this), false); 93 'click', this.onDisplayItemInfoClick_.bind(this), false);
160 94
161 this.displayItemListView_ = new tr.ui.b.ListView(); 95 this.displayItemListView_ = new tr.ui.b.ListView();
162 this.displayItemListView_.addEventListener('selection-changed', 96 this.displayItemListView_.addEventListener('selection-changed',
163 this.onDisplayItemListSelection_.bind(this)); 97 this.onDisplayItemListSelection_.bind(this));
164 Polymer.dom(this.displayItemInfo_).appendChild(this.displayItemListView_); 98 Polymer.dom(this.displayItemInfo_).appendChild(this.displayItemListView_);
165 99
166 this.displayListFilename_ = 100 this.displayListFilename_ =
167 Polymer.dom(this).querySelector('.dlfilename'); 101 Polymer.dom(this).querySelector('.dlfilename');
168 this.displayListExportButton_ = 102 this.displayListExportButton_ =
169 Polymer.dom(this).querySelector('.dlexport'); 103 Polymer.dom(this).querySelector('.dlexport');
170 this.displayListExportButton_.addEventListener( 104 this.displayListExportButton_.addEventListener(
171 'click', this.onExportDisplayListClicked_.bind(this)); 105 'click', this.onExportDisplayListClicked_.bind(this));
172 106
173 this.skpFilename_ = Polymer.dom(this).querySelector('.skpfilename'); 107 this.skpFilename_ = Polymer.dom(this).querySelector('.skpfilename');
174 this.skpExportButton_ = Polymer.dom(this).querySelector('.skpexport'); 108 this.skpExportButton_ = Polymer.dom(this).querySelector('.skpexport');
175 this.skpExportButton_.addEventListener( 109 this.skpExportButton_.addEventListener(
176 'click', this.onExportSkPictureClicked_.bind(this)); 110 'click', this.onExportSkPictureClicked_.bind(this));
177 111
178 const leftPanel = Polymer.dom(this).querySelector('left-panel'); 112 const leftPanel = Polymer.dom(this).querySelector('left-panel');
113 leftPanel.style.display = 'flex';
114 leftPanel.style.flexDirection = 'column';
115 leftPanel.style.minWidth = '300px';
116 leftPanel.style.overflowY = 'auto';
117
118 leftPanel.children[0].paddingTop = '2px';
119 leftPanel.children[0].flexGrow = 1;
120 leftPanel.children[0].flexShrink = 1;
121 leftPanel.children[0].flexBasis = 'auto';
122
123 leftPanel.children[0].children[0].style.borderBottom = '1px solid #555';
124
125 const leftPanelTitle = leftPanel.querySelector('.title');
126 leftPanelTitle.style.fontWeight = 'bold';
127 leftPanelTitle.style.marginLeft = '5px';
128 leftPanelTitle.style.marginright = '5px';
129
130 for (const div of leftPanel.querySelectorAll('.export')) {
131 div.style.margin = '5px';
132 }
179 133
180 const middleDragHandle = document.createElement('tr-ui-b-drag-handle'); 134 const middleDragHandle = document.createElement('tr-ui-b-drag-handle');
135 middleDragHandle.style.flexGrow = 0;
136 middleDragHandle.style.flexShrink = 0;
137 middleDragHandle.style.flexBasis = 'auto';
181 middleDragHandle.horizontal = false; 138 middleDragHandle.horizontal = false;
182 middleDragHandle.target = leftPanel; 139 middleDragHandle.target = leftPanel;
183 140
184 const rightPanel = Polymer.dom(this).querySelector('right-panel'); 141 const rightPanel = Polymer.dom(this).querySelector('right-panel');
142 rightPanel.style.display = 'flex';
143 rightPanel.style.flexGrow = 1;
144 rightPanel.style.flexShrink = 1;
145 rightPanel.style.flexBasis = 'auto';
185 146
186 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); 147 this.infoBar_ = document.createElement('tr-ui-b-info-bar');
187 Polymer.dom(this.rasterArea_).insertBefore( 148 Polymer.dom(this.rasterArea_).insertBefore(
188 this.infoBar_, this.rasterCanvas_); 149 this.infoBar_, this.rasterCanvas_);
189 150
190 Polymer.dom(this).insertBefore(middleDragHandle, rightPanel); 151 Polymer.dom(this).insertBefore(middleDragHandle, rightPanel);
191 152
192 this.picture_ = undefined; 153 this.picture_ = undefined;
193 154
194 this.pictureOpsListView_ = new tr.ui.e.chrome.cc.PictureOpsListView(); 155 this.pictureOpsListView_ = new tr.ui.e.chrome.cc.PictureOpsListView();
156 this.pictureOpsListView_.style.overflowY = 'auto';
195 Polymer.dom(rightPanel).insertBefore( 157 Polymer.dom(rightPanel).insertBefore(
196 this.pictureOpsListView_, this.rasterArea_); 158 this.pictureOpsListView_, this.rasterArea_);
197 159
198 this.pictureOpsListDragHandle_ = 160 this.pictureOpsListDragHandle_ =
199 document.createElement('tr-ui-b-drag-handle'); 161 document.createElement('tr-ui-b-drag-handle');
200 this.pictureOpsListDragHandle_.horizontal = false; 162 this.pictureOpsListDragHandle_.horizontal = false;
201 this.pictureOpsListDragHandle_.target = this.pictureOpsListView_; 163 this.pictureOpsListDragHandle_.target = this.pictureOpsListView_;
202 Polymer.dom(rightPanel).insertBefore( 164 Polymer.dom(rightPanel).insertBefore(
203 this.pictureOpsListDragHandle_, this.rasterArea_); 165 this.pictureOpsListDragHandle_, this.rasterArea_);
204 }, 166 },
(...skipping 151 matching lines...) Expand 10 before | Expand all | Expand 10 after
356 onDisplayItemInfoClick_(e) { 318 onDisplayItemInfoClick_(e) {
357 if (e && e.target === this.displayItemInfo_) { 319 if (e && e.target === this.displayItemInfo_) {
358 this.displayItemListView_.selectedElement = undefined; 320 this.displayItemListView_.selectedElement = undefined;
359 } 321 }
360 }, 322 },
361 323
362 updateDrawOpsList_(showOpsList) { 324 updateDrawOpsList_(showOpsList) {
363 if (showOpsList) { 325 if (showOpsList) {
364 this.pictureOpsListView_.picture = this.picture_; 326 this.pictureOpsListView_.picture = this.picture_;
365 if (this.pictureOpsListView_.numOps > 0) { 327 if (this.pictureOpsListView_.numOps > 0) {
366 Polymer.dom(this.pictureOpsListView_).classList.add('hasPictureOps'); 328 this.pictureOpsListView_.style.display = 'block';
367 Polymer.dom(this.pictureOpsListDragHandle_).classList.add( 329 this.pictureOpsListDragHandle_.style.display = 'block';
368 'hasPictureOps');
369 } 330 }
370 } else { 331 } else {
371 Polymer.dom(this.pictureOpsListView_).classList.remove('hasPictureOps'); 332 this.pictureOpsListView_.style.display = 'none';
372 Polymer.dom(this.pictureOpsListDragHandle_).classList.remove( 333 this.pictureOpsListDragHandle_.style.display = 'none';
373 'hasPictureOps');
374 } 334 }
375 }, 335 },
376 336
377 trackMouse_() { 337 trackMouse_() {
378 this.mouseModeSelector_ = document.createElement( 338 this.mouseModeSelector_ = document.createElement(
379 'tr-ui-b-mouse-mode-selector'); 339 'tr-ui-b-mouse-mode-selector');
380 this.mouseModeSelector_.targetElement = this.rasterArea_; 340 this.mouseModeSelector_.targetElement = this.rasterArea_;
381 Polymer.dom(this.rasterArea_).appendChild(this.mouseModeSelector_); 341 Polymer.dom(this.rasterArea_).appendChild(this.mouseModeSelector_);
382 342
383 this.mouseModeSelector_.supportedModeMask = 343 this.mouseModeSelector_.supportedModeMask =
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
467 const rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); 427 const rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData());
468 this.saveFile_(this.skpFilename_.value, rawData); 428 this.saveFile_(this.skpFilename_.value, rawData);
469 } 429 }
470 }; 430 };
471 431
472 return { 432 return {
473 DisplayItemDebugger, 433 DisplayItemDebugger,
474 }; 434 };
475 }); 435 });
476 </script> 436 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/base/tool_button.css ('k') | tracing/tracing/ui/extras/chrome/cc/display_item_list_view.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698