Added showing slow scroll rectangles in Layers panel.

Source/devtools/front_end/Layers3DView.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 32 matching lines @@
     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
     this._rotatingContainerElement = this.element.createChild("div", "fill rotating-container");
     this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this.element.addEventListener("mouseout", this._onMouseMove.bind(this), false);
     this.element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
     this.element.addEventListener("mouseup", this._onMouseUp.bind(this), false);
     this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
     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");
     this._scaleAdjustmentStylesheet.disabled = true;
     this._lastOutlinedElement = {};
     this._layerImage = document.createElement("img");
     WebInspector.settings.showPaintRects.addChangeListener(this._update, this);
 }
 
 /**
@@ skipping 12 matching lines @@
     LayerSelected: "LayerSelected",
     LayerSnapshotRequested: "LayerSnapshotRequested"
 }
 
 WebInspector.Layers3DView.PaintRectColors = [
     WebInspector.Color.fromRGBA([0, 0x5F, 0, 0x3F]),
     WebInspector.Color.fromRGBA([0, 0xAF, 0, 0x3F]),
     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()
     {
         this._update();
     },
 
     willHide: function()
     {
         this._scaleAdjustmentStylesheet.disabled = true;
     },
@@ skipping 79 matching lines @@
             this._scaleAdjustmentStylesheet.textContent = stylesheetContent;
         else
             stylesheetTextNode.nodeValue = stylesheetContent;
         var element = this._elementForLayer(root);
         element.style.webkitTransform = "scale3d(" + this._scale + "," + this._scale + "," + this._scale + ")";
         element.style.webkitTransformOrigin = "";
         element.style.left = ((this._clientWidth - root.width() * this._scale) >> 1) + "px";
         element.style.top = ((this._clientHeight - root.height() * this._scale) >> 1) + "px";
     },
 
+    /**
+     * @param {!Element} element
+     */
+    _removeElement: function(element)
+    {
+        element.remove()
+    },
+
+    /**
+     * @param {!string} layerId
+     */
+    _removeScrollRects: function(layerId)
+    {
+        this._scrollRectElementsByLayerId[layerId].forEach(this._removeElement);

[pfeldman, 2014/03/04 09:45:59]

Why aren't they removed along with the parent?

[malch, 2014/03/07 12:42:07]

Done.

+        delete this._scrollRectElementsByLayerId[layerId];
+    },
+
+    /**
+     * @param {!LayerTreeAgent.ScrollRect} scrollRect
+     * @param {!WebInspector.Layer} layer
+     * @return {!Element}
+     */
+    _createScrollRectElement: function(scrollRect, layer)
+    {
+        var element = document.createElement("div");
+        var style = element.style;
+        var parentLayerId = layer.nodeId() ? layer.id() : this._model.contentRoot().id();
+        var parentLayerElement = this._elementsByLayerId[parentLayerId];
+        element.className = "scroll-rect";
+        element.title = WebInspector.Layers3DView.ScrollRectTitles[scrollRect.type];
+        style.width = scrollRect.rect.width + "px";
+        style.height = scrollRect.rect.height + "px";
+        style.left = scrollRect.rect.x + "px";
+        style.top = scrollRect.rect.y + "px";
+        parentLayerElement.appendChild(element);
+        element.__scrollRect = scrollRect;
+        return element;
+    },
+
+    /**
+     * @param {!WebInspector.Layer} layer
+     */
+     _updateScrollRectsForLayer: function(layer)
+     {
+        if (!this._scrollRectElementsByLayerId[layer.id()])
+            this._scrollRectElementsByLayerId[layer.id()] = [];
+        var newScrollRects = layer.scrollRects(),
+            scrollRectElements = this._scrollRectElementsByLayerId[layer.id()];
+        for (var i = 0; i < newScrollRects.length; ++i) {
+            if (i >= scrollRectElements.length) {
+                scrollRectElements.push(this._createScrollRectElement(newScrollRects[i], layer));
+            } else if (newScrollRects[i] != scrollRectElements[i].__scrollRect) {
+                scrollRectElements[i].remove();
+                scrollRectElements[i] = this._createScrollRectElement(newScrollRects[i], layer);
+            }
+        }
+        scrollRectElements.splice(newScrollRects.length).forEach(this._removeElement);
+    },
+
     _update: function()
     {
         if (!this.isShowing()) {
             this._needsUpdate = true;
             return;
         }
         if (!this._model.contentRoot()) {
             this._emptyView.show(this.element);
             this._rotatingContainerElement.removeChildren();
             return;
         }
         this._emptyView.detach();
 
         /**
          * @this {WebInspector.Layers3DView}
          */
         function updateLayer(layer)
         {
             this._updateLayerElement(this._elementForLayer(layer));
         }
         this._clientWidth = this.element.clientWidth;
         this._clientHeight = this.element.clientHeight;
         for (var layerId in this._elementsByLayerId) {
             if (this._model.layerById(layerId))
                 continue;
             this._elementsByLayerId[layerId].remove();
             delete this._elementsByLayerId[layerId];
+            this._removeScrollRects(layerId);
         }
         this._scaleToFit();
         this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
+        this._model.forEachLayer(this._updateScrollRectsForLayer.bind(this));
         this._needsUpdate = false;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onLayerPainted: function(event)
     {
         var layer = /** @type {!WebInspector.Layer} */ (event.data);
         this._updatePaintRect(this._elementForLayer(layer));
@@ skipping 53 matching lines @@
             style.webkitTransform = "";
             style.webkitTransformOrigin = "";
         }
 
         function toFixed5(x)
         {
             return x.toFixed(5);
         }
     },
 
+    /**
+     * @param {!Element} element
+     */
     _updatePaintRect: function(element)
     {
         var details = element.__layerDetails;
         var paintRect = details.layer.lastPaintRect();
         var paintRectElement = details.paintRectElement;
         if (!paintRect || !WebInspector.settings.showPaintRects.get()) {
             paintRectElement.classList.add("hidden");
             return;
         }
         paintRectElement.classList.remove("hidden");
@@ skipping 143 matching lines @@
  * @param {!WebInspector.Layer} layer
  * @param {!Element} paintRectElement
  */
 WebInspector.LayerDetails = function(layer, paintRectElement)
 {
     this.layer = layer;
     this.depth = 0;
     this.paintRectElement = paintRectElement;
     this.paintCount = 0;
 }