2 * Copyright (C) 2013 Google Inc. All rights reserved.
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are
8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above
11 * copyright notice, this list of conditions and the following disclaimer
12 * in the documentation and/or other materials provided with the
14 * * Neither the name of Google Inc. nor the names of its
15 * contributors may be used to endorse or promote products derived from
16 * this software without specific prior written permission.
18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
33 * @param {!WebInspector.LayerTreeModel} model
34 * @extends {WebInspector.VBox}
36 WebInspector.LayerDetailsView = function(model)
38 WebInspector.VBox.call(this);
39 this.element.classList.add("layer-details-view");
40 this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("Select a layer to see its details"));
43 this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
44 this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
48 * @type {!Object.<string, string>}
50 WebInspector.LayerDetailsView.CompositingReasonDetail = {
51 "transform3D": WebInspector.UIString("Composition due to association with an element with a CSS 3D transform."),
52 "video": WebInspector.UIString("Composition due to association with a <video> element."),
53 "canvas": WebInspector.UIString("Composition due to the element being a <canvas> element."),
54 "plugin": WebInspector.UIString("Composition due to association with a plugin."),
55 "iFrame": WebInspector.UIString("Composition due to association with an <iframe> element."),
56 "backfaceVisibilityHidden": WebInspector.UIString("Composition due to association with an element with a \"backface-visibility: hidden\" style."),
57 "animation": WebInspector.UIString("Composition due to association with an animated element."),
58 "filters": WebInspector.UIString("Composition due to association with an element with CSS filters applied."),
59 "positionFixed": WebInspector.UIString("Composition due to association with an element with a \"position: fixed\" style."),
60 "positionSticky": WebInspector.UIString("Composition due to association with an element with a \"position: sticky\" style."),
61 "overflowScrollingTouch": WebInspector.UIString("Composition due to association with an element with a \"overflow-scrolling: touch\" style."),
62 "blending": WebInspector.UIString("Composition due to association with an element that has blend mode other than \"normal\"."),
63 "assumedOverlap": WebInspector.UIString("Composition due to association with an element that may overlap other composited elements."),
64 "overlap": WebInspector.UIString("Composition due to association with an element overlapping other composited elements."),
65 "negativeZIndexChildren": WebInspector.UIString("Composition due to association with an element with descendants that have a negative z-index."),
66 "transformWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with composited descendants."),
67 "opacityWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with opacity applied and composited descendants."),
68 "maskWithCompositedDescendants": WebInspector.UIString("Composition due to association with a masked element and composited descendants."),
69 "reflectionWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with a reflection and composited descendants."),
70 "filterWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with CSS filters applied and composited descendants."),
71 "blendingWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with CSS blending applied and composited descendants."),
72 "clipsCompositingDescendants": WebInspector.UIString("Composition due to association with an element clipping compositing descendants."),
73 "perspective": WebInspector.UIString("Composition due to association with an element with perspective applied."),
74 "preserve3D": WebInspector.UIString("Composition due to association with an element with a \"transform-style: preserve-3d\" style."),
75 "root": WebInspector.UIString("Root layer."),
76 "layerForClip": WebInspector.UIString("Layer for clip."),
77 "layerForScrollbar": WebInspector.UIString("Layer for scrollbar."),
78 "layerForScrollingContainer": WebInspector.UIString("Layer for scrolling container."),
79 "layerForForeground": WebInspector.UIString("Layer for foreground."),
80 "layerForBackground": WebInspector.UIString("Layer for background."),
81 "layerForMask": WebInspector.UIString("Layer for mask."),
82 "layerForVideoOverlay": WebInspector.UIString("Layer for video overlay.")
85 WebInspector.LayerDetailsView.prototype = {
87 * @param {?WebInspector.Layer} layer
89 setLayer: function(layer)
98 WebInspector.View.prototype.wasShown.call(this);
102 _onLayerTreeUpdated: function()
104 if (this.isShowing())
109 * @param {!WebInspector.Event} event
111 _onLayerPainted: function(event)
113 var layer = /** @type {!WebInspector.Layer} */ (event.data);
114 if (this._layer === layer)
115 this._paintCountCell.textContent = layer.paintCount();
121 this._tableElement.remove();
122 this._emptyView.show(this.element);
125 this._emptyView.detach();
126 this.element.appendChild(this._tableElement);
127 this._positionCell.textContent = WebInspector.UIString("%d,%d", this._layer.offsetX(), this._layer.offsetY());
128 this._sizeCell.textContent = WebInspector.UIString("%d × %d", this._layer.width(), this._layer.height());
129 this._paintCountCell.textContent = this._layer.paintCount();
130 const bytesPerPixel = 4;
131 this._memoryEstimateCell.textContent = Number.bytesToString(this._layer.invisible() ? 0 : this._layer.width() * this._layer.height() * bytesPerPixel);
132 this._layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
135 _createTable: function()
137 this._tableElement = this.element.createChild("table");
138 this._tbodyElement = this._tableElement.createChild("tbody");
139 this._positionCell = this._createRow(WebInspector.UIString("Position in parent:"));
140 this._sizeCell = this._createRow(WebInspector.UIString("Size:"));
141 this._compositingReasonsCell = this._createRow(WebInspector.UIString("Compositing Reasons:"));
142 this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate:"));
143 this._paintCountCell = this._createRow(WebInspector.UIString("Paint count:"));
147 * @param {string} title
149 _createRow: function(title)
151 var tr = this._tbodyElement.createChild("tr");
152 var titleCell = tr.createChild("td");
153 titleCell.textContent = title;
154 return tr.createChild("td");
158 * @param {!Array.<string>} compositingReasons
160 _updateCompositingReasons: function(compositingReasons)
162 if (!compositingReasons || !compositingReasons.length) {
163 this._compositingReasonsCell.textContent = "n/a";
166 var fragment = document.createDocumentFragment();
167 for (var i = 0; i < compositingReasons.length; ++i) {
169 fragment.appendChild(document.createTextNode(","));
170 var span = document.createElement("span");
171 span.title = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || "";
172 span.textContent = compositingReasons[i];
173 fragment.appendChild(span);
175 this._compositingReasonsCell.removeChildren();
176 this._compositingReasonsCell.appendChild(fragment);
179 __proto__: WebInspector.VBox.prototype