DevTools: Show network requests on the timeline events overview.

Source/devtools/front_end/timeline/TimelineEventOverview.js

 /*
  * Copyright (C) 2013 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 32 matching lines @@
     for (var category in categories) {
         this._fillStyles[category] = categories[category].fillColorStop1;
         categories[category].addEventListener(WebInspector.TimelineCategory.Events.VisibilityChanged, this._onCategoryVisibilityChanged, this);
     }
 
     this._disabledCategoryFillStyle = "hsl(0, 0%, 67%)";
 }
 
 /** @const */
 WebInspector.TimelineEventOverview._stripHeight = 10;
+/** @const */
+WebInspector.TimelineEventOverview._maxNetworkStripHeight = 32;
 
 WebInspector.TimelineEventOverview.prototype = {
     /**
      * @override
      */
     dispose: function()
     {
         var categories = WebInspector.TimelineUIUtils.categories();
         for (var category in categories)
             categories[category].removeEventListener(WebInspector.TimelineCategory.Events.VisibilityChanged, this._onCategoryVisibilityChanged, this);
     },
 
     /**
      * @override
      */
     update: function()
     {
-        var /** @const */ topPadding = 2;
+        var /** @const */ padding = 2;
         this.resetCanvas();
         var threads = this._model.virtualThreads();
-        var estimatedHeight = 3 * WebInspector.TimelineEventOverview._stripHeight;
+        var mainThreadEvents = this._model.mainThreadEvents();
+        var estimatedHeight = padding + 3 * WebInspector.TimelineEventOverview._stripHeight;
+        estimatedHeight += padding + WebInspector.TimelineEventOverview._maxNetworkStripHeight;
         this._canvas.height = estimatedHeight * window.devicePixelRatio;
         this._canvas.style.height = estimatedHeight + "px";
-        var position = topPadding;
-        position += this._drawEvents(this._model.mainThreadEvents(), position);
+        var position = padding;
+        if (Runtime.experiments.isEnabled("networkRequestsOnTimeline")) {
+            position += this._drawNetwork(mainThreadEvents, position);
+            position += padding;
+        }
+        this._drawEvents(mainThreadEvents, position);
+        position += WebInspector.TimelineEventOverview._stripHeight;
         for (var thread of threads.filter(function(thread) { return !thread.isWorker(); }))
             this._drawEvents(thread.events, position);
         position += WebInspector.TimelineEventOverview._stripHeight;
         var workersHeight = 0;
         for (var thread of threads.filter(function(thread) { return thread.isWorker(); }))
             workersHeight = Math.max(workersHeight, this._drawEvents(thread.events, position));
         position += workersHeight;
         this.element.style.flexBasis = position + "px";
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @return {number}
      */
+    _drawNetwork: function(events, position)
+    {
+        /**
+         * @param {!Array.<!WebInspector.TracingModel.Event>} events
+         * @return {number}
+         */
+        function calculateNetworkBandsCount(events)
+        {
+            var openBands = new Set();
+            var maxBands = 0;
+            for (var i = 0; i < events.length; ++i) {
+                var e = events[i];
+                switch (e.name) {
+                case WebInspector.TimelineModel.RecordType.ResourceSendRequest:
+                case WebInspector.TimelineModel.RecordType.ResourceReceiveResponse:
+                case WebInspector.TimelineModel.RecordType.ResourceReceivedData:
+                    var reqId = e.args["data"]["requestId"];
+                    openBands.add(reqId);
+                    maxBands = Math.max(maxBands, openBands.size);
+                    break;
+                case WebInspector.TimelineModel.RecordType.ResourceFinish:
+                    var reqId = e.args["data"]["requestId"];
+                    if (!openBands.has(reqId))
+                        ++maxBands;
+                    else
+                        openBands.delete(reqId);
+                    break;
+                }
+            }
+            return maxBands;
+        }
+
+        var /** @const */ maxBandHeight = 4;
+        var bandsCount = calculateNetworkBandsCount(events);
+        var bandInterval = Math.min(maxBandHeight, WebInspector.TimelineEventOverview._maxNetworkStripHeight / (bandsCount || 1));
+        var bandHeight = Math.ceil(bandInterval);
+        var timeOffset = this._model.minimumRecordTime();
+        var timeSpan = this._model.maximumRecordTime() - timeOffset;
+        var scale = this._canvas.width / timeSpan;
+        var loadingCategory = WebInspector.TimelineUIUtils.categories()["loading"];
+        var waitingColor = loadingCategory.fillColorStop0;
+        var processingColor = loadingCategory.fillColorStop1;
+
+        var bandsInUse = new Array(bandsCount);
+        var freeBandsCount = bandsCount;
+        var requestsInFlight = new Map();
+        var lastBand = 0;
+
+        /**
+         * @constructor
+         * @param {number} band
+         * @param {number} lastTime
+         * @param {boolean} gotResponse
+         */
+        function RequestInfo(band, lastTime, gotResponse)
+        {
+            this.band = band;
+            this.lastTime = lastTime;
+            this.gotResponse = gotResponse;
+        }
+
+        /**
+         * @return {number}
+         */
+        function seizeBand()
+        {
+            console.assert(freeBandsCount);
+            do {
+                lastBand = (lastBand + 1) % bandsInUse.length;
+            } while (bandsInUse[lastBand]);
+            bandsInUse[lastBand] = true;
+            --freeBandsCount;
+            return lastBand;
+        }
+
+        /**
+         * @param {number} band
+         */
+        function releaseBand(band)
+        {
+            bandsInUse[band] = false;
+            ++freeBandsCount;
+        }
+
+        /**
+         * @param {string} reqId
+         * @param {number=} time
+         * @return {!RequestInfo}
+         */
+        function getRequestInfo(reqId, time)
+        {
+            var reqInfo = requestsInFlight.get(reqId);
+            if (!reqInfo) {
+                reqInfo = new RequestInfo(seizeBand(), time || timeOffset, false);
+                requestsInFlight.set(reqId, reqInfo);
+            }
+            return reqInfo;
+        }
+
+        /**
+         * @param {string} reqId
+         * @param {!RequestInfo} reqInfo
+         * @param {number} time
+         * @param {boolean=} finish
+         * @this {WebInspector.TimelineEventOverview}
+         */
+        function advanceRequest(reqId, reqInfo, time, finish)
+        {
+            var band = reqInfo.band;
+            var start = (reqInfo.lastTime - timeOffset) * scale;
+            var end = (time - timeOffset) * scale;
+            var color = reqInfo.gotResponse ? processingColor : waitingColor;
+            if (finish) {
+                releaseBand(band);
+                requestsInFlight.delete(reqId);
+            } else {
+                reqInfo.lastTime = time;
+                reqInfo.gotResponse = true;
+            }
+            this._renderBar(Math.floor(start), Math.ceil(end), Math.floor(position + band * bandInterval), bandHeight, color);
+        }
+
+        for (var i = 0; i < events.length; ++i) {
+            var event = events[i];
+            switch (event.name) {
+            case WebInspector.TimelineModel.RecordType.ResourceSendRequest:
+                var reqId = event.args["data"]["requestId"];
+                getRequestInfo(reqId, event.startTime);
+                break;
+            case WebInspector.TimelineModel.RecordType.ResourceReceivedData:
+            case WebInspector.TimelineModel.RecordType.ResourceReceiveResponse:
+            case WebInspector.TimelineModel.RecordType.ResourceFinish:
+                var reqId = event.args["data"]["requestId"];
+                var reqInfo = getRequestInfo(reqId);
+                var finish = event.name === WebInspector.TimelineModel.RecordType.ResourceFinish;
+                advanceRequest.call(this, reqId, reqInfo, event.startTime, finish);
+                break;
+            }
+        }
+
+        for (var reqId of requestsInFlight.keys())
+            advanceRequest.call(this, reqId, requestsInFlight.get(reqId), timeOffset + timeSpan);
+
+        return Math.ceil(bandInterval * bandsCount);
+    },
+
+    /**
+     * @param {!Array.<!WebInspector.TracingModel.Event>} events
+     * @param {number} position
+     * @return {number}
+     */
     _drawEvents: function(events, position)
     {
+        var /** @const */ padding = 1;
         var stripHeight = WebInspector.TimelineEventOverview._stripHeight;
+        var visualHeight = stripHeight - padding;
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var scale = this._canvas.width / timeSpan;
         var ditherer = new WebInspector.Dithering();
         var categoryStack = [];
         var lastX = 0;
         var drawn = false;
 
         /**
+         * @param {!WebInspector.TimelineCategory} category
+         * @return {string}
+         * @this {WebInspector.TimelineEventOverview}
+         */
+        function categoryColor(category)
+        {
+            return category.hidden ? this._disabledCategoryFillStyle : this._fillStyles[category.name];
+        }
+
+        /**
          * @param {!WebInspector.TracingModel.Event} e
          * @this {WebInspector.TimelineEventOverview}
          */
         function onEventStart(e)
         {
             var pos = (e.startTime - timeOffset) * scale;
             if (categoryStack.length) {
                 var category = categoryStack.peekLast();
                 var bar = ditherer.appendInterval(category, lastX, pos);
                 if (bar) {
-                    this._renderBar(bar.start, bar.end, position, stripHeight, category);
+                    this._renderBar(bar.start, bar.end, position, visualHeight, categoryColor.call(this, category));
                     drawn = true;
                 }
             }
             categoryStack.push(WebInspector.TimelineUIUtils.eventStyle(e).category);
             lastX = pos;
         }
 
         /**
          * @param {!WebInspector.TracingModel.Event} e
          * @this {WebInspector.TimelineEventOverview}
          */
         function onEventEnd(e)
         {
             var category = categoryStack.pop();
             var pos = (e.endTime - timeOffset) * scale;
             var bar = ditherer.appendInterval(category, lastX, pos);
             if (bar) {
-                this._renderBar(bar.start, bar.end, position, stripHeight, category);
+                this._renderBar(bar.start, bar.end, position, visualHeight, categoryColor.call(this, category));
                 drawn = true;
             }
             lastX = pos;
         }
 
         WebInspector.TimelineModel.forEachEvent(events, onEventStart.bind(this), onEventEnd.bind(this));
         return drawn ? stripHeight : 0;
     },
 
     _onCategoryVisibilityChanged: function()
     {
         this.update();
     },
 
     /**
      * @param {number} begin
      * @param {number} end
      * @param {number} position
      * @param {number} height
-     * @param {!WebInspector.TimelineCategory} category
+     * @param {string} color
      */
-    _renderBar: function(begin, end, position, height, category)
+    _renderBar: function(begin, end, position, height, color)
     {
-        var /** @const */ stripPadding = 1;
-        var innerStripHeight = (height - stripPadding) * window.devicePixelRatio;
         var x = begin;
         var y = position * window.devicePixelRatio;
         var width = end - begin;
-        this._context.fillStyle = category.hidden ? this._disabledCategoryFillStyle : this._fillStyles[category.name];
-        this._context.fillRect(x, y, width, innerStripHeight);
+        this._context.fillStyle = color;
+        this._context.fillRect(x, y, width, height * window.devicePixelRatio);
     },
 
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }
 
 /**
  * @constructor
  * @template T
  */
 WebInspector.Dithering = function()
@@ skipping 62 matching lines @@
         for (var g of this._groupError.keys()) {
             if (!g)
                 continue;
             var value = this._groupError.get(g);
             value += (1 - value) * ratio;
             this._groupError.set(g, value);
         }
         return toDistribute;
     }
 }