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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js

Issue 2358253002: DevTools: extract a component for layer viewer (Closed)
Patch Set: renamed the banner Created 4 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
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2013 Google Inc. All rights reserved. 2 * Copyright (C) 2013 Google Inc. All rights reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are 5 * modification, are permitted provided that the following conditions are
6 * met: 6 * met:
7 * 7 *
8 * * Redistributions of source code must retain the above copyright 8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above 10 * * Redistributions in binary form must reproduce the above
(...skipping 18 matching lines...) Expand all
29 */ 29 */
30 30
31 /** 31 /**
32 * @constructor 32 * @constructor
33 * @param {!WebInspector.LayerViewHost} layerViewHost 33 * @param {!WebInspector.LayerViewHost} layerViewHost
34 * @extends {WebInspector.Widget} 34 * @extends {WebInspector.Widget}
35 * @implements {WebInspector.LayerView} 35 * @implements {WebInspector.LayerView}
36 */ 36 */
37 WebInspector.LayerDetailsView = function(layerViewHost) 37 WebInspector.LayerDetailsView = function(layerViewHost)
38 { 38 {
39 WebInspector.Widget.call(this); 39 WebInspector.Widget.call(this, true);
40 this.element.classList.add("layer-details-view"); 40 this.registerRequiredCSS("layer_viewer/layerDetailsView.css");
41 this._layerViewHost = layerViewHost; 41 this._layerViewHost = layerViewHost;
42 this._layerViewHost.registerView(this); 42 this._layerViewHost.registerView(this);
43 this._emptyWidget = new WebInspector.EmptyWidget(WebInspector.UIString("Sele ct a layer to see its details")); 43 this._emptyWidget = new WebInspector.EmptyWidget(WebInspector.UIString("Sele ct a layer to see its details"));
44 this._buildContent(); 44 this._buildContent();
45 } 45 }
46 46
47 /** 47 /**
48 * @enum {string} 48 * @enum {string}
49 */ 49 */
50 /** @enum {symbol} */ 50 /** @enum {symbol} */
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after
151 ", " + scrollRect.rect.width + ", " + scrollRect.rect.height + ")"; 151 ", " + scrollRect.rect.width + ", " + scrollRect.rect.height + ")";
152 element.addEventListener("click", this._onScrollRectClicked.bind(this, i ndex), false); 152 element.addEventListener("click", this._onScrollRectClicked.bind(this, i ndex), false);
153 }, 153 },
154 154
155 update: function() 155 update: function()
156 { 156 {
157 var layer = this._selection && this._selection.layer(); 157 var layer = this._selection && this._selection.layer();
158 if (!layer) { 158 if (!layer) {
159 this._tableElement.remove(); 159 this._tableElement.remove();
160 this._paintProfilerButton.remove(); 160 this._paintProfilerButton.remove();
161 this._emptyWidget.show(this.element); 161 this._emptyWidget.show(this.contentElement);
162 return; 162 return;
163 } 163 }
164 this._emptyWidget.detach(); 164 this._emptyWidget.detach();
165 this.element.appendChild(this._tableElement); 165 this.contentElement.appendChild(this._tableElement);
166 this.element.appendChild(this._paintProfilerButton); 166 this.contentElement.appendChild(this._paintProfilerButton);
167 this._sizeCell.textContent = WebInspector.UIString("%d × %d (at %d,%d)", layer.width(), layer.height(), layer.offsetX(), layer.offsetY()); 167 this._sizeCell.textContent = WebInspector.UIString("%d × %d (at %d,%d)", layer.width(), layer.height(), layer.offsetX(), layer.offsetY());
168 this._paintCountCell.parentElement.classList.toggle("hidden", !layer.pai ntCount()); 168 this._paintCountCell.parentElement.classList.toggle("hidden", !layer.pai ntCount());
169 this._paintCountCell.textContent = layer.paintCount(); 169 this._paintCountCell.textContent = layer.paintCount();
170 this._memoryEstimateCell.textContent = Number.bytesToString(layer.gpuMem oryUsage()); 170 this._memoryEstimateCell.textContent = Number.bytesToString(layer.gpuMem oryUsage());
171 layer.requestCompositingReasons(this._updateCompositingReasons.bind(this )); 171 layer.requestCompositingReasons(this._updateCompositingReasons.bind(this ));
172 this._scrollRectsCell.removeChildren(); 172 this._scrollRectsCell.removeChildren();
173 layer.scrollRects().forEach(this._createScrollRectElement.bind(this)); 173 layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
174 var traceEvent = this._selection.type() === WebInspector.LayerView.Selec tion.Type.Tile ? /** @type {!WebInspector.LayerView.TileSelection} */ (this._sel ection).traceEvent() : null; 174 var traceEvent = this._selection.type() === WebInspector.LayerView.Selec tion.Type.Tile ? /** @type {!WebInspector.LayerView.TileSelection} */ (this._sel ection).traceEvent() : null;
175 this._paintProfilerButton.classList.toggle("hidden", !traceEvent); 175 this._paintProfilerButton.classList.toggle("hidden", !traceEvent);
176 }, 176 },
177 177
178 _buildContent: function() 178 _buildContent: function()
179 { 179 {
180 this._tableElement = this.element.createChild("table"); 180 this._tableElement = this.contentElement.createChild("table");
181 this._tbodyElement = this._tableElement.createChild("tbody"); 181 this._tbodyElement = this._tableElement.createChild("tbody");
182 this._sizeCell = this._createRow(WebInspector.UIString("Size")); 182 this._sizeCell = this._createRow(WebInspector.UIString("Size"));
183 this._compositingReasonsCell = this._createRow(WebInspector.UIString("Co mpositing Reasons")); 183 this._compositingReasonsCell = this._createRow(WebInspector.UIString("Co mpositing Reasons"));
184 this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate")); 184 this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate"));
185 this._paintCountCell = this._createRow(WebInspector.UIString("Paint coun t")); 185 this._paintCountCell = this._createRow(WebInspector.UIString("Paint coun t"));
186 this._scrollRectsCell = this._createRow(WebInspector.UIString("Slow scro ll regions")); 186 this._scrollRectsCell = this._createRow(WebInspector.UIString("Slow scro ll regions"));
187 this._paintProfilerButton = this.element.createChild("a", "hidden link") ; 187 this._paintProfilerButton = this.contentElement.createChild("a", "hidden link");
188 this._paintProfilerButton.textContent = WebInspector.UIString("Paint Pro filer"); 188 this._paintProfilerButton.textContent = WebInspector.UIString("Paint Pro filer");
189 this._paintProfilerButton.addEventListener("click", this._onPaintProfile rButtonClicked.bind(this)); 189 this._paintProfilerButton.addEventListener("click", this._onPaintProfile rButtonClicked.bind(this));
190 }, 190 },
191 191
192 /** 192 /**
193 * @param {string} title 193 * @param {string} title
194 */ 194 */
195 _createRow: function(title) 195 _createRow: function(title)
196 { 196 {
197 var tr = this._tbodyElement.createChild("tr"); 197 var tr = this._tbodyElement.createChild("tr");
(...skipping 17 matching lines...) Expand all
215 var text = WebInspector.LayerDetailsView.CompositingReasonDetail[com positingReasons[i]] || compositingReasons[i]; 215 var text = WebInspector.LayerDetailsView.CompositingReasonDetail[com positingReasons[i]] || compositingReasons[i];
216 // If the text is more than one word but does not terminate with per iod, add the period. 216 // If the text is more than one word but does not terminate with per iod, add the period.
217 if (/\s.*[^.]$/.test(text)) 217 if (/\s.*[^.]$/.test(text))
218 text += "."; 218 text += ".";
219 list.createChild("li").textContent = text; 219 list.createChild("li").textContent = text;
220 } 220 }
221 }, 221 },
222 222
223 __proto__: WebInspector.Widget.prototype 223 __proto__: WebInspector.Widget.prototype
224 } 224 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698