DevTools: Add ability to go to paint record and paint profiler in Timeline from layers view.

Source/devtools/front_end/timeline/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 41 matching lines @@
     this._picturesForLayer = {};
     this._scrollRectQuadsForLayer = {};
     this._isVisible = {};
     this._layerTree = null;
     this._textureManager = new WebInspector.LayerTextureManager();
     this._textureManager.addEventListener(WebInspector.LayerTextureManager.Events.TextureUpdated, this._update, this);
 
     WebInspector.settings.showPaintRects.addChangeListener(this._update, this);
 }
 
-/** @typedef {{layer: !WebInspector.Layer, scrollRectIndex: number}|{layer: !WebInspector.Layer}} */
-WebInspector.Layers3DView.ActiveObject;
-
 /** @typedef {{borderColor: !Array.<number>, borderWidth: number}} */
 WebInspector.Layers3DView.LayerStyle;
 
-/** @typedef {{layerId: string, rect: !Array.<number>, snapshot: !WebInspector.PaintProfilerSnapshot}} */
+/** @typedef {{layerId: string, rect: !Array.<number>, snapshot: !WebInspector.PaintProfilerSnapshot, traceEvent: !WebInspector.TracingModel.Event}} */
 WebInspector.Layers3DView.PaintTile;
 
 /**
  * @enum {string}
  */
 WebInspector.Layers3DView.OutlineType = {
     Hovered: "hovered",
     Selected: "selected"
 }
 
@@ skipping 66 matching lines @@
 
     /**
      * @param {?Array.<!WebInspector.Layers3DView.PaintTile>} tiles
      */
     setTiles: function(tiles)
     {
         this._textureManager.setTiles(tiles);
     },
 
     /**
+     * @param {!function(!WebInspector.TracingModel.Event)} callback
+     */
+    setSelectPaintEventCallback: function(callback)

[caseq, 2014/07/17 13:12:22]

Why isn't this an event?

[malch, 2014/07/17 15:17:44]

Done.

+    {
+        this._selectPaintEventCallback = callback;
+    },
+
+    /**
      * @param {!WebInspector.Layer} layer
      * @param {string=} imageURL
      */
     showImageForLayer: function(layer, imageURL)
     {
         this._textureManager.createTexture(onTextureCreated.bind(this), imageURL);
 
         /**
          * @this {WebInspector.Layers3DView}
          * @param {!WebGLTexture} texture
@@ skipping 226 matching lines @@
         return this._depthForLayer(layer) + index * WebInspector.Layers3DView.ScrollRectSpacing + 1;
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerRect: function(layer)
     {
         if (!this._isVisible[layer.id()])
             return;
-        var rect = new WebInspector.Layers3DView.Rectangle({layer: layer});
+        var activeObject = WebInspector.Layers3DView.ActiveObject.layerActiveObject(layer);
+        var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
         var style = this._styleForLayer(layer);
         rect.setVertices(layer.quad(), this._depthForLayer(layer));
         rect.lineWidth = style.borderWidth;
         rect.borderColor = style.borderColor;
         this._rects.push(rect);
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerScrollRects: function(layer)
     {
         var scrollRects = layer.scrollRects();
         for (var i = 0; i < scrollRects.length; ++i) {
-            var rect = new WebInspector.Layers3DView.Rectangle({layer: layer, scrollRectIndex: i});
+            var activeObject = WebInspector.Layers3DView.ActiveObject.scrollRectActiveObject(layer, i);
+            var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
             rect.calculateVerticesFromRect(layer, scrollRects[i].rect, this._calculateScrollRectDepth(layer, i));
             var isSelected = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Selected, layer, i);
             var color = isSelected ? WebInspector.Layers3DView.SelectedScrollRectBackgroundColor : WebInspector.Layers3DView.ScrollRectBackgroundColor;
             rect.fillColor = color;
             rect.borderColor = WebInspector.Layers3DView.ScrollRectBorderColor;
             this._rects.push(rect);
         }
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerImageRect: function(layer)
     {
         var layerTexture = this._layerTexture;
         if (layer.id() !== layerTexture.layerId)
             return;
-        var rect = new WebInspector.Layers3DView.Rectangle({layer: layer});
+        var activeObject = WebInspector.Layers3DView.ActiveObject.layerActiveObject(layer);
+        var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
         rect.setVertices(layer.quad(), this._depthForLayer(layer));
         rect.texture = layerTexture.texture;
         this._rects.push(rect);
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerTileRects: function(layer)
     {
         var tiles = this._textureManager.tilesForLayer(layer.id());
         for (var i = 0; i < tiles.length; ++i) {
             var tile = tiles[i];
             if (!tile.texture)
                 continue;
-            var rect = new WebInspector.Layers3DView.Rectangle({layer: layer});
-            rect.calculateVerticesFromRect(layer, {x: tile.rect[0], y: tile.rect[1], width: tile.rect[2], height: tile.rect[3]}, this._depthForLayer(layer));
+            var activeObject = WebInspector.Layers3DView.ActiveObject.tileActiveObject(layer, tile.traceEvent);
+            var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
+            rect.calculateVerticesFromRect(layer, {x: tile.rect[0], y: tile.rect[1], width: tile.rect[2], height: tile.rect[3]}, this._depthForLayer(layer) + 1);
             rect.texture = tile.texture;
             this._rects.push(rect);
         }
     },
 
     _calculateViewportRect: function()
     {
         var rect = new WebInspector.Layers3DView.Rectangle(null);
         var viewport = this._layerTree.viewportSize();
         var depth = (this._maxDepth + 1) * WebInspector.Layers3DView.LayerSpacing;
@@ skipping 180 matching lines @@
 
     /**
      * @param {!Event} event
      */
     _onContextMenu: function(event)
     {
         var activeObject = this._activeObjectFromEventPoint(event);
         var node = activeObject && activeObject.layer && activeObject.layer.nodeForSelfOrAncestor();
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem("Reset view", this._transformController.resetAndNotify.bind(this._transformController), false);
+        if (this._selectPaintEventCallback && activeObject.type() === WebInspector.Layers3DView.ActiveObject.Type.Tile)
+            contextMenu.appendItem("Paint event", this._selectPaintEventCallback.bind(this, activeObject.traceEvent), false);

[caseq, 2014/07/17 13:12:22]

Use WebInspector.UIString() around UI strings (also, please fix the one above).
Also, it's an action -- there should be some verb. "Jump to paint event"?

[malch, 2014/07/17 15:17:44]

Done.

         if (node)
             contextMenu.appendApplicableItems(node);
         contextMenu.show();
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
@@ skipping 22 matching lines @@
         delete this._mouseDownX;
         delete this._mouseDownY;
     },
 
     /**
      * @param {!Event} event
      */
     _onDoubleClick: function(event)
     {
         var object = this._activeObjectFromEventPoint(event);
-        if (object && object.layer)
-            this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested, object.layer);
+        if (object) {
+            if (object.type() == WebInspector.Layers3DView.ActiveObject.Type.Tile)
+                this._selectPaintEventCallback.call(this, object.traceEvent);

[caseq, 2014/07/17 13:12:22]

Why are we invoking the client callback with `this' set to our object?

[malch, 2014/07/17 15:17:44]

Acknowledged.

+            else if (object.layer)
+                this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested, object.layer);
+        }
         event.stopPropagation();
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  */
@@ skipping 33 matching lines @@
         this._tilesByLayerId = {};
         if (!paintTiles)
             return;
         for (var i = 0; i < paintTiles.length; ++i) {
             var layerId = paintTiles[i].layerId;
             var tilesForLayer = this._tilesByLayerId[layerId];
             if (!tilesForLayer) {
                 tilesForLayer = [];
                 this._tilesByLayerId[layerId] = tilesForLayer;
             }
-            var tile = new WebInspector.LayerTextureManager.Tile(paintTiles[i].snapshot, paintTiles[i].rect);
+            var tile = new WebInspector.LayerTextureManager.Tile(paintTiles[i].snapshot, paintTiles[i].rect, paintTiles[i].traceEvent);
             tilesForLayer.push(tile);
             if (this._scale && this._gl)
                 this._updateTile(tile);
         }
     },
 
     /**
      * @param {number} scale
      */
     setScale: function(scale)
@@ skipping 206 matching lines @@
             var product = WebInspector.Geometry.scalarProduct(normal, WebInspector.Geometry.crossProduct(tVects[i], tVects[(i + 1) % tVects.length]));
             if (product < 0)
                 return undefined;
         }
         return t;
     }
 }
 
 /**
  * @constructor
+ */
+WebInspector.Layers3DView.ActiveObject = function()
+{
+}
+
+/**
+ * @enum {string}
+ */
+WebInspector.Layers3DView.ActiveObject.Type = {
+    Layer: "Layer",
+    ScrollRect: "ScrollRect",
+    Tile: "Tile",
+};
+
+/**
+ * @param {!WebInspector.Layer} layer
+ * @return {!WebInspector.Layers3DView.ActiveObject}
+ */
+WebInspector.Layers3DView.ActiveObject.layerActiveObject = function(layer)

[caseq, 2014/07/17 13:12:22]

Here and below, since these create objects, let's add either "create" or "from"
prefix.

[malch, 2014/07/17 15:17:44]

Done.

+{
+    var activeObject = new WebInspector.Layers3DView.ActiveObject();
+    activeObject._type = WebInspector.Layers3DView.ActiveObject.Type.Layer;
+    activeObject.layer = layer;
+    return activeObject;
+}
+
+/**
+ * @param {!WebInspector.Layer} layer
+ * @param {number} scrollRectIndex
+ * @return {!WebInspector.Layers3DView.ActiveObject}
+ */
+WebInspector.Layers3DView.ActiveObject.scrollRectActiveObject = function(layer, scrollRectIndex)
+{
+    var activeObject = new WebInspector.Layers3DView.ActiveObject();
+    activeObject._type = WebInspector.Layers3DView.ActiveObject.Type.ScrollRect;
+    activeObject.layer = layer;
+    activeObject.scrollRectIndex = scrollRectIndex;
+    return activeObject;
+}
+
+/**
+ * @param {!WebInspector.Layer} layer
+ * @param {!WebInspector.TracingModel.Event} traceEvent
+ * @return {!WebInspector.Layers3DView.ActiveObject}
+ */
+WebInspector.Layers3DView.ActiveObject.tileActiveObject = function(layer, traceEvent)
+{
+    var activeObject = new WebInspector.Layers3DView.ActiveObject();
+    activeObject._type = WebInspector.Layers3DView.ActiveObject.Type.Tile;
+    activeObject.layer = layer;
+    activeObject.traceEvent = traceEvent;
+    return activeObject;
+}
+
+WebInspector.Layers3DView.ActiveObject.prototype = {
+    /**
+     * @return {!WebInspector.Layers3DView.ActiveObject.Type}
+     */
+    type: function()
+    {
+        return this._type;
+    }
+};
+
+/**
+ * @constructor
  * @param {!WebInspector.PaintProfilerSnapshot} snapshot
  * @param {!Array.<number>} rect
+ * @param {!WebInspector.TracingModel.Event} traceEvent
  */
-WebInspector.LayerTextureManager.Tile = function(snapshot, rect)
+WebInspector.LayerTextureManager.Tile = function(snapshot, rect, traceEvent)
 {
     this.snapshot = snapshot;
     this.rect = rect;
+    this.traceEvent = traceEvent;
     this.scale = 0;
     /** @type {?WebGLTexture} */
     this.texture = null;
 }