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..c4eb18081e5f59bb90e1737d9c5585cbe823a5ce 100644
--- a/Source/devtools/front_end/LayerTreeModel.js
+++ b/Source/devtools/front_end/LayerTreeModel.js
@@ -36,6 +36,7 @@ WebInspector.LayerTreeModel = function()
 {
     WebInspector.Object.call(this);
     this._layersById = {};
+    this._scrollRectsByLayerId = {};
     // We fetch layer tree lazily and get paint events asynchronously, so keep the last painted
     // rect separate from layer so we can get it after refreshing the tree.
     this._lastPaintRectByLayerId = {};
@@ -120,19 +121,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())
@@ -155,15 +156,74 @@ WebInspector.LayerTreeModel.prototype = {
     },
 
     /**
-     * @param {!Array.<!LayerTreeAgent.Layer>=} payload
+     * @param {!LayerTreeAgent.ScrollRect} first
+     * @param {!LayerTreeAgent.ScrollRect} second
      */
-    _layerTreeChanged: function(payload)
+    _areScrollRectsEqual:function (first, second) {

[caseq, 2014/02/20 07:29:18]

Mind the style please: { => next line, function(args)

LayerTreeModel._scrollRectsEqual = function() ....

+        return (first.x === second.x) && (first.y === second.y) &&
+            (first.width === second.width) && (first.height === second.height) &&
+            (first.layerId === second.layerId) && (first.type === second.type);
+    },
+
+    /**
+     * @param {!Array.<!LayerTreeAgent.ScrollRect>=} scrollRects
+     */
+    _updateScrollRects: function(scrollRects)
+    {
+        var scrollRectsByLayerId = {};

[caseq, 2014/02/20 07:29:18]

newScollRectsByLayerId so we can better distinguish them form old ones in
this._scrollRectsByLayerId

+        var i, layerId;
+        for (i = 0; i < scrollRects.length; ++i) {
+            var scrollRect = scrollRects[i];
+            var layer = this._layersById[scrollRect.layerId];
+            if ((layer.width() !== 0 && layer.height() !== 0) &&
+                (scrollRect.width > layer.width() || scrollRect.height > layer.height()) &&
+                !layer.parent().parent())
+                continue;
+            if (scrollRect.layerId in scrollRectsByLayerId) {

[caseq, 2014/02/20 07:29:18]

style: no need for { } here

+                scrollRectsByLayerId[scrollRect.layerId].push(scrollRect);
+            } else {
+                scrollRectsByLayerId[scrollRect.layerId] = [scrollRect];
+            }
+        }
+        for (layerId in this._scrollRectsByLayerId) {
+            if (scrollRectsByLayerId[layerId])
+                continue;
+            delete this._scrollRectsByLayerId[layerId];
+        }
+        for (layerId in scrollRectsByLayerId) {
+            if (!this._scrollRectsByLayerId[layerId])
+                this._scrollRectsByLayerId[layerId] = [];
+            for (i = 0; i < scrollRectsByLayerId[layerId].length; ++i) {
+                if (i >= this._scrollRectsByLayerId[layerId].length) {
+                    this._scrollRectsByLayerId[layerId].push(scrollRectsByLayerId[layerId][i]);
+                    this._scrollRectsByLayerId[layerId][i].needsUpdate = true;

[caseq, 2014/02/20 07:29:18]

extract something like var rect = this._scrollRectsByLayerId[layerId][i]

[caseq, 2014/02/20 07:29:18]

I don't like needsUpdate

+                } else if (this._areScrollRectsEqual(scrollRectsByLayerId[layerId][i], this._scrollRectsByLayerId[layerId][i])) {
+                    this._scrollRectsByLayerId[layerId][i].needsUpdate = false;
+                } else {
+                    this._scrollRectsByLayerId[layerId][i] = scrollRectsByLayerId[layerId][i];
+                    this._scrollRectsByLayerId[layerId][i].needsUpdate = true;
+                }
+            }
+            if (this._scrollRectsByLayerId[layerId].length > scrollRectsByLayerId[layerId].length) {
+                this._scrollRectsByLayerId[layerId].splice(scrollRectsByLayerId[layerId].length,
+                    this._scrollRectsByLayerId[layerId].length - scrollRectsByLayerId[layerId].length);
+            }
+        }
+    },
+
+    /**
+     * @param {!Array.<!LayerTreeAgent.Layer>=} layers
+     * @param {!Array.<!LayerTreeAgent.ScrollRect>=} scrollRects
+     */
+    _layerTreeChanged: function(layers, scrollRects)
     {
         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);
+        if (scrollRects)
+            this._updateScrollRects(scrollRects);
         this.dispatchEventToListeners(WebInspector.LayerTreeModel.Events.LayerTreeChanged);
     },
 
@@ -402,11 +462,12 @@ WebInspector.LayerTreeDispatcher = function(layerTreeModel)
 
 WebInspector.LayerTreeDispatcher.prototype = {
     /**
-     * @param {!Array.<!LayerTreeAgent.Layer>=} payload
+     * @param {!Array.<!LayerTreeAgent.Layer>=} layers
+     * @param {!Array.<!LayerTreeAgent.ScrollRect>=} scrollRects
      */
-    layerTreeDidChange: function(payload)
+    layerTreeDidChange: function(layers, scrollRects)
     {
-        this._layerTreeModel._layerTreeChanged(payload);
+        this._layerTreeModel._layerTreeChanged(layers, scrollRects);
     },
 
     /**