Changeset 248916 in webkit


Ignore:
Timestamp:
Aug 20, 2019 2:11:11 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Sources: move the resource type scope bar to be next to the filter
​https://bugs.webkit.org/show_bug.cgi?id=200891

Reviewed by Joseph Pecoraro.

It's odd to have UI for controlling the active filters in two different places. Move the
resource type WI.ScopeBar to the filter bar area, and "promote" the resource grouping mode
items from a context menu to an always visible WI.ScopeBar in the space left by the
resource type WI.ScopeBar (switching between grouping modes quickly is a useful workflow).

  • UserInterface/Views/SourcesNavigationSidebarPanel.js:

(WI.SourcesNavigationSidebarPanel):
(WI.SourcesNavigationSidebarPanel.prototype.hasCustomFilters):
(WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeScopeBarSelectionChanged): Added.
(WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeChanged):
(WI.SourcesNavigationSidebarPanel.prototype._populateResourceGroupingModeContextMenu.addOption): Deleted.
(WI.SourcesNavigationSidebarPanel.prototype._populateResourceGroupingModeContextMenu): Deleted.

  • UserInterface/Views/SourcesNavigationSidebarPanel.css:

(.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:not(:hover)): Added.
(.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:hover): Added.

  • UserInterface/Views/FilterBar.js:

(WI.FilterBar.prototype.addFilterNavigationItem): Added.
(WI.FilterBar.prototype.addFilterBarButton):

  • UserInterface/Views/FilterBar.css:

(.filter-bar > .navigation-bar > .item):
(.filter-bar > .navigation-bar > .item.button): Added.
(.filter-bar > .navigation-bar > .item.scope-bar): Added.
(.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Added.
Provide a way to add arbitrary WI.NavigationItem to the contained WI.NavigationBar.
Slightly adjust the spacing of the items (depending on their type) in the WI.NavigationBar
so they are all centered.

  • UserInterface/Views/ScopeBar.css:

(.scope-bar):
(.scope-bar > li):
(.scope-bar > li::after):
(.scope-bar > li:not(.selected):hover): Added.
(body[dir=ltr] .scope-bar > li.multiple > select):
(body[dir=rtl] .scope-bar > li.multiple > select):
(.scope-bar > li:not(.selected):hover::after): Added.
Introduce CSS variables for margin, padding, and opacity that callers can override to
customize the appearance of the WI.ScopeBar.

  • Localizations/en.lproj/localizedStrings.js:
Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r248912 r248916  
     12019-08-20  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Sources: move the resource type scope bar to be next to the filter
     4        https://bugs.webkit.org/show_bug.cgi?id=200891
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        It's odd to have UI for controlling the active filters in two different places. Move the
     9        resource type `WI.ScopeBar` to the filter bar area, and "promote" the resource grouping mode
     10        items from a context menu to an always visible `WI.ScopeBar` in the space left by the
     11        resource type `WI.ScopeBar` (switching between grouping modes quickly is a useful workflow).
     12
     13        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
     14        (WI.SourcesNavigationSidebarPanel):
     15        (WI.SourcesNavigationSidebarPanel.prototype.hasCustomFilters):
     16        (WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeScopeBarSelectionChanged): Added.
     17        (WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeChanged):
     18        (WI.SourcesNavigationSidebarPanel.prototype._populateResourceGroupingModeContextMenu.addOption): Deleted.
     19        (WI.SourcesNavigationSidebarPanel.prototype._populateResourceGroupingModeContextMenu): Deleted.
     20        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
     21        (.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:not(:hover)): Added.
     22        (.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:hover): Added.
     23
     24        * UserInterface/Views/FilterBar.js:
     25        (WI.FilterBar.prototype.addFilterNavigationItem): Added.
     26        (WI.FilterBar.prototype.addFilterBarButton):
     27        * UserInterface/Views/FilterBar.css:
     28        (.filter-bar > .navigation-bar > .item):
     29        (.filter-bar > .navigation-bar > .item.button): Added.
     30        (.filter-bar > .navigation-bar > .item.scope-bar): Added.
     31        (.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Added.
     32        Provide a way to add arbitrary `WI.NavigationItem` to the contained `WI.NavigationBar`.
     33        Slightly adjust the spacing of the items (depending on their type) in the `WI.NavigationBar`
     34        so they are all centered.
     35
     36        * UserInterface/Views/ScopeBar.css:
     37        (.scope-bar):
     38        (.scope-bar > li):
     39        (.scope-bar > li::after):
     40        (.scope-bar > li:not(.selected):hover): Added.
     41        (body[dir=ltr] .scope-bar > li.multiple > select):
     42        (body[dir=rtl] .scope-bar > li.multiple > select):
     43        (.scope-bar > li:not(.selected):hover::after): Added.
     44        Introduce CSS variables for `margin`, `padding`, and `opacity` that callers can override to
     45        customize the appearance of the `WI.ScopeBar`.
     46
     47        * Localizations/en.lproj/localizedStrings.js:
     48
    1492019-08-20  Joseph Pecoraro  <pecoraro@apple.com>
    250

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r248894 r248916  
    185185localizedStrings["Bubbling"] = "Bubbling";
    186186localizedStrings["Busy"] = "Busy";
     187localizedStrings["By Path"] = "By Path";
     188localizedStrings["By Type"] = "By Type";
    187189localizedStrings["Byte Range %s\u2013%s"] = "Byte Range %s\u2013%s";
    188190localizedStrings["Bytes Received"] = "Bytes Received";
    … …  
    552554localizedStrings["Group Media Requests"] = "Group Media Requests";
    553555localizedStrings["Group by Event"] = "Group by Event";
    554 localizedStrings["Group by Path"] = "Group by Path";
    555556localizedStrings["Group by Target"] = "Group by Target";
    556 localizedStrings["Group by Type"] = "Group by Type";
    557557localizedStrings["Grouping Method"] = "Grouping Method";
    558 localizedStrings["Grouping Mode"] = "Grouping Mode";
    559558localizedStrings["HAR Export (%s)"] = "HAR Export (%s)";
    560559localizedStrings["HAR Import"] = "HAR Import";

  • trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css

    r248753 r248916  
    4040
    4141.filter-bar > .navigation-bar > .item {
    42     padding: 0 0 3px;
     42    padding: 0 0 2px;
     43}
     44
     45.filter-bar > .navigation-bar > .item.button {
     46    padding-bottom: 3px;
     47}
     48
     49.filter-bar > .navigation-bar > .item.scope-bar {
     50    --scope-bar-padding-override: 4px;
     51    --scope-bar-margin-override: 0;
    4352}
    4453
    … …  
    6271
    6372    height: 22px;
     73}
     74
     75.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
     76    -webkit-margin-end: 4px;
    6477}
    6578

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

    r248753 r248916  
    141141    }
    142142
     143    addFilterNavigationItem(navigationItem)
     144    {
     145        console.assert(navigationItem instanceof WI.NavigationItem);
     146        this._filtersNavigationBar.addNavigationItem(navigationItem);
     147    }
     148
    143149    addFilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight)
    144150    {
    … …  
    146152        filterBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleFilterBarButtonClicked, this);
    147153        filterBarButton.addEventListener(WI.FilterBarButton.Event.ActivatedStateToggled, this._handleFilterButtonToggled, this);
    148         this._filtersNavigationBar.addNavigationItem(filterBarButton);
     154        this.addFilterNavigationItem(filterBarButton);
    149155        if (filterBarButton.activated) {
    150156            this._filterFunctionsMap.set(filterBarButton.identifier, filterBarButton.filterFunction);

  • trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css

    r242604 r248916  
    2828    overflow: hidden;
    2929
     30    --scope-bar-margin-default: 2px;
     31    --scope-bar-padding-default: 9px;
    3032    --scope-bar-text-color-default: var(--text-color);
    3133    --scope-bar-background-color-default: unset;
     34    --scope-bar-background-opacity-default: var(--glyph-opacity);
    3235    --scope-bar-border-color-default: unset;
    3336}
    … …  
    3740    z-index: 0;
    3841    display: inline-block;
    39     margin: 0 2px;
    40     padding: 2px 9px 4px;
     42    margin: 0 var(--scope-bar-margin);
     43    padding: 2px var(--scope-bar-padding) 4px;
    4144    font-size: 11px;
    4245    line-height: 11px;
    … …  
    4447    text-align: center;
    4548
     49    --scope-bar-margin: var(--scope-bar-margin-override, var(--scope-bar-margin-default));
     50    --scope-bar-padding: var(--scope-bar-padding-override, var(--scope-bar-padding-default));
    4651    --scope-bar-text-color: var(--scope-bar-text-color-override, var(--scope-bar-text-color-default));
    4752    --scope-bar-background-color: var(--scope-bar-background-color-override, var(--scope-bar-background-color-default));
     53    --scope-bar-background-opacity: var(--scope-bar-background-opacity-override, var(--scope-bar-background-opacity-default));
    4854    --scope-bar-border-color: var(--scope-bar-border-color-override, var(--scope-bar-border-color-default));
    4955}
    … …  
    6066    border: 1px solid var(--scope-bar-border-color);
    6167    border-radius: 3px;
    62     opacity: var(--glyph-opacity);
     68    opacity: var(--scope-bar-background-opacity);
    6369}
    6470
    … …  
    6975}
    7076
    71 .scope-bar > li:not(.selected):hover::after {
    72     opacity: 0.5;
     77.scope-bar > li:not(.selected):hover {
     78    --scope-bar-background-opacity-default: 0.5;
    7379}
    7480
    … …  
    9298
    9399body[dir=ltr] .scope-bar > li.multiple > select {
    94     left: 1px;
     100    left: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) + 1px);
    95101}
    96102
    97103body[dir=rtl] .scope-bar > li.multiple > select {
    98     right: 1px;
     104    right: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) + 1px);
    99105}
    100106

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css

    r248737 r248916  
    105105}
    106106
     107.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:not(:hover) {
     108    --scope-bar-text-color-override: var(--text-color);
     109    --scope-bar-background-color-override: transparent;
     110    --scope-bar-border-color-override: transparent;
     111}
     112
     113.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:hover {
     114    --scope-bar-background-opacity-override: 0.5;
     115}
     116
    107117@media (min-height: 650px) {
    108118    .sidebar > .panel.navigation.sources > .content {

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

    r248912 r248916  
    222222        this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsContainer.nextSibling);
    223223
    224         this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
    225 
    226         const resourceTypeScopeItemPrefix = "sources-resource-type-";
    227         let resourceTypeScopeBarItems = [];
    228         resourceTypeScopeBarItems.push(new WI.ScopeBarItem(resourceTypeScopeItemPrefix + "all", WI.UIString("All Resources"), {exclusive: true}));
    229         for (let value of Object.values(WI.Resource.Type)) {
    230             let scopeBarItem = new WI.ScopeBarItem(resourceTypeScopeItemPrefix + value, WI.Resource.displayNameForType(value, true));
    231             scopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol] = value;
    232             resourceTypeScopeBarItems.push(scopeBarItem);
    233         }
    234 
    235         const shouldGroupNonExclusiveItems = true;
    236         this._resourceTypeScopeBar = new WI.ScopeBar("sources-resource-type-scope-bar", resourceTypeScopeBarItems, resourceTypeScopeBarItems[0], shouldGroupNonExclusiveItems);
    237         this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);
    238         this._resourcesNavigationBar.addNavigationItem(this._resourceTypeScopeBar);
    239 
    240         this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
    241 
    242         let resourceGroupingModeNavigationItem = new WI.ButtonNavigationItem("grouping-mode", WI.UIString("Grouping Mode"), "Images/Gear.svg", 15, 15);
    243         resourceGroupingModeNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
    244         WI.addMouseDownContextMenuHandlers(resourceGroupingModeNavigationItem.element, this._populateResourceGroupingModeContextMenu.bind(this));
    245         this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
     224        this._resourceGroupingModeScopeBarItems = {};
     225        let createResourceGroupingModeScopeBarItem = (mode, label) => {
     226            this._resourceGroupingModeScopeBarItems[mode] = new WI.ScopeBarItem("sources-resource-grouping-mode-" + mode, label, {exclusive: true});
     227            this._resourceGroupingModeScopeBarItems[mode][SourcesNavigationSidebarPanel.ResourceGroupingModeSymbol] = mode;
     228        };
     229        createResourceGroupingModeScopeBarItem(WI.Resource.GroupingMode.Type, WI.UIString("By Type"));
     230        createResourceGroupingModeScopeBarItem(WI.Resource.GroupingMode.Path, WI.UIString("By Path"));
     231
     232        this._resourceGroupingModeScopeBar = new WI.ScopeBar("sources-resource-grouping-mode-scope-bar", Object.values(this._resourceGroupingModeScopeBarItems), this._resourceGroupingModeScopeBarItems[WI.settings.resourceGroupingMode.value]);
     233        this._resourceGroupingModeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceGroupingModeScopeBarSelectionChanged, this);
     234        this._resourcesNavigationBar.addNavigationItem(this._resourceGroupingModeScopeBar);
    246235
    247236        let resourcesContainer = document.createElement("div");
    … …  
    266255        const activatedByDefault = false;
    267256        this.filterBar.addFilterBarButton("sources-only-show-resources-with-issues", this._filterByResourcesWithIssues.bind(this), activatedByDefault, WI.UIString("Only show resources with issues"), WI.UIString("Show all resources"), "Images/Errors.svg", 15, 15);
     257
     258        const resourceTypeScopeItemPrefix = "sources-resource-type-";
     259        let resourceTypeScopeBarItems = [];
     260        resourceTypeScopeBarItems.push(new WI.ScopeBarItem(resourceTypeScopeItemPrefix + "all", WI.UIString("All")));
     261        for (let value of Object.values(WI.Resource.Type)) {
     262            let scopeBarItem = new WI.ScopeBarItem(resourceTypeScopeItemPrefix + value, WI.Resource.displayNameForType(value, true));
     263            scopeBarItem[SourcesNavigationSidebarPanel.ResourceTypeSymbol] = value;
     264            resourceTypeScopeBarItems.push(scopeBarItem);
     265        }
     266
     267        const shouldGroupNonExclusiveItems = true;
     268        this._resourceTypeScopeBar = new WI.ScopeBar("sources-resource-type-scope-bar", resourceTypeScopeBarItems, resourceTypeScopeBarItems[0], shouldGroupNonExclusiveItems);
     269        this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);
     270        this.filterBar.addFilterNavigationItem(this._resourceTypeScopeBar);
    268271
    269272        WI.settings.resourceGroupingMode.addEventListener(WI.Setting.Event.Changed, this._handleResourceGroupingModeChanged, this);
    … …  
    558561        console.assert(this._resourceTypeScopeBar.selectedItems.length === 1);
    559562        let selectedScopeBarItem = this._resourceTypeScopeBar.selectedItems[0];
    560         return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
     563        return selectedScopeBarItem && selectedScopeBarItem !== this._resourceTypeScopeBar.defaultItem;
    561564    }
    562565
    … …  
    570573        let selectedScopeBarItem = this._resourceTypeScopeBar.selectedItems[0];
    571574
    572         // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
    573         if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
     575        // Show everything if there is no selection or "All Resources" is selected (the default item).
     576        if (!selectedScopeBarItem || selectedScopeBarItem === this._resourceTypeScopeBar.defaultItem)
    574577            return true;
    575578
    … …  
    15151518    }
    15161519
     1520    _handleResourceGroupingModeScopeBarSelectionChanged(event)
     1521    {
     1522        console.assert(this._resourceGroupingModeScopeBar.selectedItems.length === 1);
     1523        let selectedScopeBarItem = this._resourceGroupingModeScopeBar.selectedItems[0];
     1524        WI.settings.resourceGroupingMode.value = selectedScopeBarItem[SourcesNavigationSidebarPanel.ResourceGroupingModeSymbol] || WI.Resource.GroupingMode.Type;
     1525    }
     1526
    15171527    _handleResourceTypeScopeBarSelectionChanged(event)
    15181528    {
    15191529        this.updateFilter();
    1520     }
    1521 
    1522     _populateResourceGroupingModeContextMenu(contextMenu)
    1523     {
    1524         function addOption(mode, label) {
    1525             contextMenu.appendCheckboxItem(label, () => {
    1526                 WI.settings.resourceGroupingMode.value = mode;
    1527             }, WI.settings.resourceGroupingMode.value === mode);
    1528         }
    1529         addOption(WI.Resource.GroupingMode.Path, WI.UIString("Group by Path"));
    1530         addOption(WI.Resource.GroupingMode.Type, WI.UIString("Group by Type"));
    15311530    }
    15321531
    … …  
    17601759        this._originTreeElementMap.clear();
    17611760
     1761        let resourceGroupingModeScopeBarItem = this._resourceGroupingModeScopeBarItems[WI.settings.resourceGroupingMode.value];
     1762        console.assert(resourceGroupingModeScopeBarItem);
     1763        if (resourceGroupingModeScopeBarItem)
     1764            resourceGroupingModeScopeBarItem.selected = true;
     1765
    17621766        this._resourcesTreeOutline.removeChildren();
    17631767
    … …  
    21492153
    21502154WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
     2155WI.SourcesNavigationSidebarPanel.ResourceGroupingModeSymbol = Symbol("resource-grouping-mode");
Note: See TracChangeset for help on using the changeset viewer.