DevTools: Remove popover and add properties section for paint profiler log.

Source/devtools/front_end/timeline/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 227 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.element.classList.add("outline-disclosure", "profiler-log-view", "section");
+    var sidebarTreeElement = this.element.createChild("ol", "sidebar-tree properties monospace");
     sidebarTreeElement.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     sidebarTreeElement.addEventListener("mouseout", this._onMouseMove.bind(this), false);
     sidebarTreeElement.addEventListener("contextmenu", this._onContextMenu.bind(this), true);
     this.sidebarTree = new TreeOutline(sidebarTreeElement);
-    this._popoverHelper = new WebInspector.ObjectPopoverHelper(this.element, this._getHoverAnchor.bind(this), this._resolveObjectForPopover.bind(this), undefined, true);
 
     this._reset();
 }
 
 WebInspector.PaintProfilerCommandLogView.prototype = {
     /**
      * @param {?WebInspector.Target} target
      * @param {!Array.<!WebInspector.PaintProfilerLogItem>=} log
      */
     setCommandLog: function(target, log)
     {
         this._target = target;
         this._log = log;
         this.updateWindow();
     },
 
     /**
      * @param {number=} stepLeft
      * @param {number=} stepRight
      */
     updateWindow: function(stepLeft, stepRight)
     {
         stepLeft = stepLeft || 0;
         stepRight = stepRight || this._log.length - 1;
         this.sidebarTree.removeChildren();
         for (var i = stepLeft; i <= stepRight; ++i) {
-            var node = new WebInspector.LogTreeElement(this, this._log[i]);
-            this.sidebarTree.appendChild(node);
+            WebInspector.LogTreeElement.appendLogItem(this.sidebarTree, this, this._log[i]);

[caseq, 2014/07/31 13:00:11]

Let's make it an instance method of PaintProfilerCommandLogView -- you're
passing `this' and this.sidebarTree anyway.

[malch, 2014/07/31 13:55:54]

Done.

         }
     },
 
     _reset: function()
     {
         this._log = [];
     },
 
     /**
-     * @param {!Element} target
-     * @return {!Element}
-     */
-    _getHoverAnchor: function(target)
-    {
-        return /** @type {!Element} */ (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.treeElement.representedObject;
-        var obj = {"method": logItem.method};
-        if (logItem.params)
-            obj.params = logItem.params;
-        showCallback(WebInspector.RemoteObject.fromLocalObject(obj), false);
-    },
-
-    /**
      * @param {?Event} event
      */
     _onMouseMove: function(event)
     {
         var node = this.sidebarTree.treeElementFromPoint(event.pageX, event.pageY);
-        if (node === this._lastHoveredNode)
+        if (node === this._lastHoveredNode || !(node instanceof WebInspector.LogTreeElement))
             return;
         if (this._lastHoveredNode)
             this._lastHoveredNode.setHovered(false);
         this._lastHoveredNode = node;
         if (this._lastHoveredNode)
             this._lastHoveredNode.setHovered(true);
     },
 
     /**
      * @param {?Event} event
      */
     _onContextMenu: function(event)
     {
         if (!this._target)
             return;
         var node = this.sidebarTree.treeElementFromPoint(event.pageX, event.pageY);
-        if (!node || !node.representedObject)
+        if (!node || !node.representedObject || !(node instanceof WebInspector.LogTreeElement))
             return;
         var logItem = /** @type {!WebInspector.PaintProfilerLogItem} */ (node.representedObject);
         if (!logItem.nodeId())
             return;
         var contextMenu = new WebInspector.ContextMenu(event);
         var domNode = new WebInspector.DeferredDOMNode(this._target, logItem.nodeId());
         contextMenu.appendApplicableItems(domNode);
         contextMenu.show();
     },
 
     __proto__: WebInspector.VBox.prototype
 };
 
 /**
   * @constructor
   * @param {!WebInspector.PaintProfilerCommandLogView} ownerView
   * @param {!WebInspector.PaintProfilerLogItem} logItem
   * @extends {TreeElement}
   */
 WebInspector.LogTreeElement = function(ownerView, logItem)
 {
-    TreeElement.call(this, "", logItem);
+    TreeElement.call(this, "yo", logItem);

[caseq, 2014/07/31 13:00:11]

yo!

[malch, 2014/07/31 13:55:53]

Done.

     this._ownerView = ownerView;
     this._update();
 }
 
 WebInspector.LogTreeElement.prototype = {
     /**
       * @param {!Object} param
       * @param {string} name
       * @return {string}
       */
@@ skipping 26 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) + ")";
-        span.textContent = textContent;
+        textContent += "(" + this._paramsToString(logItem.params) + ")";

[caseq, 2014/07/31 13:00:11]

just inline above line + this one into the below call. It looks like you don't
need a temp var anymore.

[malch, 2014/07/31 13:55:54]

Done.

+        title.createTextChild(textContent);
         this.title = title;
     },
 
     /**
      * @param {boolean} hovered
      */
     setHovered: function(hovered)
     {
         this.listItemElement.classList.toggle("hovered", hovered);
         var target = this._ownerView._target;
@@ skipping 17 matching lines @@
         {
             if (node)
                 node.highlight();
         }
     },
 
     __proto__: TreeElement.prototype
 };
 
 /**
+  * @param {!TreeOutline} treeOutline
+  * @param {!WebInspector.PaintProfilerCommandLogView} ownerView
+  * @param {!WebInspector.PaintProfilerLogItem} logItem
+  */
+WebInspector.LogTreeElement.appendLogItem = function(treeOutline, ownerView, logItem)
+{
+    var first = new WebInspector.LogTreeElement(ownerView, logItem);
+    treeOutline.appendChild(first);
+    for (var param in logItem.params)
+        WebInspector.LogPropertyTreeElement.appendLogPropertyItem(first, param, logItem.params[param]);
+};
+
+/**
+  * @constructor
+  * @param {!{name: string, value}} property
+  * @extends {TreeElement}
+  */
+WebInspector.LogPropertyTreeElement = function(property)
+{
+    TreeElement.call(this, "", property);
+};
+
+WebInspector.LogPropertyTreeElement.prototype = {
+    onattach: function()
+    {
+        this._update();
+    },
+
+    /**
+      * @param {*} value
+      * @return {string}
+      */
+    _type: function(value)
+    {
+        return value === null ? "null" : typeof value;
+    },
+
+    _update: function()
+    {
+        var property = this.representedObject;
+        var title = document.createDocumentFragment();
+        title.createChild("div", "selection");
+        var nameElement = title.createChild("span", "name");
+        nameElement.textContent = property.name;
+        var separatorElement = title.createChild("span", "separator");
+        separatorElement.textContent = ": ";
+        if (property.value === null || typeof property.value !== "object") {
+            var valueElement = title.createChild("span", "value");
+            valueElement.textContent = JSON.stringify(property.value);
+            valueElement.classList.add("console-formatted-" + this._type(property.value));
+        }
+        this.title = title;
+    },
+
+    __proto__: TreeElement.prototype
+};
+
+/**
+  * @param {!TreeElement} element
+  * @param {string} name
+  * @param {*} value
+  */
+WebInspector.LogPropertyTreeElement.appendLogPropertyItem = function(element, name, value)

[caseq, 2014/07/31 13:48:39]

make it _private and move just after LogPropertyTreeElement (before 'prototype =
...')

[malch, 2014/07/31 13:55:53]

Done.

+{
+    var treeElement = new WebInspector.LogPropertyTreeElement({name: name, value: value});
+    element.appendChild(treeElement);
+    if (value && typeof value === "object") {
+        for (var property in value)
+            WebInspector.LogPropertyTreeElement.appendLogPropertyItem(treeElement, property, value[property]);
+    }
+};
+
+/**
  * @return {!Object.<string, !WebInspector.PaintProfilerCategory>}
  */
 WebInspector.PaintProfilerView.categories = function()
 {
     if (WebInspector.PaintProfilerView._categories)
         return WebInspector.PaintProfilerView._categories;
     WebInspector.PaintProfilerView._categories = {
         shapes: new WebInspector.PaintProfilerCategory("shapes", WebInspector.UIString("Shapes"), "rgb(255, 161, 129)"),
         bitmap: new WebInspector.PaintProfilerCategory("bitmap", WebInspector.UIString("Bitmap"), "rgb(136, 196, 255)"),
         text: new WebInspector.PaintProfilerCategory("text", WebInspector.UIString("Text"), "rgb(180, 255, 137)"),
@@ skipping 76 matching lines @@
     var method = logItem.method.toTitleCase();
 
     var logItemCategories = WebInspector.PaintProfilerView._initLogItemCategories();
     var result = logItemCategories[method];
     if (!result) {
         result = WebInspector.PaintProfilerView.categories()["misc"];
         logItemCategories[method] = result;
     }
     return result;
 }