DevTools: Show screenshots on the main flamechart

third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
index 45b6cab911621837f78a7b118348fa15ef44fbe2..71c8a933e07ce608d3807f08a9bc5d9895b6ef11 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
@@ -364,7 +364,7 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
     this._imageByFrame(frames[0]).then(image => {
       if (this._drawGeneration !== drawGeneration)
         return;
-      if (!image.naturalWidth || !image.naturalHeight)
+      if (!image || !image.naturalWidth || !image.naturalHeight)
         return;
       var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.Padding;
       var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
@@ -376,34 +376,15 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
 
   /**
    * @param {!SDK.FilmStripModel.Frame} frame
-   * @return {!Promise<!HTMLImageElement>}
+   * @return {!Promise<?HTMLImageElement>}
    */
   _imageByFrame(frame) {
     var imagePromise = this._frameToImagePromise.get(frame);
     if (!imagePromise) {
-      imagePromise = frame.imageDataPromise().then(createImage);
+      imagePromise = frame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
       this._frameToImagePromise.set(frame, imagePromise);
     }
     return imagePromise;
-
-    /**
-     * @param {?string} data
-     * @return {!Promise<!HTMLImageElement>}
-     */
-    function createImage(data) {
-      var fulfill;
-      var promise = new Promise(f => fulfill = f);
-
-      var image = /** @type {!HTMLImageElement} */ (createElement('img'));
-      if (data) {
-        image.src = 'data:image/jpg;base64,' + data;
-        image.addEventListener('load', () => fulfill(image));
-        image.addEventListener('error', () => fulfill(image));
-      } else {
-        fulfill(image);
-      }
-      return promise;
-    }
   }
 
   /**
@@ -438,12 +419,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
 
     /**
      * @param {number} x
-     * @param {!HTMLImageElement} image
+     * @param {?HTMLImageElement} image
      * @this {Timeline.TimelineFilmStripOverview}
      */
     function drawFrameImage(x, image) {
       // Ignore draws deferred from a previous update call.
-      if (this._drawGeneration !== drawGeneration)
+      if (this._drawGeneration !== drawGeneration || !image)
         return;
       context.drawImage(image, x, 1, imageWidth, imageHeight);
     }
@@ -467,12 +448,13 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
 
     /**
      * @this {Timeline.TimelineFilmStripOverview}
-     * @param {!HTMLImageElement} image
+     * @param {?HTMLImageElement} image
      * @return {?Element}
      */
     function createFrameElement(image) {
       var element = createElementWithClass('div', 'frame');
-      element.createChild('div', 'thumbnail').appendChild(image);
+      if (image)
+        element.createChild('div', 'thumbnail').appendChild(image);
       this._lastFrame = frame;
       this._lastElement = element;
       return element;