DevTools: Support popover on timeline overview.

Source/devtools/front_end/ui_lazy/OverviewGrid.js

Index: Source/devtools/front_end/ui_lazy/OverviewGrid.js
diff --git a/Source/devtools/front_end/ui_lazy/OverviewGrid.js b/Source/devtools/front_end/ui_lazy/OverviewGrid.js
index 328581392b9d65a0937d06f2355346e04797e8ba..d8074d0907a589e708810e78195145e15c00e734 100644
--- a/Source/devtools/front_end/ui_lazy/OverviewGrid.js
+++ b/Source/devtools/front_end/ui_lazy/OverviewGrid.js
@@ -36,18 +36,47 @@ WebInspector.OverviewGrid = function(prefix)
 {
     this.element = createElement("div");
     this.element.id = prefix + "-overview-container";
+    this._enabled = false;

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

What is not enabled here?

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

The cursor. Renamed.

 
     this._grid = new WebInspector.TimelineGrid();
     this._grid.element.id = prefix + "-overview-grid";
     this._grid.setScrollTop(0);
-
     this.element.appendChild(this._grid.element);
 
     this._window = new WebInspector.OverviewGrid.Window(this.element, this._grid.dividersLabelBarElement);
+
+    this._currentPositionElement = this.element.createChild("div", "overview-grid-current-position");
+    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), true);
+    this.element.addEventListener("mouseout", this._hideCurrentPosition.bind(this), true);
 }
 
 WebInspector.OverviewGrid.prototype = {
     /**
+     * @return {!Element}
+     */
+    cursorElement: function()

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

This looks like a weird interface.

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

Changed.

+    {
+        return this._currentPositionElement;
+    },
+
+    _hideCurrentPosition: function()
+    {
+        this._currentPositionElement.style.visibility = "hidden";
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _onMouseMove: function(event)
+    {
+        if (!this._enabled)
+            return;
+        var x = event.offsetX + event.target.offsetLeft;
+        this._currentPositionElement.style.left = x + "px";
+        this._currentPositionElement.style.visibility = "visible";
+    },
+
+    /**
      * @return {number}
      */
     clientWidth: function()
@@ -131,6 +160,8 @@ WebInspector.OverviewGrid.prototype = {
     setResizeEnabled: function(enabled)
     {
         this._window.setEnabled(!!enabled);
+        this._enabled = !!enabled;

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

nit: we don't coerce to boolean parameters that are annotated as boolean.

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

Done.

+        this._hideCurrentPosition();
     }
 }
 
@@ -166,11 +197,6 @@ WebInspector.OverviewGrid.Window = function(parentElement, dividersLabelBarEleme
     this._overviewWindowBordersElement = parentElement.createChild("div", "overview-grid-window-rulers");
     parentElement.createChild("div", "overview-grid-dividers-background");
 
-    this._currentPositionElement = parentElement.createChild("div", "overview-grid-current-position");
-    this._currentPositionArea = parentElement.createChild("div", "overview-grid-window-area");
-    this._currentPositionArea.addEventListener("mousemove", this._onMouseMove.bind(this), true);

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

So how does this work for code that directly uses
WebInspector.OverviewGrid.Window?

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

What code? Anyway moved the cursor stuff to TimelineOverviewPane.

-    this._currentPositionArea.addEventListener("mouseout", this._hideCurrentPosition.bind(this), true);
-
     this._leftResizeElement = parentElement.createChild("div", "overview-grid-window-resizer");
     this._leftResizeElement.style.left = 0;
     WebInspector.installDragHandle(this._leftResizeElement, this._resizerElementStartDragging.bind(this), this._leftResizeElementDragging.bind(this), null, "ew-resize");
@@ -206,30 +232,7 @@ WebInspector.OverviewGrid.Window.prototype = {
      */
     setEnabled: function(enabled)
     {
-        enabled = !!enabled;
-        if (this._enabled === enabled)
-            return;
-        this._enabled = enabled;
-        this._currentPositionArea.style.cursor = enabled ? "text" : "";
-        if (!enabled)
-            this._hideCurrentPosition();
-    },
-
-    _hideCurrentPosition: function()
-    {
-        this._currentPositionElement.style.visibility = "hidden";
-    },
-
-    /**
-     * @param {!Event} event
-     */
-    _onMouseMove: function(event)
-    {
-        if (!this._enabled)
-            return;
-        var x = event.offsetX + event.target.offsetLeft;
-        this._currentPositionElement.style.left = x + "px";
-        this._currentPositionElement.style.visibility = "visible";
+        this._enabled = !!enabled;

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

nit: drop !!, we don't coerce to boolean whatever is annotated as boolean.

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

Done.

     },
 
     /**