DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/components_lazy/FilmStripView.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.
 
 /**
  * @constructor
  * @extends {WebInspector.HBox}
  */
 WebInspector.FilmStripView = function()
 {
@@ skipping 45 matching lines @@
     },
 
     /**
      * @param {!WebInspector.FilmStripModel.Frame} frame
      * @return {!Element}
      */
     createFrameElement: function(frame)
     {
         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," + this._imageDataForFrame.get(frame);
         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;
     },
 
     /**
      * @param {number} time
@@ skipping 17 matching lines @@
         return frames[index];
     },
 
     update: function()
     {
         if (!this._model)
             return;
         var frames = this._model.frames();
         if (!frames.length)
             return;
+        /** @type {!Map<!WebInspector.FilmStripModel.Frame, string>} */
+        this._imageDataForFrame = new Map();

[alph, 2015/06/18 13:10:34]

What if another update is fired while promises are in flight?

+
+        var promises = [];
+        for (var frame of frames)
+            promises.push(frame.imageDataPromise().then(setImageData.bind(this, frame)));
+
+        Promise.all(promises).then(this._updateWhenImagesLoaded.bind(this));
+        /**
+         * @this {WebInspector.FilmStripView}
+         * @param {!WebInspector.FilmStripModel.Frame} frame
+         * @param {?string} data
+         */
+        function setImageData(frame, data)
+        {
+            if (data)
+                this._imageDataForFrame.set(frame, data);
+        }
+    },
+
+    _updateWhenImagesLoaded: function()
+    {
         this.contentElement.removeChildren();
         this._statusLabel.remove();
 
+        var frames = this._model.frames();
+
         if (this._mode === WebInspector.FilmStripView.Modes.FrameBased) {
             frames.map(this.createFrameElement.bind(this)).forEach(this.contentElement.appendChild.bind(this.contentElement));
             return;
         }
 
         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)
@@ skipping 149 matching lines @@
 
     _onLastFrame: function()
     {
         this._index = this._frames.length - 1;
         this._render();
     },
 
     _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);
     },
 
     __proto__: WebInspector.DialogDelegate.prototype
 }