Changeset 120838 in webkit

Timestamp:

Jun 20, 2012 11:11:09 AM (12 years ago)

Author:

pfeldman@chromium.org

Message:

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):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/TimelineGrid.js (modified) (4 diffs)
• inspector/front-end/TimelineOverviewPane.js (modified) (1 diff)
• inspector/front-end/TimelinePanel.js (modified) (4 diffs)
• inspector/front-end/inspectorCommon.css (modified) (1 diff)
• inspector/front-end/timelinePanel.css (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-06-20  Pavel Feldman  <pfeldman@chromium.org>
+
+        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  <vollick@chromium.org>
 

trunk/Source/WebCore/inspector/front-end/TimelineGrid.js

@@ -44 +44 @@
     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);
 }
 
@@ -62 +66 @@
     {
         return this._dividersElement;
+    },
+
+    get gridHeaderElement()
+    {
+        return this._gridHeaderElement;
     },
 
@@ -159 +168 @@
     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);
     },
 
@@ -185 +194 @@
     {
         this._dividersElement.style.top = scrollTop + "px";
-        this._eventDividersElement.style.top = scrollTop + "px";
-        this._dividersLabelBarElement.style.top = dividersTop + "px";
     }
 }

trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js

@@ -233 +233 @@
         this._overviewContainer.style.left = width + "px";
         this._topPaneSidebarElement.style.width = width + "px";
+        this._update();
     },
 

trunk/Source/WebCore/inspector/front-end/TimelinePanel.js

@@ -78 +78 @@
     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");
@@ -105 +107 @@
     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.
@@ -508 +510 @@
         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";
     },
 
@@ -514 +518 @@
         this._closeRecordDetails();
         this._scheduleRefresh(false);
+        this._timelineGrid.gridHeaderElement.style.width = this._itemsGraphsElement.offsetWidth + "px";
     },
 

trunk/Source/WebCore/inspector/front-end/inspectorCommon.css

@@ -72 +72 @@
     position: absolute;
     left: 0;
-    right: 5px;
+    right: 0;
     height: 100%;
     top: 0;

trunk/Source/WebCore/inspector/front-end/timelinePanel.css

@@ -591 +591 @@
 .timeline-frame-container {
     height: 19px;
-}
-
-.timeline-frame-strip {
-    position: absolute;
-    height: 19px;
+    overflow: hidden;
     background-color: rgb(220, 220, 220);
     opacity: 0.6;
@@ -604 +600 @@
     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;
+}