DevTools: Show screenshots on the main flamechart

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 346 matching lines @@
     super.update();
     var frames = this._model ? this._model.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.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);
       var popoverScale = Math.min(200 / image.naturalWidth, 1);
       this._emptyImage = new Image(image.naturalWidth * popoverScale, image.naturalHeight * popoverScale);
       this._drawFrames(imageWidth, imageHeight);
     });
   }
 
   /**
    * @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.loadImageFromData(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;
-    }
   }
 
   /**
    * @param {number} imageWidth
    * @param {number} imageHeight
    */
   _drawFrames(imageWidth, imageHeight) {
     if (!imageWidth || !this._model)
       return;
     var filmStripModel = this._model.filmStripModel();
@@ skipping 14 matching lines @@
       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
+     * @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);
     }
   }
 
   /**
    * @override
    * @param {number} x
    * @return {!Promise<?Element>}
    */
   overviewInfoPromise(x) {
     if (!this._model || !this._model.filmStripModel().frames().length)
       return Promise.resolve(/** @type {?Element} */ (null));
 
     var time = this.calculator().positionToTime(x);
     var frame = this._model.filmStripModel().frameByTimestamp(time);
     if (frame === this._lastFrame)
       return Promise.resolve(this._lastElement);
     var imagePromise = frame ? this._imageByFrame(frame) : Promise.resolve(this._emptyImage);
     return imagePromise.then(createFrameElement.bind(this));
 
     /**
      * @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;
     }
   }
 
   /**
    * @override
    */
   reset() {
@@ skipping 214 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;
   }
 };