DevTools: Show screenshots on the main flamechart

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
index 5da484d758321d4e8c14c68c93c39c0a4da17fac..28f3e7bb359f6daf366764b1d24ceaf8c3af734b 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
@@ -1569,15 +1569,17 @@ Timeline.TimelineUIUtils = class {
 
     var duration = Timeline.TimelineUIUtils.frameDuration(frame);
     contentHelper.appendElementRow(Common.UIString('Duration'), duration, frame.hasWarnings());
+    var durationInMillis = frame.endTime - frame.startTime;
+    contentHelper.appendTextRow(Common.UIString('FPS'), Math.floor(1000 / durationInMillis));
+    contentHelper.appendTextRow(Common.UIString('CPU time'), Number.millisToString(frame.cpuTime, true));
     if (filmStripFrame) {
-      var filmStripPreview = createElementWithClass('img', 'timeline-filmstrip-preview');
-      filmStripFrame.imageDataPromise().then(onGotImageData.bind(null, filmStripPreview));
+      var filmStripPreview = createElementWithClass('div', 'timeline-filmstrip-preview');
+      filmStripFrame.imageDataPromise()
+          .then(data => UI.loadImageFromData(data))
+          .then(image => image && filmStripPreview.appendChild(image));
       contentHelper.appendElementRow('', filmStripPreview);
       filmStripPreview.addEventListener('click', frameClicked.bind(null, filmStripFrame), false);
     }
-    var durationInMillis = frame.endTime - frame.startTime;
-    contentHelper.appendTextRow(Common.UIString('FPS'), Math.floor(1000 / durationInMillis));
-    contentHelper.appendTextRow(Common.UIString('CPU time'), Number.millisToString(frame.cpuTime, true));
 
     if (frame.layerTree) {
       contentHelper.appendElementRow(
@@ -1586,15 +1588,6 @@ Timeline.TimelineUIUtils = class {
     }
 
     /**
-     * @param {!Element} image
-     * @param {?string} data
-     */
-    function onGotImageData(image, data) {
-      if (data)
-        image.src = 'data:image/jpg;base64,' + data;
-    }
-
-    /**
      * @param {!SDK.FilmStripModel.Frame} filmStripFrame
      */
     function frameClicked(filmStripFrame) {