Bug 200891 - Web Inspector: Sources: move the resource type scope bar to be next to the filter
Summary: Web Inspector: Sources: move the resource type scope bar to be next to the fi...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
Depends on:
Blocks: 200940
  Show dependency treegraph
 
Reported: 2019-08-19 11:07 PDT by Devin Rousso
Modified: 2019-08-20 14:12 PDT (History)
5 users (show)

See Also:


Attachments
Patch (24.47 KB, patch)
2019-08-19 11:17 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff
[Image] After Patch is applied (135.74 KB, image/png)
2019-08-19 11:17 PDT, Devin Rousso
no flags Details
Patch (19.50 KB, patch)
2019-08-20 13:00 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2019-08-19 11:07:17 PDT
It's odd to have UI for controlling the active filters in two different places.  We should move the resource type scope bar to the filter bar area, and "promote" the group by items to take their place (switching between grouping modes quickly is a useful workflow).
Comment 1 Devin Rousso 2019-08-19 11:17:40 PDT
Created attachment 376698 [details]
Patch
Comment 2 Devin Rousso 2019-08-19 11:17:50 PDT
Created attachment 376699 [details]
[Image] After Patch is applied
Comment 3 Joseph Pecoraro 2019-08-19 21:31:00 PDT
Comment on attachment 376698 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=376698&action=review

Nice! r=me

• I think we should be able to eliminate the "Group By" label
• I think we will want to better handle filtering at the bottom if a long name filter like "Documents" is selected. Perhaps hiding the fields when clicking into the filter field.

> Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js:209
> +        this._resourceGroupingModeNavigationBar = new WI.NavigationBar;

It still seems like `resourcesNavigationBar` is apt. It only has 1 thing in it right now, but it is still the navigation bar over the resource section.

> Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js:222
> +        let resourceGroupingModeScopeBarItems = Object.values(this._resourceGroupingModeScopeBarItems);
> +        resourceGroupingModeScopeBarItems.unshift(new WI.ScopeBarItem("sources-resource-grouping-mode-label", WI.UIString("Group by:"), {disabled: true, exclusive: true}));

I tend to avoid unshift when possible (it can be slow). Here it doesn't seem necessary and you can avoid the Object.values allocation all-together without any significant readability loss.

    let items = [];
    items.push(new WI.ScopeBarItem("sources-resource-grouping-mode-label", WI.UIString("Group by:"), {disabled: true, exclusive: true}));
    for (let key in this._resourceGroupingModeScopeBarItems)
        items.push(this._resourceGroupingModeScopeBarItems[key]);

Up to you.

---

I'd really love to eliminate this `Group by` label. It already looks funky and it is weird to have so many `.disabled` styles that apply to just it when it could just be a label in the NavigationBar.

Is just `( Type ) ( Path )` really that bad?

  * Xcode has `( Hierarchical ) ( Flat )` in its Symbol navigator.
  * Xcode has `( Buildtime ) ( Runtime )` in its Issue navigator.
  * Xcode has `( By Group ) ( By Time )` in its Report navigator.
  * Finder / Mail have `Search: ( This Mac ) ( "Foo" )` in their find window
  * Other places (Safari) use segmented controls

I kind of like the idea of `( By Type ) ( By Path )`. But I think just `( Type ) ( Path )` are good enough!
Comment 4 Devin Rousso 2019-08-20 13:00:53 PDT
Created attachment 376795 [details]
Patch

I renamed "Group by:" into "By Type" and "By Path".
Comment 5 Devin Rousso 2019-08-20 13:04:40 PDT
(In reply to Joseph Pecoraro from comment #3)
> • I think we will want to better handle filtering at the bottom if a long name filter like "Documents" is selected. Perhaps hiding the fields when clicking into the filter field.
<https://webkit.org/b/200940> Web Inspector: Sources: increase the filter bar's width when it's focused if a resource type filter is active
Comment 6 WebKit Commit Bot 2019-08-20 14:11:17 PDT
Comment on attachment 376795 [details]
Patch

Clearing flags on attachment: 376795

Committed r248916: <https://trac.webkit.org/changeset/248916>
Comment 7 WebKit Commit Bot 2019-08-20 14:11:19 PDT
All reviewed patches have been landed.  Closing bug.
Comment 8 Radar WebKit Bug Importer 2019-08-20 14:12:23 PDT
<rdar://problem/54527837>