Added showing slow scroll rectangles in Layers panel.

Source/devtools/front_end/LayerTreeModel.js

Index: Source/devtools/front_end/LayerTreeModel.js
diff --git a/Source/devtools/front_end/LayerTreeModel.js b/Source/devtools/front_end/LayerTreeModel.js
index 2753e10a1493172ccae296afcab68f86c5819a4f..2112a88b89469be38d31c4c7ae4914eb7f95cd71 100644
--- a/Source/devtools/front_end/LayerTreeModel.js
+++ b/Source/devtools/front_end/LayerTreeModel.js
@@ -48,6 +48,17 @@ WebInspector.LayerTreeModel.Events = {
     LayerPainted: "LayerPainted",
 }
 
+/**
+ * @param {!LayerTreeAgent.ScrollRect} first
+ * @param {!LayerTreeAgent.ScrollRect} second
+ */
+WebInspector.LayerTreeModel._scrollRectsAreEqual = function(first, second)
+{
+    return first.rect.x === second.rect.x && first.rect.y === second.rect.y &&
+        first.rect.width === second.rect.width && first.rect.height === second.rect.height &&
+        first.type === second.type;
+}
+
 WebInspector.LayerTreeModel.prototype = {
     disable: function()
     {
@@ -97,7 +108,7 @@ WebInspector.LayerTreeModel.prototype = {
 
     /**
      * @param {function(!WebInspector.Layer)} callback
-     * @param {?WebInspector.Layer} root
+     * @param {?WebInspector.Layer=} root
      * @return {boolean}
      */
     forEachLayer: function(callback, root)
@@ -120,19 +131,19 @@ WebInspector.LayerTreeModel.prototype = {
     },
 
     /**
-     * @param {!Array.<!LayerTreeAgent.Layer>} payload
+     * @param {!Array.<!LayerTreeAgent.Layer>} layers
      */
-    _repopulate: function(payload)
+    _repopulate: function(layers)
     {
         var oldLayersById = this._layersById;
         this._layersById = {};
-        for (var i = 0; i < payload.length; ++i) {
-            var layerId = payload[i].layerId;
+        for (var i = 0; i < layers.length; ++i) {
+            var layerId = layers[i].layerId;
             var layer = oldLayersById[layerId];
             if (layer)
-                layer._reset(payload[i]);
+                layer._reset(layers[i]);
             else
-                layer = new WebInspector.Layer(payload[i]);
+                layer = new WebInspector.Layer(layers[i]);
             this._layersById[layerId] = layer;
             var parentId = layer.parentId();
             if (!this._contentRoot && layer.nodeId())
@@ -150,20 +161,21 @@ WebInspector.LayerTreeModel.prototype = {
                     console.assert(false, "Multiple root layers");
                 this._root = layer;
             }
+            layer._updateScrollRects();
         }
         this._lastPaintRectByLayerId = {};
     },
 
     /**
-     * @param {!Array.<!LayerTreeAgent.Layer>=} payload
+     * @param {!Array.<!LayerTreeAgent.Layer>=} layers
      */
-    _layerTreeChanged: function(payload)
+    _layerTreeChanged: function(layers)
     {
         this._root = null;
         this._contentRoot = null;
         // Payload will be null when not in the composited mode.
-        if (payload)
-            this._repopulate(payload);
+        if (layers)
+            this._repopulate(layers);
         this.dispatchEventToListeners(WebInspector.LayerTreeModel.Events.LayerTreeChanged);
     },
 
@@ -350,6 +362,14 @@ WebInspector.Layer.prototype = {
     },
 
     /**
+     * @return {!Array.<!LayerTreeAgent.ScrollRect>}
+     */
+    scrollRects: function()
+    {
+        return this._scrollRects;
+    },
+
+    /**
      * @param {function(!Array.<string>)} callback
      */
     requestCompositingReasons: function(callback)
@@ -387,6 +407,23 @@ WebInspector.Layer.prototype = {
         this._paintCount = 0;
         this._layerPayload = layerPayload;
         this._image = null;
+    },
+
+    _updateScrollRects: function()
+    {
+        if (!this._scrollRects)
+            this._scrollRects = [];

[caseq, 2014/02/27 13:46:55]

We could have this set unconditionally in _reset();

[malch, 2014/02/27 14:58:59]

Done.

+        if (!this._layerPayload.scrollRects)
+            this._layerPayload.scrollRects = [];

[caseq, 2014/02/27 13:46:55]

Why is this necessary? Touching the original payload looks like a bad idea.

[malch, 2014/02/27 14:58:59]

Done.

+
+        var newRects = this._layerPayload.scrollRects;

[caseq, 2014/02/27 13:46:55]

hint: var newRects = this._layerPayload.scrollRects || [];

[malch, 2014/02/27 14:58:59]

Done.

+        for (var i = 0; i < newRects.length; ++i) {
+            if (i >= this._scrollRects.length ||
+                !WebInspector.LayerTreeModel._scrollRectsAreEqual(newRects[i], this._scrollRects[i])) {
+                this._scrollRects[i] = newRects[i];
+            }
+        }
+        this._scrollRects.splice(newRects.length);
     }
 }
 
@@ -402,11 +439,11 @@ WebInspector.LayerTreeDispatcher = function(layerTreeModel)
 
 WebInspector.LayerTreeDispatcher.prototype = {
     /**
-     * @param {!Array.<!LayerTreeAgent.Layer>=} payload
+     * @param {!Array.<!LayerTreeAgent.Layer>=} layers
      */
-    layerTreeDidChange: function(payload)
+    layerTreeDidChange: function(layers)
     {
-        this._layerTreeModel._layerTreeChanged(payload);
+        this._layerTreeModel._layerTreeChanged(layers);
     },
 
     /**