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

Source/devtools/front_end/timeline/TimelineTreeView.js

Index: Source/devtools/front_end/timeline/TimelineTreeView.js
diff --git a/Source/devtools/front_end/timeline/TimelineTreeView.js b/Source/devtools/front_end/timeline/TimelineTreeView.js
index 7fa6ed61dccdb0a72ef331ae0352861c6a2197dd..35e548f34858560a807197a8dfb3cf30b4f55eb8 100644
--- a/Source/devtools/front_end/timeline/TimelineTreeView.js
+++ b/Source/devtools/front_end/timeline/TimelineTreeView.js
@@ -118,9 +118,15 @@ WebInspector.TimelineTreeView.prototype = {
         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();
@@ -288,10 +294,12 @@ WebInspector.TimelineTreeView.eventURL = function(event)
 /**
  * @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
@@ -313,6 +321,7 @@ WebInspector.TimelineTreeView.GridNode = function(profileNode, grandTotalTime)
     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;
@@ -377,22 +386,16 @@ WebInspector.TimelineTreeView.GridNode.prototype = {
     {
         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;
     },
 
@@ -407,7 +410,7 @@ WebInspector.TimelineTreeView.GridNode.prototype = {
         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);
         }
     },