[Devtools] Fixed network to sort items as they are received.

third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
  */
 Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number} rowHeight
    * @param {!Network.NetworkTimeCalculator} calculator
@@ skipping 289 matching lines @@
     context.save();
     context.scale(window.devicePixelRatio, window.devicePixelRatio);
     context.translate(0, this._headerHeight);
     context.rect(0, 0, this._offsetWidth, this._offsetHeight);
     context.clip();
     var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight);
     var lastRequestIndex = Math.min(nodes.length, firstRequestIndex + Math.ceil(this._offsetHeight / this._rowHeight));
     for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
       var rowOffset = this._rowHeight * i;
       var node = nodes[i];
-      this._decorateRow(context, node, i, rowOffset - this._scrollTop);
+      this._decorateRow(context, node, rowOffset - this._scrollTop);
       var drawNodes = [];
       if (node.hasChildren() && !node.expanded)
         drawNodes = /** @type {!Array<!Network.NetworkNode>} */ (node.flatChildren());
       drawNodes.push(node);
       for (var drawNode of drawNodes) {
         if (useTimingBars)
           this._drawTimingBars(context, drawNode, rowOffset - this._scrollTop);
         else
           this._drawSimplifiedBars(context, drawNode, rowOffset - this._scrollTop);
       }
@@ skipping 268 matching lines @@
         context.stroke();
       }
       context.fill();
     }
     context.restore();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!Network.NetworkNode} node
-   * @param {number} rowNumber
    * @param {number} y
    */
-  _decorateRow(context, node, rowNumber, y) {
-    var isOddRow = rowNumber % 2 === 1;
-    if (isOddRow && !node.hovered() && !node.isNavigationRequest() && !node.isOnInitiatorPath() &&
+  _decorateRow(context, node, y) {
+    var isStriped = node.isStriped();
+    if (!isStriped && !node.hovered() && !node.isNavigationRequest() && !node.isOnInitiatorPath() &&
         !node.isOnInitiatedPath())
       return;
 
     var color = getRowColor.call(this);
     if (color === 'transparent')
       return;
     context.save();
     context.beginPath();
     context.fillStyle = color;
     context.rect(0, y, this._offsetWidth, this._rowHeight);
     context.fill();
     context.restore();
 
     /**
      * @return {string}
      * @this {Network.NetworkWaterfallColumn}
      */
     function getRowColor() {
       if (node.hovered())
         return this._rowHoverColor;
       if (node.isOnInitiatorPath())
         return this._parentInitiatorColor;
       if (node.isOnInitiatedPath())
         return this._initiatedColor;
       if (node.isNavigationRequest())
         return this._rowNavigationRequestColor;
-      if (rowNumber % 2 === 1)
+      if (!isStriped)
         return 'transparent';
       return this._rowStripeColor;
     }
   }
 };
 
 /** @enum {string} */
 Network.NetworkWaterfallColumn._colorsForResourceType = {
   document: 'hsl(215, 100%, 80%)',
   font: 'hsl(8, 100%, 80%)',
   media: 'hsl(90, 50%, 80%)',
   image: 'hsl(90, 50%, 80%)',
   script: 'hsl(31, 100%, 80%)',
   stylesheet: 'hsl(272, 64%, 80%)',
   texttrack: 'hsl(8, 100%, 80%)',
   websocket: 'hsl(0, 0%, 95%)',
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };