DevTools: Update filmstrip frames on UI scale.

third_party/WebKit/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 152 matching lines @@
 
 WebInspector.TimelineEventOverview.Network.prototype = {
     /**
      * @override
      */
     update: function()
     {
         WebInspector.TimelineEventOverview.prototype.update.call(this);
         var height = this._canvas.height;
         var numBands = categoryBand(WebInspector.TimelineUIUtils.NetworkCategory.Other) + 1;
-        var bandHeight = height / numBands;
-        if (bandHeight % 1) {
-            console.error("Network strip height should be a multiple of the categories number");
-            bandHeight = Math.floor(bandHeight);
-        }
+        var bandHeight = Math.floor(height / numBands);
         var devicePixelRatio = window.devicePixelRatio;
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var canvasWidth = this._canvas.width;
         var scale = canvasWidth / timeSpan;
         var ctx = this._context;
         var requests = this._model.networkRequests();
         /** @type {!Map<string,!{waiting:!Path2D,transfer:!Path2D}>} */
         var paths = new Map();
         requests.forEach(drawRequest);
@@ skipping 265 matching lines @@
      */
     update: function()
     {
         WebInspector.TimelineEventOverview.prototype.update.call(this);
         if (!this._filmStripModel)
             return;
         var frames = this._filmStripModel.frames();
         if (!frames.length)
             return;
 
-        if (this._imageWidth) {
-            this._drawFrames();
-            return;
-        }
-
-        this._imageByFrame(frames[0])
-            .then(calculateWidth.bind(this))
-            .then(this._drawFrames.bind(this));
-
-        /**
-         * @this {WebInspector.TimelineFilmStripOverview}
-         * @param {!HTMLImageElement} image
-         */
-        function calculateWidth(image)
-        {
-            var naturalHeight = image.naturalHeight;
-            if (!naturalHeight)
+        var drawGeneration = Symbol("drawGeneration");
+        this._drawGeneration = drawGeneration;
+        this._imageByFrame(frames[0]).then(image => {
+            if (this._drawGeneration !== drawGeneration)
                 return;
-            var naturalWidth = image.naturalWidth;
-            this._imageHeight = this._canvas.height - 2 * WebInspector.TimelineFilmStripOverview.Padding;
-            this._imageWidth = Math.ceil(this._imageHeight * naturalWidth / naturalHeight);
-        }
+            if (!image.naturalHeight)
+                return;
+            var imageHeight = this._canvas.height - 2 * WebInspector.TimelineFilmStripOverview.Padding;
+            var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
+            this._drawFrames(imageWidth, imageHeight);
+        });
     },
 
     /**
      * @param {!WebInspector.FilmStripModel.Frame} frame
      * @return {!Promise<!HTMLImageElement>}
      */
     _imageByFrame: function(frame)
     {
         var imagePromise = this._frameToImagePromise.get(frame);
         if (!imagePromise) {
             imagePromise = frame.imageDataPromise().then(createImage);
             this._frameToImagePromise.set(frame, imagePromise);
         }
         return imagePromise;
 
         /**
          * @param {?string} data
          * @return {!Promise<!HTMLImageElement>}
          */
         function createImage(data)
         {
             var image = /** @type {!HTMLImageElement} */ (createElement("img"));
             if (data)
                 image.src = "data:image/jpg;base64," + data;
             return image.completePromise();
         }
     },
 
-    _drawFrames: function()
+    /**
+     * @param {number} imageWidth
+     * @param {number} imageHeight
+     */
+    _drawFrames: function(imageWidth, imageHeight)
     {
-        if (!this._filmStripModel || !this._imageWidth)
+        if (!this._filmStripModel || !imageWidth)
             return;
         if (!this._filmStripModel.frames().length)
             return;
         var padding = WebInspector.TimelineFilmStripOverview.Padding;
         var width = this._canvas.width;
-        var imageWidth = this._imageWidth;
-        var imageHeight = this._imageHeight;
         var zeroTime = this._tracingModel.minimumRecordTime();
         var spanTime = this._tracingModel.maximumRecordTime() - zeroTime;
         var scale = spanTime / width;
         var context = this._canvas.getContext("2d");
-        var currentDrawGeneration = Symbol("drawGeneration");
-        this._lastDrawGeneration = currentDrawGeneration;
+        var drawGeneration = this._drawGeneration;
 
         context.beginPath();
         for (var x = padding; x < width; x += imageWidth + 2 * padding) {
             var time = zeroTime + (x + imageWidth / 2) * scale;
             var frame = this._frameByTime(time);
             context.rect(x - 0.5, 0.5, imageWidth + 1, imageHeight + 1);
             this._imageByFrame(frame).then(drawFrameImage.bind(this, x));
         }
         context.strokeStyle = "#ddd";
         context.stroke();
 
         /**
          * @param {number} x
          * @param {!HTMLImageElement} image
          * @this {WebInspector.TimelineFilmStripOverview}
          */
         function drawFrameImage(x, image)
         {
             // Ignore draws deferred from a previous update call.
-            if (this._lastDrawGeneration !== currentDrawGeneration)
+            if (this._drawGeneration !== drawGeneration)
                 return;
             context.drawImage(image, x, 1, imageWidth, imageHeight);
         }
     },
 
     /**
      * @param {number} time
      * @return {!WebInspector.FilmStripModel.Frame}
      */
     _frameByTime: function(time)
@@ skipping 284 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;
     }
 }