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 39 matching lines @@
         var frames = filmStripModel.frames();
         if (!frames.length) {
             this.reset();
             return;
         }
         this.update();
     },
 
     /**
      * @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;
     },
 
     /**
      * @param {number} time
      * @return {!WebInspector.FilmStripModel.Frame}
      */
     frameByTime: function(time)
     {
         /**
@@ skipping 12 matching lines @@
         return frames[index];
     },
 
     update: function()
     {
         if (!this._model)
             return;
         var frames = this._model.frames();
         if (!frames.length)
             return;
+
         this.contentElement.removeChildren();
         this._statusLabel.remove();
 
         if (this._mode === WebInspector.FilmStripView.Modes.FrameBased) {
             frames.map(this.createFrameElement.bind(this)).forEach(this.contentElement.appendChild.bind(this.contentElement));

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

Hmm, how does it work?
Array.map passes index as the second argument to the callback, which will
interpret it as imageLoadedCallback.

             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)
-            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";
+            }
         }
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         if (this._mode === WebInspector.FilmStripView.Modes.FrameBased)
             return;
@@ skipping 33 matching lines @@
 
     setFetching: function()
     {
         this._statusLabel.textContent = WebInspector.UIString("Fetching frames...");
     },
 
     __proto__: WebInspector.HBox.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
  * @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.imageDataPromise().then(WebInspector.FilmStripView._setImageData.bind(null, this._imageElement));
         this._timeLabel.textContent = Number.millisToString(frame.timestamp - this._zeroTime);
     },
 
     __proto__: WebInspector.DialogDelegate.prototype
 }