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 43 matching lines @@
         this.update();
     },
 
     update: function()
     {
         if (!this._model)
             return;
         var frames = this._model.frames();
         if (!frames.length)
             return;
+        /** @type {!Map<!WebInspector.FilmStripModel.Frame, string>} */
+        var imageDataForFrame = new Map();
+
+        var pendingImages = frames.length;
+        for (var frame of frames)
+            frame.requestImageData(onImageData.bind(this, frame));

[alph, 2015/06/17 09:41:59]

If you turn them into a promises, the code should become much simpler with use
of Promise.all

+
+        /**
+         * @this {WebInspector.FilmStripView}
+         * @param {!WebInspector.FilmStripModel.Frame} frame
+         * @param {?string} data
+         */
+        function onImageData(frame, data)
+        {
+            --pendingImages;
+            if (!data)
+                return;
+            imageDataForFrame.set(frame, data);
+            if (!pendingImages)
+                this._updateWhenImagesLoaded(imageDataForFrame);
+        }
+    },
+
+    /**
+     * @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
          * @param {boolean=} skipTimeLabel
          * @return {!Element}
          * @this {WebInspector.FilmStripView}
          */
         function createElementForFrame(frame, skipTimeLabel)
         {
             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);
             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);
             this.contentElement.appendChild(element);
             return element;
         }
 
@@ skipping 22 matching lines @@
         function comparator(time, frame)
         {
             return time - frame.timestamp;
         }
 
         var width = this.contentElement.clientWidth;
         var scale = this._spanTime / width;
 
         // 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;
 
         for (var pos = frameWidth; pos < width; pos += frameWidth) {
             var time = pos * scale + zeroTime;
             var index = frames.upperBound(time, comparator) - 1;
             var element = index >= 0 ? createElementForFrame.call(this, frames[index], true) : createEmptyElement.call(this);
             element.style.width = frameWidth + "px";
         }
@@ skipping 42 matching lines @@
 
     setFetching: function()
     {
         this._label.textContent = WebInspector.UIString("Fetching frames...");
     },
 
     __proto__: WebInspector.HBox.prototype
 }
 
 /**
+ * @param {!Image} image
+ * @param {!WebInspector.FilmStripModel.Frame} frame
+ */
+WebInspector.FilmStripView._loadImageForFrame = function(image, frame)

[alph, 2015/06/17 09:41:59]

Can't find where is it used.

+{
+    frame.requestImageData(onGotImageData);
+
+    /**
+     * @param {?string} data
+     */
+    function onGotImageData(data)
+    {
+        if (data)
+            image.src = "data:image/jpg;base64," + data;
+    }
+}
+
+/**
  * @constructor
  * @extends {WebInspector.DialogDelegate}
  * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
  * @param {number=} zeroTime
  */
 WebInspector.FilmStripView.DialogDelegate = function(filmStripFrame, zeroTime)
 {
     WebInspector.DialogDelegate.call(this);
     var shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
     shadowRoot.appendChild(WebInspector.Widget.createStyleElement("components_lazy/filmStripDialog.css"));
@@ skipping 79 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.requestImageData(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
 }