Changeset 109102 in webkit

Timestamp:

Feb 28, 2012 6:22:06 AM (12 years ago)

Author:

yurys@chromium.org

Message:

Web Inspector: show resource dividers on memory counter graphs
​https://bugs.webkit.org/show_bug.cgi?id=79782

Resource dividers are drawn on the memory counter graphs.

Reviewed by Pavel Feldman.

• inspector/front-end/MemoryStatistics.js:

(WebInspector.MemoryStatistics.prototype.updateDividers):
(WebInspector.MemoryStatistics.prototype.setMainTimelineGrid):
(WebInspector.MemoryStatistics.prototype._updateSize):
(WebInspector.MemoryStatistics.prototype.show):
(WebInspector.MemoryStatistics.prototype.refresh):
(WebInspector.MemoryStatistics.prototype._refreshDividers):

• inspector/front-end/TimelineGrid.js:

(WebInspector.TimelineGrid.prototype.get dividersElement):
(WebInspector.TimelineGrid.prototype.updateDividers):

• inspector/front-end/TimelinePanel.js:

(WebInspector.TimelinePanel):
(WebInspector.TimelinePanel.prototype._timelinesOverviewModeChanged):
(WebInspector.TimelinePanel.prototype._refreshRecords):
(WebInspector.TimelinePanel.prototype.get timlinePaddingLeft):

• inspector/front-end/timelinePanel.css:

(#memory-graphs-canvas-container):
(#memory-graphs-canvas-container .resources-dividers):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/MemoryStatistics.js (modified) (7 diffs)
• inspector/front-end/SidebarOverlay.js (modified) (1 diff)
• inspector/front-end/TimelineGrid.js (modified) (4 diffs)
• inspector/front-end/TimelinePanel.js (modified) (4 diffs)
• inspector/front-end/timelinePanel.css (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-02-28  Yury Semikhatsky  <yurys@chromium.org>
+
+        Web Inspector: show resource dividers on memory counter graphs
+        https://bugs.webkit.org/show_bug.cgi?id=79782
+
+        Resource dividers are drawn on the memory counter graphs.
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/MemoryStatistics.js:
+        (WebInspector.MemoryStatistics.prototype.updateDividers):
+        (WebInspector.MemoryStatistics.prototype.setMainTimelineGrid):
+        (WebInspector.MemoryStatistics.prototype._updateSize):
+        (WebInspector.MemoryStatistics.prototype.show):
+        (WebInspector.MemoryStatistics.prototype.refresh):
+        (WebInspector.MemoryStatistics.prototype._refreshDividers):
+        * inspector/front-end/TimelineGrid.js:
+        (WebInspector.TimelineGrid.prototype.get dividersElement):
+        (WebInspector.TimelineGrid.prototype.updateDividers):
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel):
+        (WebInspector.TimelinePanel.prototype._timelinesOverviewModeChanged):
+        (WebInspector.TimelinePanel.prototype._refreshRecords):
+        (WebInspector.TimelinePanel.prototype.get timlinePaddingLeft):
+        * inspector/front-end/timelinePanel.css:
+        (#memory-graphs-canvas-container):
+        (#memory-graphs-canvas-container .resources-dividers):
+
 2012-02-28  Nikolas Zimmermann  <nzimmermann@rim.com>
 

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

@@ -47 +47 @@
 
     this._canvasContainer = this._memorySplitView.mainElement;
+    this._canvasContainer.id = "memory-graphs-canvas-container";
     this._currentValuesBar = this._canvasContainer.createChild("div");
     this._currentValuesBar.id = "counter-values-bar";
@@ -57 +58 @@
     this._canvas.addEventListener("mouseout", this._onMouseOut.bind(this), true);
     this._canvas.addEventListener("click", this._onClick.bind(this), true);
+    // We create extra timeline grid here to reuse its event dividers.
+    this._timelineGrid = new WebInspector.TimelineGrid();
+    this._canvasContainer.appendChild(this._timelineGrid.dividersElement);
 
     // Populate sidebar
@@ -204 +208 @@
 
 WebInspector.MemoryStatistics.prototype = {
+    setMainTimelineGrid: function(timelineGrid)
+    {
+        this._mainTimelineGrid = timelineGrid;
+    },
+
     setTopPosition: function(top)
     {
@@ -230 +239 @@
     _updateSize: function()
     {
+        var width = this._mainTimelineGrid.dividersElement.offsetWidth + 1;
+        this._canvasContainer.style.width = width + "px";
+
         var height = this._canvasContainer.offsetHeight - this._currentValuesBar.offsetHeight;
-        this._canvas.width = this._canvasContainer.offsetWidth;
+        this._canvas.width = width;
         this._canvas.height = height;
     },
@@ -385 +397 @@
         this._memorySplitView.show(this._timelinePanel.element, anchor);
         this._updateSize();
+        this._refreshDividers();
         setTimeout(this._draw.bind(this), 0);
     },
@@ -391 +404 @@
     {
         this._updateSize();
+        this._refreshDividers();
         this._draw();
         this._refreshCurrentValues();
@@ -398 +412 @@
     {
         this._memorySplitView.detach();
+    },
+
+    _refreshDividers: function()
+    {
+        this._timelineGrid.updateDividers(true, this._timelinePanel.calculator, this._timelinePanel.timelinePaddingLeft);
     },
 

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

@@ -114 +114 @@
         if (this._resizerWidgetElement)
             this.element.removeChild(this._resizerWidgetElement);
-        element.removeEventListener("DOMFocusIn", this._boundContainingElementFocused);
+        element.removeEventListener("DOMFocusIn", this._boundContainingElementFocused, false);
     },
     

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

@@ -59 +59 @@
     },
 
+    get dividersElement()
+    {
+        return this._dividersElement;
+    },
+
     /**
      * @param {number=} paddingLeft
@@ -77 +82 @@
         var dividerLabelBar = this._dividersLabelBarElement.firstChild;
 
-        var dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
-        var clientWidth = dividersLabelBarElementClientWidth - paddingLeft;
+        var dividersElementClientWidth = this._dividersElement.clientWidth;
+        var clientWidth = dividersElementClientWidth - paddingLeft;
         for (var i = paddingLeft ? 0 : 1; i <= dividerCount; ++i) {
             if (!divider) {
@@ -92 +97 @@
                 dividerLabelBar.appendChild(label);
                 this._dividersLabelBarElement.appendChild(dividerLabelBar);
-                dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
             }
 
@@ -112 +116 @@
 
             var left = paddingLeft + clientWidth * (i / dividerCount);
-            var percentLeft = 100 * left / dividersLabelBarElementClientWidth;
+            var percentLeft = 100 * left / dividersElementClientWidth;
             this._setDividerAndBarLeft(divider, dividerLabelBar, percentLeft);
 

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

@@ -80 +80 @@
     this._itemsGraphsElement.addEventListener("mousewheel", this._overviewPane.scrollWindow.bind(this._overviewPane), true);
     this._containerContentElement.appendChild(this._timelineGrid.element);
+    if (this._memoryStatistics)
+        this._memoryStatistics.setMainTimelineGrid(this._timelineGrid);
 
     this._topGapElement = document.createElement("div");
@@ -379 +381 @@
             this.splitView.element.style.height = "auto";
             this.splitView.element.style.bottom = "0";
-            this.onResize();
         } else {
             this._timelineMemorySplitter.removeStyleClass("hidden");
@@ -386 +387 @@
             this._setSplitterPosition(600);
         }
+        this._refresh();
     },
 
@@ -788 +790 @@
         this.splitView.sidebarResizerElement.style.height = this.sidebarElement.clientHeight + "px";
         // Reserve some room for expand / collapse controls to the left for records that start at 0ms.
-        var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0;
         if (updateBoundaries)
-            this._timelineGrid.updateDividers(true, this._calculator, timelinePaddingLeft);
+            this._timelineGrid.updateDividers(true, this._calculator, this.timelinePaddingLeft);
         this._adjustScrollPosition((recordsInWindow.length + 1) * rowHeight);
+    },
+
+    get timelinePaddingLeft()
+    {
+        return this._calculator.windowLeft === 0 ? this._expandOffset : 0;
     },
 

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

@@ -560 +560 @@
 }
 
+#memory-graphs-canvas-container {
+    border-right: 1px solid #AAA;
+}
+
+#memory-graphs-canvas-container .resources-dividers {
+    top: 15px;
+}
+
 #memory-graphs-container .split-view-contents {
     overflow: hidden;