DevTools: Show GPU utilization bar on timeline

Source/devtools/front_end/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 116 matching lines @@
 
     // Short events filter is disabled by default.
     this._durationFilter = new WebInspector.TimelineIsLongFilter();
 
     this._expandOffset = 15;
 
     this._headerLineCount = 1;
     this._adjustHeaderHeight();
 
     this._mainThreadTasks = /** @type {!Array.<{startTime: number, endTime: number}>} */ ([]);
+    this._gpuTasks = /** @type {!Array.<{startTime: number, endTime: number, pid: number}>} */ ([]);
     this._cpuBarsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-cpu-bars");
+    if (WebInspector.experimentsSettings.gpuTimeline.isEnabled()) {
+        this._cpuBarsElement.style.top = "1px";

[yurys, 2013/10/31 15:06:52]

I'd rather do this in timelinePanel.css since you already provide there top and
height for the case when GPU bars are off.

[alph, 2013/10/31 16:58:00]

Done.

+        this._cpuBarsElement.style.height = "9px";
+        this._gpuBarsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-gpu-bars");
+    }
     this._mainThreadMonitoringEnabled = WebInspector.settings.showCpuOnTimelineRuler.get();
     WebInspector.settings.showCpuOnTimelineRuler.addChangeListener(this._showCpuOnTimelineRulerChanged, this);
 
     this._createFileSelector();
 
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordAdded, this._onTimelineEventRecorded, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._onRecordsCleared, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStopped, this._onRecordingStopped, this);
 
     this._registerShortcuts();
 
     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);
 }
 
 // Define row and header height, should be in sync with styles for timeline graphs.
 WebInspector.TimelinePanel.rowHeight = 18;
 WebInspector.TimelinePanel.headerHeight = 19;
 
 WebInspector.TimelinePanel.durationFilterPresetsMs = [0, 1, 15];
 
 WebInspector.TimelinePanel.prototype = {
     _showCpuOnTimelineRulerChanged: function()
     {
         var mainThreadMonitoringEnabled = WebInspector.settings.showCpuOnTimelineRuler.get();
         if (this._mainThreadMonitoringEnabled !== mainThreadMonitoringEnabled) {
             this._mainThreadMonitoringEnabled = mainThreadMonitoringEnabled;
-            this._refreshMainThreadBars();
+            this._refreshAllUtilizationBars();
         }
     },
 
     /**
      * @param {Event} event
      * @return {boolean}
      */
     _startSplitterDragging: function(event)
     {
         this._dragOffset = this.element.offsetHeight - this._timelineMemorySplitter.offsetTop - 2 + event.pageY;
@@ skipping 465 matching lines @@
      */
     _innerAddRecordToTimeline: function(record)
     {
         if (record.type === WebInspector.TimelineModel.RecordType.Program) {
             this._mainThreadTasks.push({
                 startTime: WebInspector.TimelineModel.startTimeInSeconds(record),
                 endTime: WebInspector.TimelineModel.endTimeInSeconds(record)
             });
         }
 
+        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;
+        }
+
         var records = this._presentationModel.addRecord(record);
         this._allRecordsCount += records.length;
         var hasVisibleRecords = false;
         var presentationModel = this._presentationModel;
         function checkVisible(record)
         {
             hasVisibleRecords |= presentationModel.isVisible(record);
         }
         WebInspector.TimelinePresentationModel.forAllRecords(records, checkVisible);
 
@@ skipping 56 matching lines @@
 
     _resetPanel: function()
     {
         this._presentationModel.reset();
         this._boundariesAreValid = false;
         this._adjustScrollPosition(0);
         this._closeRecordDetails();
         this._allRecordsCount = 0;
         this._automaticallySizeWindow = true;
         this._mainThreadTasks = [];
+        this._gpuTasks = [];
+        this._pidToHue = {};
     },
 
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._containerElement];
     },
 
     wasShown: function()
     {
         WebInspector.Panel.prototype.wasShown.call(this);
@@ skipping 70 matching lines @@
             if (frames) {
                 this._updateFrameStatistics(frames);
                 const maxFramesForFrameBars = 30;
                 if  (frames.length && frames.length < maxFramesForFrameBars) {
                     this._timelineGrid.removeDividers();
                     this._updateFrameBars(frames);
                 } else
                     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();
         this._boundariesAreValid = true;
     },
 
     revealRecordAt: function(time)
     {
         var recordToReveal;
         function findRecordToReveal(record)
@@ skipping 139 matching lines @@
         this._updateSearchHighlight(false, true);
 
         if (highlightedListRowElement) {
             highlightedListRowElement.addStyleClass("highlighted-timeline-record");
             highlightedGraphRowElement.addStyleClass("highlighted-timeline-record");
         }
 
         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)
+    {
+        if (!container)

[yurys, 2013/10/31 15:06:52]

This is always false.

[alph, 2013/10/31 16:58:00]

Removed.

[alph, 2013/11/01 18:53:21]

This might be true if the user is enabled the experiment after the panel has
been created (without the gpu bars container). So reverting it back.

+            return;
+
         const barOffset = 3;
         const minGap = 3;
 
         var minWidth = WebInspector.TimelineCalculator._minWidth;
         var widthAdjustment = minWidth / 2;
 
         var width = this._graphRowsElementWidth;
         var boundarySpan = this._overviewPane.windowEndTime() - this._overviewPane.windowStartTime();
         var scale = boundarySpan / (width - minWidth - this._timelinePaddingLeft);
         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
          * @return {number}
          */
         function compareEndTime(value, task)
         {
             return value < task.endTime ? -1 : 1;
         }
 
         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")
+            this._pidToHue = {};
+        var pidToHue = this._pidToHue;
+
         for (; taskIndex < tasks.length; ++taskIndex) {
             var task = tasks[taskIndex];
             if (task.startTime > endTime)
                 break;
 
             var left = Math.max(0, this._calculator.computePosition(task.startTime) + barOffset - widthAdjustment);
             var right = Math.min(width, this._calculator.computePosition(task.endTime) + barOffset + widthAdjustment);
 
             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;
                 }
                 lastElement.style.width = (lastRight - lastLeft) + "px";
             }
 
             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;
 
             lastElement = element;
             element = element.nextSibling;
         }
 
         if (lastElement)
             lastElement.style.width = (lastRight - lastLeft) + "px";
 
@@ skipping 568 matching lines @@
 
     /**
      * @param {!WebInspector.TimelinePresentationModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return WebInspector.TimelineRecordListRow.testContentMatching(record, this._regExp);
     }
 }