Modified: trunk/Source/WebCore/inspector/front-end/Popover.js (144452 => 144453)
--- trunk/Source/WebCore/inspector/front-end/Popover.js 2013-03-01 15:10:15 UTC (rev 144452)
+++ trunk/Source/WebCore/inspector/front-end/Popover.js 2013-03-01 15:15:32 UTC (rev 144453)
@@ -54,19 +54,20 @@
/**
* @param {Element} element
* @param {Element} anchor
- * @param {number=} preferredWidth
- * @param {number=} preferredHeight
+ * @param {?number=} preferredWidth
+ * @param {?number=} preferredHeight
+ * @param {?WebInspector.Popover.Orientation=} arrowDirection
*/
- show: function(element, anchor, preferredWidth, preferredHeight)
+ show: function(element, anchor, preferredWidth, preferredHeight, arrowDirection)
{
- this._innerShow(null, element, anchor, preferredWidth, preferredHeight);
+ this._innerShow(null, element, anchor, preferredWidth, preferredHeight, arrowDirection);
},
/**
* @param {WebInspector.View} view
* @param {Element} anchor
- * @param {number=} preferredWidth
- * @param {number=} preferredHeight
+ * @param {?number=} preferredWidth
+ * @param {?number=} preferredHeight
*/
showView: function(view, anchor, preferredWidth, preferredHeight)
{
@@ -77,10 +78,11 @@
* @param {WebInspector.View?} view
* @param {Element} contentElement
* @param {Element} anchor
- * @param {number=} preferredWidth
- * @param {number=} preferredHeight
+ * @param {?number=} preferredWidth
+ * @param {?number=} preferredHeight
+ * @param {?WebInspector.Popover.Orientation=} arrowDirection
*/
- _innerShow: function(view, contentElement, anchor, preferredWidth, preferredHeight)
+ _innerShow: function(view, contentElement, anchor, preferredWidth, preferredHeight, arrowDirection)
{
if (this._disposed)
return;
@@ -103,7 +105,7 @@
else
this._contentDiv.appendChild(this.contentElement);
- this._positionElement(anchor, preferredWidth, preferredHeight);
+ this._positionElement(anchor, preferredWidth, preferredHeight, arrowDirection);
if (this._popoverHelper) {
contentElement.addEventListener("mousemove", this._popoverHelper._killHidePopoverTimer.bind(this._popoverHelper), true);
@@ -135,7 +137,7 @@
this._contentDiv.addStyleClass("fixed-height");
},
- _positionElement: function(anchorElement, preferredWidth, preferredHeight)
+ _positionElement: function(anchorElement, preferredWidth, preferredHeight, arrowDirection)
{
const borderWidth = 25;
const scrollerWidth = this._hasFixedHeight ? 0 : 11;
@@ -155,9 +157,9 @@
var roomAbove = anchorBox.y;
var roomBelow = totalHeight - anchorBox.y - anchorBox.height;
- if (roomAbove > roomBelow) {
+ if ((roomAbove > roomBelow) || (arrowDirection === WebInspector.Popover.Orientation.Bottom)) {
// Positioning above the anchor.
- if (anchorBox.y > newElementPosition.height + arrowHeight + borderRadius)
+ if ((anchorBox.y > newElementPosition.height + arrowHeight + borderRadius) || (arrowDirection === WebInspector.Popover.Orientation.Bottom))
newElementPosition.y = anchorBox.y - newElementPosition.height - arrowHeight;
else {
newElementPosition.y = borderRadius;
@@ -167,11 +169,11 @@
newElementPosition.height = preferredHeight;
}
}
- verticalAlignment = "bottom";
+ verticalAlignment = WebInspector.Popover.Orientation.Bottom;
} else {
// Positioning below the anchor.
newElementPosition.y = anchorBox.y + anchorBox.height + arrowHeight;
- if (newElementPosition.y + newElementPosition.height + arrowHeight - borderWidth >= totalHeight) {
+ if ((newElementPosition.y + newElementPosition.height + arrowHeight - borderWidth >= totalHeight) && (arrowDirection !== WebInspector.Popover.Orientation.Top)) {
newElementPosition.height = totalHeight - anchorBox.y - anchorBox.height - borderRadius * 2 - arrowHeight;
if (this._hasFixedHeight && newElementPosition.height < preferredHeight) {
newElementPosition.y = totalHeight - preferredHeight - borderRadius;
@@ -179,7 +181,7 @@
}
}
// Align arrow.
- verticalAlignment = "top";
+ verticalAlignment = WebInspector.Popover.Orientation.Top;
}
var horizontalAlignment;
@@ -199,7 +201,7 @@
newElementPosition.width = totalWidth - borderRadius * 2;
newElementPosition.height += scrollerWidth;
horizontalAlignment = "left";
- if (verticalAlignment === "bottom")
+ if (verticalAlignment === WebInspector.Popover.Orientation.Bottom)
newElementPosition.y -= scrollerWidth;
// Position arrow accurately.
this._popupArrowElement.style.left = Math.max(0, anchorBox.x - borderRadius * 2 - arrowOffset) + "px";
@@ -357,3 +359,9 @@
}
}
}
+
+/** @enum {string} */
+WebInspector.Popover.Orientation = {
+ Top: "top",
+ Bottom: "bottom"
+}
\ No newline at end of file
Modified: trunk/Source/WebCore/inspector/front-end/TimelineGrid.js (144452 => 144453)
--- trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2013-03-01 15:10:15 UTC (rev 144452)
+++ trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2013-03-01 15:15:32 UTC (rev 144453)
@@ -39,21 +39,15 @@
this._itemsGraphsElement.id = "resources-graphs";
this.element.appendChild(this._itemsGraphsElement);
- this._dividersElement = document.createElement("div");
- this._dividersElement.className = "resources-dividers";
- this.element.appendChild(this._dividersElement);
+ this._dividersElement = this.element.createChild("div", "resources-dividers");
this._gridHeaderElement = document.createElement("div");
+ this._eventDividersElement = this._gridHeaderElement.createChild("div", "resources-event-dividers");
+ this._dividersLabelBarElement = this._gridHeaderElement.createChild("div", "resources-dividers-label-bar");
+ this.element.appendChild(this._gridHeaderElement);
- this._eventDividersElement = document.createElement("div");
- this._eventDividersElement.className = "resources-event-dividers";
- this._gridHeaderElement.appendChild(this._eventDividersElement);
-
- this._dividersLabelBarElement = document.createElement("div");
- this._dividersLabelBarElement.className = "resources-dividers-label-bar";
- this._gridHeaderElement.appendChild(this._dividersLabelBarElement);
-
- this.element.appendChild(this._gridHeaderElement);
+ this._leftCurtainElement = this.element.createChild("div", "timeline-cpu-curtain-left");
+ this._rightCurtainElement = this.element.createChild("div", "timeline-cpu-curtain-right");
}
WebInspector.TimelineGrid.prototype = {
@@ -195,9 +189,29 @@
this._eventDividersElement.removeStyleClass("hidden");
},
+ hideCurtains: function()
+ {
+ this._leftCurtainElement.addStyleClass("hidden");
+ this._rightCurtainElement.addStyleClass("hidden");
+ },
+
+ /**
+ * @param {number} gapOffset
+ * @param {number} gapWidth
+ */
+ showCurtains: function(gapOffset, gapWidth)
+ {
+ this._leftCurtainElement.style.width = gapOffset + "px";
+ this._leftCurtainElement.removeStyleClass("hidden");
+ this._rightCurtainElement.style.left = (gapOffset + gapWidth) + "px";
+ this._rightCurtainElement.removeStyleClass("hidden");
+ },
+
setScrollAndDividerTop: function(scrollTop, dividersTop)
{
this._dividersElement.style.top = scrollTop + "px";
+ this._leftCurtainElement.style.top = scrollTop + "px";
+ this._rightCurtainElement.style.top = scrollTop + "px";
}
}
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (144452 => 144453)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2013-03-01 15:10:15 UTC (rev 144452)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2013-03-01 15:15:32 UTC (rev 144453)
@@ -1053,6 +1053,12 @@
this._highlightRect(anchor.row._record);
else
this._hideRectHighlight();
+
+ if (anchor && anchor._tasksInfo) {
+ var offset = anchor.offsetLeft;
+ this._timelineGrid.showCurtains(offset >= 0 ? offset : 0, anchor.offsetWidth);
+ } else
+ this._timelineGrid.hideCurtains();
},
_highlightRect: function(record)
@@ -1084,7 +1090,7 @@
if (anchor.row && anchor.row._record)
anchor.row._record.generatePopupContent(showCallback);
else if (anchor._tasksInfo)
- popover.show(this._presentationModel.generateMainThreadBarPopupContent(anchor._tasksInfo), anchor);
+ popover.show(this._presentationModel.generateMainThreadBarPopupContent(anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
}
function showCallback(popupContent)
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (144452 => 144453)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2013-03-01 15:10:15 UTC (rev 144452)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2013-03-01 15:15:32 UTC (rev 144453)
@@ -682,6 +682,21 @@
height: auto;
}
+.timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
+ background-color: rgba(0, 0, 0, 0.15);
+ position: absolute;
+ top: 0;
+ height: 100%;
+}
+
+.timeline-cpu-curtain-left {
+ left: 0;
+}
+
+.timeline-cpu-curtain-right {
+ right: 0;
+}
+
.image-preview-container {
background: transparent;
text-align: left;
