DevTools: Support popover on timeline overview.

Source/devtools/front_end/ui/Popover.js

 /*
  * Copyright (C) 2009 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 79 matching lines @@
         // This should not happen, but we hide previous popup to be on the safe side.
         if (WebInspector.Popover._popover)
             WebInspector.Popover._popover.hide();
         WebInspector.Popover._popover = this;
 
         var document = anchor instanceof Element ? anchor.ownerDocument : contentElement.ownerDocument;
         var window = document.defaultView;
 
         // Temporarily attach in order to measure preferred dimensions.
         var preferredSize = view ? view.measurePreferredSize() : WebInspector.measurePreferredSize(this._contentElement);
-        preferredWidth = preferredWidth || preferredSize.width;
-        preferredHeight = preferredHeight || preferredSize.height;
+        this._preferredWidth = preferredWidth || preferredSize.width;
+        this._preferredHeight = preferredHeight || preferredSize.height;
 
         window.addEventListener("resize", this._hideBound, false);
         document.body.appendChild(this._containerElement);
         WebInspector.Widget.prototype.show.call(this, this._containerElement);
 
         if (view)
             view.show(this._contentDiv);
         else
             this._contentDiv.appendChild(this._contentElement);
 
-        this._positionElement(anchor, preferredWidth, preferredHeight, arrowDirection);
+        this.positionElement(anchor, this._preferredWidth, this._preferredHeight, arrowDirection);
 
         if (this._popoverHelper) {
             this._contentDiv.addEventListener("mousemove", this._popoverHelper._killHidePopoverTimer.bind(this._popoverHelper), true);
             this.element.addEventListener("mouseout", this._popoverHelper._popoverMouseOut.bind(this._popoverHelper), true);
         }
     },
 
     hide: function()
     {
         this._containerElement.ownerDocument.defaultView.removeEventListener("resize", this._hideBound, false);
@@ skipping 27 matching lines @@
      * @param {boolean} noMargins
      */
     setNoMargins: function(noMargins)
     {
         this._hasNoMargins = noMargins;
         this._contentDiv.classList.toggle("no-margin", this._hasNoMargins);
     },
 
     /**
      * @param {!Element|!AnchorBox} anchorElement
-     * @param {number} preferredWidth
-     * @param {number} preferredHeight
+     * @param {number=} preferredWidth
+     * @param {number=} preferredHeight
      * @param {?WebInspector.Popover.Orientation=} arrowDirection
      */
-    _positionElement: function(anchorElement, preferredWidth, preferredHeight, arrowDirection)
+    positionElement: function(anchorElement, preferredWidth, preferredHeight, arrowDirection)

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

Exposing this does not seem to be a good style. Can we rather support
repositioning popover internally within the popover?

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

Could you elaborate. Do you mean make it auto reposition when anchor moves?

     {
         const borderWidth = this._hasNoMargins ? 0 : 8;
         const scrollerWidth = this._hasFixedHeight ? 0 : 11;
         const arrowHeight = this._hasNoMargins ? 8 : 15;
         const arrowOffset = 10;
         const borderRadius = 4;
         const arrowRadius = 6;
+        preferredWidth = preferredWidth || this._preferredWidth;
+        preferredHeight = preferredHeight || this._preferredHeight;
 
         // Skinny tooltips are not pretty, their arrow location is not nice.
         preferredWidth = Math.max(preferredWidth, 50);
         // Position relative to main DevTools element.
         const container = WebInspector.Dialog.modalHostView().element;
         const totalWidth = container.offsetWidth;
         const totalHeight = container.offsetHeight;
 
         var anchorBox = anchorElement instanceof AnchorBox ? anchorElement : anchorElement.boxInWindow(window);
         anchorBox = anchorBox.relativeToElement(container);
@@ skipping 231 matching lines @@
             this._resetHoverTimer();
         }
     }
 }
 
 /** @enum {string} */
 WebInspector.Popover.Orientation = {
     Top: "top",
     Bottom: "bottom"
 }