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

Source/devtools/front_end/timeline/Layers3DView.js

Index: Source/devtools/front_end/timeline/Layers3DView.js
diff --git a/Source/devtools/front_end/timeline/Layers3DView.js b/Source/devtools/front_end/timeline/Layers3DView.js
index 6ac251a9b95849dd0ff2e794ef1720bb42e428e2..12d5321963813ab9671240250999b076c3a98540 100644
--- a/Source/devtools/front_end/timeline/Layers3DView.js
+++ b/Source/devtools/front_end/timeline/Layers3DView.js
@@ -59,13 +59,10 @@ WebInspector.Layers3DView = function()
     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;
 
 /**
@@ -152,6 +149,14 @@ WebInspector.Layers3DView.prototype = {
     },
 
     /**
+     * @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
      */
@@ -398,7 +403,8 @@ WebInspector.Layers3DView.prototype = {
     {
         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;
@@ -413,7 +419,8 @@ WebInspector.Layers3DView.prototype = {
     {
         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;
@@ -431,7 +438,8 @@ WebInspector.Layers3DView.prototype = {
         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);
@@ -447,8 +455,9 @@ WebInspector.Layers3DView.prototype = {
             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);
         }
@@ -649,6 +658,8 @@ WebInspector.Layers3DView.prototype = {
         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();
@@ -691,8 +702,12 @@ WebInspector.Layers3DView.prototype = {
     _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();
     },
 
@@ -746,7 +761,7 @@ WebInspector.LayerTextureManager.prototype = {
                 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);
@@ -973,13 +988,81 @@ WebInspector.Layers3DView.Rectangle.prototype = {
 
 /**
  * @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;