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 0ba03ccf3652e9198f5530eba4362e9a849770e6..ceb4f5d35f8b0e7f7faf72a1a9086e14b525bb57 100644
--- a/Source/devtools/front_end/Layers3DView.js
+++ b/Source/devtools/front_end/Layers3DView.js
@@ -50,6 +50,7 @@ WebInspector.Layers3DView = function(model)
     this.element.addEventListener("dblclick", this._onDoubleClick.bind(this), false);
     this.element.addEventListener("click", this._onClick.bind(this), false);
     this._elementsByLayerId = {};
+    this._scrollRectElementsByLayerId = {}
     this._rotateX = 0;
     this._rotateY = 0;
     this._scaleAdjustmentStylesheet = this.element.ownerDocument.head.createChild("style");
@@ -82,6 +83,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()
     {
@@ -211,6 +221,7 @@ WebInspector.Layers3DView.prototype = {
         }
         this._scaleToFit();
         this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
+        this._updateScrollRects();
         this._needsUpdate = false;
     },
 
@@ -284,6 +295,60 @@ WebInspector.Layers3DView.prototype = {
         }
     },
 
+    _createScrollRectElement: function(scrollRect)

[caseq, 2014/02/25 16:38:41]

Please annotate.

[malch, 2014/02/26 07:28:21]

Done.

+    {
+        var element = document.createElement("div");
+        var style = element.style;
+        var parentLayerid =

[caseq, 2014/02/25 16:38:41]

parentLayerId

[malch, 2014/02/26 07:28:21]

Done.

+            this._model._layersById[scrollRect.layerId].nodeId() ? scrollRect.layerId : this._model.contentRoot().id();
+        var parentLayerElement = this._elementsByLayerId[parentLayerid];
+        element.className = "scroll-rect";
+        element.title = WebInspector.Layers3DView.ScrollRectTitles[scrollRect.type];
+        style.width = scrollRect.width + "px";
+        style.height = scrollRect.height + "px";
+        style.left = scrollRect.x + "px";
+        style.top = scrollRect.y + "px";
+        parentLayerElement.appendChild(element);
+        element.__scrollRect = scrollRect;
+        return element;
+    },
+
+    _updateScrollRectsForLayer: function(newScrollRects, oldScrollRects)

[caseq, 2014/02/25 16:38:41]

Ditto.

[malch, 2014/02/26 07:28:21]

Done.

+    {
+        for (var i = 0; i < newScrollRects.length; ++i) {
+            if (i >= oldScrollRects.length) {
+                oldScrollRects.push(this._createScrollRectElement(newScrollRects[i]));
+            } else if (newScrollRects[i] != oldScrollRects[i].__scrollRect) {
+                oldScrollRects[i].remove();
+                oldScrollRects[i] = this._createScrollRectElement(newScrollRects[i]);

[caseq, 2014/02/25 16:38:41]

oldScrollRects is a poor choice of name -- it contains elements and we're
updating it, so perhaps just scrollRectElements?

[malch, 2014/02/26 07:28:21]

Done.

+            }
+        }
+    },
+
+    _updateScrollRects: function()
+    {
+        function removeElement(element)
+        {
+            element.remove()
+        }
+
+        for (var layerId in this._scrollRectElementsByLayerId) {
+            if (!this._model.scrollRectsByLayerId()[layerId]) {
+                this._scrollRectElementsByLayerId[layerId].forEach(removeElement);
+                delete this._scrollRectElementsByLayerId[layerId];
+            }
+        }
+        for (var layerId in this._model.scrollRectsByLayerId()) {
+            if (!this._scrollRectElementsByLayerId[layerId])
+                this._scrollRectElementsByLayerId[layerId] = [];
+            var scrollRects = this._model.scrollRectsByLayerId()[layerId];
+            this._updateScrollRectsForLayer(scrollRects, this._scrollRectElementsByLayerId[layerId]);
+            this._scrollRectElementsByLayerId[layerId]

[caseq, 2014/02/25 16:38:41]

Why is this line not a part of _updateScrollRectsForLayer()?

[malch, 2014/02/26 07:28:21]

Done.

+                .splice(scrollRects.length)
+                .forEach(removeElement);
+        }
+    },
+
     _updatePaintRect: function(element)
     {
         var details = element.__layerDetails;