Load data URI images in an async way according to spec (take 3)

third_party/WebKit/Source/devtools/front_end/screencast/ScreencastView.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 130 matching lines @@
     this._target.emulationAgent().setTouchEmulationEnabled(false);
     this._domModel.setHighlighter(null);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _screencastFrame(event) {
     var metadata = /** type {Protocol.Page.ScreencastFrameMetadata} */ (event.data.metadata);
     var base64Data = /** type {string} */ (event.data.data);
+    this._imageElement.onload = () => {
+      this._pageScaleFactor = metadata.pageScaleFactor;
+      this._screenOffsetTop = metadata.offsetTop;
+      this._scrollOffsetX = metadata.scrollOffsetX;
+      this._scrollOffsetY = metadata.scrollOffsetY;
+
+      var deviceSizeRatio = metadata.deviceHeight / metadata.deviceWidth;
+      var dimensionsCSS = this._viewportDimensions();
+
+      this._imageZoom = Math.min(
+          dimensionsCSS.width / this._imageElement.naturalWidth,
+          dimensionsCSS.height / (this._imageElement.naturalWidth * deviceSizeRatio));
+      this._viewportElement.classList.remove('hidden');
+      var bordersSize = Screencast.ScreencastView._bordersSize;
+      if (this._imageZoom < 1.01 / window.devicePixelRatio)
+        this._imageZoom = 1 / window.devicePixelRatio;
+      this._screenZoom = this._imageElement.naturalWidth * this._imageZoom / metadata.deviceWidth;
+      this._viewportElement.style.width = metadata.deviceWidth * this._screenZoom + bordersSize + 'px';
+      this._viewportElement.style.height = metadata.deviceHeight * this._screenZoom + bordersSize + 'px';
+
+      this.highlightDOMNode(this._highlightNode, this._highlightConfig);
+    };
     this._imageElement.src = 'data:image/jpg;base64,' + base64Data;
-    this._pageScaleFactor = metadata.pageScaleFactor;
-    this._screenOffsetTop = metadata.offsetTop;
-    this._scrollOffsetX = metadata.scrollOffsetX;
-    this._scrollOffsetY = metadata.scrollOffsetY;
-
-    var deviceSizeRatio = metadata.deviceHeight / metadata.deviceWidth;
-    var dimensionsCSS = this._viewportDimensions();
-
-    this._imageZoom = Math.min(
-        dimensionsCSS.width / this._imageElement.naturalWidth,
-        dimensionsCSS.height / (this._imageElement.naturalWidth * deviceSizeRatio));
-    this._viewportElement.classList.remove('hidden');
-    var bordersSize = Screencast.ScreencastView._bordersSize;
-    if (this._imageZoom < 1.01 / window.devicePixelRatio)
-      this._imageZoom = 1 / window.devicePixelRatio;
-    this._screenZoom = this._imageElement.naturalWidth * this._imageZoom / metadata.deviceWidth;
-    this._viewportElement.style.width = metadata.deviceWidth * this._screenZoom + bordersSize + 'px';
-    this._viewportElement.style.height = metadata.deviceHeight * this._screenZoom + bordersSize + 'px';
-
-    this.highlightDOMNode(this._highlightNode, this._highlightConfig);
   }
 
   _isGlassPaneActive() {
     return !this._glassPaneElement.classList.contains('hidden');
   }
 
   /**
    * @param {!Common.Event} event
    */
   _screencastVisibilityChanged(event) {
@@ skipping 679 matching lines @@
     if (this._maxDisplayedProgress >= progress)
       return;
     this._maxDisplayedProgress = progress;
     this._displayProgress(progress);
   }
 
   _displayProgress(progress) {
     this._element.style.width = (100 * progress) + '%';
   }
 };