DevTools: Show GPU utilization bar on timeline

Source/devtools/front_end/TimelinePanel.js

Index: Source/devtools/front_end/TimelinePanel.js
diff --git a/Source/devtools/front_end/TimelinePanel.js b/Source/devtools/front_end/TimelinePanel.js
index 6fa3dcf729ee63a96485b8cca52a5afdef223f53..46dc2c1cf934ec619c33c2819ca1fb2391921d6f 100644
--- a/Source/devtools/front_end/TimelinePanel.js
+++ b/Source/devtools/front_end/TimelinePanel.js
@@ -134,7 +134,11 @@ WebInspector.TimelinePanel = function()
     this._adjustHeaderHeight();
 
     this._mainThreadTasks = /** @type {!Array.<{startTime: number, endTime: number}>} */ ([]);
-    this._cpuBarsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-cpu-bars");
+    this._gpuTasks = /** @type {!Array.<{startTime: number, endTime: number, pid: number}>} */ ([]);
+    var utilizationStripsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-utilization-strips");
+    this._cpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip");
+    if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
+        this._gpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip gpu");
     this._mainThreadMonitoringEnabled = WebInspector.settings.showCpuOnTimelineRuler.get();
     WebInspector.settings.showCpuOnTimelineRuler.addChangeListener(this._showCpuOnTimelineRulerChanged, this);
 
@@ -150,7 +154,7 @@ WebInspector.TimelinePanel = function()
     this._allRecordsCount = 0;
 
     this._presentationModel.addFilter(new WebInspector.TimelineWindowFilter(this._overviewPane));
-    this._presentationModel.addFilter(new WebInspector.TimelineCategoryFilter()); 
+    this._presentationModel.addFilter(new WebInspector.TimelineCategoryFilter());
     this._presentationModel.addFilter(this._durationFilter);
 }
 
@@ -166,7 +170,7 @@ WebInspector.TimelinePanel.prototype = {
         var mainThreadMonitoringEnabled = WebInspector.settings.showCpuOnTimelineRuler.get();
         if (this._mainThreadMonitoringEnabled !== mainThreadMonitoringEnabled) {
             this._mainThreadMonitoringEnabled = mainThreadMonitoringEnabled;
-            this._refreshMainThreadBars();
+            this._refreshAllUtilizationBars();
         }
     },
 
@@ -652,6 +656,16 @@ WebInspector.TimelinePanel.prototype = {
             });
         }
 
+        if (record.type === WebInspector.TimelineModel.RecordType.GpuTask) {
+            this._gpuTasks.push({
+                startTime: WebInspector.TimelineModel.startTimeInSeconds(record),
+                endTime: WebInspector.TimelineModel.endTimeInSeconds(record),
+                pid: record.data["rendererPid"],
+                name: record.data["name"]
+            });
+            return true;

[caseq, 2013/11/01 13:04:20]

So this will fire even if we're adding a record outside of selected window? I
don't think this helps performance ;)

[alph, 2013/11/01 16:40:19]

Fixed.

+        }
+
         var records = this._presentationModel.addRecord(record);
         this._allRecordsCount += records.length;
         var hasVisibleRecords = false;
@@ -728,6 +742,8 @@ WebInspector.TimelinePanel.prototype = {
         this._allRecordsCount = 0;
         this._automaticallySizeWindow = true;
         this._mainThreadTasks = [];
+        this._gpuTasks = [];
+        this._pidToHue = {};
     },
 
     elementsToRestoreScrollPositionsFor: function()
@@ -818,8 +834,7 @@ WebInspector.TimelinePanel.prototype = {
                     this._timelineGrid.updateDividers(this._calculator);
             } else
                 this._timelineGrid.updateDividers(this._calculator);
-            if (this._mainThreadMonitoringEnabled)
-                this._refreshMainThreadBars();
+            this._refreshAllUtilizationBars();
         }
         if (this._memoryStatistics.visible())
             this._memoryStatistics.refresh();
@@ -979,7 +994,19 @@ WebInspector.TimelinePanel.prototype = {
         return recordsInWindow.length;
     },
 
-    _refreshMainThreadBars: function()
+    _refreshAllUtilizationBars: function()
+    {
+        this._refreshUtilizationBars(WebInspector.UIString("CPU"), this._mainThreadMonitoringEnabled ? this._mainThreadTasks : [], this._cpuBarsElement);
+        if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
+            this._refreshUtilizationBars(WebInspector.UIString("GPU"), this._gpuTasks, this._gpuBarsElement);
+    },
+
+    /**
+     * @param {string} name
+     * @param {!Array.<{startTime: number, endTime: number, pid: number}>} tasks
+     * @param {Element} container
+     */
+    _refreshUtilizationBars: function(name, tasks, container)
     {
         const barOffset = 3;
         const minGap = 3;
@@ -993,8 +1020,6 @@ WebInspector.TimelinePanel.prototype = {
         var startTime = this._overviewPane.windowStartTime() - this._timelinePaddingLeft * scale;
         var endTime = startTime + width * scale;
 
-        var tasks = this._mainThreadMonitoringEnabled ? this._mainThreadTasks : [];
-
         /**
          * @param {number} value
          * @param {{startTime: number, endTime: number}} task
@@ -1007,12 +1032,15 @@ WebInspector.TimelinePanel.prototype = {
 
         var taskIndex = insertionIndexForObjectInListSortedByFunction(startTime, tasks, compareEndTime);
 
-        var container = this._cpuBarsElement;
         var element = container.firstChild;
         var lastElement;
         var lastLeft;
         var lastRight;
 
+        if (typeof this._pidToHue === "undefined")

[caseq, 2013/11/01 13:04:20]

if (!this._pidToHue) ...

[alph, 2013/11/01 16:40:19]

Done.

+            this._pidToHue = {};
+        var pidToHue = this._pidToHue;
+
         for (; taskIndex < tasks.length; ++taskIndex) {
             var task = tasks[taskIndex];
             if (task.startTime > endTime)
@@ -1023,7 +1051,8 @@ WebInspector.TimelinePanel.prototype = {
 
             if (lastElement) {
                 var gap = Math.floor(left) - Math.ceil(lastRight);
-                if (gap < minGap) {
+                if (gap < minGap
+                    && (!task.pid || tasks[lastElement._tasksInfo.firstTaskIndex].pid === task.pid)) {
                     lastRight = right;
                     lastElement._tasksInfo.lastTaskIndex = taskIndex;
                     continue;
@@ -1034,8 +1063,14 @@ WebInspector.TimelinePanel.prototype = {
             if (!element)
                 element = container.createChild("div", "timeline-graph-bar");
 
+            if (task.pid) {
+                if (!(task.pid in pidToHue))
+                    pidToHue[task.pid] = (Object.keys(pidToHue).length * 113) % 360;
+                var hue = pidToHue[task.pid];
+                element.style.backgroundColor = "hsla(" + hue + ",50%,50%,0.2)";
+            }
             element.style.left = left + "px";
-            element._tasksInfo = {tasks: tasks, firstTaskIndex: taskIndex, lastTaskIndex: taskIndex};
+            element._tasksInfo = {name: name, tasks: tasks, firstTaskIndex: taskIndex, lastTaskIndex: taskIndex};
             lastLeft = left;
             lastRight = right;