DevTools: Support popover on timeline overview.

Source/devtools/front_end/ui_lazy/OverviewGrid.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 18 matching lines @@
  */
 
 /**
  * @constructor
  * @param {string} prefix
  */
 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()
     {
         return this.element.clientWidth;
     },
 
     /**
      * @param {!WebInspector.TimelineGrid.Calculator} calculator
      */
@@ skipping 63 matching lines @@
     {
         this._window._zoom(zoomFactor, referencePoint);
     },
 
     /**
      * @param {boolean} enabled
      */
     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();
     }
 }
 
 
 WebInspector.OverviewGrid.MinSelectableSize = 14;
 
 WebInspector.OverviewGrid.WindowScrollSpeedFactor = .3;
 
 WebInspector.OverviewGrid.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
 
@@ skipping 15 matching lines @@
     this.windowRight = 1.0;
 
     this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), true);
     this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
 
     this._overviewWindowElement = parentElement.createChild("div", "overview-grid-window");
     this._overviewWindowElement.appendChild(WebInspector.Widget.createStyleElement("ui_lazy/overviewGrid.css"));
     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");
 
     this._rightResizeElement = parentElement.createChild("div", "overview-grid-window-resizer overview-grid-window-resizer-right");
     this._rightResizeElement.style.right = 0;
     WebInspector.installDragHandle(this._rightResizeElement, this._resizerElementStartDragging.bind(this), this._rightResizeElementDragging.bind(this), null, "ew-resize");
     this.setEnabled(true);
 }
 
@@ skipping 15 matching lines @@
         this._leftResizeElement.style.left = "0%";
         this._rightResizeElement.style.left = "100%";
         this.setEnabled(true);
     },
 
     /**
      * @param {boolean} enabled
      */
     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";
+        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.

     },
 
     /**
-     * @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";
-    },
-
-    /**
      * @param {!Event} event
      */
     _resizerElementStartDragging: function(event)
     {
         if (!this._enabled)
             return false;
         this._resizerParentOffsetLeft = event.pageX - event.offsetX - event.target.offsetLeft;
         event.preventDefault();
         return true;
     },
@@ skipping 248 matching lines @@
         position = Math.max(0, Math.min(position, this._width));
         if (position < this._startPosition) {
             this._windowSelector.style.left = position + "px";
             this._windowSelector.style.right = this._width - this._startPosition + "px";
         } else {
             this._windowSelector.style.left = this._startPosition + "px";
             this._windowSelector.style.right = this._width - position + "px";
         }
     }
 }