DevTools: add Paint Profiler link to layer & event details views

Source/devtools/front_end/timeline/LayerDetailsView.js

Index: Source/devtools/front_end/timeline/LayerDetailsView.js
diff --git a/Source/devtools/front_end/timeline/LayerDetailsView.js b/Source/devtools/front_end/timeline/LayerDetailsView.js
index 05c613dacc56ca37f11843e22ab4e4533ff5a65d..333562d643dc2d3eab63a4987773acaa16221981 100644
--- a/Source/devtools/front_end/timeline/LayerDetailsView.js
+++ b/Source/devtools/front_end/timeline/LayerDetailsView.js
@@ -30,21 +30,22 @@
 
 /**
  * @constructor
- * @extends {WebInspector.VBox}
+ * @extends {WebInspector.View}
  */
 WebInspector.LayerDetailsView = function()
 {
-    WebInspector.VBox.call(this);
+    WebInspector.View.call(this);
     this.element.classList.add("layer-details-view");
     this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("Select a layer to see its details"));
-    this._createTable();
+    this._buildContent();
 }
 
 /**
  * @enum {string}
  */
 WebInspector.LayerDetailsView.Events = {
-    ObjectSelected: "ObjectSelected"
+    ObjectSelected: "ObjectSelected",
+    PaintProfilerRequested: "PaintProfilerRequested"
 }
 
 /**
@@ -92,8 +93,7 @@ WebInspector.LayerDetailsView.prototype = {
      */
     setObject: function(selection)
     {
-        this._layer = selection ? selection.layer : null;
-        this._scrollRectIndex = selection ? selection.scrollRectIndex : null;
+        this._selection = selection;
         if (this.isShowing())
             this.update();
     },
@@ -112,7 +112,12 @@ WebInspector.LayerDetailsView.prototype = {
     {
         if (event.which !== 1)
             return;
-        this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.ObjectSelected, new WebInspector.Layers3DView.ScrollRectSelection(this._layer, index));
+        this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.ObjectSelected, new WebInspector.Layers3DView.ScrollRectSelection(this._selection.layer, index));
+    },
+
+    _onPaintProfilerButtonClicked: function()
+    {
+        this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.PaintProfilerRequested, this._selection.traceEvent);
     },
 
     /**
@@ -123,8 +128,9 @@ WebInspector.LayerDetailsView.prototype = {
     {
         if (index)
             this._scrollRectsCell.createTextChild(", ");
-        var element = this._scrollRectsCell.createChild("span");
-        element.className = index === this._scrollRectIndex ? "scroll-rect active" : "scroll-rect";
+        var element = this._scrollRectsCell.createChild("span", "scroll-rect");
+        if (this._selection.scrollRectIndex === index)
+            element.classList.add("active");
         element.textContent = WebInspector.LayerTreeModel.ScrollRectType[scrollRect.type].description + " (" + scrollRect.rect.x + ", " + scrollRect.rect.y +
             ", " + scrollRect.rect.width + ", " + scrollRect.rect.height + ")";
         element.addEventListener("click", this._onScrollRectClicked.bind(this, index), false);
@@ -132,33 +138,39 @@ WebInspector.LayerDetailsView.prototype = {
 
     update: function()
     {
-        if (!this._layer) {
+        var layer = this._selection && this._selection.layer;
+        if (!layer) {
             this._tableElement.remove();
+            this._paintProfilerButton.remove();
             this._emptyView.show(this.element);
             return;
         }
         this._emptyView.detach();
         this.element.appendChild(this._tableElement);
-        this._positionCell.textContent = WebInspector.UIString("%d,%d", this._layer.offsetX(), this._layer.offsetY());
-        this._sizeCell.textContent = WebInspector.UIString("%d × %d", this._layer.width(), this._layer.height());
-        this._paintCountCell.textContent = this._layer.paintCount();
+        this.element.appendChild(this._paintProfilerButton);
+        this._sizeCell.textContent = WebInspector.UIString("%d × %d (at %d,%d)", layer.width(), layer.height(), layer.offsetX(), layer.offsetY());
+        this._paintCountCell.parentElement.classList.toggle("hidden", !layer.paintCount());
+        this._paintCountCell.textContent = layer.paintCount();
         const bytesPerPixel = 4;
-        this._memoryEstimateCell.textContent = Number.bytesToString(this._layer.invisible() ? 0 : this._layer.width() * this._layer.height() * bytesPerPixel);
-        this._layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
+        this._memoryEstimateCell.textContent = Number.bytesToString(layer.invisible() ? 0 : layer.width() * layer.height() * bytesPerPixel);
+        layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
         this._scrollRectsCell.removeChildren();
-        this._layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
+        layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
+        this._paintProfilerButton.classList.toggle("hidden", !this._selection.traceEvent);
     },
 
-    _createTable: function()
+    _buildContent: function()
     {
         this._tableElement = this.element.createChild("table");
         this._tbodyElement = this._tableElement.createChild("tbody");
-        this._positionCell = this._createRow(WebInspector.UIString("Position in parent"));
         this._sizeCell = this._createRow(WebInspector.UIString("Size"));
         this._compositingReasonsCell = this._createRow(WebInspector.UIString("Compositing Reasons"));
         this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate"));
         this._paintCountCell = this._createRow(WebInspector.UIString("Paint count"));
         this._scrollRectsCell = this._createRow(WebInspector.UIString("Slow scroll regions"));
+        this._paintProfilerButton = this.element.createChild("a", "hidden link");
+        this._paintProfilerButton.textContent = WebInspector.UIString("Paint Profiler");
+        this._paintProfilerButton.addEventListener("click", this._onPaintProfilerButtonClicked.bind(this));
     },
 
     /**
@@ -192,5 +204,5 @@ WebInspector.LayerDetailsView.prototype = {
         }
     },
 
-    __proto__: WebInspector.VBox.prototype
+    __proto__: WebInspector.View.prototype
 }