DevTools: support importing layer tree from trace snapshots.

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 10 matching lines @@
  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+/** @typedef {!{
+        bounds: {height: number, width: number},
+        children: Array.<!WebInspector.TracingLayerPayload>,
+        layer_id: number,
+        position: Array.<number>,
+        scroll_offset: Array.<number>,
+        layer_quad: Array.<number>,
+        draws_content: number,
+        transform: Array.<number>
+    }}
+*/
+WebInspector.TracingLayerPayload;
+
 /**
   * @constructor
   * @extends {WebInspector.TargetAwareObject}
   */
 WebInspector.LayerTreeModel = function(target)
 {
     WebInspector.TargetAwareObject.call(this, target);
     this._layersById = {};
     // 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.
@@ skipping 32 matching lines @@
     /**
      * @param {!WebInspector.LayerTreeSnapshot} snapshot
      */
     setSnapshot: function(snapshot)
     {
         this.disable();
         this._resolveNodesAndRepopulate(snapshot.layers);
     },
 
     /**
+     * @param {!WebInspector.TracingLayerSnapshot} snapshot
+     */
+    setTracingSnapshot: function(snapshot)
+    {
+        this.disable();
+        this._importTracingLayers(snapshot.root);
+    },
+
+    /**
      * @return {?WebInspector.Layer}
      */
     root: function()
     {
         return this._root;
     },
 
     /**
      * @return {?WebInspector.Layer}
      */
@@ skipping 56 matching lines @@
         if (!layers)
             return;
         var oldLayersById = this._layersById;
         this._layersById = {};
         for (var i = 0; i < layers.length; ++i) {
             var layerId = layers[i].layerId;
             var layer = oldLayersById[layerId];
             if (layer)
                 layer._reset(layers[i]);
             else
-                layer = new WebInspector.Layer(layers[i]);
+                layer = new WebInspector.AgentLayer(layers[i]);
             this._layersById[layerId] = layer;
             if (layers[i].backendNodeId) {
                 layer._setNode(this._target.domModel.nodeForId(this._backendNodeIdToNodeId[layers[i].backendNodeId]));
                 if (!this._contentRoot)
                     this._contentRoot = layer;
             }
             var lastPaintRect = this._lastPaintRectByLayerId[layerId];
             if (lastPaintRect)
                 layer._lastPaintRect = lastPaintRect;
             var parentId = layer.parentId();
             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._root._calculateQuad(new WebKitCSSMatrix());
         this._lastPaintRectByLayerId = {};
     },
 
     /**
+     * @param {!WebInspector.TracingLayerPayload} root
+     */
+    _importTracingLayers: function(root)
+    {
+        this._layersById = {};
+        this._contentRoot = null;
+        this._root = this._innerImportTracingLayers(root);
+        this.dispatchEventToListeners(WebInspector.LayerTreeModel.Events.LayerTreeChanged);
+    },
+
+    /**
+     * @param {!WebInspector.TracingLayerPayload} payload
+     * @return {!WebInspector.TracingLayer}
+     */
+    _innerImportTracingLayers: function(payload)
+    {
+        var layer = new WebInspector.TracingLayer(payload);
+        if (!this._contentRoot && payload.draws_content)
+            this._contentRoot = layer;
+        for (var i = 0; i < payload.children.length; ++i)
+            layer.addChild(this._innerImportTracingLayers(payload.children[i]));
+        return layer;
+    },
+
+    /**
      * @param {!Array.<!LayerTreeAgent.Layer>=} layers
      */
     _layerTreeChanged: function(layers)
     {
         if (!this._enabled)
             return;
         this._resolveNodesAndRepopulate(layers);
     },
 
     /**
@@ skipping 54 matching lines @@
     _onDocumentUpdated: function()
     {
         this.disable();
         this.enable();
     },
 
     __proto__: WebInspector.TargetAwareObject.prototype
 }
 
 /**
- * @constructor
- * @param {!LayerTreeAgent.Layer} layerPayload
+ * @interface
  */
-WebInspector.Layer = function(layerPayload)
+WebInspector.Layer = function()
 {
-    this._scrollRects = [];
-    this._reset(layerPayload);
 }
 
 WebInspector.Layer.prototype = {
     /**
      * @return {string}
      */
+    id: function() { },
+
+    /**
+     * @return {?string}
+     */
+    parentId: function() { },
+
+    /**
+     * @return {?WebInspector.Layer}
+     */
+    parent: function() { },
+
+    /**
+     * @return {boolean}
+     */
+    isRoot: function() { },
+
+    /**
+     * @return {!Array.<!WebInspector.Layer>}
+     */
+    children: function() { },
+
+    /**
+     * @param {!WebInspector.Layer} child
+     */
+    addChild: function(child) { },
+
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    node: function() { },
+
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    nodeForSelfOrAncestor: function() { },
+
+    /**
+     * @return {number}
+     */
+    offsetX: function() { },
+
+    /**
+     * @return {number}
+     */
+    offsetY: function() { },
+
+    /**
+     * @return {number}
+     */
+    width: function() { },
+
+    /**
+     * @return {number}
+     */
+    height: function() { },
+
+    /**
+     * @return {?Array.<number>}
+     */
+    transform: function() { },
+
+    /**
+     * @return {?Array.<number>}
+     */
+    quad: function() { },
+
+    /**
+     * @return {!Array.<number>}
+     */
+    anchorPoint: function() { },
+
+    /**
+     * @return {boolean}
+     */
+    invisible: function() { },
+
+    /**
+     * @return {number}
+     */
+    paintCount: function() { },
+
+    /**
+     * @return {?DOMAgent.Rect}
+     */
+    lastPaintRect: function() { },
+
+    /**
+     * @return {!Array.<!LayerTreeAgent.ScrollRect>}
+     */
+    scrollRects: function() { },
+
+    /**
+     * @param {function(!Array.<string>)} callback
+     */
+    requestCompositingReasons: function(callback) { },
+
+    /**
+     * @param {function(!WebInspector.PaintProfilerSnapshot=)} callback
+     */
+    requestSnapshot: function(callback) { },
+}
+
+/**
+ * @constructor
+ * @implements {WebInspector.Layer}
+ * @param {!LayerTreeAgent.Layer} layerPayload
+ */
+WebInspector.AgentLayer = function(layerPayload)
+{
+    this._scrollRects = [];
+    this._reset(layerPayload);
+}
+
+WebInspector.AgentLayer.prototype = {
+    /**
+     * @return {string}
+     */
     id: function()
     {
         return this._layerPayload.layerId;
     },
 
     /**
-     * @return {string}
+     * @return {?string}
      */
     parentId: function()
     {
         return this._layerPayload.parentLayerId;
     },
 
     /**
-     * @return {!WebInspector.Layer}
+     * @return {?WebInspector.Layer}
      */
     parent: function()
     {
         return this._parent;
     },
 
     /**
      * @return {boolean}
      */
     isRoot: function()
@@ skipping 74 matching lines @@
 
     /**
      * @return {number}
      */
     height: function()
     {
         return this._layerPayload.height;
     },
 
     /**
-     * @return {!Array.<number>}
+     * @return {?Array.<number>}
      */
     transform: function()
     {
         return this._layerPayload.transform;
     },
 
     /**
+     * @return {?Array.<number>}
+     */
+    quad: function()
+    {
+        return this._quad;
+    },
+
+    /**
      * @return {!Array.<number>}
      */
     anchorPoint: function()
     {
         return [
             this._layerPayload.anchorX || 0,
             this._layerPayload.anchorY || 0,
             this._layerPayload.anchorZ || 0,
         ];
     },
@@ skipping 125 matching lines @@
             this._quad.push(point.x, point.y);
         }
 
         function calculateQuadForLayer(layer)
         {
             layer._calculateQuad(matrix);
         }
 
         this._children.forEach(calculateQuadForLayer);
     },
+}
+
+/**
+ * @constructor
+ * @param {!WebInspector.TracingLayerPayload} payload
+ * @implements {WebInspector.Layer}
+ */
+WebInspector.TracingLayer = function(payload)
+{
+    this._layerId = String(payload.layer_id);
+    this._offsetX = payload.position[0];
+    this._offsetY = payload.position[1];
+    this._width = payload.bounds.width;
+    this._height = payload.bounds.height;
+    this._children = [];
+    this._parentLayerId = null;
+    this._parent = null;
+    this._quad = payload.layer_quad;
+}
+
+WebInspector.TracingLayer.prototype = {
+    /**
+     * @return {string}
+     */
+    id: function()
+    {
+        return this._layerId;
+    },
+
+    /**
+     * @return {?string}
+     */
+    parentId: function()
+    {
+        return this._parentLayerId;
+    },
+
+    /**
+     * @return {?WebInspector.Layer}
+     */
+    parent: function()
+    {
+        return this._parent;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isRoot: function()
+    {
+        return !this.parentId();
+    },
+
+    /**
+     * @return {!Array.<!WebInspector.Layer>}
+     */
+    children: function()
+    {
+        return this._children;
+    },
+
+    /**
+     * @param {!WebInspector.Layer} child
+     */
+    addChild: function(child)
+    {
+        if (child._parent)
+            console.assert(false, "Child already has a parent");
+        this._children.push(child);
+        child._parent = this;
+        child._parentLayerId = this._layerId;
+    },
+
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    node: function()
+    {
+        return null;
+    },
+
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    nodeForSelfOrAncestor: function()
+    {
+        return null;
+    },
+
+    /**
+     * @return {number}
+     */
+    offsetX: function()
+    {
+        return this._offsetX;
+    },
+
+    /**
+     * @return {number}
+     */
+    offsetY: function()
+    {
+        return this._offsetY;
+    },
+
+    /**
+     * @return {number}
+     */
+    width: function()
+    {
+        return this._width;
+    },
+
+    /**
+     * @return {number}
+     */
+    height: function()
+    {
+        return this._height;
+    },
+
+    /**
+     * @return {?Array.<number>}
+     */
+    transform: function()
+    {
+        return null;
+    },
+
+    /**
+     * @return {?Array.<number>}
+     */
+    quad: function()
+    {
+        return this._quad;
+    },
 
     /**
      * @return {!Array.<number>}
      */
-    quad: function()
+    anchorPoint: function()
     {
-        return this._quad;
+        return [0.5, 0.5, 0];
+    },
+
+    /**
+     * @return {boolean}
+     */
+    invisible: function()
+    {
+        return false;
+    },
+
+    /**
+     * @return {number}
+     */
+    paintCount: function()
+    {
+        return 0;
+    },
+
+    /**
+     * @return {?DOMAgent.Rect}
+     */
+    lastPaintRect: function()
+    {
+        return null;
+    },
+
+    /**
+     * @return {!Array.<!LayerTreeAgent.ScrollRect>}
+     */
+    scrollRects: function()
+    {
+        return [];
+    },
+
+    /**
+     * @param {function(!Array.<string>)} callback
+     */
+    requestCompositingReasons: function(callback)
+    {
+        var wrappedCallback = InspectorBackend.wrapClientCallback(callback, "LayerTreeAgent.reasonsForCompositingLayer(): ", undefined, []);
+        LayerTreeAgent.compositingReasons(this.id(), wrappedCallback);
+    },
+
+    /**
+     * @param {function(!WebInspector.PaintProfilerSnapshot=)} callback
+     */
+    requestSnapshot: function(callback)
+    {
+        var wrappedCallback = InspectorBackend.wrapClientCallback(callback, "LayerTreeAgent.makeSnapshot(): ", WebInspector.PaintProfilerSnapshot);
+        LayerTreeAgent.makeSnapshot(this.id(), wrappedCallback);
     }
 }
 
 /**
  * @constructor
  * @param {!Array.<!LayerTreeAgent.Layer>} layers
  */
 WebInspector.LayerTreeSnapshot = function(layers)
 {
     this.layers = layers;
 }
 
 /**
  * @constructor
+ * @param {!WebInspector.TracingLayerPayload} root
+ */
+WebInspector.TracingLayerSnapshot = function(root)
+{
+    this.root = root;
+}
+
+/**
+ * @constructor
  * @implements {LayerTreeAgent.Dispatcher}
  * @param {!WebInspector.LayerTreeModel} layerTreeModel
  */
 WebInspector.LayerTreeDispatcher = function(layerTreeModel)
 {
     this._layerTreeModel = layerTreeModel;
 }
 
 WebInspector.LayerTreeDispatcher.prototype = {
     /**
      * @param {!Array.<!LayerTreeAgent.Layer>=} layers
      */
     layerTreeDidChange: function(layers)
     {
         this._layerTreeModel._layerTreeChanged(layers);
     },
 
     /**
      * @param {!LayerTreeAgent.LayerId} layerId
      * @param {!DOMAgent.Rect} clipRect
      */
     layerPainted: function(layerId, clipRect)
     {
         this._layerTreeModel._layerPainted(layerId, clipRect);
     }
 }