Remove popover and add properties section for paint profiler log.

Review URL: https://codereview.chromium.org/393123007

Review URL: https://codereview.chromium.org/393123007

git-svn-id: svn://svn.chromium.org/blink/trunk@180458 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/layers/layer-canvas-log-expected.txt

@@ -3,8 +3,6 @@ Canvas log:
 {
     0 : {
         method : "save"
-        params : {
-        }
     }
     1 : {
         method : "drawRect"
@@ -147,8 +145,6 @@ Canvas log:
     }
     4 : {
         method : "save"
-        params : {
-        }
     }
     5 : {
         method : "clipRect"
@@ -172,8 +168,6 @@ Canvas log:
     }
     7 : {
         method : "save"
-        params : {
-        }
     }
     8 : {
         method : "clipRect"

third_party/WebKit/Source/devtools/front_end/layersPanel.css

@@ -110,3 +110,16 @@
 .paint-profiler-canvas-container .overview-grid-window-resizer {
     z-index: 2000;
 }
+
+.paint-profiler-view canvas {
+    height: 100%;
+    width: 100%;
+}
+
+.profiler-log-view .console-formatted-string {
+    white-space: nowrap;
+}
+
+.profiler-log-view.section .properties {
+    display: block;
+}
\ No newline at end of file

third_party/WebKit/Source/devtools/front_end/timeline/Layers3DView.js

@@ -651,7 +651,7 @@ WebInspector.Layers3DView.prototype = {
         var node = activeObject && activeObject.layer && activeObject.layer.nodeForSelfOrAncestor();
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem(WebInspector.UIString("Reset View"), this._transformController.resetAndNotify.bind(this._transformController), false);
-        if (activeObject.type() === WebInspector.Layers3DView.ActiveObject.Type.Tile)
+        if (activeObject && activeObject.type() === WebInspector.Layers3DView.ActiveObject.Type.Tile)
             contextMenu.appendItem(WebInspector.UIString("Jump to Paint Event"), this.dispatchEventToListeners.bind(this, WebInspector.Layers3DView.Events.JumpToPaintEventRequested, activeObject.traceEvent), false);
         if (node)
             contextMenu.appendApplicableItems(node);

third_party/WebKit/Source/devtools/front_end/timeline/PaintProfilerView.js

@@ -245,13 +245,12 @@ 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();
 }
@@ -268,6 +267,16 @@ WebInspector.PaintProfilerCommandLogView.prototype = {
         this.updateWindow();
     },
 
+    /**
+      * @param {!TreeOutline} treeOutline
+      * @param {!WebInspector.PaintProfilerLogItem} logItem
+      */
+    _appendLogItem: function(treeOutline, logItem)
+    {
+        var treeElement = new WebInspector.LogTreeElement(this, logItem);
+        treeOutline.appendChild(treeElement);
+    },
+
     /**
      * @param {number=} stepLeft
      * @param {number=} stepRight
@@ -277,10 +286,8 @@ WebInspector.PaintProfilerCommandLogView.prototype = {
         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);
-        }
+        for (var i = stepLeft; i <= stepRight; ++i)
+            this._appendLogItem(this.sidebarTree, this._log[i]);
     },
 
     _reset: function()
@@ -288,36 +295,13 @@ WebInspector.PaintProfilerCommandLogView.prototype = {
         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);
@@ -334,7 +318,7 @@ WebInspector.PaintProfilerCommandLogView.prototype = {
         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())
@@ -358,10 +342,25 @@ WebInspector.LogTreeElement = function(ownerView, logItem)
 {
     TreeElement.call(this, "", logItem);
     this._ownerView = ownerView;
-    this._update();
+    this._filled = false;
 }
 
 WebInspector.LogTreeElement.prototype = {
+    onattach: function()
+    {
+        this._update();
+        this.hasChildren = !!this.representedObject.params;
+    },
+
+    onexpand: function()
+    {
+        if (this._filled)
+            return;
+        this._filled = true;
+        for (var param in this.representedObject.params)
+            WebInspector.LogPropertyTreeElement._appendLogPropertyItem(this, param, this.representedObject.params[param]);
+    },
+
     /**
       * @param {!Object} param
       * @param {string} name
@@ -403,11 +402,7 @@ WebInspector.LogTreeElement.prototype = {
         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;
+        title.createTextChild(logItem.method + "(" + this._paramsToString(logItem.params) + ")");
         this.title = title;
     },
 
@@ -444,6 +439,52 @@ WebInspector.LogTreeElement.prototype = {
     __proto__: TreeElement.prototype
 };
 
+/**
+  * @constructor
+  * @param {!{name: string, value}} property
+  * @extends {TreeElement}
+  */
+WebInspector.LogPropertyTreeElement = function(property)
+{
+    TreeElement.call(this, "", property);
+};
+
+/**
+  * @param {!TreeElement} element
+  * @param {string} name
+  * @param {*} value
+  */
+WebInspector.LogPropertyTreeElement._appendLogPropertyItem = function(element, name, value)
+{
+    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]);
+    }
+};
+
+WebInspector.LogPropertyTreeElement.prototype = {
+    onattach: 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-" + property.value === null ? "null" : typeof property.value);
+        }
+        this.title = title;
+    },
+
+    __proto__: TreeElement.prototype
+}
+
 /**
  * @return {!Object.<string, !WebInspector.PaintProfilerCategory>}
  */

third_party/WebKit/Source/platform/graphics/LoggingCanvas.cpp

@@ -391,7 +391,7 @@ void LoggingCanvas::didConcat(const SkMatrix& matrix)
 void LoggingCanvas::willSave()
 {
     AutoLogger logger(this);
-    RefPtr<JSONObject> params = logger.logItemWithParams("save");
+    RefPtr<JSONObject> params = logger.logItem("save");
     this->SkCanvas::willSave();
 }