[DevTools] Rework Popover API

third_party/WebKit/Source/devtools/front_end/components/DOMPresentationUtils.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 130 matching lines @@
     Common.Revealer.reveal(node);
   }
 
   return root;
 };
 
 /**
  * @param {!SDK.Target} target
  * @param {string} originalImageURL
  * @param {boolean} showDimensions
- * @param {function(!Element=)} userCallback
  * @param {!Object=} precomputedFeatures
+ * @return {!Promise<?Element>}
  */
 Components.DOMPresentationUtils.buildImagePreviewContents = function(
-    target, originalImageURL, showDimensions, userCallback, precomputedFeatures) {
+    target, originalImageURL, showDimensions, precomputedFeatures) {
   var resourceTreeModel = SDK.ResourceTreeModel.fromTarget(target);
-  if (!resourceTreeModel) {
-    userCallback();
-    return;
-  }
+  if (!resourceTreeModel)
+    return Promise.resolve(/** @type {?Element} */ (null));
   var resource = resourceTreeModel.resourceForURL(originalImageURL);
   var imageURL = originalImageURL;
   if (!isImageResource(resource) && precomputedFeatures && precomputedFeatures.currentSrc) {
     imageURL = precomputedFeatures.currentSrc;
     resource = resourceTreeModel.resourceForURL(imageURL);
   }
-  if (!isImageResource(resource)) {
-    userCallback();
-    return;
-  }
+  if (!isImageResource(resource))
+    return Promise.resolve(/** @type {?Element} */ (null));
 
+  var fulfill;
+  var promise = new Promise(x => fulfill = x);
   var imageElement = createElement('img');
   imageElement.addEventListener('load', buildContent, false);
-  imageElement.addEventListener('error', errorCallback, false);
+  imageElement.addEventListener('error', () => fulfill(null), false);
   resource.populateImageSource(imageElement);
-
-  function errorCallback() {
-    // Drop the event parameter when invoking userCallback.
-    userCallback();
-  }
+  return promise;
 
   /**
    * @param {?SDK.Resource} resource
    * @return {boolean}
    */
   function isImageResource(resource) {
     return !!resource && resource.resourceType() === Common.resourceTypes.Image;
   }
 
   function buildContent() {
@@ skipping 14 matching lines @@
       }
     }
 
     container.createChild('tr').createChild('td', 'image-container').appendChild(imageElement);
     if (description)
       container.createChild('tr').createChild('td').createChild('span', 'description').textContent = description;
     if (imageURL !== originalImageURL) {
       container.createChild('tr').createChild('td').createChild('span', 'description').textContent =
           String.sprintf('currentSrc: %s', imageURL.trimMiddle(100));
     }
-    userCallback(container);
+    fulfill(container);
   }
 };
 
 /**
  * @param {!SDK.Target} target
  * @param {!Components.Linkifier} linkifier
  * @param {!Protocol.Runtime.StackTrace=} stackTrace
  * @return {!Element}
  */
 Components.DOMPresentationUtils.buildStackTracePreviewContents = function(target, linkifier, stackTrace) {
@@ skipping 415 matching lines @@
 
   /**
    * @override
    * @param {!SDK.DOMNode} node
    * @return {?{title: string, color: string}}
    */
   decorate(node) {
     return {title: this._title, color: this._color};
   }
 };