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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/extras/chrome/cc/picture_ops_list_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/extras/chrome/cc/picture_ops_list_view.css ('k') | tracing/tracing/ui/extras/chrome/cc/picture_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="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view. css">
9
10 <link rel="import" href="/tracing/extras/chrome/cc/constants.html"> 8 <link rel="import" href="/tracing/extras/chrome/cc/constants.html">
11 <link rel="import" href="/tracing/ui/base/dom_helpers.html"> 9 <link rel="import" href="/tracing/ui/base/dom_helpers.html">
12 <link rel="import" href="/tracing/ui/base/list_view.html"> 10 <link rel="import" href="/tracing/ui/base/list_view.html">
13 <link rel="import" href="/tracing/ui/base/utils.html"> 11 <link rel="import" href="/tracing/ui/base/utils.html">
14 <link rel="import" href="/tracing/ui/extras/chrome/cc/selection.html"> 12 <link rel="import" href="/tracing/ui/extras/chrome/cc/selection.html">
15 13
16 <script> 14 <script>
17 'use strict'; 15 'use strict';
18 16
19 tr.exportTo('tr.ui.e.chrome.cc', function() { 17 tr.exportTo('tr.ui.e.chrome.cc', function() {
(...skipping 10 matching lines...) Expand all
30 /** 28 /**
31 * @constructor 29 * @constructor
32 */ 30 */
33 const PictureOpsListView = 31 const PictureOpsListView =
34 tr.ui.b.define('tr-ui-e-chrome-cc-picture-ops-list-view'); 32 tr.ui.b.define('tr-ui-e-chrome-cc-picture-ops-list-view');
35 33
36 PictureOpsListView.prototype = { 34 PictureOpsListView.prototype = {
37 __proto__: HTMLDivElement.prototype, 35 __proto__: HTMLDivElement.prototype,
38 36
39 decorate() { 37 decorate() {
38 this.style.flexDirection = 'column';
39 this.style.borderTop = '1px solid grey';
40 this.style.display = 'flex';
40 this.opsList_ = new tr.ui.b.ListView(); 41 this.opsList_ = new tr.ui.b.ListView();
42 this.opsList_.style.flexGrow = 1;
43 this.opsList_.style.flexShrink = 1;
44 this.opsList_.style.flexBasis = 'auto';
45 this.opsList_.style.overflow = 'auto';
41 Polymer.dom(this).appendChild(this.opsList_); 46 Polymer.dom(this).appendChild(this.opsList_);
42 47
43 this.selectedOp_ = undefined; 48 this.selectedOp_ = undefined;
44 this.selectedOpIndex_ = undefined; 49 this.selectedOpIndex_ = undefined;
45 this.opsList_.addEventListener( 50 this.opsList_.addEventListener(
46 'selection-changed', this.onSelectionChanged_.bind(this)); 51 'selection-changed', this.onSelectionChanged_.bind(this));
47 52
48 this.picture_ = undefined; 53 this.picture_ = undefined;
49 }, 54 },
50 55
(...skipping 21 matching lines...) Expand all
72 for (let i = 0; i < ops.length; i++) { 77 for (let i = 0; i < ops.length; i++) {
73 const op = ops[i]; 78 const op = ops[i];
74 const item = document.createElement('div'); 79 const item = document.createElement('div');
75 item.opIndex = op.opIndex; 80 item.opIndex = op.opIndex;
76 Polymer.dom(item).textContent = i + ') ' + op.cmd_string; 81 Polymer.dom(item).textContent = i + ') ' + op.cmd_string;
77 82
78 // Display the element info associated with the op, if available. 83 // Display the element info associated with the op, if available.
79 if (op.elementInfo.tag || op.elementInfo.id || op.elementInfo.class) { 84 if (op.elementInfo.tag || op.elementInfo.id || op.elementInfo.class) {
80 const elementInfo = document.createElement('span'); 85 const elementInfo = document.createElement('span');
81 Polymer.dom(elementInfo).classList.add('elementInfo'); 86 Polymer.dom(elementInfo).classList.add('elementInfo');
87 elementInfo.style.color = 'purple';
88 elementInfo.style.fontSize = 'small';
89 elementInfo.style.fontWeight = 'bold';
90 elementInfo.style.color = '#777';
82 const tag = op.elementInfo.tag ? op.elementInfo.tag : 'unknown'; 91 const tag = op.elementInfo.tag ? op.elementInfo.tag : 'unknown';
83 const id = op.elementInfo.id ? 'id=' + op.elementInfo.id : undefined; 92 const id = op.elementInfo.id ? 'id=' + op.elementInfo.id : undefined;
84 const className = op.elementInfo.class ? 'class=' + 93 const className = op.elementInfo.class ? 'class=' +
85 op.elementInfo.class : undefined; 94 op.elementInfo.class : undefined;
86 Polymer.dom(elementInfo).textContent = 95 Polymer.dom(elementInfo).textContent =
87 '<' + tag + (id ? ' ' : '') + 96 '<' + tag + (id ? ' ' : '') +
88 (id ? id : '') + (className ? ' ' : '') + 97 (id ? id : '') + (className ? ' ' : '') +
89 (className ? className : '') + '>'; 98 (className ? className : '') + '>';
90 Polymer.dom(item).appendChild(elementInfo); 99 Polymer.dom(item).appendChild(elementInfo);
91 } 100 }
92 101
93 // Display the Skia params. 102 // Display the Skia params.
94 // FIXME: now that we have structured data, we should format it. 103 // FIXME: now that we have structured data, we should format it.
95 // (https://github.com/google/trace-viewer/issues/782) 104 // (https://github.com/google/trace-viewer/issues/782)
96 if (op.info.length > 0) { 105 if (op.info.length > 0) {
97 const infoItem = document.createElement('div'); 106 const infoItem = document.createElement('div');
98 Polymer.dom(infoItem).textContent = JSON.stringify(op.info); 107 Polymer.dom(infoItem).textContent = JSON.stringify(op.info);
108 infoItem.style.fontSize = 'x-small';
109 infoItem.style.color = '#777';
99 Polymer.dom(item).appendChild(infoItem); 110 Polymer.dom(item).appendChild(infoItem);
100 } 111 }
101 112
102 // Display the op timing, if available. 113 // Display the op timing, if available.
103 if (op.cmd_time && op.cmd_time >= 0.0001) { 114 if (op.cmd_time && op.cmd_time >= 0.0001) {
104 const time = document.createElement('span'); 115 const time = document.createElement('span');
105 Polymer.dom(time).classList.add('time'); 116 Polymer.dom(time).classList.add('time');
106 const rounded = op.cmd_time.toFixed(4); 117 const rounded = op.cmd_time.toFixed(4);
107 Polymer.dom(time).textContent = '(' + rounded + 'ms)'; 118 Polymer.dom(time).textContent = '(' + rounded + 'ms)';
119 time.style.fontSize = 'x-small';
120 time.style.color = 'rgb(136, 0, 0)';
108 Polymer.dom(item).appendChild(time); 121 Polymer.dom(item).appendChild(time);
109 } 122 }
110 123
124 item.style.borderBottom = '1px solid #555';
125 item.style.fontSize = 'small';
126 item.style.fontWeight = 'bold';
127 item.style.paddingBottom = '5px';
128 item.style.paddingLeft = '5px';
129 item.style.cursor = 'pointer';
130
131 for (const child of item.children) {
132 child.style.fontWeight = 'normal';
133 child.style.marginLeft = '1em';
134 child.style.maxWidth = '300px';
135 }
136
111 Polymer.dom(this.opsList_).appendChild(item); 137 Polymer.dom(this.opsList_).appendChild(item);
112 } 138 }
113 }, 139 },
114 140
115 onSelectionChanged_(e) { 141 onSelectionChanged_(e) {
116 let beforeSelectedOp = true; 142 let beforeSelectedOp = true;
117 143
118 // Deselect on re-selection. 144 // Deselect on re-selection.
119 if (this.opsList_.selectedElement === this.selectedOp_) { 145 if (this.opsList_.selectedElement === this.selectedOp_) {
120 this.opsList_.selectedElement = undefined; 146 this.opsList_.selectedElement = undefined;
121 beforeSelectedOp = false; 147 beforeSelectedOp = false;
122 this.selectedOpIndex_ = undefined; 148 this.selectedOpIndex_ = undefined;
123 } 149 }
124 150
125 this.selectedOp_ = this.opsList_.selectedElement; 151 this.selectedOp_ = this.opsList_.selectedElement;
126 152
127 // Set selection on all previous ops. 153 // Set selection on all previous ops.
128 const ops = this.opsList_.children; 154 const ops = this.opsList_.children;
129 for (let i = 0; i < ops.length; i++) { 155 for (let i = 0; i < ops.length; i++) {
130 const op = ops[i]; 156 const op = ops[i];
131 if (op === this.selectedOp_) { 157 if (op === this.selectedOp_) {
132 beforeSelectedOp = false; 158 beforeSelectedOp = false;
133 this.selectedOpIndex_ = op.opIndex; 159 this.selectedOpIndex_ = op.opIndex;
134 } else if (beforeSelectedOp) { 160 } else if (beforeSelectedOp) {
135 Polymer.dom(op).setAttribute('beforeSelection', 'beforeSelection'); 161 Polymer.dom(op).setAttribute('beforeSelection', 'beforeSelection');
162 op.style.backgroundColor = 'rgb(103, 199, 165)';
136 } else { 163 } else {
137 Polymer.dom(op).removeAttribute('beforeSelection'); 164 Polymer.dom(op).removeAttribute('beforeSelection');
165 op.style.backgroundColor = '';
138 } 166 }
139 } 167 }
140 168
141 tr.b.dispatchSimpleEvent(this, 'selection-changed', false); 169 tr.b.dispatchSimpleEvent(this, 'selection-changed', false);
142 }, 170 },
143 171
144 get numOps() { 172 get numOps() {
145 return this.opsList_.children.length; 173 return this.opsList_.children.length;
146 }, 174 },
147 175
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
229 257
230 return opsWithoutAnnotations; 258 return opsWithoutAnnotations;
231 } 259 }
232 }; 260 };
233 261
234 return { 262 return {
235 PictureOpsListView, 263 PictureOpsListView,
236 }; 264 };
237 }); 265 });
238 </script> 266 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.css ('k') | tracing/tracing/ui/extras/chrome/cc/picture_view.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698