Diff
Modified: trunk/Source/WebCore/ChangeLog (120837 => 120838)
--- trunk/Source/WebCore/ChangeLog 2012-06-20 17:58:09 UTC (rev 120837)
+++ trunk/Source/WebCore/ChangeLog 2012-06-20 18:11:09 UTC (rev 120838)
@@ -1,3 +1,27 @@
+2012-06-20 Pavel Feldman <[email protected]>
+
+ Web Inspector: Timeline label bar jiggles when scrolling
+ https://bugs.webkit.org/show_bug.cgi?id=89579
+
+ Reviewed by Vsevolod Vlasov.
+
+ Adding timeline header into the timeline panel and settings its position
+ to absolute. Drive-by fix that updates rulers on sidebar resize.
+
+ * inspector/front-end/TimelineGrid.js:
+ (WebInspector.TimelineGrid):
+ (WebInspector.TimelineGrid.prototype.get gridHeaderElement):
+ (WebInspector.TimelineGrid.prototype.addEventDividers):
+ (WebInspector.TimelineGrid.prototype.setScrollAndDividerTop):
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane.prototype.sidebarResized):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel):
+ (WebInspector.TimelinePanel.prototype.sidebarResized):
+ (WebInspector.TimelinePanel.prototype.onResize):
+ * inspector/front-end/timelinePanel.css:
+ (#timeline-grid-header):
+
2012-06-20 Ian Vollick <[email protected]>
[chromium] Make sure that render surfaces are not pixel doubled with a device scale factor of 2
Modified: trunk/Source/WebCore/inspector/front-end/TimelineGrid.js (120837 => 120838)
--- trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-06-20 17:58:09 UTC (rev 120837)
+++ trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-06-20 18:11:09 UTC (rev 120838)
@@ -43,13 +43,17 @@
this._dividersElement.className = "resources-dividers";
this.element.appendChild(this._dividersElement);
+ this._gridHeaderElement = document.createElement("div");
+
this._eventDividersElement = document.createElement("div");
this._eventDividersElement.className = "resources-event-dividers";
- this.element.appendChild(this._eventDividersElement);
+ this._gridHeaderElement.appendChild(this._eventDividersElement);
this._dividersLabelBarElement = document.createElement("div");
this._dividersLabelBarElement.className = "resources-dividers-label-bar";
- this.element.appendChild(this._dividersLabelBarElement);
+ this._gridHeaderElement.appendChild(this._dividersLabelBarElement);
+
+ this.element.appendChild(this._gridHeaderElement);
}
WebInspector.TimelineGrid.prototype = {
@@ -63,6 +67,11 @@
return this._dividersElement;
},
+ get gridHeaderElement()
+ {
+ return this._gridHeaderElement;
+ },
+
removeDividers: function()
{
this._dividersElement.removeChildren();
@@ -158,12 +167,12 @@
addEventDividers: function(dividers)
{
- this.element.removeChild(this._eventDividersElement);
+ this._gridHeaderElement.removeChild(this._eventDividersElement);
for (var i = 0; i < dividers.length; ++i) {
if (dividers[i])
this._eventDividersElement.appendChild(dividers[i]);
}
- this.element.appendChild(this._eventDividersElement);
+ this._gridHeaderElement.appendChild(this._eventDividersElement);
},
removeEventDividers: function()
@@ -184,7 +193,5 @@
setScrollAndDividerTop: function(scrollTop, dividersTop)
{
this._dividersElement.style.top = scrollTop + "px";
- this._eventDividersElement.style.top = scrollTop + "px";
- this._dividersLabelBarElement.style.top = dividersTop + "px";
}
}
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (120837 => 120838)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-06-20 17:58:09 UTC (rev 120837)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-06-20 18:11:09 UTC (rev 120838)
@@ -232,6 +232,7 @@
{
this._overviewContainer.style.left = width + "px";
this._topPaneSidebarElement.style.width = width + "px";
+ this._update();
},
/**
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (120837 => 120838)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-06-20 17:58:09 UTC (rev 120837)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-06-20 18:11:09 UTC (rev 120838)
@@ -77,7 +77,9 @@
this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
this._itemsGraphsElement.id = "timeline-graphs";
this._containerContentElement.appendChild(this._timelineGrid.element);
+ this._timelineGrid.gridHeaderElement.id = "timeline-grid-header";
this._memoryStatistics.setMainTimelineGrid(this._timelineGrid);
+ this.element.appendChild(this._timelineGrid.gridHeaderElement);
this._topGapElement = document.createElement("div");
this._topGapElement.className = "timeline-gap";
@@ -104,9 +106,9 @@
this._boundariesAreValid = true;
this._scrollTop = 0;
- this._popoverHelper = new WebInspector.PopoverHelper(this._containerElement, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
- this._containerElement.addEventListener("mousemove", this._mouseMove.bind(this), false);
- this._containerElement.addEventListener("mouseout", this._mouseOut.bind(this), false);
+ this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+ this.element.addEventListener("mousemove", this._mouseMove.bind(this), false);
+ this.element.addEventListener("mouseout", this._mouseOut.bind(this), false);
// Disable short events filter by default.
this.toggleFilterButton.toggled = true;
@@ -507,12 +509,15 @@
// Min width = <number of buttons on the left> * 31
this.statusBarFilters.style.left = Math.max((this.statusBarItems.length + 2) * 31, width) + "px";
this._memoryStatistics.setSidebarWidth(width);
+ this._timelineGrid.gridHeaderElement.style.left = width + "px";
+ this._timelineGrid.gridHeaderElement.style.width = this._itemsGraphsElement.offsetWidth + "px";
},
onResize: function()
{
this._closeRecordDetails();
this._scheduleRefresh(false);
+ this._timelineGrid.gridHeaderElement.style.width = this._itemsGraphsElement.offsetWidth + "px";
},
_clearPanel: function()
Modified: trunk/Source/WebCore/inspector/front-end/inspectorCommon.css (120837 => 120838)
--- trunk/Source/WebCore/inspector/front-end/inspectorCommon.css 2012-06-20 17:58:09 UTC (rev 120837)
+++ trunk/Source/WebCore/inspector/front-end/inspectorCommon.css 2012-06-20 18:11:09 UTC (rev 120838)
@@ -71,7 +71,7 @@
.resources-event-dividers {
position: absolute;
left: 0;
- right: 5px;
+ right: 0;
height: 100%;
top: 0;
z-index: 300;
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (120837 => 120838)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-06-20 17:58:09 UTC (rev 120837)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-06-20 18:11:09 UTC (rev 120838)
@@ -590,11 +590,7 @@
.timeline-frame-container {
height: 19px;
-}
-
-.timeline-frame-strip {
- position: absolute;
- height: 19px;
+ overflow: hidden;
background-color: rgb(220, 220, 220);
opacity: 0.6;
color: black;
@@ -603,3 +599,17 @@
z-index: 350;
pointer-events: auto;
}
+
+.timeline-frame-strip {
+ position: absolute;
+ height: 19px;
+}
+
+#timeline-grid-header {
+ position: absolute;
+ left: 200px;
+ right: 0;
+ top: 90px;
+ bottom: 0;
+ pointer-events: none;
+}
