DevTools: Tweaks to timeline overview popover

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 20 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {string} prefix
  */
 WebInspector.TimelineOverviewPane = function(prefix)
 {
     WebInspector.VBox.call(this);
     this.element.id = prefix + "-overview-pane";
 
-    this._currentPositionElement = this.element.createChild("div", "overview-grid-current-position");
     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.element.addEventListener("mouseout", this._hideCurrentPosition.bind(this), true);
+    this._cursorArea = this._overviewGrid.element.createChild("div", "overview-grid-cursor-area");
+    this._cursorElement = this._overviewGrid.element.createChild("div", "overview-grid-cursor-position");
+    this._cursorArea.addEventListener("mousemove", this._onMouseMove.bind(this), true);
+    this._cursorArea.addEventListener("mouseleave", this._hideCursor.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 = new WebInspector.PopoverHelper(this._cursorArea, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
     this._popoverHelper.setTimeout(0);
 
     this._cursorEnabled = false;
 }
 
 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;
+        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._currentPositionElement);
+        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._currentPositionElement.style.left = x + "px";
-        this._currentPositionElement.style.visibility = "visible";
+        this._cursorElement.style.left = x + "px";
+        this._cursorElement.style.visibility = "visible";
         if (!this._popover)
             return;
         this._populatePopoverContents();
-        this._popover.positionElement(this._currentPositionElement);
+        this._popover.positionElement(this._cursorElement);
     },
 
     _populatePopoverContents: function()
     {
-        var cursor = this._currentPositionElement;
-        var x = cursor.offsetLeft;
+        var x = this._cursorElement.offsetLeft;
         var elements = [];
         for (var control of this._overviewControls) {
             var element = control.popoverElement(x);
             if (element)
                 elements.push(element);
         }
         this._popoverContents.removeChildren();
         if (!elements.length)
             return false;
         elements.forEach(this._popoverContents.appendChild.bind(this._popoverContents));
         return true;
     },
 
-    _hideCurrentPosition: function()
+    _hideCursor: function()
     {
-        this._currentPositionElement.style.visibility = "hidden";
+        this._cursorElement.style.visibility = "hidden";
     },
 
     /**
      * @override
      */
     wasShown: function()
     {
         this.update();
     },
 
@@ skipping 69 matching lines @@
         this._overviewGrid.addEventDividers(filteredMarkers.valuesArray());
     },
 
     reset: function()
     {
         this._overviewCalculator.reset();
         this._overviewGrid.reset();
         this._overviewGrid.setResizeEnabled(false);
         this._overviewGrid.updateDividers(this._overviewCalculator);
         this._cursorEnabled = false;
-        this._hideCurrentPosition();
+        this._hideCursor();
         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
      */
@@ skipping 341 matching lines @@
     },
 
     resetCanvas: function()
     {
         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
     },
 
     __proto__: WebInspector.VBox.prototype
 }