Changeset 51297 in webkit

Timestamp:

Nov 22, 2009 12:05:47 PM (14 years ago)

Author:

pfeldman@chromium.org

Message:

2009-11-22 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: Introduce sidebar background on timeline panel in order
to prevent it from flickering on scroll.

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

• inspector/front-end/TimelinePanel.js: (WebInspector.TimelinePanel): (WebInspector.TimelinePanel.prototype.setSidebarWidth): (WebInspector.TimelinePanel.prototype._onScroll): (WebInspector.TimelinePanel.prototype._scheduleRefresh):
• inspector/front-end/inspector.css:

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/TimelinePanel.js (modified) (6 diffs)
• inspector/front-end/inspector.css (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-11-22  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Introduce sidebar background on timeline panel in order
+        to prevent it from flickering on scroll.
+
+        https://bugs.webkit.org/show_bug.cgi?id=31789
+
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel):
+        (WebInspector.TimelinePanel.prototype.setSidebarWidth):
+        (WebInspector.TimelinePanel.prototype._onScroll):
+        (WebInspector.TimelinePanel.prototype._scheduleRefresh):
+        * inspector/front-end/inspector.css:
+
 2009-11-22  Pavel Feldman  <pfeldman@chromium.org>
 

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

@@ -39 +39 @@
     this.element.appendChild(this._overviewPane.element);
 
+    this._sidebarBackgroundElement = document.createElement("div");
+    this._sidebarBackgroundElement.className = "sidebar timeline-sidebar-background";
+    this.element.appendChild(this._sidebarBackgroundElement);
+
     this._containerElement = document.createElement("div");
     this._containerElement.id = "timeline-container";
@@ -45 +49 @@
 
     this.createSidebar(this._containerElement, this._containerElement);
-    this.sidebarElement.id = "timeline-sidebar";
-    this.itemsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RECORDS"), {}, true);
-    this.itemsTreeElement.expanded = true;
-    this.sidebarTree.appendChild(this.itemsTreeElement);
+    var itemsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RECORDS"), {}, true);
+    itemsTreeElement.expanded = true;
+    this.sidebarTree.appendChild(itemsTreeElement);
 
     this._sidebarListElement = document.createElement("div");
@@ -58 +61 @@
 
     this._timelineGrid = new WebInspector.TimelineGrid();
-    this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
-    this._itemsGraphsElement.id = "timeline-graphs";
+    var itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
+    itemsGraphsElement.id = "timeline-graphs";
     this._containerContentElement.appendChild(this._timelineGrid.element);
 
     this._topGapElement = document.createElement("div");
     this._topGapElement.className = "timeline-gap";
-    this._itemsGraphsElement.appendChild(this._topGapElement);
+    itemsGraphsElement.appendChild(this._topGapElement);
 
     this._graphRowsElement = document.createElement("div");
-    this._itemsGraphsElement.appendChild(this._graphRowsElement);
+    itemsGraphsElement.appendChild(this._graphRowsElement);
 
     this._bottomGapElement = document.createElement("div");
     this._bottomGapElement.className = "timeline-gap";
-    this._itemsGraphsElement.appendChild(this._bottomGapElement);
+    itemsGraphsElement.appendChild(this._bottomGapElement);
 
     this._createStatusbarButtons();
@@ -237 +240 @@
     {
         WebInspector.Panel.prototype.setSidebarWidth.call(this, width);
+        this._sidebarBackgroundElement.style.width = width + "px";
         this._overviewPane.setSidebarWidth(width);
     },
@@ -273 +277 @@
         var dividersTop = Math.max(0, scrollTop);
         this._timelineGrid.setScrollAndDividerTop(scrollTop, dividersTop);
-        this._scheduleRefresh();
-    },
-
-    _scheduleRefresh: function()
+        this._scheduleRefresh(true);
+    },
+
+    _scheduleRefresh: function(immediate)
     {
         if (this._needsRefresh)
@@ -283 +287 @@
 
         if (this.visible && !("_refreshTimeout" in this))
-            this._refreshTimeout = setTimeout(this._refresh.bind(this), 100);
+            this._refreshTimeout = setTimeout(this._refresh.bind(this), immediate ? 0 : 100);
     },
 

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

@@ -3276 +3276 @@
 /* Timeline Style */
 
-#timeline-summary {
+#timeline-overview-panel {
     position: absolute;
     top: 0;
     left: 0;
-    width: 0;
-    height: 0;
-}
-
-#timeline-overview-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
     right: 0;
     height: 80px;
+}
+
+.timeline-sidebar-background {
+    top: 90px;
+    bottom: 0;
 }