DevTools: Support popover on timeline overview.

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 23 matching lines @@
  * @param {string} prefix
  */
 WebInspector.TimelineOverviewPane = function(prefix)
 {
     WebInspector.VBox.call(this);
     this.element.id = prefix + "-overview-pane";
 
     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 = {
     WindowChanged: "WindowChanged"
 };
 
 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()
     {
         this.update();
     },
 
     /**
      * @override
      */
@@ skipping 67 matching lines @@
 
     reset: function()
     {
         this._overviewCalculator.reset();
         this._overviewGrid.reset();
         this._overviewGrid.setResizeEnabled(false);
         this._overviewGrid.updateDividers(this._overviewCalculator);
         this._markers = new Map();
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].reset();
+        this._popoverHelper.hidePopover();
         this.update();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onClick: function(event)
     {
         var domEvent = /** @type {!Event} */ (event.data);
         for (var overviewControl of this._overviewControls) {
@@ skipping 42 matching lines @@
         this._muteOnWindowChanged = true;
         this._overviewGrid.setWindow(windowBoundaries.left, windowBoundaries.right);
         this._muteOnWindowChanged = false;
     },
 
     __proto__: WebInspector.VBox.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()
 {
     this.reset();
 }
 
 WebInspector.TimelineOverviewCalculator.prototype = {
     /**
      * @override
      * @return {number}
      */
     paddingLeft: function()
     {
         return this._paddingLeft;
     },
 
     /**
      * @override
      * @param {number} time
      * @return {number}
      */
     computePosition: function(time)
     {
         return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea + this._paddingLeft;
     },
 
     /**
+     * @param {number} position
+     * @return {number}
+     */
+    positionToTime: function(position)
+    {
+        return (position - this._paddingLeft) / this._workingArea * this.boundarySpan() + this._minimumBoundary;
+    },
+
+    /**
      * @param {number} minimumBoundary
      * @param {number} maximumBoundary
      */
     setBounds: function(minimumBoundary, maximumBoundary)
     {
         this._minimumBoundary = minimumBoundary;
         this._maximumBoundary = maximumBoundary;
     },
 
     /**
@@ skipping 73 matching lines @@
      */
     show: function(parentElement, insertBefore) { },
 
     update: function() { },
 
     dispose: function() { },
 
     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}
      */
     onClick: function(event) { },
 
     /**
      * @param {number} windowLeft
      * @param {number} windowRight
      * @return {!{startTime: number, endTime: number}}
      */
@@ skipping 44 matching lines @@
 
     /**
      * @override
      */
     reset: function()
     {
     },
 
     /**
      * @override
+     * @param {number} time
+     * @return {?Element}
+     */
+    popoverElement: function(time)
+    {
+        return null;
+    },
+
+    /**
+     * @override
      */
     timelineStarted: function()
     {
     },
 
     /**
      * @override
      */
     timelineStopped: function()
     {
@@ skipping 51 matching lines @@
     },
 
     resetCanvas: function()
     {
         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
     },
 
     __proto__: WebInspector.VBox.prototype
 }