Added showing slow scroll rectangles in Layers panel.

Source/devtools/front_end/Layers3DView.js

 /*
  * Copyright (C) 2014 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 64 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 113 matching lines @@
         var style = this._rotatingContainerElement.style;
         // Translate well to front so that no matter how we turn the plane, no parts of it goes below  parent.
         // This makes sure mouse events go to proper layers, not straight to the parent.
         style.webkitTransform = "translateZ(10000px)" +
             " rotateX(" + this._transformController.rotateX() + "deg) rotateY(" + this._transformController.rotateY() + "deg)" +
             " translateX(" + offsetX + "px) translateY(" + offsetY + "px)";
         // Compute where the center of shitfted and scaled root layer would be and use is as origin for rotation.
         style.webkitTransformOrigin = Math.round(this._paddingX + offsetX + root.width() * this._scale / 2) + "px " + Math.round(this._paddingY + offsetY + root.height() * this._scale / 2) + "px";
     },
 
+    /**
+     * @param {!WebInspector.Layer} layer
+     * @return {!Element}
+     */
+    _createScrollRectElement: function(layer)
+    {
+        var element = document.createElement("div");
+        var parentLayerElement = this._elementsByLayerId[layer.id()];
+        element.className = "scroll-rect";
+        parentLayerElement.appendChild(element);
+        return element;
+    },
+
+    /**
+     * @param {!LayerTreeAgent.ScrollRect} rect
+     * @param {!Element} element
+     */
+    _updateScrollRectElement: function(rect, element)
+    {
+        var style = element.style;
+        style.width = Math.round(rect.rect.width * this._scale) + "px";
+        style.height = Math.round(rect.rect.height * this._scale) + "px";
+        style.left = Math.round(rect.rect.x * this._scale) + "px";
+        style.top = Math.round(rect.rect.y * this._scale) + "px";
+        element.title = WebInspector.Layers3DView.ScrollRectTitles[rect.type];
+    },
+
+    /**
+     * @param {!WebInspector.Layer} layer
+     */
+    _updateScrollRectsForLayer: function(layer)
+    {
+        var layerDetails = this._elementsByLayerId[layer.id()].__layerDetails;
+
+        /**
+         * @param {!Element} element
+         */
+        function removeElement(element)
+        {
+            element.remove()
+        }
+
+        if (layer.scrollRects().length !== layerDetails.scrollRectElements.length) {
+            layerDetails.scrollRectElements.forEach(removeElement);
+            layerDetails.scrollRectElements = layer.scrollRects().map(this._createScrollRectElement.bind(this, layer));
+        }
+        for (var i = 0; i < layer.scrollRects().length; ++i)
+            this._updateScrollRectElement(layer.scrollRects()[i], layerDetails.scrollRectElements[i]);
+    },
+
     _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._updateScrollRectsForLayer(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._scaleToFit();
         this._updateTransform();
-        this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
+        this._model.forEachLayer(updateLayer.bind(this));
         this._needsUpdate = false;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onLayerPainted: function(event)
     {
         var layer = /** @type {!WebInspector.Layer} */ (event.data);
         this._updatePaintRect(this._elementForLayer(layer));
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      * @return {!Element}
      */
     _elementForLayer: function(layer)
     {
         var element = this._elementsByLayerId[layer.id()];
         if (element) {
             // We might have missed an update were a layer with given id was gone and re-created,
             // so update reference to point to proper layer object.
             element.__layerDetails.layer = layer;
             return element;
         }
         element = document.createElement("div");
-        element.className = "layer-container";
+        element.__layerDetails = new WebInspector.LayerDetails(layer, element.createChild("div", "paint-rect"));
         ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom", "side-wall left"].forEach(element.createChild.bind(element, "div"));
-        element.__layerDetails = new WebInspector.LayerDetails(layer, element.createChild("div", "paint-rect"));
         this._elementsByLayerId[layer.id()] = element;
         return element;
     },
 
     /**
      * @param {!Element} element
      */
     _updateLayerElement: function(element)
     {
         var layer = element.__layerDetails.layer;
         var style = element.style;
-        var isContentRoot = layer === this._model.contentRoot();
-        var parentElement = isContentRoot ? this._rotatingContainerElement : this._elementForLayer(layer.parent());
-        element.__layerDetails.depth = parentElement.__layerDetails ? parentElement.__layerDetails.depth + 1 : 0;
+
+        var contentRoot = /** @type {!WebInspector.Layer} */ (this._model.contentRoot());
+        var isContentRoot = layer === contentRoot;
+        var isRoot = layer === this._model.root();
+        var parentElement;
+        if (isContentRoot) {
+            parentElement = this._rotatingContainerElement;
+            element.__layerDetails.depth = 0;
+        } else if (isRoot) {
+            parentElement = this._elementForLayer(contentRoot);
+            element.__layerDetails.depth = undefined;
+        } else {
+            parentElement = this._elementForLayer(layer.parent());
+            element.__layerDetails.depth = parentElement.__layerDetails.depth === undefined ? undefined : parentElement.__layerDetails.depth + 1;
+        }
+        if (element.__layerDetails.depth !== undefined)

[caseq, 2014/03/20 15:29:10]

Can we encapsulate this check into LayerDetails class, i.e.
isAboveContentRoot: function()
{
    return this.depth === undefined;
}

The depth calculation may be encapsulated as well.

[malch, 2014/03/21 07:55:46]

Done.

+            element.className = "layer-container";
+        else
+            element.className = "layer-transparent";
         element.classList.toggle("invisible", layer.invisible());
         this._updateElementColor(element);
         if (parentElement !== element.parentElement)
             parentElement.appendChild(element);
 
         style.width = Math.round(layer.width() * this._scale) + "px";
         style.height = Math.round(layer.height() * this._scale) + "px";
-        this._updatePaintRect(element);
-        if (isContentRoot)
+        if (element.__layerDetails.depth !== undefined)

[caseq, 2014/03/20 15:29:10]

Is this necessary?

[malch, 2014/03/21 07:55:46]

Done.

+            this._updatePaintRect(element);
+        if (isContentRoot || isRoot)
             return;
         style.left = Math.round(layer.offsetX() * this._scale) + "px";
         style.top = Math.round(layer.offsetY() * this._scale) + "px";
         var transform = layer.transform();
         if (transform) {
             transform = transform.slice();
             // Adjust offset in the transform matrix according to scale.
             for (var i = 12; i < 15; ++i)
                 transform[i] *= this._scale;
             // Avoid exponential notation in CSS.
             style.webkitTransform = "matrix3d(" + transform.map(toFixed5).join(",") + ") translateZ(" + this._layerSpacing + ")";
             var anchor = layer.anchorPoint();
             style.webkitTransformOrigin = Math.round(anchor[0] * 100) + "% " + Math.round(anchor[1] * 100) + "% " + anchor[2];
         } else {
             style.webkitTransform = "";
             style.webkitTransformOrigin = "";
         }
 
         function toFixed5(x)
         {
             return x.toFixed(5);
         }
     },
 
+    /**
+     * @param {!Element} element
+     */
     _updatePaintRect: function(element)
     {
+        if (!element)

[caseq, 2014/03/20 15:29:10]

Ditto.

[malch, 2014/03/21 07:55:46]

Done.

+            return;
         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");
         if (details.paintCount === details.layer.paintCount())
             return;
@@ skipping 82 matching lines @@
             this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested, layer);
         event.stopPropagation();
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.Layer} layer
- * @param {!Element} paintRectElement
+ * @param {!Element=} paintRectElement

[caseq, 2014/03/20 15:29:10]

ditto

[malch, 2014/03/21 07:55:46]

Done.

  */
 WebInspector.LayerDetails = function(layer, paintRectElement)
 {
     this.layer = layer;
     this.depth = 0;
     this.paintRectElement = paintRectElement;
     this.paintCount = 0;
+    this.scrollRectElements = [];
 }