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..34736661a37f86099ba3f87113b7e4bb2932e78f 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,60 @@ 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
+     * @param {!LayerTreeAgent.ScrollRect} scrollRect
+     * @return {!Element}
+     */
+    _createScrollRectElement: function(layer, scrollRect)
+    {
+        var element = document.createElement("div");
+        var parentLayerElement = this._elementsByLayerId[layer.id()];
+        element.className = "scroll-rect";
+        element.title = WebInspector.Layers3DView.ScrollRectTitles[scrollRect.type];
+        parentLayerElement.appendChild(element);
+        return element;
+    },
+
+    /**
+     * @param {!Array.<!Element>} elements
+     * @param {!LayerTreeAgent.ScrollRect} scrollRect
+     * @param {!number} index
+     */
+    _updateScrollRectElement: function(elements, scrollRect, index)

[caseq, 2014/03/11 12:04:09]

I don't think using forEach() justifies method signatures like this. It rather
makes sense to have something like

_updateScrollRectElement: function(element, rect)

[malch, 2014/03/11 12:48:49]

Done.

+    {
+        var element = elements[index];
+        var style = element.style;
+        style.width = Math.round(scrollRect.rect.width * this._scale) + "px";
+        style.height = Math.round(scrollRect.rect.height * this._scale) + "px";
+        style.left = Math.round(scrollRect.rect.x * this._scale) + "px";
+        style.top = Math.round(scrollRect.rect.y * this._scale) + "px";
+    },
+
+    /**
+     * @param {!WebInspector.Layer} layer
+     */
+    _updateScrollRectsForLayer: function(layer)
+    {
+        var newScrollRects = layer.scrollRects(),
+        layerDetails = this._elementsByLayerId[layer.id()].__layerDetails;
+
+        /**
+         * @param {!Element} element
+         */
+        function removeElement(element)
+        {
+            element.remove()
+        }
+
+        if (newScrollRects !== layerDetails.scrollRects) {
+            layerDetails.scrollRectElements.forEach(removeElement);
+            layerDetails.scrollRects = newScrollRects;
+            layerDetails.scrollRectElements = layerDetails.scrollRects.map(this._createScrollRectElement.bind(this, layer));
+        }
+        layerDetails.scrollRects.forEach(this._updateScrollRectElement.bind(this, layerDetails.scrollRectElements));

[caseq, 2014/03/11 12:04:09]

Why would we update if the rects did not change?

[malch, 2014/03/11 12:48:49]

Done.

+    },
+
     _update: function()
     {
         if (!this.isShowing()) {
@@ -245,7 +308,8 @@ WebInspector.Layers3DView.prototype = {
         }
         this._scaleToFit();
         this._updateTransform();
-        this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
+        this._model.forEachLayer(updateLayer.bind(this));
+        this._model.forEachLayer(this._updateScrollRectsForLayer.bind(this));

[caseq, 2014/03/11 12:04:09]

Can we rather call updateScrollRectsForLayer from updateLayer?

[malch, 2014/03/11 12:48:49]

Done.

         this._needsUpdate = false;
     },
 
@@ -255,7 +319,8 @@ WebInspector.Layers3DView.prototype = {
     _onLayerPainted: function(event)
     {
         var layer = /** @type {!WebInspector.Layer} */ (event.data);
-        this._updatePaintRect(this._elementForLayer(layer));
+        if (layer.nodeId())
+            this._updatePaintRect(this._elementForLayer(layer));
     },
 
     /**
@@ -272,9 +337,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()) {
+            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,18 +356,23 @@ 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 = isContentRoot ? this._rotatingContainerElement : (isRoot ? this._elementForLayer(contentRoot) : this._elementForLayer(layer.parent()));

[caseq, 2014/03/11 12:04:09]

Two ternary operators per statement is a bit of overkill, please expands to
if/else

[malch, 2014/03/11 12:48:49]

Done.

         element.__layerDetails.depth = parentElement.__layerDetails ? parentElement.__layerDetails.depth + 1 : 0;
         element.classList.toggle("invisible", layer.invisible());
-        this._updateElementColor(element);
+        if (layer.nodeId())
+            this._updateElementColor(element);
         if (parentElement !== element.parentElement)
             parentElement.appendChild(element);
 
         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,6 +397,9 @@ WebInspector.Layers3DView.prototype = {
         }
     },
 
+    /**
+     * @param {!Element} element
+     */
     _updatePaintRect: function(element)
     {
         var details = element.__layerDetails;
@@ -426,7 +504,7 @@ WebInspector.Layers3DView.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.Layer} layer
- * @param {!Element} paintRectElement
+ * @param {!Element=} paintRectElement
  */
 WebInspector.LayerDetails = function(layer, paintRectElement)
 {
@@ -434,4 +512,6 @@ WebInspector.LayerDetails = function(layer, paintRectElement)
     this.depth = 0;
     this.paintRectElement = paintRectElement;
     this.paintCount = 0;
+    this.scrollRects = [];
+    this.scrollRectElements = [];
 }