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
-     * @return {!Element}
+     * @return {!Promise<!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;
+        var imageElement = element.createChild("div", "thumbnail").createChild("img");
+        frame.imageDataPromise().then(WebInspector.FilmStripView._setImageData.bind(null, imageElement));

[alph, 2015/06/22 12:36:21]

you can remove this line.

         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;
+
+        return frame.imageDataPromise().then(WebInspector.FilmStripView._setImageData.bind(null, imageElement)).then(returnElement);
+        function returnElement()

[alph, 2015/06/22 12:36:21]

nit: annotate?
honestly, I'd just inline it into then() :-)

+        {
+            return element;
+        }
     },
 
     /**
      * @param {number} time
      * @return {!WebInspector.FilmStripModel.Frame}
      */
     frameByTime: function(time)
     {
         /**
          * @param {number} time
@@ skipping 11 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));
+            Promise.all(frames.map(this.createFrameElement.bind(this))).spread(this.contentElement.appendChildren.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)
-            return;
+        this.createFrameElement(frames[0]).then(continueWhenFrameImageLoaded.bind(this));  // Calculate frame width basing on the first frame.
 
-        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}
+         * @param {!Element} element0
+         */
+        function continueWhenFrameImageLoaded(element0)
+        {
+            var frameWidth = Math.ceil(WebInspector.measurePreferredSize(element0, this.contentElement).width);
+            if (!frameWidth)
+                return;
+
+            var contentElement = this.contentElement;
+            for (var pos = frameWidth; pos < width; pos += frameWidth) {
+                var time = pos * scale + this._zeroTime;
+                this.createFrameElement(this.frameByTime(time)).then(appendElement);
+            }
+
+            /**
+             * @param {!Element} element
+             */
+            function appendElement(element)

[alph, 2015/06/22 12:36:21]

Are these called in the proper order?

+            {
+                element.style.width = frameWidth + "px";
+                contentElement.appendChild(element);
+            }
         }
     },
 
     /**
      * @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
 }