DevTools: Refactor Timeline.TimelineUIUtils.buildPicturePreviewContent to be async

Review-Url: https://codereview.chromium.org/2752253003
Cr-Commit-Position: refs/heads/master@{#460473}

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

@@ -690,16 +690,14 @@ Timeline.TimelineUIUtils = class {
     }
 
     var target = /** @type {!SDK.Target} */ (maybeTarget);
-    if (!event[Timeline.TimelineUIUtils._previewElementSymbol]) {
+    if (typeof event[Timeline.TimelineUIUtils._previewElementSymbol] === 'undefined') {
+      var previewElement = null;
       var url = TimelineModel.TimelineData.forEvent(event).url;
-      event[Timeline.TimelineUIUtils._previewElementSymbol] = await new Promise(fulfill => {
-        if (url)
-          Components.DOMPresentationUtils.buildImagePreviewContents(target, url, false).then(fulfill);
-        else if (TimelineModel.TimelineData.forEvent(event).picture)
-          Timeline.TimelineUIUtils.buildPicturePreviewContent(event, target, fulfill);
-        else
-          fulfill();
-      }) || null;
+      if (url)
+        previewElement = await Components.DOMPresentationUtils.buildImagePreviewContents(target, url, false);
+      else if (TimelineModel.TimelineData.forEvent(event).picture)
+        previewElement = await Timeline.TimelineUIUtils.buildPicturePreviewContent(event, target);
+      event[Timeline.TimelineUIUtils._previewElementSymbol] = previewElement;
     }
 
     var nodeIdsToResolve = new Set();
@@ -1382,40 +1380,26 @@ Timeline.TimelineUIUtils = class {
   /**
    * @param {!SDK.TracingModel.Event} event
    * @param {!SDK.Target} target
-   * @param {function(!Element=)} callback
+   * @return {!Promise<?Element>}
    */
-  static buildPicturePreviewContent(event, target, callback) {
-    new TimelineModel.LayerPaintEvent(event, target).snapshotPromise().then(onSnapshotLoaded);
-    /**
-     * @param {?SDK.SnapshotWithRect} snapshotWithRect
-     */
-    function onSnapshotLoaded(snapshotWithRect) {
-      if (!snapshotWithRect) {
-        callback();
-        return;
-      }
-      snapshotWithRect.snapshot.replay(null, null, 1).then(imageURL => onGotImage(imageURL));
-      snapshotWithRect.snapshot.release();
-    }
-
-    /**
-     * @param {?string} imageURL
-     */
-    function onGotImage(imageURL) {
-      if (!imageURL) {
-        callback();
-        return;
-      }
-      var container = createElement('div');
-      UI.appendStyle(container, 'components/imagePreview.css');
-      container.classList.add('image-preview-container', 'vbox', 'link');
-      var img = container.createChild('img');
-      img.src = imageURL;
-      var paintProfilerButton = container.createChild('a');
-      paintProfilerButton.textContent = Common.UIString('Paint Profiler');
-      container.addEventListener('click', showPaintProfiler, false);
-      callback(container);
-    }
+  static async buildPicturePreviewContent(event, target) {
+    var snapshotWithRect = await new TimelineModel.LayerPaintEvent(event, target).snapshotPromise();
+    if (!snapshotWithRect)
+      return null;
+    var imageURLPromise = snapshotWithRect.snapshot.replay(null, null, 1);
+    snapshotWithRect.snapshot.release();
+    var imageURL = await imageURLPromise;
+    if (!imageURL)
+      return null;
+    var container = createElement('div');
+    UI.appendStyle(container, 'components/imagePreview.css');
+    container.classList.add('image-preview-container', 'vbox', 'link');
+    var img = container.createChild('img');
+    img.src = imageURL;
+    var paintProfilerButton = container.createChild('a');
+    paintProfilerButton.textContent = Common.UIString('Paint Profiler');
+    container.addEventListener('click', showPaintProfiler, false);
+    return container;
 
     function showPaintProfiler() {
       Timeline.TimelinePanel.instance().select(