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 46131e4820664dad19458d026bf9055906f2e1d4..0f81545bc6c020643ae30f30d429507d11b43df3 100644
--- a/Source/devtools/front_end/components_lazy/FilmStripView.js
+++ b/Source/devtools/front_end/components_lazy/FilmStripView.js
@@ -61,9 +61,34 @@ WebInspector.FilmStripView.prototype = {
         var frames = this._model.frames();
         if (!frames.length)
             return;
+        /** @type {!Map<!WebInspector.FilmStripModel.Frame, string>} */
+        var imageDataForFrame = new Map();
+
+        var promises = [];
+        for (var frame of frames)
+            promises.push(frame.imageDataPromise().then(setImageData.bind(null, frame)));
+
+        Promise.all(promises).then(this._updateWhenImagesLoaded.bind(this, imageDataForFrame));
+        /**
+         * @param {!WebInspector.FilmStripModel.Frame} frame
+         * @param {?string} data
+         */
+        function setImageData(frame, data)
+        {
+            if (data)
+                imageDataForFrame.set(frame, data);
+        }
+    },
+
+    /**
+     * @param {!Map<!WebInspector.FilmStripModel.Frame, string>} imageDataForFrame
+     */
+    _updateWhenImagesLoaded: function(imageDataForFrame)
+    {
         this.contentElement.removeChildren();
         this._label.remove();
         var zeroTime = this._zeroTime;
+        var frames = this._model.frames();
 
         /**
          * @param {!WebInspector.FilmStripModel.Frame} frame
@@ -75,7 +100,7 @@ WebInspector.FilmStripView.prototype = {
         {
             var time = frame.timestamp;
             var element = createElementWithClass("div", "frame");
-            element.createChild("div", "thumbnail").createChild("img").src = "data:image/jpg;base64," + frame.imageData;
+            element.createChild("div", "thumbnail").createChild("img").src = "data:image/jpg;base64," + imageDataForFrame.get(frame);
             if (!skipTimeLabel)
                 element.createChild("div", "time").textContent = Number.millisToString(time - zeroTime);
             element.addEventListener("mousedown", this._onMouseEvent.bind(this, WebInspector.FilmStripView.Events.FrameSelected, time), false);
@@ -118,7 +143,7 @@ WebInspector.FilmStripView.prototype = {
 
         // Calculate frame width basing on the first frame.
         var tempElement = createElementWithClass("div", "frame");
-        tempElement.createChild("div", "thumbnail").createChild("img").src = "data:image/jpg;base64," + frames[0].imageData;
+        tempElement.createChild("div", "thumbnail").createChild("img").src = "data:image/jpg;base64," + imageDataForFrame.get(frames[0]);
         var frameWidth = Math.ceil(WebInspector.measurePreferredSize(tempElement, this.contentElement).width);
         if (!frameWidth)
             return;
@@ -280,7 +305,16 @@ WebInspector.FilmStripView.DialogDelegate.prototype = {
     _render: function()
     {
         var frame = this._frames[this._index];
-        this._imageElement.src = "data:image/jpg;base64," + frame.imageData;
+        frame.imageDataPromise().then(onGotImageData.bind(this));
+        /**
+         * @param {?string} data
+         * @this {WebInspector.DialogDelegate}
+         */
+        function onGotImageData(data)
+        {
+            if (data)
+                this._imageElement.src = "data:image/jpg;base64," + data;
+        }
         this._timeLabel.textContent = Number.millisToString(frame.timestamp - this._zeroTime);
     },