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

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

 // Copyright 2015 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.
 /**
  * @unrestricted
  */
 Emulation.DeviceModeView = class extends UI.VBox {
   constructor() {
     super(true);
     this.setMinimumSize(150, 150);
@@ skipping 435 matching lines @@
         ctx.setLineDash([10, 10]);
         ctx.strokeRect(screenRect.left + 1, screenRect.top + 1, screenRect.width - 2, screenRect.height - 2);
       }
 
       /**
        * @this {Emulation.DeviceModeView}
        */
       function paintScreenshot() {
         var pageImage = new Image();
         pageImage.src = 'data:image/png;base64,' + content;
-        ctx.drawImage(
-            pageImage, visiblePageRect.left, visiblePageRect.top, Math.min(pageImage.naturalWidth, screenRect.width),
-            Math.min(pageImage.naturalHeight, screenRect.height));
-        var url = mainTarget && mainTarget.inspectedURL();
-        var fileName = url ? url.trimURL().removeURLFragment() : '';
-        if (this._model.type() === Emulation.DeviceModeModel.Type.Device)
-          fileName += Common.UIString('(%s)', this._model.device().title);
-        // Trigger download.
-        var link = createElement('a');
-        link.download = fileName + '.png';
-        link.href = canvas.toDataURL('image/png');
-        link.click();
+        var scope = this;
+        setTimeout(function() {

[dgozman, 2016/12/27 07:08:24]

Should this be pageImage.onload = ... ?
Also, using arrow function eliminates the need for |scope|.

+          ctx.drawImage(
+              pageImage, visiblePageRect.left, visiblePageRect.top, Math.min(pageImage.naturalWidth, screenRect.width),
+              Math.min(pageImage.naturalHeight, screenRect.height));
+          var url = mainTarget && mainTarget.inspectedURL();
+          var fileName = url ? url.trimURL().removeURLFragment() : '';
+          if (scope._model.type() === Emulation.DeviceModeModel.Type.Device)
+            fileName += Common.UIString('(%s)', scope._model.device().title);
+          // Trigger download.
+          var link = createElement('a');
+          link.download = fileName + '.png';
+          link.href = canvas.toDataURL('image/png');
+          link.click();
+        }, 0);
       }
     }
   }
 };
 
 /**
  * @unrestricted
  */
 Emulation.DeviceModeView.Ruler = class extends UI.VBox {
   /**
@@ skipping 85 matching lines @@
     return Promise.resolve();
   }
 
   /**
    * @param {number} size
    */
   _onMarkerClick(size) {
     this._applyCallback.call(null, size);
   }
 };