DevTools: support importing layer tree from trace snapshots.

BUG=

Review URL: https://codereview.chromium.org/224843014

git-svn-id: svn://svn.chromium.org/blink/trunk@171433 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/LayerTreeModel.js

@@ -28,6 +28,19 @@
  * 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}
@@ -79,6 +92,15 @@ WebInspector.LayerTreeModel.prototype = {
         this._resolveNodesAndRepopulate(snapshot.layers);
     },
 
+    /**
+     * @param {!WebInspector.TracingLayerSnapshot} snapshot
+     */
+    setTracingSnapshot: function(snapshot)
+    {
+        this.disable();
+        this._importTracingLayers(snapshot.root);
+    },
+
     /**
      * @return {?WebInspector.Layer}
      */
@@ -156,7 +178,7 @@ WebInspector.LayerTreeModel.prototype = {
             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]));
@@ -182,6 +204,31 @@ WebInspector.LayerTreeModel.prototype = {
         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
      */
@@ -256,17 +303,132 @@ WebInspector.LayerTreeModel.prototype = {
     __proto__: WebInspector.TargetAwareObject.prototype
 }
 
+/**
+ * @interface
+ */
+WebInspector.Layer = function()
+{
+}
+
+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.Layer = function(layerPayload)
+WebInspector.AgentLayer = function(layerPayload)
 {
     this._scrollRects = [];
     this._reset(layerPayload);
 }
 
-WebInspector.Layer.prototype = {
+WebInspector.AgentLayer.prototype = {
     /**
      * @return {string}
      */
@@ -276,7 +438,7 @@ WebInspector.Layer.prototype = {
     },
 
     /**
-     * @return {string}
+     * @return {?string}
      */
     parentId: function()
     {
@@ -284,7 +446,7 @@ WebInspector.Layer.prototype = {
     },
 
     /**
-     * @return {!WebInspector.Layer}
+     * @return {?WebInspector.Layer}
      */
     parent: function()
     {
@@ -379,13 +541,21 @@ WebInspector.Layer.prototype = {
     },
 
     /**
-     * @return {!Array.<number>}
+     * @return {?Array.<number>}
      */
     transform: function()
     {
         return this._layerPayload.transform;
     },
 
+    /**
+     * @return {?Array.<number>}
+     */
+    quad: function()
+    {
+        return this._quad;
+    },
+
     /**
      * @return {!Array.<number>}
      */
@@ -532,13 +702,199 @@ WebInspector.Layer.prototype = {
 
         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 {!Array.<number>}
+     * @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>}
+     */
+    anchorPoint: function()
+    {
+        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);
     }
 }
 
@@ -551,6 +907,15 @@ WebInspector.LayerTreeSnapshot = function(layers)
     this.layers = layers;
 }
 
+/**
+ * @constructor
+ * @param {!WebInspector.TracingLayerPayload} root
+ */
+WebInspector.TracingLayerSnapshot = function(root)
+{
+    this.root = root;
+}
+
 /**
  * @constructor
  * @implements {LayerTreeAgent.Dispatcher}

third_party/WebKit/Source/devtools/front_end/LayersPanel.js

@@ -101,6 +101,14 @@ WebInspector.LayersPanel.prototype = {
         this._model.setSnapshot(snapshot);
     },
 
+    /**
+     * @param {!WebInspector.TracingLayerSnapshot} snapshot
+     */
+    _showTracingSnapshot: function(snapshot)
+    {
+        this._model.setTracingSnapshot(snapshot);
+    },
+
     _onLayerTreeUpdated: function()
     {
         if (this._currentlySelectedLayer && !this._model.layerById(this._currentlySelectedLayer.id()))
@@ -185,11 +193,13 @@ WebInspector.LayersPanel.LayerTreeRevealer = function()
 
 WebInspector.LayersPanel.LayerTreeRevealer.prototype = {
     /**
-     * @param {!Object} layerTree
+     * @param {!Object} snapshotData
      */
-    reveal: function(layerTree)
+    reveal: function(snapshotData)
     {
-        if (layerTree instanceof WebInspector.LayerTreeSnapshot)
-            /** @type {!WebInspector.LayersPanel} */ (WebInspector.inspectorView.showPanel("layers"))._showSnapshot(layerTree);
+        if (snapshotData instanceof WebInspector.LayerTreeSnapshot)
+            /** @type {!WebInspector.LayersPanel} */ (WebInspector.inspectorView.showPanel("layers"))._showSnapshot(snapshotData);
+        else if (snapshotData instanceof WebInspector.TracingLayerSnapshot)
+            /** @type {!WebInspector.LayersPanel} */ (WebInspector.inspectorView.showPanel("layers"))._showTracingSnapshot(snapshotData);
     }
 }

third_party/WebKit/Source/devtools/front_end/TimelineTracingView.js

@@ -105,7 +105,17 @@ WebInspector.TimelineTracingView.prototype = {
         contentHelper.appendTextRow(WebInspector.UIString("Duration"), Number.millisToString(this._dataProvider._toTimelineTime(record.duration), true));
         if (!Object.isEmpty(record.args))
             contentHelper.appendElementRow(WebInspector.UIString("Arguments"), this._formatArguments(record.args));
-
+        function reveal()
+        {
+            WebInspector.Revealer.reveal(new WebInspector.TracingLayerSnapshot(record.args["snapshot"]["active_tree"]["root_layer"]));
+        }
+        if (record.name === "cc::LayerTreeHostImpl") {
+            var link = document.createElement("span");
+            link.classList.add("revealable-link");
+            link.textContent = "show";
+            link.addEventListener("click", reveal, false);
+            contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), link);
+        }
         this._delegate.showInDetails(WebInspector.UIString("Selected Event"), contentHelper.element);
     },
 

third_party/WebKit/Source/devtools/front_end/modules.js

@@ -589,7 +589,7 @@ var allDescriptors = [
             },
             {
                 type: "@WebInspector.Revealer",
-                contextTypes: ["WebInspector.LayerTreeSnapshot"],
+                contextTypes: ["WebInspector.LayerTreeSnapshot", "WebInspector.TracingLayerSnapshot"],
                 className: "WebInspector.LayersPanel.LayerTreeRevealer"
             }
         ],

third_party/WebKit/Source/devtools/front_end/timelinePanel.css

@@ -847,3 +847,8 @@
     justify-content: center;
     align-items: center;
 }
+
+.revealable-link {
+    text-decoration: underline;
+    cursor: pointer;
+}