src/third_party/WebKit/Source/devtools/front_end/layers/LayerDetailsView.js

   1 /*
   2  * Copyright (C) 2013 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   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
  13  * distribution.
  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.
  17  *
  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.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @param {!WebInspector.LayerTreeModel} model
  34  * @extends {WebInspector.VBox}
  35  */
  36 WebInspector.LayerDetailsView = function(model)
  37 {
  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"));
  41     this._createTable();
  42     this._model = model;
  43     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
  44     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
  45 }
  46
  47 /**
  48  * @enum {string}
  49  */
  50 WebInspector.LayerDetailsView.Events = {
  51     ObjectSelected: "ObjectSelected"
  52 }
  53
  54 /**
  55  * @type {!Object.<string, string>}
  56  */
  57 WebInspector.LayerDetailsView.CompositingReasonDetail = {
  58     "transform3D": WebInspector.UIString("Composition due to association with an element with a CSS 3D transform."),
  59     "video": WebInspector.UIString("Composition due to association with a <video> element."),
  60     "canvas": WebInspector.UIString("Composition due to the element being a <canvas> element."),
  61     "plugin": WebInspector.UIString("Composition due to association with a plugin."),
  62     "iFrame": WebInspector.UIString("Composition due to association with an <iframe> element."),
  63     "backfaceVisibilityHidden": WebInspector.UIString("Composition due to association with an element with a \"backface-visibility: hidden\" style."),
  64     "animation": WebInspector.UIString("Composition due to association with an animated element."),
  65     "filters": WebInspector.UIString("Composition due to association with an element with CSS filters applied."),
  66     "positionFixed": WebInspector.UIString("Composition due to association with an element with a \"position: fixed\" style."),
  67     "positionSticky": WebInspector.UIString("Composition due to association with an element with a \"position: sticky\" style."),
  68     "overflowScrollingTouch": WebInspector.UIString("Composition due to association with an element with a \"overflow-scrolling: touch\" style."),
  69     "blending": WebInspector.UIString("Composition due to association with an element that has blend mode other than \"normal\"."),
  70     "assumedOverlap": WebInspector.UIString("Composition due to association with an element that may overlap other composited elements."),
  71     "overlap": WebInspector.UIString("Composition due to association with an element overlapping other composited elements."),
  72     "negativeZIndexChildren": WebInspector.UIString("Composition due to association with an element with descendants that have a negative z-index."),
  73     "transformWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with composited descendants."),
  74     "opacityWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with opacity applied and composited descendants."),
  75     "maskWithCompositedDescendants": WebInspector.UIString("Composition due to association with a masked element and composited descendants."),
  76     "reflectionWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with a reflection and composited descendants."),
  77     "filterWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with CSS filters applied and composited descendants."),
  78     "blendingWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with CSS blending applied and composited descendants."),
  79     "clipsCompositingDescendants": WebInspector.UIString("Composition due to association with an element clipping compositing descendants."),
  80     "perspective": WebInspector.UIString("Composition due to association with an element with perspective applied."),
  81     "preserve3D": WebInspector.UIString("Composition due to association with an element with a \"transform-style: preserve-3d\" style."),
  82     "root": WebInspector.UIString("Root layer."),
  83     "layerForClip": WebInspector.UIString("Layer for clip."),
  84     "layerForScrollbar": WebInspector.UIString("Layer for scrollbar."),
  85     "layerForScrollingContainer": WebInspector.UIString("Layer for scrolling container."),
  86     "layerForForeground": WebInspector.UIString("Layer for foreground."),
  87     "layerForBackground": WebInspector.UIString("Layer for background."),
  88     "layerForMask": WebInspector.UIString("Layer for mask."),
  89     "layerForVideoOverlay": WebInspector.UIString("Layer for video overlay.")
  90 };
  91
  92 WebInspector.LayerDetailsView.prototype = {
  93     /**
  94      * @param {!WebInspector.LayersPanel.ActiveObject} activeObject
  95      */
  96     setObject: function(activeObject)
  97     {
  98         this._layer = activeObject ? activeObject.layer : null;
  99         this._scrollRectIndex = activeObject ? activeObject.scrollRectIndex : null;
 100         if (this.isShowing())
 101             this._update();
 102     },
 103
 104     wasShown: function()
 105     {
 106         WebInspector.View.prototype.wasShown.call(this);
 107         this._update();
 108     },
 109
 110     _onLayerTreeUpdated: function()
 111     {
 112         if (this.isShowing())
 113             this._update();
 114     },
 115
 116     /**
 117      * @param {!WebInspector.Event} event
 118      */
 119     _onLayerPainted: function(event)
 120     {
 121         var layer = /** @type {!WebInspector.Layer} */ (event.data);
 122         if (this._layer === layer)
 123             this._paintCountCell.textContent = layer.paintCount();
 124     },
 125
 126     /**
 127      * @param {number} index
 128      * @param {?Event} event
 129      */
 130     _onScrollRectClicked: function(index, event)
 131     {
 132         if (event.which !== 1)
 133             return;
 134         this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.ObjectSelected, {layer: this._layer, scrollRectIndex: index});
 135     },
 136
 137     /**
 138      * @param {!LayerTreeAgent.ScrollRect} scrollRect
 139      * @param {number} index
 140      */
 141     _createScrollRectElement: function(scrollRect, index)
 142     {
 143         if (index)
 144             this._scrollRectsCell.createTextChild(", ");
 145         var element = this._scrollRectsCell.createChild("span");
 146         element.className = index === this._scrollRectIndex ? "scroll-rect active" : "scroll-rect";
 147         element.textContent = WebInspector.LayerTreeModel.ScrollRectType[scrollRect.type].description + " (" + scrollRect.rect.x + ", " + scrollRect.rect.y +
 148             ", " + scrollRect.rect.width + ", " + scrollRect.rect.height + ")";
 149         element.addEventListener("click", this._onScrollRectClicked.bind(this, index), false);
 150     },
 151
 152     _update: function()
 153     {
 154         if (!this._layer) {
 155             this._tableElement.remove();
 156             this._emptyView.show(this.element);
 157             return;
 158         }
 159         this._emptyView.detach();
 160         this.element.appendChild(this._tableElement);
 161         this._positionCell.textContent = WebInspector.UIString("%d,%d", this._layer.offsetX(), this._layer.offsetY());
 162         this._sizeCell.textContent = WebInspector.UIString("%d × %d", this._layer.width(), this._layer.height());
 163         this._paintCountCell.textContent = this._layer.paintCount();
 164         const bytesPerPixel = 4;
 165         this._memoryEstimateCell.textContent = Number.bytesToString(this._layer.invisible() ? 0 : this._layer.width() * this._layer.height() * bytesPerPixel);
 166         this._layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
 167         this._scrollRectsCell.removeChildren();
 168         this._layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
 169     },
 170
 171     _createTable: function()
 172     {
 173         this._tableElement = this.element.createChild("table");
 174         this._tbodyElement = this._tableElement.createChild("tbody");
 175         this._positionCell = this._createRow(WebInspector.UIString("Position in parent:"));
 176         this._sizeCell = this._createRow(WebInspector.UIString("Size:"));
 177         this._compositingReasonsCell = this._createRow(WebInspector.UIString("Compositing Reasons:"));
 178         this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate:"));
 179         this._paintCountCell = this._createRow(WebInspector.UIString("Paint count:"));
 180         this._scrollRectsCell = this._createRow(WebInspector.UIString("Slow scroll regions:"));
 181     },
 182
 183     /**
 184      * @param {string} title
 185      */
 186     _createRow: function(title)
 187     {
 188         var tr = this._tbodyElement.createChild("tr");
 189         var titleCell = tr.createChild("td");
 190         titleCell.textContent = title;
 191         return tr.createChild("td");
 192     },
 193
 194     /**
 195      * @param {!Array.<string>} compositingReasons
 196      */
 197     _updateCompositingReasons: function(compositingReasons)
 198     {
 199         if (!compositingReasons || !compositingReasons.length) {
 200             this._compositingReasonsCell.textContent = "n/a";
 201             return;
 202         }
 203         var fragment = document.createDocumentFragment();
 204         for (var i = 0; i < compositingReasons.length; ++i) {
 205             if (i)
 206                 fragment.appendChild(document.createTextNode(","));
 207             var span = document.createElement("span");
 208             span.title = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || "";
 209             span.textContent = compositingReasons[i];
 210             fragment.appendChild(span);
 211         }
 212         this._compositingReasonsCell.removeChildren();
 213         this._compositingReasonsCell.appendChild(fragment);
 214     },
 215
 216     __proto__: WebInspector.VBox.prototype
 217 }