XHR breakpoints with methods (UX)

[DPX-designer]

Following on from the discussion in the Debugger repo thread (https://github.com/devtools-html/debugger.html/pull/7721), suggestions on the styling and experience of the enhanced XHR breakpoints pane are required.

Taking cues from the existing work from @jaril (including the new sidebar rhythm work) and original mockups from @violasong, I'll start with four approaches:

Invision link

The dropdown styling is taken from the Fonts panel.

Which seems like a more logical placement of items to you? Is emphasis put on the correct element (i.e. Method > Pattern or Pattern > Method)? Discuss!

[fvsch]

@jasonLaster @darkwing Any input on these design proposals?

Personally, I like option 3 best.

• It mimicks HTTP syntax, with the verb first. That's closer to what we do in Console and Network, too.
• If the pattern is long, it could push the request method to the right and out of view (unless we wrap it?) Having the request method first makes sure we don't hide it.

[darkwing]

I like #3 best as well!

[digitarald]

Just leaving some thoughts here, as it came up in dicussions: Given that methods is optional, I am not sure if it should be 1st. The default state is also interesting here, for no-method-filtered.

[fvsch]

Given that methods is optional, I am not sure if it should be 1st.

That's a good point. Matt's mockups all show a method in the already configured breakpoints, but if users will tend to just configure the URL, we would have a list like this:

[x] example.com
[x] foo.com/some/path
[x] endpoint

Adding a method to just one:

[x] example.com
[x] foo.com/some/path (POST)
[x] endpoint

vs

[x] example.com
[x] (POST) foo.com/some/path
[x] endpoint

Hmm, both could work.

[fvsch]

Side notes on the current implementation:

• the method dropdown only show up when focusing the input; I think with the more subtle design shown above it could be shown at all times;
• it's hard to use with the keyboard, especially with the down/up keys, because every time you change its value it re-renders and loses focus;
• the default value is shown as "ANY", it should probably be "Any" (since it's not a HTTP method).

[digitarald]

the method dropdown only show up when focusing the input; I think with the more subtle design shown above it could be shown at all times;

Another take on this would be that the UI follows a click-to-edit/blur-to-finish pattern (similar to Watchpoints or Conditional BPs); so having both a read and edit format seems to work well for this.

it's hard to use with the keyboard, especially with the down/up keys, because every time you change its value it re-renders and loses focus;

+1

the default value is shown as "ANY", it should probably be "Any" (since it's not a HTTP method).

Agreed, I found ANY confusing in that context as well and Any makes it a bit better. As it is the default it is also the defacto label, so my concern is that it doesn't add any context to what this dropdown is for.