Changeset 202009 in webkit


Ignore:
Timestamp:
Jun 13, 2016, 3:41:54 PM (9 years ago)
Author:
Matt Baker
Message:

Web Inspector: Add ability to show/hide DataGird columns
​https://bugs.webkit.org/show_bug.cgi?id=158676
<rdar://problem/26761573>

Reviewed by Timothy Hatcher.

Make it possible to show/hide grid columns using the grid header
context menu. This patch enables the new behavior for most of the
timeline grids.

  • UserInterface/Views/DataGrid.js:

(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype.get identifier):
(WebInspector.DataGrid.prototype.set identifier):
An identifier for the grid instance, for managing per-grid settings.
Setting the id causes settings to be created, and their values to be
applied to the grid.

(WebInspector.DataGrid.prototype.get columnChooserEnabled):
(WebInspector.DataGrid.prototype.set columnChooserEnabled):
Enable showing/hiding columns via the grid header.

(WebInspector.DataGrid.prototype.insertColumn):
(WebInspector.DataGrid.prototype.showColumn):
Set column visibility and hidden column setting, then perform layout.

(WebInspector.DataGrid.prototype._collapseColumnGroupWithCell):
(WebInspector.DataGrid.prototype._contextMenuInHeader):
Create column chooser menu items if necessary.

(WebInspector.DataGrid.prototype._showColumn): Deleted.
(WebInspector.DataGrid.prototype._hideColumn): Deleted.
Replaced by showColumn.

  • UserInterface/Views/LayoutTimelineView.js:

(WebInspector.LayoutTimelineView):
Always show "type" and "name" columns.

  • UserInterface/Views/NetworkTimelineView.js:

(WebInspector.NetworkTimelineView):

  • UserInterface/Views/RenderingFrameTimelineView.js:

(WebInspector.RenderingFrameTimelineView):

  • UserInterface/Views/ScriptDetailsTimelineView.js:

(WebInspector.ScriptDetailsTimelineView):
Always show "name" column.

  • UserInterface/Views/TimelineDataGrid.js:

(WebInspector.TimelineDataGrid):
Enable column chooser.

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r201965 r202009  
     12016-06-13  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Add ability to show/hide DataGird columns
     4        https://bugs.webkit.org/show_bug.cgi?id=158676
     5        <rdar://problem/26761573>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        Make it possible to show/hide grid columns using the grid header
     10        context menu. This patch enables the new behavior for most of the
     11        timeline grids.
     12
     13        * UserInterface/Views/DataGrid.js:
     14        (WebInspector.DataGrid):
     15        (WebInspector.DataGrid.prototype.get identifier):
     16        (WebInspector.DataGrid.prototype.set identifier):
     17        An identifier for the grid instance, for managing per-grid settings.
     18        Setting the id causes settings to be created, and their values to be
     19        applied to the grid.
     20
     21        (WebInspector.DataGrid.prototype.get columnChooserEnabled):
     22        (WebInspector.DataGrid.prototype.set columnChooserEnabled):
     23        Enable showing/hiding columns via the grid header.
     24
     25        (WebInspector.DataGrid.prototype.insertColumn):
     26        (WebInspector.DataGrid.prototype.showColumn):
     27        Set column visibility and hidden column setting, then perform layout.
     28
     29        (WebInspector.DataGrid.prototype._collapseColumnGroupWithCell):
     30        (WebInspector.DataGrid.prototype._contextMenuInHeader):
     31        Create column chooser menu items if necessary.
     32
     33        (WebInspector.DataGrid.prototype._showColumn): Deleted.
     34        (WebInspector.DataGrid.prototype._hideColumn): Deleted.
     35        Replaced by `showColumn`.
     36
     37        * UserInterface/Views/LayoutTimelineView.js:
     38        (WebInspector.LayoutTimelineView):
     39        Always show "type" and "name" columns.
     40
     41        * UserInterface/Views/NetworkTimelineView.js:
     42        (WebInspector.NetworkTimelineView):
     43        * UserInterface/Views/RenderingFrameTimelineView.js:
     44        (WebInspector.RenderingFrameTimelineView):
     45        * UserInterface/Views/ScriptDetailsTimelineView.js:
     46        (WebInspector.ScriptDetailsTimelineView):
     47        Always show "name" column.
     48
     49        * UserInterface/Views/TimelineDataGrid.js:
     50        (WebInspector.TimelineDataGrid):
     51        Enable column chooser.
     52
    1532016-06-10  Joseph Pecoraro  <pecoraro@apple.com>
    254

  • trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js

    r201893 r202009  
    3333        this.orderedColumns = [];
    3434
     35        this._identifier = null;
    3536        this._sortColumnIdentifier = null;
    3637        this._sortColumnIdentifierSetting = null;
    3738        this._sortOrder = WebInspector.DataGrid.SortOrder.Indeterminate;
    3839        this._sortOrderSetting = null;
     40        this._hiddenColumnSetting = null;
    3941
    4042        this._rows = [];
    … …  
    207209    }
    208210
     211    get identifier() { return this._identifier; }
     212
     213    set identifier(x)
     214    {
     215        console.assert(x && typeof x === "string");
     216
     217        if (this._identifier === x)
     218            return;
     219
     220        this._identifier = x;
     221
     222        // FIXME: Add sortColumnIdentifierSetting and sortOrderSetting as part of <webkit.org/b/158675>.
     223        this._hiddenColumnSetting = new WebInspector.Setting(this._identifier + "-hidden-columns", []);
     224
     225        if (!this.columns)
     226            return;
     227
     228        for (let columnIdentifier of this._hiddenColumnSetting.value)
     229            this.showColumn(columnIdentifier, false);
     230    }
     231
     232    get columnChooserEnabled() { return this._columnChooserEnabled; }
     233    set columnChooserEnabled(x) { this._columnChooserEnabled = x; }
     234
    209235    get refreshCallback()
    210236    {
    … …  
    734760        listeners.install();
    735761
    736         if (column["hidden"])
    737             this._hideColumn(columnIdentifier);
     762        this.showColumn(columnIdentifier, !column.hidden);
    738763    }
    739764
    … …  
    874899    }
    875900
    876     _showColumn(columnIdentifier)
    877     {
    878         this.columns.get(columnIdentifier)["hidden"] = false;
    879     }
    880 
    881     _hideColumn(columnIdentifier)
    882     {
    883         var column = this.columns.get(columnIdentifier);
    884         column["hidden"] = true;
    885 
    886         var columnElement = column["element"];
    887         columnElement.style.width = 0;
     901    showColumn(columnIdentifier, visible)
     902    {
     903        let column = this.columns.get(columnIdentifier);
     904        console.assert(column, "Missing column info for identifier: " + columnIdentifier);
     905
     906        if (!column || visible === !column.hidden)
     907            return;
     908
     909        column.element.style.width = visible ? column.width : 0;
     910        column.hidden = !visible;
     911
     912        if (this._hiddenColumnSetting) {
     913            let hiddenColumns = this._hiddenColumnSetting.value.slice();
     914            if (column.hidden)
     915                hiddenColumns.push(columnIdentifier);
     916            else
     917                hiddenColumns.remove(columnIdentifier);
     918
     919            this._hiddenColumnSetting.value = hiddenColumns;
     920        }
    888921
    889922        this._columnWidthsInitialized = false;
     923        this.updateLayout();
    890924    }
    891925
    … …  
    14891523        this.willToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
    14901524
    1491         var showOrHide = columnsWillCollapse ? this._hideColumn : this._showColumn;
    14921525        for (var [identifier, column] of this.columns) {
    14931526            if (column["group"] === cell.collapsesGroup)
    1494                 showOrHide.call(this, identifier);
     1527                this.showColumn(identifier, !columnsWillCollapse);
    14951528        }
    14961529
    … …  
    15521585            contextMenu.appendItem(WebInspector.UIString("Copy Table"), this._copyTable.bind(this));
    15531586
    1554         let cell = event.target.enclosingNodeOrSelfWithNodeName("th");
    1555         if (cell && cell.columnIdentifier && cell.classList.contains(WebInspector.DataGrid.SortableColumnStyleClassName)) {
     1587        let headerCellElement = event.target.enclosingNodeOrSelfWithNodeName("th");
     1588        if (!headerCellElement)
     1589            return;
     1590
     1591        let columnIdentifier = headerCellElement.columnIdentifier;
     1592        let column = this.columns.get(columnIdentifier);
     1593        console.assert(column, "Missing column info for identifier: " + columnIdentifier);
     1594        if (!column)
     1595            return;
     1596
     1597        if (column.sortable) {
    15561598            contextMenu.appendSeparator();
    15571599
    1558             if (this.sortColumnIdentifier !== cell.columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Ascending) {
     1600            if (this.sortColumnIdentifier !== columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Ascending) {
    15591601                contextMenu.appendItem(WebInspector.UIString("Sort Ascending"), () => {
    1560                     this._selectSortColumnAndSetOrder(cell.columnIdentifier, WebInspector.DataGrid.SortOrder.Ascending);
     1602                    this._selectSortColumnAndSetOrder(columnIdentifier, WebInspector.DataGrid.SortOrder.Ascending);
    15611603                });
    15621604            }
    15631605
    1564             if (this.sortColumnIdentifier !== cell.columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Descending) {
     1606            if (this.sortColumnIdentifier !== columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Descending) {
    15651607                contextMenu.appendItem(WebInspector.UIString("Sort Descending"), () => {
    1566                     this._selectSortColumnAndSetOrder(cell.columnIdentifier, WebInspector.DataGrid.SortOrder.Descending);
     1608                    this._selectSortColumnAndSetOrder(columnIdentifier, WebInspector.DataGrid.SortOrder.Descending);
    15671609                });
    15681610            }
     1611        }
     1612
     1613        if (!this._columnChooserEnabled)
     1614            return;
     1615
     1616        let didAddSeparator = false;
     1617
     1618        for (let [identifier, columnInfo] of this.columns) {
     1619            if (columnInfo.locked)
     1620                continue;
     1621
     1622            if (!didAddSeparator) {
     1623                contextMenu.appendSeparator();
     1624                didAddSeparator = true;
     1625            }
     1626
     1627            contextMenu.appendCheckboxItem(columnInfo.title, () => { this.showColumn(identifier, columnInfo.hidden); }, !columnInfo.hidden);
    15691628        }
    15701629    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js

    r200067 r202009  
    4545        columns.type.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", typeToLabelMap);
    4646        columns.type.hidden = true;
     47        columns.type.locked = true;
    4748
    4849        columns.name.disclosure = true;
    4950        columns.name.icon = true;
     51        columns.name.locked = true;
    5052
    5153        this._scopeBar = columns.type.scopeBar;
    … …  
    7678        this.setupDataGrid(this._dataGrid);
    7779
     80        this._dataGrid.identifier = "layout-timeline-view";
     81
     82        // FIXME: Remove once <webkit.org/b/158675> is fixed.
    7883        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("layout-timeline-view-sort", "startTime");
    7984        this._dataGrid.sortOrderSetting = new WebInspector.Setting("layout-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js

    r200067 r202009  
    3737        columns.name.icon = true;
    3838        columns.name.width = "10%";
     39        columns.name.locked = true;
    3940
    4041        columns.domain.title = WebInspector.UIString("Domain");
    … …  
    8990
    9091        this._dataGrid = new WebInspector.TimelineDataGrid(columns);
     92        this._dataGrid.identifier = "network-timeline-view";
    9193        this._dataGrid.sortDelegate = this;
     94
     95        // FIXME: Remove once <webkit.org/b/158675> is fixed.
    9296        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("network-timeline-view-sort", "requestSent");
    9397        this._dataGrid.sortOrderSetting = new WebInspector.Setting("network-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);

  • trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js

    r200809 r202009  
    4747        columns.name.icon = true;
    4848        columns.name.disclosure = true;
     49        columns.name.locked = true;
    4950
    5051        columns.totalTime.title = WebInspector.UIString("Total Time");
    … …  
    7879
    7980        this._dataGrid = new WebInspector.TimelineDataGrid(columns);
     81        this._dataGrid.identifier = "rendering-frame-timeline-view";
     82
     83        // FIXME: Remove once <webkit.org/b/158675> is fixed.
    8084        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("rendering-frame-timeline-view-sort", "startTime");
    8185        this._dataGrid.sortOrderSetting = new WebInspector.Setting("rendering-frame-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);

  • trunk/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.js

    r200573 r202009  
    3838        columns.name.icon = true;
    3939        columns.name.disclosure = true;
     40        columns.name.locked = true;
    4041
    4142        columns.location.title = WebInspector.UIString("Location");
    … …  
    7374
    7475        this._dataGrid = new WebInspector.ScriptTimelineDataGrid(columns);
     76        this._dataGrid.identifier = "script-timeline-view";
    7577        this._dataGrid.sortDelegate = this;
     78
     79        // FIXME: Remove once <webkit.org/b/158675> is fixed.
    7680        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("script-timeline-view-sort", "startTime");
    7781        this._dataGrid.sortOrderSetting = new WebInspector.Setting("script-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js

    r201839 r202009  
    5959
    6060        window.addEventListener("resize", this);
     61
     62        this.columnChooserEnabled = true;
    6163    }
    6264
Note: See TracChangeset for help on using the changeset viewer.