DevTools: Fix first paint screenshot.

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 443 matching lines @@
             return;
         var frames = this._filmStripModel.frames();
         if (!frames.length)
             return;
 
         var drawGeneration = Symbol("drawGeneration");
         this._drawGeneration = drawGeneration;
         this._imageByFrame(frames[0]).then(image => {
             if (this._drawGeneration !== drawGeneration)
                 return;
-            if (!image.naturalHeight)
+            if (!image.naturalWidth || !image.naturalHeight)
                 return;
             var imageHeight = this._canvas.height - 2 * WebInspector.TimelineFilmStripOverview.Padding;
             var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
+            var popoverScale = Math.min(200 / image.naturalWidth, 1);
+            this._emptyImage = new Image(image.naturalWidth * popoverScale, image.naturalHeight * popoverScale);

[caseq, 2016/04/06 00:00:39]

Can we make it evident that the screenshot is not available, i.e. make it
something else than just blank?

             this._drawFrames(imageWidth, imageHeight);
         });
     },
 
     /**
      * @param {!WebInspector.FilmStripModel.Frame} frame
      * @return {!Promise<!HTMLImageElement>}
      */
     _imageByFrame: function(frame)
     {
@@ skipping 31 matching lines @@
         var width = this._canvas.width;
         var zeroTime = this._tracingModel.minimumRecordTime();
         var spanTime = this._tracingModel.maximumRecordTime() - zeroTime;
         var scale = spanTime / width;
         var context = this._canvas.getContext("2d");
         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);
+            var frame = this._filmStripModel.frameByTimestamp(time);
+            if (!frame)
+                continue;
             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._drawGeneration !== drawGeneration)
                 return;
             context.drawImage(image, x, 1, imageWidth, imageHeight);
         }
     },
 
     /**
-     * @param {number} time
-     * @return {!WebInspector.FilmStripModel.Frame}
-     */
-    _frameByTime: function(time)
-    {
-        /**
-         * @param {number} time
-         * @param {!WebInspector.FilmStripModel.Frame} frame
-         * @return {number}
-         */
-        function comparator(time, frame)
-        {
-            return time - frame.timestamp;
-        }
-        // Using the first frame to fill the interval between recording start
-        // and a moment the frame is taken.
-        var frames = this._filmStripModel.frames();
-        var index = Math.max(frames.upperBound(time, comparator) - 1, 0);
-        return frames[index];
-    },
-
-    /**
      * @override
      * @param {number} x
      * @return {!Promise<?Element>}
      */
     popoverElementPromise: function(x)
     {
         if (!this._filmStripModel || !this._filmStripModel.frames().length)
             return Promise.resolve(/** @type {?Element} */ (null));
 
         var time = this._calculator.positionToTime(x);
-        var frame = this._frameByTime(time);
+        var frame = this._filmStripModel.frameByTimestamp(time);
         if (frame === this._lastFrame)
             return Promise.resolve(this._lastElement);
-        return this._imageByFrame(frame).then(createFrameElement.bind(this));
+        var imagePromise = frame ? this._imageByFrame(frame) : Promise.resolve(this._emptyImage);
+        return imagePromise.then(createFrameElement.bind(this));
 
         /**
          * @this {WebInspector.TimelineFilmStripOverview}
          * @param {!HTMLImageElement} image
          * @return {?Element}
          */
         function createFrameElement(image)
         {
             var element = createElementWithClass("div", "frame");
             element.createChild("div", "thumbnail").appendChild(image);
             WebInspector.appendStyle(element, "timeline/timelinePanel.css");
             this._lastFrame = frame;
             this._lastElement = element;
             return element;
         }
     },
 
     /**
      * @override
      */
     reset: function()
     {
-        this._lastFrame = null;
+        this._lastFrame = undefined;
         this._lastElement = null;
         this._filmStripModel = new WebInspector.FilmStripModel(this._tracingModel);
         /** @type {!Map<!WebInspector.FilmStripModel.Frame,!Promise<!HTMLImageElement>>} */
         this._frameToImagePromise = new Map();
         this._imageWidth = 0;
     },
 
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
@@ skipping 219 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;
     }
 }