DevTools: [timeline tree view] render visual of percent in the background.

Source/devtools/front_end/timeline/TimelineTreeView.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineTreeView = function(model)
@@ skipping 100 matching lines @@
     },
 
     _refreshTree: function()
     {
         this.dataGrid.rootNode().removeChildren();
         var topDown = WebInspector.TimelineModel.buildTopDownTree(
             this._model.mainThreadEvents(), this._startTime, this._endTime, this._filters, WebInspector.TimelineTreeView.eventId);
         var tree = this._modeCombobox.selectedOption().value === WebInspector.TimelineTreeView.Mode.TopDown
             ? this._preformTopDownTreeGrouping(topDown)
             : this._buildBottomUpTree(topDown);
+        var maxSelfTime = 0;
+        var maxTotalTime = 0;
+        for (var child of tree.children.values()) {
+            maxSelfTime = Math.max(maxSelfTime, child.selfTime);
+            maxTotalTime = Math.max(maxTotalTime, child.totalTime);
+        }
         for (var child of tree.children.values()) {
             // Exclude the idle time off the total calculation.
-            var gridNode = new WebInspector.TimelineTreeView.GridNode(child, topDown.totalTime);
+            var gridNode = new WebInspector.TimelineTreeView.GridNode(child, topDown.totalTime, maxSelfTime, maxTotalTime);
             this.dataGrid.insertChild(gridNode);
         }
         this._sortingChanged();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.ProfileTreeNode} topDownTree
      * @return {!WebInspector.TimelineModel.ProfileTreeNode}
      */
     _preformTopDownTreeGrouping: function(topDownTree)
@@ skipping 147 matching lines @@
     var url = data && data["url"];
     if (url)
         return url;
     var topFrame = event.stackTrace && event.stackTrace[0];
     return topFrame && topFrame["url"] || null;
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SortableDataGridNode}
- * @param {?} profileNode
+ * @param {!WebInspector.TimelineModel.ProfileTreeNode} profileNode
  * @param {number} grandTotalTime
+ * @param {number} maxSelfTime
+ * @param {number} maxTotalTime
  */
-WebInspector.TimelineTreeView.GridNode = function(profileNode, grandTotalTime)
+WebInspector.TimelineTreeView.GridNode = function(profileNode, grandTotalTime, maxSelfTime, maxTotalTime)
 {
     /**
      * @param {number} time
      * @return {string}
      */
     function formatMilliseconds(time)
     {
         return WebInspector.UIString("%.1f\u2009ms", time);
     }
     /**
      * @param {number} value
      * @return {string}
      */
     function formatPercent(value)
     {
         return WebInspector.UIString("%.2f\u2009%%", value);
     }
 
     this._populated = false;
     this._profileNode = profileNode;
     this._totalTime = grandTotalTime;
+    this._maxTime = { self: maxSelfTime, total: maxTotalTime };

[caseq, 2015/08/18 21:06:29]

maxTimes?

[alph, 2015/08/18 21:16:19]

Done.

     var selfTime = profileNode.selfTime;
     var selfPercent = selfTime / grandTotalTime * 100;
     var totalTime = profileNode.totalTime;
     var totalPercent = totalTime / grandTotalTime * 100;
     var data = {
         "activity": profileNode.name,
         "self-percent": formatPercent(selfPercent),
         "self": formatMilliseconds(selfTime),
         "total-percent": formatPercent(totalPercent),
         "total": formatMilliseconds(totalTime),
@@ skipping 44 matching lines @@
     },
 
     /**
      * @param {string} columnIdentifier
      * @return {?Element}
      */
     _createValueCell: function(columnIdentifier)
     {
         if (columnIdentifier !== "self" && columnIdentifier !== "total")
             return null;
-
         var cell = this.createTD(columnIdentifier);
         cell.className = "numeric-column";
-        var div = createElement("div");
-        var valueSpan = createElement("span");
-        valueSpan.textContent = this.data[columnIdentifier];
-        div.appendChild(valueSpan);
+        var textDiv = cell.createChild("div");
+        textDiv.createChild("span").textContent = this.data[columnIdentifier];
         var percentColumn = columnIdentifier + "-percent";
         if (percentColumn in this.data) {
-            var percentSpan = createElement("span");
-            percentSpan.className = "percent-column";
-            percentSpan.textContent = this.data[percentColumn];
-            div.appendChild(percentSpan);
-            div.classList.add("profile-multiple-values");
+            textDiv.createChild("span", "percent-column").textContent = this.data[percentColumn];
+            textDiv.classList.add("profile-multiple-values");
         }
-        cell.appendChild(div);
+        cell.createChild("div", "background-bar").style.width = this._profileNode[columnIdentifier + "Time"] * 100 / this._maxTime[columnIdentifier] + "%";

[caseq, 2015/08/18 21:06:29]

explicitly format as decimal to prevent accidentally having exponential notation
getting through to CSS?

[alph, 2015/08/18 21:16:19]

Done.

         return cell;
     },
 
     /**
      * @override
      */
     populate: function()
     {
         if (this._populated)
             return;
         this._populated = true;
         if (!this._profileNode.children)
             return;
         for (var node of this._profileNode.children.values()) {
-            var gridNode = new WebInspector.TimelineTreeView.GridNode(node, this._totalTime);
+            var gridNode = new WebInspector.TimelineTreeView.GridNode(node, this._totalTime, this._maxTime.self, this._maxTime.total);
             this.insertChildOrdered(gridNode);
         }
     },
 
     __proto__: WebInspector.SortableDataGridNode.prototype
 }