Added showing slow scroll rectangles in Layers panel.

Source/devtools/front_end/Layers3DView.js

Index: Source/devtools/front_end/Layers3DView.js
diff --git a/Source/devtools/front_end/Layers3DView.js b/Source/devtools/front_end/Layers3DView.js
index 411036b855fe2f0b2d4a4711d916642a3a44daa6..93db7729451927729682c47ae817a024fe98ad1f 100644
--- a/Source/devtools/front_end/Layers3DView.js
+++ b/Source/devtools/front_end/Layers3DView.js
@@ -82,6 +82,15 @@ WebInspector.Layers3DView.PaintRectColors = [
     WebInspector.Color.fromRGBA([0, 0xFF, 0, 0x3F])
 ]
 
+/**
+ * @enum {string}
+ */
+WebInspector.Layers3DView.ScrollRectTitles = {
+    RepaintsOnScroll: WebInspector.UIString("repaints on scroll"),
+    TouchEventHandler: WebInspector.UIString("touch event listener"),
+    WheelEventHandler: WebInspector.UIString("mousewheel event listener")
+}
+
 WebInspector.Layers3DView.prototype = {
     onResize: function()
     {
@@ -215,6 +224,56 @@ WebInspector.Layers3DView.prototype = {
         style.webkitTransformOrigin = Math.round(this._paddingX + offsetX + root.width() * this._scale / 2) + "px " + Math.round(this._paddingY + offsetY + root.height() * this._scale / 2) + "px";
     },
 
+    /**
+     * @param {!WebInspector.Layer} layer
+     * @return {!Element}
+     */
+    _createScrollRectElement: function(layer)
+    {
+        var element = document.createElement("div");
+        var parentLayerElement = this._elementsByLayerId[layer.id()];
+        element.className = "scroll-rect";
+        parentLayerElement.appendChild(element);
+        return element;
+    },
+
+    /**
+     * @param {!LayerTreeAgent.ScrollRect} rect
+     * @param {!Element} element
+     */
+    _updateScrollRectElement: function(rect, element)
+    {
+        var style = element.style;
+        style.width = Math.round(rect.rect.width * this._scale) + "px";
+        style.height = Math.round(rect.rect.height * this._scale) + "px";
+        style.left = Math.round(rect.rect.x * this._scale) + "px";
+        style.top = Math.round(rect.rect.y * this._scale) + "px";
+        element.title = WebInspector.Layers3DView.ScrollRectTitles[rect.type];
+    },
+
+    /**
+     * @param {!WebInspector.Layer} layer
+     */
+    _updateScrollRectsForLayer: function(layer)
+    {
+        var layerDetails = this._elementsByLayerId[layer.id()].__layerDetails;
+
+        /**
+         * @param {!Element} element
+         */
+        function removeElement(element)
+        {
+            element.remove()
+        }
+
+        if (layer.scrollRects().length !== layerDetails.scrollRectElements.length) {
+            layerDetails.scrollRectElements.forEach(removeElement);
+            layerDetails.scrollRectElements = layer.scrollRects().map(this._createScrollRectElement.bind(this, layer));
+        }
+        for (var i = 0; i < layer.scrollRects().length; ++i)
+            this._updateScrollRectElement(layer.scrollRects()[i], layerDetails.scrollRectElements[i]);
+    },
+
     _update: function()
     {
         if (!this.isShowing()) {
@@ -234,6 +293,7 @@ WebInspector.Layers3DView.prototype = {
         function updateLayer(layer)
         {
             this._updateLayerElement(this._elementForLayer(layer));
+            this._updateScrollRectsForLayer(layer);
         }
         this._clientWidth = this.element.clientWidth;
         this._clientHeight = this.element.clientHeight;
@@ -245,7 +305,7 @@ WebInspector.Layers3DView.prototype = {
         }
         this._scaleToFit();
         this._updateTransform();
-        this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
+        this._model.forEachLayer(updateLayer.bind(this));
         this._needsUpdate = false;
     },
 
@@ -272,9 +332,14 @@ WebInspector.Layers3DView.prototype = {
             return element;
         }
         element = document.createElement("div");
-        element.className = "layer-container";
-        ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom", "side-wall left"].forEach(element.createChild.bind(element, "div"));
-        element.__layerDetails = new WebInspector.LayerDetails(layer, element.createChild("div", "paint-rect"));
+        if (layer.nodeId()) {

[caseq, 2014/03/19 13:54:10]

The element for a layer with given id is only created once. So if we don't have
a node associated with a layer with given id and then have one, this will fail,
as you will create and keep using "transparent" element.
This may, for example, happen during navigation, when new layers have ids that
match the layers in the old page.
We currently do not handle navigation specifically above the model layer.

[malch, 2014/03/20 14:29:45]

Done.

+            element.className = "layer-container";
+            ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom", "side-wall left"].forEach(element.createChild.bind(element, "div"));
+            element.__layerDetails = new WebInspector.LayerDetails(layer, element.createChild("div", "paint-rect"));
+        } else {
+            element.className = "layer-transparent";
+            element.__layerDetails = new WebInspector.LayerDetails(layer);
+        }
         this._elementsByLayerId[layer.id()] = element;
         return element;
     },
@@ -286,8 +351,17 @@ WebInspector.Layers3DView.prototype = {
     {
         var layer = element.__layerDetails.layer;
         var style = element.style;
-        var isContentRoot = layer === this._model.contentRoot();
-        var parentElement = isContentRoot ? this._rotatingContainerElement : this._elementForLayer(layer.parent());
+
+        var contentRoot = /** @type {!WebInspector.Layer} */ (this._model.contentRoot());
+        var isContentRoot = layer === contentRoot;
+        var isRoot = layer === this._model.root();
+        var parentElement;
+        if (isContentRoot)
+            parentElement = this._rotatingContainerElement;
+        else if (isRoot)
+            parentElement = this._elementForLayer(contentRoot);
+        else
+            parentElement = this._elementForLayer(layer.parent());
         element.__layerDetails.depth = parentElement.__layerDetails ? parentElement.__layerDetails.depth + 1 : 0;
         element.classList.toggle("invisible", layer.invisible());
         this._updateElementColor(element);
@@ -296,8 +370,9 @@ WebInspector.Layers3DView.prototype = {
 
         style.width = Math.round(layer.width() * this._scale) + "px";
         style.height = Math.round(layer.height() * this._scale) + "px";
-        this._updatePaintRect(element);
-        if (isContentRoot)
+        if (layer.nodeId())
+            this._updatePaintRect(element);
+        if (isContentRoot || isRoot)
             return;
         style.left = Math.round(layer.offsetX() * this._scale) + "px";
         style.top = Math.round(layer.offsetY() * this._scale) + "px";
@@ -322,8 +397,13 @@ WebInspector.Layers3DView.prototype = {
         }
     },
 
+    /**
+     * @param {!Element} element
+     */
     _updatePaintRect: function(element)
     {
+        if (!element)
+            return;
         var details = element.__layerDetails;
         var paintRect = details.layer.lastPaintRect();
         var paintRectElement = details.paintRectElement;
@@ -426,7 +506,7 @@ WebInspector.Layers3DView.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.Layer} layer
- * @param {!Element} paintRectElement
+ * @param {!Element=} paintRectElement
  */
 WebInspector.LayerDetails = function(layer, paintRectElement)
 {
@@ -434,4 +514,5 @@ WebInspector.LayerDetails = function(layer, paintRectElement)
     this.depth = 0;
     this.paintRectElement = paintRectElement;
     this.paintCount = 0;
+    this.scrollRectElements = [];
 }