DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js

 /*
  * Copyright (C) 2013 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 63 matching lines @@
         return this._cursorArea;
     },
 
     /**
      * @param {!Element} anchor
      * @param {!WebInspector.Popover} popover
      */
     _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._cursorElement);
+        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._cursorElement);
+        }
     },
 
     _onHidePopover: function()
     {
         this._popover = null;
         this._popoverContents = null;
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         if (!this._cursorEnabled)
             return;
         var x = event.offsetX + event.target.offsetLeft;
         this._cursorElement.style.left = x + "px";
         this._cursorElement.style.visibility = "visible";
         if (!this._popover)
             return;
-        this._populatePopoverContents();
+        this._buildPopoverContents().then(updatePopover.bind(this));
         this._popover.positionElement(this._cursorElement);
+        /**
+         * @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 x = this._cursorElement.offsetLeft;
-        var elements = [];
-        for (var control of this._overviewControls) {
-            var element = control.popoverElement(x);
-            if (element)
-                elements.push(element);
+        var cursor = this._cursorElement;
+        var x = cursor.offsetLeft;
+        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;
     },
 
     _hideCursor: function()
     {
         this._cursorElement.style.visibility = "hidden";
     },
 
     /**
      * @override
      */
@@ skipping 290 matching lines @@
     show: function(parentElement, insertBefore) { },
 
     update: function() { },
 
     dispose: function() { },
 
     reset: function() { },
 
     /**
      * @param {number} x
-     * @return {?Element}
+     * @return {!Promise<?Element>}
      */
-    popoverElement: function(x) { },
+    popoverElementPromise: function(x) { },
 
     /**
      * @param {!Event} event
      * @return {boolean}
      */
     onClick: function(event) { },
 
     /**
      * @param {number} windowLeft
      * @param {number} windowRight
@@ skipping 47 matching lines @@
     /**
      * @override
      */
     reset: function()
     {
     },
 
     /**
      * @override
      * @param {number} x
-     * @return {?Element}
+     * @return {!Promise<?Element>}
      */
-    popoverElement: function(x)
+    popoverElementPromise: function(x)
     {
-        return null;
+        return Promise.resolve(/** @type {?Element} */ (null));
     },
 
     /**
      * @override
      */
     timelineStarted: function()
     {
     },
 
     /**
@@ skipping 55 matching lines @@
     },
 
     resetCanvas: function()
     {
         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
     },
 
     __proto__: WebInspector.VBox.prototype
 }