DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js

Index: Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js
diff --git a/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js b/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js
index 9ec0dae79af96d8f648772ffbdc528bd4d376d17..a337256f4488cb7b54d7b0631b8ddc4d1aaadc21 100644
--- a/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js
+++ b/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js
@@ -79,12 +79,20 @@ WebInspector.TimelineOverviewPane.prototype = {
     _showPopover: function(anchor, popover)
     {
         this._popover = popover;
-        this._popoverContents = createElement("div");
-        if (!this._populatePopoverContents())
-            return;
-        var content = new WebInspector.TimelineOverviewPane.PopoverContents();
-        content.contentElement.appendChild(this._popoverContents);
-        popover.showView(content, this._currentPositionElement);
+        this._buildPopoverContents().then(maybeShowPopover.bind(this));
+        /**
+         * @this {WebInspector.TimelineOverviewPane}
+         * @param {!DocumentFragment} fragment
+         */
+        function maybeShowPopover(fragment)
+        {
+            if (!fragment.firstChild)
+                return;
+            var content = new WebInspector.TimelineOverviewPane.PopoverContents();
+            this._popoverContents = content.contentElement.createChild("div");
+            this._popoverContents.appendChild(fragment);
+            popover.showView(content, this._currentPositionElement);
+        }
     },
 
     _onHidePopover: function()
@@ -105,25 +113,47 @@ WebInspector.TimelineOverviewPane.prototype = {
         this._currentPositionElement.style.visibility = "visible";
         if (!this._popover)
             return;
-        this._populatePopoverContents();
+        this._buildPopoverContents().then(updatePopover.bind(this));
         this._popover.positionElement(this._currentPositionElement);
+        /**
+         * @this {WebInspector.TimelineOverviewPane}
+         * @param {!DocumentFragment} fragment
+         */
+        function updatePopover(fragment)
+        {
+            if (!this._popoverContents)
+                return;
+            this._popoverContents.removeChildren();
+            this._popoverContents.appendChild(fragment);
+        }
+
     },
 
-    _populatePopoverContents: function()
+    /**
+     * @return {!Promise<!DocumentFragment>}
+     */
+    _buildPopoverContents: function()
     {
         var cursor = this._currentPositionElement;
         var x = cursor.offsetLeft;
-        var elements = [];
-        for (var control of this._overviewControls) {
-            var element = control.popoverElement(x);
-            if (element)
-                elements.push(element);
+        var promises = [];
+        for (var control of this._overviewControls)
+            promises.push(control.popoverElementPromise(x))
+
+        return Promise.all(promises).then(buildFragment);
+
+        /**
+         * @param {!Array<?Element>} elements
+         */
+        function buildFragment(elements)
+        {
+            var fragment = cursor.ownerDocument.createDocumentFragment();
+            for (var element of elements) {
+                if (element)
+                    fragment.appendChild(element);
+            }
+            return fragment;
         }
-        this._popoverContents.removeChildren();
-        if (!elements.length)
-            return false;
-        elements.forEach(this._popoverContents.appendChild.bind(this._popoverContents));
-        return true;
     },
 
     _hideCurrentPosition: function()
@@ -430,9 +460,9 @@ WebInspector.TimelineOverview.prototype = {
 
     /**
      * @param {number} x
-     * @return {?Element}
+     * @return {!Promise<?Element>}

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

Looks like over complication.
Can it just return an element that will update itself when it's ready? To this
dynamic update logic is hidden from the client.

      */
-    popoverElement: function(x) { },
+    popoverElementPromise: function(x) { },
 
     /**
      * @param {!Event} event
@@ -500,11 +530,11 @@ WebInspector.TimelineOverviewBase.prototype = {
     /**
      * @override
      * @param {number} x
-     * @return {?Element}
+     * @return {!Promise<?Element>}
      */
-    popoverElement: function(x)
+    popoverElementPromise: function(x)
     {
-        return null;
+        return Promise.resolve(/** @type {?Element} */ (null));
     },
 
     /**