Revert of 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 71c8a933e07ce608d3807f08a9bc5d9895b6ef11..45b6cab911621837f78a7b118348fa15ef44fbe2 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 @@
     this._imageByFrame(frames[0]).then(image => {
       if (this._drawGeneration !== drawGeneration)
         return;
-      if (!image || !image.naturalWidth || !image.naturalHeight)
+      if (!image.naturalWidth || !image.naturalHeight)
         return;
       var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.Padding;
       var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
@@ -376,15 +376,34 @@
 
   /**
    * @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(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
+      imagePromise = frame.imageDataPromise().then(createImage);
       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;
+    }
   }
 
   /**
@@ -419,12 +438,12 @@
 
     /**
      * @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 || !image)
+      if (this._drawGeneration !== drawGeneration)
         return;
       context.drawImage(image, x, 1, imageWidth, imageHeight);
     }
@@ -448,13 +467,12 @@
 
     /**
      * @this {Timeline.TimelineFilmStripOverview}
-     * @param {?HTMLImageElement} image
+     * @param {!HTMLImageElement} image
      * @return {?Element}
      */
     function createFrameElement(image) {
       var element = createElementWithClass('div', 'frame');
-      if (image)
-        element.createChild('div', 'thumbnail').appendChild(image);
+      element.createChild('div', 'thumbnail').appendChild(image);
       this._lastFrame = frame;
       this._lastElement = element;
       return element;