front_end/browser_components/ImagePreview.js

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

BrowserComponents.ImagePreview = class {
  /**
   * @param {!SDK.Target} target
   * @param {string} originalImageURL
   * @param {boolean} showDimensions
   * @param {!Object=} precomputedFeatures
   * @return {!Promise<?Element>}
   */
  static build(target, originalImageURL, showDimensions, precomputedFeatures) {
    const resourceTreeModel = target.model(SDK.ResourceTreeModel);
    if (!resourceTreeModel)
      return Promise.resolve(/** @type {?Element} */ (null));
    let resource = resourceTreeModel.resourceForURL(originalImageURL);
    let imageURL = originalImageURL;
    if (!isImageResource(resource) && precomputedFeatures && precomputedFeatures.currentSrc) {
      imageURL = precomputedFeatures.currentSrc;
      resource = resourceTreeModel.resourceForURL(imageURL);
    }
    if (!isImageResource(resource))
      return Promise.resolve(/** @type {?Element} */ (null));

    let fulfill;
    const promise = new Promise(x => fulfill = x);
    const imageElement = createElement('img');
    imageElement.addEventListener('load', buildContent, false);
    imageElement.addEventListener('error', () => fulfill(null), false);
    resource.populateImageSource(imageElement);
    return promise;

    /**
     * @param {?SDK.Resource} resource
     * @return {boolean}
     */
    function isImageResource(resource) {
      return !!resource && resource.resourceType() === Common.resourceTypes.Image;
    }

    function buildContent() {
      const container = createElement('table');
      UI.appendStyle(container, 'browser_components/imagePreview.css');
      container.className = 'image-preview-container';
      const naturalWidth = precomputedFeatures ? precomputedFeatures.naturalWidth : imageElement.naturalWidth;
      const naturalHeight = precomputedFeatures ? precomputedFeatures.naturalHeight : imageElement.naturalHeight;
      const offsetWidth = precomputedFeatures ? precomputedFeatures.offsetWidth : naturalWidth;
      const offsetHeight = precomputedFeatures ? precomputedFeatures.offsetHeight : naturalHeight;
      let description;
      if (showDimensions) {
        if (offsetHeight === naturalHeight && offsetWidth === naturalWidth) {
          description = Common.UIString('%d \xd7 %d pixels', offsetWidth, offsetHeight);
        } else {
          description = Common.UIString(
              '%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)', offsetWidth, offsetHeight, naturalWidth, naturalHeight);
        }
      }

      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));
      }
      fulfill(container);
    }
  }
};