DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/components_lazy/FilmStripModel.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
  * @param {!WebInspector.TracingModel} tracingModel
  */
 WebInspector.FilmStripModel = function(tracingModel)
 {
     this._tracingModel = tracingModel;
 
     /** @type {!Array<!WebInspector.FilmStripModel.Frame>} */
     this._frames = [];
 
     var browserProcess = tracingModel.processByName("Browser");
     if (!browserProcess)
         return;
     var mainThread = browserProcess.threadByName("CrBrowserMain");
     if (!mainThread)
         return;
 
     var events = mainThread.events();
     for (var i = 0; i < events.length; ++i) {
-        if (events[i].category === "disabled-by-default-devtools.screenshot" && events[i].name === "CaptureFrame") {
+        if (events[i].category !== "disabled-by-default-devtools.screenshot")
+            continue;
+
+        if (events[i].name === WebInspector.FilmStripModel.TraceEvents.CaptureFrame) {
             var data = events[i].args.data;

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

nit: we usually write args["data"]

-            if (!data)
-                continue;
-            this._frames.push(new WebInspector.FilmStripModel.Frame(this, data, events[i].startTime, this._frames.length));
+            if (data)
+                this._frames.push(WebInspector.FilmStripModel.Frame._fromEvent(this, events[i], this._frames.length));
+        } else if (events[i].name === WebInspector.FilmStripModel.TraceEvents.Screenshot) {
+            this._frames.push(WebInspector.FilmStripModel.Frame._fromSnapshot(this, /** @type {!WebInspector.TracingModel.ObjectSnapshot} */ (events[i]), this._frames.length));
         }
     }
 }
 
+WebInspector.FilmStripModel.TraceEvents = {
+    CaptureFrame: "CaptureFrame",
+    Screenshot: "Screenshot"
+}

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

nit: add a line

 WebInspector.FilmStripModel.prototype = {
     /**
      * @return {!Array<!WebInspector.FilmStripModel.Frame>}
      */
     frames: function()
     {
         return this._frames;
     },
 
     /**
@@ skipping 20 matching lines @@
             return timestamp - frame.timestamp;
         }
         var index = this._frames.lowerBound(timestamp, comparator);
         return index < this._frames.length ? this._frames[index] : null;
     }
 }
 
 /**
  * @constructor
  * @param {!WebInspector.FilmStripModel} model
- * @param {string} imageData
  * @param {number} timestamp
  * @param {number} index
  */
-WebInspector.FilmStripModel.Frame = function(model, imageData, timestamp, index)
+WebInspector.FilmStripModel.Frame = function(model, timestamp, index)
 {
     this._model = model;
-    this.imageData = imageData;
     this.timestamp = timestamp;
     this.index = index;
+    /** @type {?string} */
+    this._imageData = null;
+    /** @type {?WebInspector.TracingModel.ObjectSnapshot} */
+    this._snapshot = null;
+}
+
+/**
+ * @param {!WebInspector.FilmStripModel} model
+ * @param {!WebInspector.TracingModel.Event} event
+ * @param {number} index
+ */
+WebInspector.FilmStripModel.Frame._fromEvent = function(model, event, index)
+{
+    var frame = new WebInspector.FilmStripModel.Frame(model, event.startTime, index);
+    frame._imageData = event.args.data;
+    return frame;
+}
+
+/**
+ * @param {!WebInspector.FilmStripModel} model
+ * @param {!WebInspector.TracingModel.ObjectSnapshot} snapshot
+ * @param {number} index
+ */
+WebInspector.FilmStripModel.Frame._fromSnapshot = function(model, snapshot, index)
+{
+    var frame = new WebInspector.FilmStripModel.Frame(model, snapshot.startTime, index);
+    frame._snapshot = snapshot;
+    return frame;
 }
 
 WebInspector.FilmStripModel.Frame.prototype = {
     /**
      * @return {!WebInspector.FilmStripModel}
      */
     model: function()
     {
         return this._model;
+    },
+
+    /**
+     * @param {function(?string)} callback
+     */
+    requestImageData: function(callback)
+    {
+        if (this._imageData || !this._snapshot) {
+            callback(this._imageData);

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

Consider setting up frame.imageData rather than provide an async interface. So
you could get rid of the map in the FilmStripView.

+            return;
+        }
+        this._snapshot.requestObject(/** @type {function(?Object)} */ (callback));
     }
 }