DevTools: Optimize events overview drawing performance

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 101 matching lines @@
         var descriptors = WebInspector.TimelineUIUtils.eventDispatchDesciptors();
         /** @type {!Map.<string,!WebInspector.TimelineUIUtils.EventDispatchTypeDescriptor>} */
         var descriptorsByType = new Map();
         var maxPriority = -1;
         for (var descriptor of descriptors) {
             for (var type of descriptor.eventTypes)
                 descriptorsByType.set(type, descriptor);
             maxPriority = Math.max(maxPriority, descriptor.priority);
         }
 
-        var /** @const */ minWidth = 2 * window.devicePixelRatio;
-        var stripHeight = height - padding;
+        var devicePixelRatio = window.devicePixelRatio;
+        var /** @const */ minWidth = 2 * devicePixelRatio;
+        var stripHeight = (height - padding) * devicePixelRatio;
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var canvasWidth = this._canvas.width;
         var scale = canvasWidth / timeSpan;
+        position = (position + padding) * devicePixelRatio;
 
         for (var priority = 0; priority <= maxPriority; ++priority) {
             for (var i = 0; i < events.length; ++i) {
                 var event = events[i];
                 if (event.name !== WebInspector.TimelineModel.RecordType.EventDispatch)
                     continue;
                 var descriptor = descriptorsByType.get(event.args["data"]["type"]);
                 if (!descriptor || descriptor.priority !== priority)
                     continue;
                 var start = Number.constrain(Math.floor((event.startTime - timeOffset) * scale), 0, canvasWidth);
                 var end = Number.constrain(Math.ceil((event.endTime - timeOffset) * scale), 0, canvasWidth);
                 var width = Math.max(end - start, minWidth);
-                this._renderBar(start, start + width, position + padding, stripHeight, descriptor.color);
+                this._renderBar(start, start + width, position, stripHeight, descriptor.color);
             }
         }
 
         return height;
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @param {number} height
      * @return {number}
      */
     _drawNetwork: function(events, position, height)
     {
         var /** @const */ padding = 1;
         var /** @const */ maxBandHeight = 4;
         position += padding;
+        var devicePixelRatio = window.devicePixelRatio;
         var bandsCount = WebInspector.TimelineUIUtils.calculateNetworkBandsCount(events);
         var bandInterval = Math.min(maxBandHeight, (height - padding) / (bandsCount || 1));
-        var bandHeight = Math.ceil(bandInterval);
+        var bandHeight = Math.ceil(bandInterval * devicePixelRatio);
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var canvasWidth = this._canvas.width;
         var scale = canvasWidth / timeSpan;
         var loadingCategory = WebInspector.TimelineUIUtils.categories()["loading"];
         var waitingColor = loadingCategory.backgroundColor;
         var processingColor = loadingCategory.fillColorStop1;
 
         /**
          * @param {number} band
          * @param {number} startTime
          * @param {number} endTime
          * @param {?WebInspector.TracingModel.Event} event
          * @this {WebInspector.TimelineEventOverview}
          */
         function drawBar(band, startTime, endTime, event)
         {
             var start = Number.constrain((startTime - timeOffset) * scale, 0, canvasWidth);
             var end = Number.constrain((endTime - timeOffset) * scale, 0, canvasWidth);
             var color = !event ||
                 event.name === WebInspector.TimelineModel.RecordType.ResourceReceiveResponse ||
                 event.name === WebInspector.TimelineModel.RecordType.ResourceSendRequest ? waitingColor : processingColor;
-            this._renderBar(Math.floor(start), Math.ceil(end), Math.floor(position + band * bandInterval), bandHeight, color);
+            this._renderBar(Math.floor(start), Math.ceil(end), Math.floor(devicePixelRatio * (position + band * bandInterval)), bandHeight, color);
         }
 
         WebInspector.TimelineUIUtils.iterateNetworkRequestsInRoundRobin(events, bandsCount, drawBar.bind(this));
         return height;
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @param {number} height
@@ skipping 68 matching lines @@
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @param {number} stripHeight
      * @return {number}
      */
     _drawEvents: function(events, position, stripHeight)
     {
         var /** @const */ padding = 1;
-        var visualHeight = stripHeight - padding;
+        var visualHeight = (stripHeight - padding) * window.devicePixelRatio;
         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;
         position += padding;
+        position *= window.devicePixelRatio;
 
         /**
          * @param {!WebInspector.TracingModel.Event} e
          * @this {WebInspector.TimelineEventOverview}
          */
         function onEventStart(e)
         {
             var pos = (e.startTime - timeOffset) * scale;
             if (categoryStack.length) {
                 var category = categoryStack.peekLast();
@@ skipping 143 matching lines @@
     /**
      * @param {number} begin
      * @param {number} end
      * @param {number} position
      * @param {number} height
      * @param {string} color
      */
     _renderBar: function(begin, end, position, height, color)
     {
         var x = begin;
-        var y = position * window.devicePixelRatio;
         var width = end - begin;
         this._context.fillStyle = color;
-        this._context.fillRect(x, y, width, height * window.devicePixelRatio);
+        this._context.fillRect(x, position, width, height);
     },
 
     /**
      * @override
      * @param {number} windowLeft
      * @param {number} windowRight
      * @return {!{startTime: number, endTime: number}}
      */
     windowTimes: function(windowLeft, windowRight)
     {
@@ skipping 140 matching lines @@
             counters[group] = this._quantDuration;
             this._callback(counters);
             interval -= this._quantDuration;
         }
         this._counters = [];
         this._counters[group] = interval;
         this._lastTime = time;
         this._remainder = this._quantDuration - interval;
     }
 }