2011-03-04 Andrey Kosyakov <caseq@chromium.org>
authorcaseq@chromium.org <caseq@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 4 Mar 2011 09:26:01 +0000 (09:26 +0000)
committercaseq@chromium.org <caseq@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 4 Mar 2011 09:26:01 +0000 (09:26 +0000)
        Reviewed by Pavel Feldman.

        Web Inspector: summary bar may overlap content of the network item view
        https://bugs.webkit.org/show_bug.cgi?id=55656

        - drop custom summary bar placement logic, do it with CSS instead.

        * inspector/front-end/NetworkPanel.js:
        (WebInspector.NetworkPanel.prototype.resize):
        (WebInspector.NetworkPanel.prototype._createSummaryBar):
        (WebInspector.NetworkPanel.prototype._updateSummaryBar):
        (WebInspector.NetworkPanel.prototype._updateFilter):
        (WebInspector.NetworkPanel.prototype.show):
        (WebInspector.NetworkPanel.prototype.refresh):
        (WebInspector.NetworkPanel.prototype._reset):
        (WebInspector.NetworkPanel.prototype._setLargerResources):
        (WebInspector.NetworkPanel.prototype._updateOffscreenRows):
        * inspector/front-end/networkPanel.css:
        (.network-sidebar .data-grid td):
        (.network-sidebar tr.filler td):
        (.network-summary-bar):
        (.network-sidebar .data-grid .network-summary-bar td):
        (.network-summary-bar img):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@80337 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/NetworkPanel.js
Source/WebCore/inspector/front-end/networkPanel.css

index e95a498..ee41012 100644 (file)
@@ -1,3 +1,29 @@
+2011-03-04  Andrey Kosyakov  <caseq@chromium.org>
+
+        Reviewed by Pavel Feldman.
+
+        Web Inspector: summary bar may overlap content of the network item view
+        https://bugs.webkit.org/show_bug.cgi?id=55656
+
+        - drop custom summary bar placement logic, do it with CSS instead.
+
+        * inspector/front-end/NetworkPanel.js:
+        (WebInspector.NetworkPanel.prototype.resize):
+        (WebInspector.NetworkPanel.prototype._createSummaryBar):
+        (WebInspector.NetworkPanel.prototype._updateSummaryBar):
+        (WebInspector.NetworkPanel.prototype._updateFilter):
+        (WebInspector.NetworkPanel.prototype.show):
+        (WebInspector.NetworkPanel.prototype.refresh):
+        (WebInspector.NetworkPanel.prototype._reset):
+        (WebInspector.NetworkPanel.prototype._setLargerResources):
+        (WebInspector.NetworkPanel.prototype._updateOffscreenRows):
+        * inspector/front-end/networkPanel.css:
+        (.network-sidebar .data-grid td):
+        (.network-sidebar tr.filler td):
+        (.network-summary-bar):
+        (.network-sidebar .data-grid .network-summary-bar td):
+        (.network-summary-bar img):
+
 2011-03-04  James Su <suzhe@chromium.org>
 
         Reviewed by Dimitri Glazkov.
index e007ece..c83b76c 100644 (file)
@@ -110,7 +110,7 @@ WebInspector.NetworkPanel.prototype = {
     {
         WebInspector.Panel.prototype.resize.call(this);
         this._dataGrid.updateWidths();
-        this._positionSummaryBar();
+        this._updateOffscreenRows();
     },
 
     updateSidebarWidth: function(width)
@@ -133,41 +133,6 @@ WebInspector.NetworkPanel.prototype = {
         }
     },
 
-    _positionSummaryBar: function()
-    {
-        // Position the total bar.
-
-        var fillerRow = this._dataGrid.dataTableBody.lastChild;
-        if (this._summaryBarElement.parentElement !== this.element && fillerRow.offsetHeight > 0) {
-            // Glue status to bottom.
-            if (this._summaryBarRowNode) {
-                this._dataGrid.removeChild(this._summaryBarRowNode);
-                delete this._summaryBarRowNode;
-            }
-            this._summaryBarElement.addStyleClass("network-summary-bar-bottom");
-            this.element.appendChild(this._summaryBarElement);
-            this._dataGrid.element.style.bottom = "20px";
-            return;
-        }
-
-        if (!this._summaryBarRowNode && !fillerRow.offsetHeight) {
-            // Glue status to table.
-            this._summaryBarRowNode = new WebInspector.NetworkTotalGridNode(this._summaryBarElement);
-            this._summaryBarElement.removeStyleClass("network-summary-bar-bottom");
-            this._dataGrid.appendChild(this._summaryBarRowNode);
-            this._dataGrid.element.style.bottom = 0;
-            this._sortItems();
-        }
-        this._updateOffscreenRows();
-    },
-
-    _resetSummaryBar: function()
-    {
-        delete this._summaryBarRowNode;
-        this._summaryBarElement.parentElement.removeChild(this._summaryBarElement);
-        this._updateSummaryBar();
-    },
-
     _createTimelineGrid: function()
     {
         this._timelineGrid = new WebInspector.TimelineGrid();
@@ -368,14 +333,17 @@ WebInspector.NetworkPanel.prototype = {
 
     _createSummaryBar: function()
     {
-        this._summaryBarElement = document.createElement("div");
-        this._summaryBarElement.className = "network-summary-bar";
-        this.containerElement.appendChild(this._summaryBarElement);
+        var tbody = this._dataGrid.dataTableBody;
+        var tfoot = document.createElement("tfoot");
+        var tr = tfoot.createChild("tr", "revealed network-summary-bar");
+        var td = tr.createChild("td");
+        td.setAttribute("colspan", 7);
+        tbody.parentNode.insertBefore(tfoot, tbody);
+        this._summaryBarElement = td;
     },
 
     _updateSummaryBar: function()
     {
-        this._positionSummaryBar(); // Grid is growing.
         var numRequests = this._resources.length;
 
         if (!numRequests) {
@@ -387,7 +355,6 @@ WebInspector.NetworkPanel.prototype = {
             img.src = "Images/warningIcon.png";
             this._summaryBarElement.removeChildren();
             this._summaryBarElement.appendChild(img);
-            this._summaryBarElement.appendChild(document.createTextNode(" "));
             this._summaryBarElement.appendChild(document.createTextNode(
                 WebInspector.UIString("No requests captured. Reload the page to see detailed information on the network activity.")));
             return;
@@ -438,7 +405,6 @@ WebInspector.NetworkPanel.prototype = {
             selectMultiple = true;
 
         this._filter(e.target, selectMultiple);
-        this._positionSummaryBar();
     },
 
     _filter: function(target, selectMultiple)
@@ -478,6 +444,7 @@ WebInspector.NetworkPanel.prototype = {
 
             target.addStyleClass("selected");
             this._showCategory(target.category);
+            this._updateOffscreenRows();
             return;
         }
 
@@ -655,7 +622,6 @@ WebInspector.NetworkPanel.prototype = {
             this.visibleView.show(this._viewsContainerElement);
 
         this._dataGrid.updateWidths();
-        this._positionSummaryBar();
     },
 
     hide: function()
@@ -727,6 +693,7 @@ WebInspector.NetworkPanel.prototype = {
         this._staleResources = [];
         this._sortItems();
         this._updateSummaryBar();
+        this._updateOffscreenRows();
         this._dataGrid.updateWidths();
 
         if (wasScrolledToLastRow)
@@ -756,7 +723,6 @@ WebInspector.NetworkPanel.prototype = {
         this._resourceGridNodes = {};
 
         this._dataGrid.removeChildren();
-        delete this._summaryBarRowNode;
         this._updateDividersIfNeeded(true);
         // End reset timeline.
 
@@ -765,7 +731,7 @@ WebInspector.NetworkPanel.prototype = {
 
         this._viewsContainerElement.removeChildren();
         this._viewsContainerElement.appendChild(this._closeButtonElement);
-        this._resetSummaryBar();
+        this._updateSummaryBar();
     },
 
     get resources()
@@ -904,7 +870,7 @@ WebInspector.NetworkPanel.prototype = {
             this._timelineGrid.element.removeStyleClass("small");
             this._viewsContainerElement.removeStyleClass("small");
         }
-        this._positionSummaryBar();
+        this._updateOffscreenRows();
     },
 
     _getPopoverAnchor: function(element)
@@ -1049,9 +1015,6 @@ WebInspector.NetworkPanel.prototype = {
         var unfilteredRowIndex = 0;
         for (var i = 0; i < recordsCount - 1; ++i) {
             var row = rows[i];
-            // Don't touch summaty - quit instead.
-            if (this._summaryBarRowNode && row === this._summaryBarRowNode.element)
-                break;
 
             var dataGridNode = this._dataGrid.dataGridNodeFromNode(row);
             if (dataGridNode.isFilteredOut()) {
@@ -1711,32 +1674,3 @@ WebInspector.NetworkDataGridNode.ResourcePropertyComparator = function(propertyN
 }
 
 WebInspector.NetworkDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
-
-WebInspector.NetworkTotalGridNode = function(element)
-{
-    this._summaryBarElement = element;
-    WebInspector.DataGridNode.call(this, {summaryRow: true});
-}
-
-WebInspector.NetworkTotalGridNode.prototype = {
-    isFilteredOut: function()
-    {
-        return false;
-    },
-
-    get selectable()
-    {
-        return false;
-    },
-
-    createCells: function()
-    {
-        var td = document.createElement("td");
-        td.setAttribute("colspan", 7);
-        td.className = "network-summary";
-        td.appendChild(this._summaryBarElement);
-        this._element.appendChild(td);
-    }
-}
-
-WebInspector.NetworkTotalGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
index c750323..2711347 100644 (file)
@@ -22,7 +22,7 @@
     -webkit-background-size: 1px 42px;
 }
 
-.network-sidebar .data-grid td:not(.network-summary) {
+.network-sidebar .data-grid td {
     line-height: 17px;
     height: 37px;
     border-right: 1px solid rgb(210, 210, 210);
 
 /* Summary */
 
+.network-sidebar tr.filler td {
+    padding-bottom: 20px !important;
+}
+
 .network-summary-bar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-right: -14px;
     background-color: rgb(101, 111, 130);
+}
+
+.network-sidebar .data-grid .network-summary-bar td {
     color: white;
     height: 20px;
+    border: none;
     font-size: 11px;
     font-weight: bold;
-    padding-top: 3px;
-    padding-left: 10px;
-    z-index: 2000;
+    padding: 0 0 0 8px;
     white-space: pre;
     overflow : hidden;
     text-overflow : ellipsis;
 }
 
-.network-summary-bar-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding-top: 3px;
-}
-
-.data-grid td .network-summary-bar {
-    white-space: pre;
-}
-
-.network-sidebar .data-grid td.network-summary {
-    padding: 0;
+.network-summary-bar img {
+    vertical-align: middle;
+    padding-right: 8px;
 }
 
 /* Viewer */