Web Inspector: Network Waterfall column should redraw when adding/removing new columns

https://bugs.webkit.org/show_bug.cgi?id=193696
<rdar://problem/47464149>

Patch by Joseph Pecoraro <pecoraro@apple.com> on 2019-01-23
Reviewed by Devin Rousso.

* UserInterface/Views/TableColumn.js:
(WI.TableColumn.prototype.get needsReloadOnResize):
* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView.prototype.initialLayout):
Mark the waterfall column as sensitive to any resizes.

* UserInterface/Views/Table.js:
(WI.Table.prototype.showColumn):
(WI.Table.prototype.hideColumn):
Update column widths and reload any columns that may be sensitive to resizes.

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

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 12e2457..e6a7cc0 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,22 @@
+2019-01-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Network Waterfall column should redraw when adding/removing new columns
+        https://bugs.webkit.org/show_bug.cgi?id=193696
+        <rdar://problem/47464149>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/TableColumn.js:
+        (WI.TableColumn.prototype.get needsReloadOnResize):
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView.prototype.initialLayout):
+        Mark the waterfall column as sensitive to any resizes.
+
+        * UserInterface/Views/Table.js:
+        (WI.Table.prototype.showColumn):
+        (WI.Table.prototype.hideColumn):
+        Update column widths and reload any columns that may be sensitive to resizes.
+
 2019-01-22  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: InspectorInstrumentation::willEvaluateScript should include column number

diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
index 3c71828..aa6f45e 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
@@ -1070,6 +1070,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         this._waterfallColumn = new WI.TableColumn("waterfall", WI.UIString("Waterfall"), {
             minWidth: 230,
             headerView: this._waterfallTimelineRuler,
+            needsReloadOnResize: true,
         });
 
         this._nameColumn.addEventListener(WI.TableColumn.Event.WidthDidChange, this._tableNameColumnDidChangeWidth, this);

diff --git a/Source/WebInspectorUI/UserInterface/Views/Table.js b/Source/WebInspectorUI/UserInterface/Views/Table.js
index 3520247..0f7c99b 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/Table.js
+++ b/Source/WebInspectorUI/UserInterface/Views/Table.js
@@ -483,12 +483,21 @@ WI.Table = class Table extends WI.View
         }
 
         // Re-layout all columns to make space.
+        this._widthGeneration++;
         this._columnWidths = null;
         this._resizeColumnsAndFiller();
 
         // Now populate only the new cells for this column.
         for (let cell of cellsToPopulate)
             this._delegate.tablePopulateCell(this, cell, column, cell.parentElement.__index);
+
+        // Now populate columns that may be sensitive to resizes.
+        for (let visibleColumn of this._visibleColumns) {
+            if (visibleColumn !== column) {
+                if (visibleColumn.needsReloadOnResize)
+                    this.reloadVisibleColumnCells(visibleColumn);
+            }
+        }
     }
 
     hideColumn(column)
@@ -533,14 +542,21 @@ WI.Table = class Table extends WI.View
         if (!this._columnWidths)
             return;
 
-        this._columnWidths.splice(columnIndex, 1);
-
         for (let row of this._listElement.children) {
             if (row !== this._fillerRow)
                 row.removeChild(row.children[columnIndex]);
         }
 
-        this.needsLayout();
+        // Re-layout all columns to make space.
+        this._widthGeneration++;
+        this._columnWidths = null;
+        this._resizeColumnsAndFiller();
+
+        // Now populate columns that may be sensitive to resizes.
+        for (let visibleColumn of this._visibleColumns) {
+            if (visibleColumn.needsReloadOnResize)
+                this.reloadVisibleColumnCells(visibleColumn);
+        }
     }
 
     restoreScrollPosition()

diff --git a/Source/WebInspectorUI/UserInterface/Views/TableColumn.js b/Source/WebInspectorUI/UserInterface/Views/TableColumn.js
index 408c2f6..385a3cb 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/TableColumn.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TableColumn.js
@@ -25,7 +25,7 @@
 
 WI.TableColumn = class TableColumn extends WI.Object
 {
-    constructor(identifier, name, {initialWidth, minWidth, maxWidth, hidden, sortable, hideable, align, resizeType, headerView} = {})
+    constructor(identifier, name, {initialWidth, minWidth, maxWidth, hidden, sortable, hideable, align, resizeType, headerView, needsReloadOnResize} = {})
     {
         super();
 
@@ -49,6 +49,7 @@ WI.TableColumn = class TableColumn extends WI.Object
         this._align = align || null;
         this._resizeType = resizeType || TableColumn.ResizeType.Auto;
         this._headerView = headerView || null;
+        this._needsReloadOnResize = needsReloadOnResize || false;
 
         console.assert(!this._minWidth || !this._maxWidth || this._minWidth <= this._maxWidth, "Invalid min/max", this._minWidth, this._maxWidth);
         console.assert(isNaN(this._width) || !this._minWidth || (this._width >= this._minWidth), "Initial width is less than min", this._width, this._minWidth);
@@ -67,6 +68,7 @@ WI.TableColumn = class TableColumn extends WI.Object
     get hideable() { return this._hideable; }
     get align() { return this._align; }
     get headerView() { return this._headerView; }
+    get needsReloadOnResize() { return this._needsReloadOnResize; }
 
     get locked() { return this._resizeType === TableColumn.ResizeType.Locked; }
     get flexible() { return this._resizeType === TableColumn.ResizeType.Auto; }