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

BUG=521225

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

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

third_party/WebKit/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._maxTimes = { self: maxSelfTime, total: maxTotalTime };
     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._maxTimes[columnIdentifier]).toFixed(1) + "%";
         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._maxTimes.self, this._maxTimes.total);
             this.insertChildOrdered(gridNode);
         }
     },

third_party/WebKit/Source/devtools/front_end/timeline/timelinePanel.css

@@ -1007,6 +1007,7 @@
 
 .timeline-tree-view .data-grid td.numeric-column {
     text-align: right;
+    position: relative;
 }
 
 .timeline-tree-view .data-grid div.profile-multiple-values {
@@ -1014,7 +1015,7 @@
 }
 
 .timeline-tree-view .data-grid span.percent-column {
-    color: #999;
+    color: #888;
     width: 48px;
     display: inline-block;
 }
@@ -1045,3 +1046,17 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.timeline-tree-view .data-grid .background-bar {
+    height: 15px;
+    background-color: hsla(0, 100%, 74%, 0.1);
+    position: absolute;
+    right: -2px;
+    bottom: 0px;
+    border-bottom: 1px solid hsl(0, 100%, 74%);
+}
+
+.timeline-tree-view .data-grid .selected .background-bar {
+    background-color: rgba(255,255,255,0.25);
+    border-bottom-color: transparent;
+}