DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/components_lazy/FilmStripView.js

Index: Source/devtools/front_end/components_lazy/FilmStripView.js
diff --git a/Source/devtools/front_end/components_lazy/FilmStripView.js b/Source/devtools/front_end/components_lazy/FilmStripView.js
index f465199a78133c6e3611504a7015d46a87d0775f..caedb482c2c18b57461d86df3137d3c90d444097 100644
--- a/Source/devtools/front_end/components_lazy/FilmStripView.js
+++ b/Source/devtools/front_end/components_lazy/FilmStripView.js
@@ -57,18 +57,23 @@ WebInspector.FilmStripView.prototype = {
 
     /**
      * @param {!WebInspector.FilmStripModel.Frame} frame
+     * @param {function()=} imageLoadedCallback
      * @return {!Element}
      */
-    createFrameElement: function(frame)
+    createFrameElement: function(frame, imageLoadedCallback)
     {
         var time = frame.timestamp;
         var element = createElementWithClass("div", "frame");
-        element.createChild("div", "thumbnail").createChild("img").src = "data:image/jpg;base64," + frame.imageData;
+        var imageElement = element.createChild("div", "thumbnail").createChild("img");
+        if (imageLoadedCallback)
+            imageElement.addEventListener("load", imageLoadedCallback);
+        frame.imageDataPromise().then(WebInspector.FilmStripView._setImageData.bind(null, imageElement));
         element.createChild("div", "time").textContent = Number.millisToString(time - this._zeroTime);
         element.addEventListener("mousedown", this._onMouseEvent.bind(this, WebInspector.FilmStripView.Events.FrameSelected, time), false);
         element.addEventListener("mouseenter", this._onMouseEvent.bind(this, WebInspector.FilmStripView.Events.FrameEnter, time), false);
         element.addEventListener("mouseout", this._onMouseEvent.bind(this, WebInspector.FilmStripView.Events.FrameExit, time), false);
         element.addEventListener("dblclick", this._onDoubleClick.bind(this, frame), false);
+
         return element;
     },
 
@@ -101,6 +106,7 @@ WebInspector.FilmStripView.prototype = {
         var frames = this._model.frames();
         if (!frames.length)
             return;
+
         this.contentElement.removeChildren();
         this._statusLabel.remove();
 
@@ -111,16 +117,23 @@ WebInspector.FilmStripView.prototype = {
 
         var width = this.contentElement.clientWidth;
         var scale = this._spanTime / width;
-        var element0 = this.createFrameElement(frames[0]);  // Calculate frame width basing on the first frame.
-        var frameWidth = Math.ceil(WebInspector.measurePreferredSize(element0, this.contentElement).width);
-        if (!frameWidth)
-            return;
+        var element0 = this.createFrameElement(frames[0], continueWhenFrameImageLoaded.bind(this));  // Calculate frame width basing on the first frame.

[alph, 2015/06/19 14:22:37]

Why don't stay with your previous schema, but use Promise.race instead, so once
you get one of the images you can proceed with building the filmstrip. So you
can get rid of that callback. wdyt?

 
-        for (var pos = frameWidth; pos < width; pos += frameWidth) {
-            var time = pos * scale + this._zeroTime;
-            var frame = this.frameByTime(time);
-            var element = this.contentElement.appendChild(this.createFrameElement(frame));
-            element.style.width = frameWidth + "px";
+        /**
+         * @this {WebInspector.FilmStripView}
+         */
+        function continueWhenFrameImageLoaded()
+        {
+            var frameWidth = Math.ceil(WebInspector.measurePreferredSize(element0, this.contentElement).width);
+            if (!frameWidth)
+                return;
+
+            for (var pos = frameWidth; pos < width; pos += frameWidth) {
+                var time = pos * scale + this._zeroTime;
+                var frame = this.frameByTime(time);
+                var element = this.contentElement.appendChild(this.createFrameElement(frame));
+                element.style.width = frameWidth + "px";
+            }
         }
     },
 
@@ -174,6 +187,16 @@ WebInspector.FilmStripView.prototype = {
 }
 
 /**
+ * @param {!Element} imageElement
+ * @param {?string} data
+ */
+WebInspector.FilmStripView._setImageData = function(imageElement, data)
+{
+    if (data)
+        imageElement.src = "data:image/jpg;base64," + data;
+}
+
+/**
  * @constructor
  * @extends {WebInspector.DialogDelegate}
  * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
@@ -273,7 +296,7 @@ WebInspector.FilmStripView.DialogDelegate.prototype = {
     _render: function()
     {
         var frame = this._frames[this._index];
-        this._imageElement.src = "data:image/jpg;base64," + frame.imageData;
+        frame.imageDataPromise().then(WebInspector.FilmStripView._setImageData.bind(null, this._imageElement));
         this._timeLabel.textContent = Number.millisToString(frame.timestamp - this._zeroTime);
     },