DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/timeline/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 1802 matching lines @@
  * @extends {WebInspector.TimelineOverviewBase}
  * @param {!WebInspector.TracingModel} tracingModel
  */
 WebInspector.TimelineFilmStripOverview = function(tracingModel)
 {
     WebInspector.TimelineOverviewBase.call(this);
     this._tracingModel = tracingModel;
     this._filmStripView = new WebInspector.FilmStripView();
     this._filmStripView.show(this.element);
     this._lastFrame = null;
+    /** @type {?Element} */
     this._lastElement = null;
 }
 
 WebInspector.TimelineFilmStripOverview.prototype = {
     /**
      * @override
      */
     update: function()
     {
         var model = this._tracingModel;
         this._filmStripModel = new WebInspector.FilmStripModel(model);
         this._filmStripView.setModel(this._filmStripModel, model.minimumRecordTime(), model.maximumRecordTime() - model.minimumRecordTime());
     },
 
     /**
      * @override
      * @param {number} x
-     * @return {?Element}
+     * @return {!Promise<?Element>}

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

Maybe ?Promise<!Element> instead. By the time of invocation this function
already knows if it has something to show in popover or not.

      */
-    popoverElement: function(x)
+    popoverElementPromise: function(x)
     {
         if (!this._filmStripModel || !this._filmStripModel.frames().length)
-            return null;
+            return Promise.resolve(/** @type {?Element} */ (null));
+
         var time = this._calculator.positionToTime(x);
         var frame = this._filmStripView.frameByTime(time);
-        if (frame !== this._lastFrame) {
+        if (frame === this._lastFrame)
+            return Promise.resolve(this._lastElement);
+
+        return new Promise(createElement.bind(this));
+        /**
+         * @this {WebInspector.TimelineFilmStripOverview}
+         * @param {function(?Element)} resolve
+         */
+        function createElement(resolve)
+        {
             this._lastFrame = frame;
-            this._lastElement = this._filmStripView.createFrameElement(frame);
+            this._lastElement = this._filmStripView.createFrameElement(frame, onImageLoaded.bind(this));
             this._lastElement.appendChild(WebInspector.Widget.createStyleElement("timeline/timelinePanel.css"));
+
+            /**
+             * @this {WebInspector.TimelineFilmStripOverview}
+             */
+            function onImageLoaded()
+            {
+                resolve(this._lastElement);

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

Can the this._lastElement change by the time image is loaded?

+            }
         }
-        return this._lastElement;
     },
 
     /**
      * @override
      */
     reset: function()
     {
         this._filmStripView.reset();
         this._lastFrame = null;
         this._lastElement = null;
     },
 
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }