Added showing slow scroll rectangles in Layers panel.

Source/devtools/front_end/LayerTreeModel.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 18 matching lines @@
  */
 
 /**
   * @constructor
   * @extends {WebInspector.Object}
   */
 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 = {};
     InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeDispatcher(this));
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._onDocumentUpdated, this);
 }
 
 WebInspector.LayerTreeModel.Events = {
     LayerTreeChanged: "LayerTreeChanged",
     LayerPainted: "LayerPainted",
 }
 
+/**
+ * @param {!LayerTreeAgent.ScrollRect} first
+ * @param {!LayerTreeAgent.ScrollRect} second
+ */
+WebInspector.LayerTreeModel._scrollRectsEqual = function(first, second)
+{
+    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;
+}
+
 WebInspector.LayerTreeModel.prototype = {
     disable: function()
     {
         if (!this._enabled)
             return;
         this._enabled = false;
         LayerTreeAgent.disable();
     },
 
     /**
@@ skipping 52 matching lines @@
     /**
      * @param {string} id
      * @return {?WebInspector.Layer}
      */
     layerById: function(id)
     {
         return this._layersById[id] || null;
     },
 
     /**
-     * @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())
                 this._contentRoot = layer;
             var lastPaintRect = this._lastPaintRectByLayerId[layerId];
             if (lastPaintRect)
                 layer._lastPaintRect = lastPaintRect;
             if (parentId) {
                 var parent = this._layersById[parentId];
                 if (!parent)
                     console.assert(parent, "missing parent " + parentId + " for layer " + layerId);
                 parent.addChild(layer);
             } else {
                 if (this._root)
                     console.assert(false, "Multiple root layers");
                 this._root = layer;
             }
         }
         this._lastPaintRectByLayerId = {};
     },
 
     /**
-     * @param {!Array.<!LayerTreeAgent.Layer>=} payload
+     * @param {!Array.<!LayerTreeAgent.ScrollRect>=} scrollRects
      */
-    _layerTreeChanged: function(payload)
+    _updateScrollRects: function(scrollRects)
+    {
+        var newScrollRectsByLayerId = {};
+        var i, layerId;
+        for (i = 0; i < scrollRects.length; ++i) {
+            var scrollRect = scrollRects[i];
+            var layer = this._layersById[scrollRect.layerId];
+            // FIXME

[caseq, 2014/02/24 07:18:06]

You can remove this once https://codereview.chromium.org/173763002/ lands

[malch, 2014/02/24 13:59:15]

Done.

+            if ((layer.width() !== 0 && layer.height() !== 0) &&
+                (scrollRect.width > layer.width() || scrollRect.height > layer.height()) &&
+                !layer.parent().parent())
+                continue;
+            if (scrollRect.layerId in newScrollRectsByLayerId)
+                newScrollRectsByLayerId[scrollRect.layerId].push(scrollRect);
+            else
+                newScrollRectsByLayerId[scrollRect.layerId] = [scrollRect];
+        }
+        for (layerId in this._scrollRectsByLayerId) {
+            if (!newScrollRectsByLayerId[layerId])
+                delete this._scrollRectsByLayerId[layerId];
+        }
+        for (layerId in newScrollRectsByLayerId) {
+            if (!this._scrollRectsByLayerId[layerId])
+                this._scrollRectsByLayerId[layerId] = [];
+            var oldScrollRects = this._scrollRectsByLayerId[layerId];
+            for (i = 0; i < newScrollRectsByLayerId[layerId].length; ++i) {
+                if (i >= oldScrollRects.length ||
+                    !WebInspector.LayerTreeModel._scrollRectsEqual(newScrollRectsByLayerId[layerId][i], oldScrollRects[i])) {
+                    oldScrollRects[i] = newScrollRectsByLayerId[layerId][i];
+                }
+            }
+            oldScrollRects.splice(newScrollRectsByLayerId[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);
     },
 
     /**
      * @param {!LayerTreeAgent.LayerId} layerId
      * @param {!DOMAgent.Rect} clipRect
      */
     _layerPainted: function(layerId, clipRect)
     {
         var layer = this._layersById[layerId];
@@ skipping 218 matching lines @@
  * @implements {LayerTreeAgent.Dispatcher}
  * @param {!WebInspector.LayerTreeModel} layerTreeModel
  */
 WebInspector.LayerTreeDispatcher = function(layerTreeModel)
 {
     this._layerTreeModel = 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);
     },
 
     /**
      * @param {!LayerTreeAgent.LayerId} layerId
      * @param {!DOMAgent.Rect} clipRect
      */
     layerPainted: function(layerId, clipRect)
     {
         this._layerTreeModel._layerPainted(layerId, clipRect);
     }
 }