Commit c03ee3af authored by pfeldman@chromium.org's avatar pfeldman@chromium.org

2010-03-04 Pavel Feldman <pfeldman@chromium.org>

        Reviewed by Timothy Hatcher.

        Web Inspector: Popup for Timeline panel will work in a tooltip mode

        https://bugs.webkit.org/show_bug.cgi?id=35680

        * inspector/front-end/Popover.js:
        (WebInspector.Popover):
        (WebInspector.Popover.prototype.show):
        (WebInspector.Popover.prototype.hide):
        (WebInspector.Popover.prototype._positionElement):
        (WebInspector.PopoverHelper):
        (WebInspector.PopoverHelper.prototype._mouseDown):
        (WebInspector.PopoverHelper.prototype._mouseMove.doHide):
        (WebInspector.PopoverHelper.prototype._mouseMove):
        (WebInspector.PopoverHelper.prototype._resetHoverTimer):
        (WebInspector.PopoverHelper.prototype.hidePopup):
        (WebInspector.PopoverHelper.prototype._mouseHover):
        (WebInspector.PopoverHelper.prototype._killHidePopupTimer):
        * inspector/front-end/TimelineOverviewPane.js:
        (WebInspector.TimelineOverviewPane.prototype.reset):
        * inspector/front-end/TimelinePanel.js:
        (WebInspector.TimelinePanel):
        (WebInspector.TimelinePanel.prototype.get _recordStyles):
        (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
        (WebInspector.TimelinePanel.prototype._scheduleRefresh):
        (WebInspector.TimelinePanel.prototype._refreshRecords):
        (WebInspector.TimelinePanel.prototype._adjustScrollPosition):
        (WebInspector.TimelinePanel.prototype._getPopoverAnchor):
        (WebInspector.TimelinePanel.prototype._showPopover):
        (WebInspector.TimelinePanel.prototype._closeRecordDetails):
        (WebInspector.TimelineRecordListRow):
        (WebInspector.TimelineRecordListRow.prototype.update):
        (WebInspector.TimelineRecordGraphRow):
        (WebInspector.TimelineRecordGraphRow.prototype._onClick):
        (WebInspector.TimelinePanel.FormattedRecord):
        (WebInspector.TimelinePanel.FormattedRecord.prototype._createCell):
        (WebInspector.TimelinePanel.FormattedRecord.prototype._createRow):
        (WebInspector.TimelinePanel.FormattedRecord.prototype._createLinkRow):
        (WebInspector.TimelinePanel.FormattedRecord.prototype._generatePopupContent):
        (WebInspector.TimelinePanel.FormattedRecord.prototype._getRecordDetails):
        * inspector/front-end/inspector.css:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@55530 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 61550845
2010-03-04 Pavel Feldman <pfeldman@chromium.org>
Reviewed by Timothy Hatcher.
Web Inspector: Popup for Timeline panel will work in a tooltip mode
https://bugs.webkit.org/show_bug.cgi?id=35680
* inspector/front-end/Popover.js:
(WebInspector.Popover):
(WebInspector.Popover.prototype.show):
(WebInspector.Popover.prototype.hide):
(WebInspector.Popover.prototype._positionElement):
(WebInspector.PopoverHelper):
(WebInspector.PopoverHelper.prototype._mouseDown):
(WebInspector.PopoverHelper.prototype._mouseMove.doHide):
(WebInspector.PopoverHelper.prototype._mouseMove):
(WebInspector.PopoverHelper.prototype._resetHoverTimer):
(WebInspector.PopoverHelper.prototype.hidePopup):
(WebInspector.PopoverHelper.prototype._mouseHover):
(WebInspector.PopoverHelper.prototype._killHidePopupTimer):
* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.TimelineOverviewPane.prototype.reset):
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel):
(WebInspector.TimelinePanel.prototype.get _recordStyles):
(WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
(WebInspector.TimelinePanel.prototype._scheduleRefresh):
(WebInspector.TimelinePanel.prototype._refreshRecords):
(WebInspector.TimelinePanel.prototype._adjustScrollPosition):
(WebInspector.TimelinePanel.prototype._getPopoverAnchor):
(WebInspector.TimelinePanel.prototype._showPopover):
(WebInspector.TimelinePanel.prototype._closeRecordDetails):
(WebInspector.TimelineRecordListRow):
(WebInspector.TimelineRecordListRow.prototype.update):
(WebInspector.TimelineRecordGraphRow):
(WebInspector.TimelineRecordGraphRow.prototype._onClick):
(WebInspector.TimelinePanel.FormattedRecord):
(WebInspector.TimelinePanel.FormattedRecord.prototype._createCell):
(WebInspector.TimelinePanel.FormattedRecord.prototype._createRow):
(WebInspector.TimelinePanel.FormattedRecord.prototype._createLinkRow):
(WebInspector.TimelinePanel.FormattedRecord.prototype._generatePopupContent):
(WebInspector.TimelinePanel.FormattedRecord.prototype._getRecordDetails):
* inspector/front-end/inspector.css:
2010-03-04 Laszlo Gombos <laszlo.1.gombos@nokia.com>
Unreviewed build fix.
......
......@@ -38,6 +38,8 @@ WebInspector.Popover = function(contentElement)
this.element.appendChild(this._popupArrowElement);
this.contentElement = contentElement;
this._contentDiv = document.createElement("div");
this._contentDiv.className = "content";
}
WebInspector.Popover.prototype = {
......@@ -54,23 +56,18 @@ WebInspector.Popover.prototype = {
var preferredWidth = preferredWidth || this.contentElement.offsetWidth;
var preferredHeight = preferredHeight || this.contentElement.offsetHeight;
var contentDiv = document.createElement("div");
contentDiv.className = "content";
contentDiv.appendChild(this.contentElement);
this.element.appendChild(contentDiv);
this._contentDiv.appendChild(this.contentElement);
this.element.appendChild(this._contentDiv);
document.body.appendChild(this.element);
this._positionElement(anchor, preferredWidth, preferredHeight);
},
hide: function()
{
delete WebInspector.Popover._popoverElement;
document.body.removeChild(this.element);
},
hideWhenClicked: function()
{
this.element.addEventListener("click", this.hide.bind(this));
if (WebInspector.Popover._popoverElement) {
delete WebInspector.Popover._popoverElement;
document.body.removeChild(this.element);
}
},
_positionElement: function(anchorElement, preferredWidth, preferredHeight)
......@@ -78,9 +75,9 @@ WebInspector.Popover.prototype = {
const borderWidth = 25;
const scrollerWidth = 11;
const arrowHeight = 15;
const arrowOffset = 15;
const arrowOffset = 10;
const borderRadius = 10;
// Skinny tooltips are not pretty, their arrow location is not nice.
preferredWidth = Math.max(preferredWidth, 50);
const totalWidth = window.innerWidth;
......@@ -121,22 +118,25 @@ WebInspector.Popover.prototype = {
var horizontalAlignment;
if (anchorBox.x + newElementPosition.width < totalWidth) {
newElementPosition.x = Math.max(borderRadius, anchorBox.x - arrowOffset);
newElementPosition.x = Math.max(borderRadius, anchorBox.x - borderRadius - arrowOffset);
horizontalAlignment = "left";
} else if (newElementPosition.width + borderRadius * 2 < totalWidth) {
newElementPosition.x = totalWidth - newElementPosition.width - borderRadius;
horizontalAlignment = "right";
// Position arrow accurately.
this._popupArrowElement.style.right = totalWidth - anchorBox.x - anchorBox.width - borderRadius + "px";
var arrowRightPosition = Math.max(0, totalWidth - anchorBox.x - anchorBox.width - borderRadius - arrowOffset);
arrowRightPosition += anchorBox.width / 2;
this._popupArrowElement.style.right = arrowRightPosition + "px";
} else {
newElementPosition.x = borderRadius;
newElementPosition.width = totalWidth - scrollerWidth - borderRadius * 2;
newElementPosition.width = totalWidth - borderRadius * 2;
newElementPosition.height += scrollerWidth;
horizontalAlignment = "left";
if (verticalAlignment === "bottom")
newElementPosition.y -= scrollerWidth;
// Position arrow accurately.
this._popupArrowElement.style.left = anchorBox.x + "px";
this._popupArrowElement.style.left = Math.max(0, anchorBox.x - borderRadius * 2 - arrowOffset) + "px";
this._popupArrowElement.style.left += anchorBox.width / 2;
}
this.element.className = "popover " + verticalAlignment + "-" + horizontalAlignment + "-arrow";
......@@ -145,3 +145,94 @@ WebInspector.Popover.prototype = {
this.element.style.height = newElementPosition.height + borderWidth * 2 + "px";
}
}
WebInspector.PopoverHelper = function(panelElement, getAnchor, showPopup, showOnClick, onHide)
{
this._panelElement = panelElement;
this._getAnchor = getAnchor;
this._showPopup = showPopup;
this._showOnClick = showOnClick;
this._onHide = onHide;
panelElement.addEventListener("mousedown", this._mouseDown.bind(this), false);
panelElement.addEventListener("mousemove", this._mouseMove.bind(this), false);
}
WebInspector.PopoverHelper.prototype = {
_mouseDown: function(event)
{
this._resetHoverTimer();
if (this._showOnClick) {
var anchor = this._getAnchor(event.target);
if (anchor) {
this._popup = this._showPopup(anchor);
this._killHidePopupTimer();
}
}
},
_mouseMove: function(event)
{
// Pretend that nothing has happened.
if (this._hoverElement === event.target || (this._hoverElement && this._hoverElement.isAncestor(event.target)))
return;
this._resetHoverTimer();
// User has 500ms to reach the popup.
if (this._popup) {
var self = this;
function doHide()
{
self.hidePopup();
delete self._hidePopupTimer;
}
this._hidePopupTimer = setTimeout(doHide, 500);
}
this._hoverElement = this._getAnchor(event.target);
if (!this._hoverElement)
return;
const toolTipDelay = this._popup ? 600 : 1000;
this._hoverTimer = setTimeout(this._mouseHover.bind(this, this._hoverElement), toolTipDelay);
},
_resetHoverTimer: function()
{
if (this._hoverTimer) {
clearTimeout(this._hoverTimer);
delete this._hoverTimer;
}
},
hidePopup: function()
{
if (!this._popup)
return;
if (this._onHide)
this._onHide();
this._popup.hide();
delete this._popup;
},
_mouseHover: function(element)
{
delete this._hoverTimer;
this._popup = this._showPopup(element);
this._popup.contentElement.addEventListener("mousemove", this._killHidePopupTimer.bind(this), true);
},
_killHidePopupTimer: function()
{
if (this._hidePopupTimer) {
clearTimeout(this._hidePopupTimer);
delete this._hidePopupTimer;
// We know that we reached the popup, but we might have moved over other elements.
// Discard pending command.
this._resetHoverTimer();
}
}
}
......@@ -175,7 +175,10 @@ WebInspector.TimelineOverviewPane.prototype = {
{
this.windowLeft = 0.0;
this.windowRight = 1.0;
this._setWindowPosition(0, this._overviewGrid.element.clientWidth);
this._overviewWindowElement.style.left = "0%";
this._overviewWindowElement.style.width = "100%";
this._leftResizeElement.style.left = "0%";
this._rightResizeElement.style.left = "100%";
this._overviewCalculator.reset();
this._overviewGrid.updateDividers(true, this._overviewCalculator);
},
......
......@@ -3588,7 +3588,8 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
min-width: 5px;
opacity: 0.8;
-webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
pointer-events: none;
z-index: 180;
pointer-events: visibleFill;
}
.timeline-graph-side.even {
......@@ -3869,6 +3870,10 @@ ol.breakpoint-list {
background-color: rgb(255, 255, 194);
}
.timeline-details {
-webkit-user-select: text;
}
.timeline-details-row-title {
font-weight: bold;
text-align: right;
......@@ -3882,6 +3887,12 @@ ol.breakpoint-list {
.timeline-details-title {
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 11px;
padding-left: 10px;
padding-bottom: 5px;
border-bottom: 1px solid rgb(194,194,147);
}
.workers-list {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment