DevTools: Support popover on timeline overview.

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 5bae32273e1924ac247e983e669d77d06dd2736b..1ec6b2490c1a5e60703f6a8ccd2c84b483905982 100644
--- a/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js
+++ b/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js
@@ -41,12 +41,16 @@ WebInspector.TimelineOverviewPane = function(prefix)
     this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
     this._overviewGrid = new WebInspector.OverviewGrid(prefix);
     this.element.appendChild(this._overviewGrid.element);
+    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), true);
 
     this._overviewGrid.setResizeEnabled(false);
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.Click, this._onClick, this);
     this._overviewControls = [];
     this._markers = new Map();
+
+    this._popoverHelper = new WebInspector.PopoverHelper(this.contentElement, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
+    this._popoverHelper.setTimeout(0);
 }
 
 WebInspector.TimelineOverviewPane.Events = {
@@ -55,6 +59,66 @@ WebInspector.TimelineOverviewPane.Events = {
 
 WebInspector.TimelineOverviewPane.prototype = {
     /**
+     * @param {!Element} element
+     * @param {!Event} event
+     * @return {!Element|!AnchorBox|undefined}
+     */
+    _getPopoverAnchor: function(element, event)
+    {
+        return this.element;
+    },
+
+    /**
+     * @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._overviewGrid.cursorElement());
+    },
+
+    _onHidePopover: function()
+    {
+        this._popover = null;
+        this._popoverContents = null;
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _onMouseMove: function(event)
+    {
+        if (!this._popover)
+            return;
+        this._populatePopoverContents();
+        this._popover.positionElement(this._overviewGrid.cursorElement());
+    },
+
+    _populatePopoverContents: function()
+    {
+        var cursor = this._overviewGrid.cursorElement();
+        var x = cursor.offsetLeft;
+        var time = this._overviewCalculator.positionToTime(x);
+        var elements = [];
+        for (var control of this._overviewControls) {
+            var element = control.popoverElement(time);
+            if (element)
+                elements.push(element);
+        }
+        this._popoverContents.removeChildren();
+        if (!elements.length)
+            return false;
+        elements.forEach(this._popoverContents.appendChild.bind(this._popoverContents));
+        return true;
+    },
+
+    /**
      * @override
      */
     wasShown: function()
@@ -142,6 +206,7 @@ WebInspector.TimelineOverviewPane.prototype = {
         this._markers = new Map();
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].reset();
+        this._popoverHelper.hidePopover();
         this.update();
     },
 
@@ -204,6 +269,20 @@ WebInspector.TimelineOverviewPane.prototype = {
 
 /**
  * @constructor
+ * @extends {WebInspector.VBox}
+ */
+WebInspector.TimelineOverviewPane.PopoverContents = function()

[caseq, 2015/06/16 14:14:50]

Do you really need a class for this?

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

I made it a component, so children can inject their stylesheets into it.

+{
+    WebInspector.VBox.call(this, true);
+    this.contentElement.classList.add("timeline-overview-popover");
+}
+
+WebInspector.TimelineOverviewPane.PopoverContents.prototype = {
+    __proto__: WebInspector.VBox.prototype
+}
+
+/**
+ * @constructor
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
 WebInspector.TimelineOverviewCalculator = function()
@@ -232,6 +311,15 @@ WebInspector.TimelineOverviewCalculator.prototype = {
     },
 
     /**
+     * @param {number} position
+     * @return {number}
+     */
+    positionToTime: function(position)
+    {
+        return (position - this._paddingLeft) / this._workingArea * this.boundarySpan() + this._minimumBoundary;
+    },
+
+    /**
      * @param {number} minimumBoundary
      * @param {number} maximumBoundary
      */
@@ -325,6 +413,12 @@ WebInspector.TimelineOverview.prototype = {
     reset: function() { },
 
     /**
+     * @param {number} time
+     * @return {?Element}
+     */
+    popoverElement: function(time) { },

[caseq, 2015/06/16 14:14:50]

Why is this interface in terms of time, not window position? Different overviews
have different position to time mappings.

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

Done.

+
+    /**
      * @param {!Event} event
      * @return {boolean}
      */
@@ -389,6 +483,16 @@ WebInspector.TimelineOverviewBase.prototype = {
 
     /**
      * @override
+     * @param {number} time
+     * @return {?Element}
+     */
+    popoverElement: function(time)
+    {
+        return null;
+    },
+
+    /**
+     * @override
      */
     timelineStarted: function()
     {