[Devtools] Added row decoration to canvas timeline experiment

third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.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.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.SortableDataGrid} dataGrid
  */
@@ skipping 139 matching lines @@
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
         context.translate(0, this._networkLogView.headerHeight());
         context.rect(0, 0, this._offsetWidth, this._offsetHeight);
         context.clip();
         var rowHeight = this._networkLogView.rowHeight();
         var scrollTop = this._scrollTop();
         var firstRequestIndex = Math.floor(scrollTop / rowHeight);
         var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / rowHeight));
         for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
             var rowOffset = rowHeight * i;
+            var rowNumber = i - firstRequestIndex;
+            this._decorateRow(context, rowNumber, rowOffset - scrollTop, rowHeight);
             var request = requests[i];
             var ranges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0);
             for (var range of ranges) {
                 if (range.name === WebInspector.RequestTimeRangeNames.Total ||
                     range.name === WebInspector.RequestTimeRangeNames.Sending ||
                     range.end - range.start === 0)
                     continue;
                 this._drawBar(context, range, rowOffset - scrollTop);
             }
         }
@@ skipping 55 matching lines @@
         context.rect(start, y, end - start, height - lineWidth);
         if (lineWidth) {
             context.lineWidth = lineWidth;
             context.strokeStyle = borderColor;
             context.stroke();
         }
         context.fill();
         context.restore();
     },
 
+    /**
+     * @param {!CanvasRenderingContext2D} context
+     * @param {number} rowNumber
+     * @param {number} y
+     * @param {number} rowHeight
+     */
+    _decorateRow: function(context, rowNumber, y, rowHeight)
+    {
+        context.save();
+        if (rowNumber % 2 === 1)
+            return;
+
+        context.beginPath();
+        context.fillStyle = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
+        context.rect(0, y, this._offsetWidth, rowHeight);
+        context.fill();
+        context.restore();
+    },
+
     __proto__: WebInspector.VBox.prototype
 }