DevTools: Add popover for snapshot canvas log.

Source/devtools/front_end/layers/PaintProfilerView.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 187 matching lines @@
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.PaintProfilerCommandLogView = function()
 {
     WebInspector.VBox.call(this);
     this.setMinimumSize(100, 25);
     this.element.classList.add("outline-disclosure");
     var sidebarTreeElement = this.element.createChild("ol", "sidebar-tree");
     this.sidebarTree = new TreeOutline(sidebarTreeElement);
+    this._popoverHelper = new WebInspector.ObjectPopoverHelper(this.element, this._getHoverAnchor.bind(this), this._resolveObjectForPopover.bind(this), undefined, true);
 
     this._log = [];
 }
 
 WebInspector.PaintProfilerCommandLogView.prototype = {
     setLog: function(log)
     {
         this._log = log;
     },
 
     /**
      * @param {number=} stepLeft
      * @param {number=} stepRight
      */
     updateLog: function(stepLeft, stepRight)
     {
         var log = this._log;
         stepLeft = stepLeft || 0;
         stepRight = stepRight || log.length - 1;
         this.sidebarTree.removeChildren();
         for (var i = stepLeft; i <= stepRight; ++i) {
             var node = new WebInspector.LogTreeElement(log[i]);
             this.sidebarTree.appendChild(node);
         }
     },
 
+    /**
+     * @param {!Element} target
+     * @return {!Element}
+     */
+    _getHoverAnchor: function(target)
+    {
+        return target.enclosingNodeOrSelfWithNodeName("span");
+    },
+
+    /**
+     * @param {!Element} element
+     * @param {function(!WebInspector.RemoteObject, boolean=, !Element=):undefined} showCallback
+     */
+    _resolveObjectForPopover: function(element, showCallback)
+    {
+        var liElement = element.enclosingNodeOrSelfWithNodeName("li");
+        var logItem = liElement.__logItem;

[caseq, 2014/06/11 16:03:21]

can you use liElement.treeElement.representedObject instead?

[malch, 2014/06/11 16:32:58]

Done.

+        var obj = {"method": liElement.__logItem.method};
+        if (logItem.params)
+            obj.params = logItem.params;
+        showCallback(WebInspector.RemoteObject.fromLocalObject(obj));
+    },
+
     __proto__: WebInspector.VBox.prototype
 };
 
 /**
   * @constructor
   * @param {!Object} logItem
   * @extends {TreeElement}
   */
 WebInspector.LogTreeElement = function(logItem)
 {
@@ skipping 36 matching lines @@
             str += this._paramToString(params[key], key);
         }
         return str;
     },
 
     _update: function()
     {
         var logItem = this.representedObject;
         var title = document.createDocumentFragment();
         title.createChild("div", "selection");
+        var span = title.createChild("span");
         var textContent = logItem.method;
         if (logItem.params)
             textContent += "(" + this._paramsToString(logItem.params) + ")";
-        title.appendChild(document.createTextNode(textContent));
+        span.textContent = textContent;
         this.title = title;
     },
 
     /**
      * @param {boolean} hovered
      */
     setHovered: function(hovered)
     {
         this.listItemElement.classList.toggle("hovered", hovered);
     },
 
+    onattach: function()
+    {
+        this.listItemElement.__logItem = this.representedObject;

[caseq, 2014/06/11 16:03:21]

...you won't need this then.

[malch, 2014/06/11 16:32:58]

Done.

+    },
+
     __proto__: TreeElement.prototype
 };