DevTools: Add snapshot command log on the frontend.

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 14 matching lines @@
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @param {!WebInspector.LayerTreeModel} model
  * @param {!WebInspector.Layers3DView} layers3DView
- * @extends {WebInspector.VBox}
+ * @extends {WebInspector.SplitView}
  */
 WebInspector.PaintProfilerView = function(model, layers3DView)
 {
-    WebInspector.VBox.call(this);
+    WebInspector.SplitView.call(this, true, false);
     this.element.classList.add("paint-profiler-view");
+    this._logTreeView = new WebInspector.LogTreeView(this.sidebarElement());
+    this.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this.onResize, this);
 
     this._model = model;
     this._layers3DView = layers3DView;
 
-    this._canvas = this.element.createChild("canvas", "fill");
+    this._canvas = this.mainElement().createChild("canvas", "fill");
     this._context = this._canvas.getContext("2d");
-    this._selectionWindow = new WebInspector.OverviewGrid.Window(this.element, this.element);
+    this._selectionWindow = new WebInspector.OverviewGrid.Window(this.mainElement(), this.mainElement());
     this._selectionWindow.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
 
     this._innerBarWidth = 4 * window.devicePixelRatio;
     this._minBarHeight = 4 * window.devicePixelRatio;
     this._barPaddingWidth = 2 * window.devicePixelRatio;
     this._outerBarWidth = this._innerBarWidth + this._barPaddingWidth;
 
     this._reset();
 }
 
 WebInspector.PaintProfilerView.prototype = {
     onResize: function()
     {
         this._update();
     },
 
     _update: function()
     {
-        this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
-        this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
+        this._canvas.width = this.mainElement().clientWidth * window.devicePixelRatio;
+        this._canvas.height = this.mainElement().clientHeight * window.devicePixelRatio;
         this._samplesPerBar = 0;
         if (!this._profiles || !this._profiles.length)
             return;
 
         var maxBars = Math.floor((this._canvas.width - 2 * this._barPaddingWidth) / this._outerBarWidth);
         var sampleCount = this._profiles[0].length;
         this._samplesPerBar = Math.ceil(sampleCount / maxBars);
         var barCount = Math.floor(sampleCount / this._samplesPerBar);
 
         var maxBarTime = 0;
@@ skipping 45 matching lines @@
 
         var screenLeft = this._selectionWindow.windowLeft * this._canvas.width;
         var screenRight = this._selectionWindow.windowRight * this._canvas.width;
 
         var barLeft = Math.floor((screenLeft - this._barPaddingWidth) / this._outerBarWidth);
         var barRight = Math.floor((screenRight - this._barPaddingWidth + this._innerBarWidth)/ this._outerBarWidth);
 
         var stepLeft = Math.max(0, barLeft * this._samplesPerBar);
         var stepRight = Math.min(barRight * this._samplesPerBar, this._profiles[0].length);
         this._snapshot.requestImage(stepLeft, stepRight, this._layers3DView.showImageForLayer.bind(this._layers3DView, this._layer));
+        this._logTreeView.updateLog(stepLeft, stepRight);
     },
 
     _reset: function()
     {
         this._snapshot = null;
         this._profiles = null;
         this._selectionWindow.reset();
     },
 
     /**
@@ skipping 11 matching lines @@
          */
         function onSnapshotDone(snapshot)
         {
             this._snapshot = snapshot;
             if (!snapshot) {
                 this._profiles = null;
                 this._update();
                 return;
             }
             snapshot.requestImage(null, null, this._layers3DView.showImageForLayer.bind(this._layers3DView, this._layer));
-            snapshot.profile(onProfileDone.bind(this));
+            snapshot.profile(onProfileDone.bind(this, snapshot));
         }
 
         /**
+         * @param {!WebInspector.PaintProfilerSnapshot=} snapshot
          * @param {!Array.<!LayerTreeAgent.PaintProfile>=} profiles
          * @this {WebInspector.PaintProfilerView}
          */
-        function onProfileDone(profiles)
+        function onProfileDone(snapshot, profiles)

[caseq, 2014/06/05 16:25:40]

You don't need to pass snapshot, it's already available as this._snapshot.
Another option to implement this is to start both profiling and getting log
independently and use a barrier, i.e.

snapshot.profile(barrier.createCallback(onProfileDone.bind(this)))
snapshot.commandLog(barrier.createCallback(onCommandLogDone.bind(this)))
barrier.callWhenDone(this._update.bind(this))

This is slightly more readable and faster.

[malch, 2014/06/09 05:59:44]

Done.

         {
             this._profiles = profiles;
+            snapshot.commandLog(onCommandLogDone.bind(this));
+        }
+
+        /**
+         * @param {!Array.<!Object>=} log
+         * @this {WebInspector.PaintProfilerView}
+         */
+        function onCommandLogDone(log)
+        {
+            this._logTreeView.setLog(log);
+            this._logTreeView.updateLog();
             this._update();
         }
     },
 
+    __proto__: WebInspector.SplitView.prototype
+};
+
+/**
+ * @constructor
+ * @param {!Element} sidebarElement

[caseq, 2014/06/05 16:25:40]

remove this.
rather than passing parent element to the constructor, we normally just call
show(parent) at the creation site (i.e. in the client code).

[malch, 2014/06/09 05:59:45]

Done.

+ * @extends {WebInspector.VBox}
+ */
+WebInspector.LogTreeView = function(sidebarElement)
+{
+    WebInspector.VBox.call(this);
+    this.setMinimumSize(100, 25);
+    this.show(sidebarElement);
+
+    this._sidebarElement = this.element;

[caseq, 2014/06/05 16:25:40]

Why do you need it? Just use this.element.

[malch, 2014/06/09 05:59:44]

Done.

+    this._sidebarElement.classList.add("sidebar", "outline-disclosure");

[caseq, 2014/06/05 16:25:40]

Not sure if we need "sidebar" class here.

[malch, 2014/06/09 05:59:44]

Done.

+    var sidebarTreeElement = this._sidebarElement.createChild("ol", "sidebar-tree");
+    this.sidebarTree = new TreeOutline(sidebarTreeElement);
+
+    this._log = [];
+}
+
+WebInspector.LogTreeView.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);
+        }
+    },
+
     __proto__: WebInspector.VBox.prototype
 };
+
+/**
+  * @constructor
+  * @param {!Object} logItem
+  * @extends {TreeElement}
+  */
+WebInspector.LogTreeElement = function(logItem)
+{
+    TreeElement.call(this, "", logItem);
+    this._update();
+}
+
+WebInspector.LogTreeElement.prototype = {
+    /**
+      * @param {!Object} param
+      * @param {string} name
+      * @return {string}
+      */
+    _paramToString: function(param, name)
+    {
+        if (typeof param !== "object")
+            return typeof param === "string" && param.length > 100 ? name : JSON.stringify(param);
+        var str = "";
+        var keyCount = 0;
+        for (var key in param) {
+            if (++keyCount > 4 || typeof param[key] === "object" || (typeof param[key] === "string" && param[key].length > 100))
+                return name;
+            if (str)
+                str += ", ";
+            str += param[key];
+        }
+        return str;
+    },
+
+    /**
+      * @param {!Object} params
+      * @return {string}
+      */
+    _paramsToString: function(params)
+    {
+        var str = "";
+        for (var key in params) {
+            if (str)
+                str += ", ";
+            str += this._paramToString(params[key], key);
+        }
+        return str;
+    },
+
+    _update: function()
+    {
+        var logItem = this.representedObject;
+        var title = document.createDocumentFragment();
+        title.textContent = logItem.method;

[caseq, 2014/06/05 16:25:40]

let's build complete text first, then assign it to title.textContent.

[malch, 2014/06/09 05:59:44]

Done.

+        if (logItem.params)
+            title.textContent += "(" + this._paramsToString(logItem.params) + ")";
+        this.title = title;
+    },
+
+    __proto__: TreeElement.prototype
+};