UI for XHR Breakpoints

[AnshulMalik]

Fixes Issue: #5255

Summary of Changes

• First version of xhr, we can say "pause if the url contains a given string"

• We can leave the box empty if we want to pause for any request.

Screenshots/Videos (OPTIONAL)

[flodolo]

I think URL should be uppercase

[flodolo]

XHR was uppercase in the previous string

[nchevobbe]

That's great @AnshulMalik !
I find that being able to break on URL matching is also super interesting (we could then even have some context menu entries/buttons in the netmonitor to allow adding XHR breakpoints from there).

The only thing that puzzles me a bit is the "leave input empty to break on all XHR".
It could be better, because here, we have a list of matching input, so you could have 1 empty input (match all) and another one for a specific URL, which is a bit weird.
My gut feeling is that we should make break on all XHR the default, and then allow for some matching.

▼ XHR breakpoints
⚪️ Break on all XHR
🔘 Break when URL matches    ➕
       facebook.com
       foo/bar

or something better, but that a clear distinction between breaking on everything and allowing for URL matching.

[AnshulMalik]

@nchevobbe Yeah, that sounds more practical.

Since the designs were not yet ready, so I went ahead with what chrome does.

[darkwing]

When @AnshulMalik casually submits a PR for an incredibly awesome feature:

I'll take an in-depth look at this tomorrow. Obviously this is awesome but wasn't well spec'd out by us so there will likely be lots of feedback. In the mean time...this is amazing! Thank you! 💯

[flodolo]

String-wise it looks good, thanks for updating it.

Letting code review to the actual devs ;-)

[flodolo]

String-wise it looks good, thanks for updating it.

Letting code review to the actual devs ;-)

[darkwing]

A few behavioral things I'm seeing:

1. The "+" button in the XHR breakpoints header doesn't do anything.
2. Toggling the header open focuses on the input; not sure we need that.
3. The "x" (close) button for items needs to be shifted a few pixels to the right/end

These are all minor things; I think if you get time to clean this up a bit (i.e. removing commented code), we can try to land something. Great work so far @AnshulMalik !

[AnshulMalik]

Hey @darkwing, thanks for the comments, here my my thoughts:

1. It's the same as watch expressions, add one xor bp, and then click in the editor, so now if you want to add another xhr bp, you need to click "+" to get the input box.

2. This is strange, since toggling the header does toggle hide/show the panel.

3. Working on it :)

[darkwing]

Adding in an older mockup from @violasong:

Obviously we dont' need to do all of this at once. It might be nice in this first PR if we can add the GET/POST dropdown for adding the breakpoint though.

[digitarald]

Just to clarify: The mockup should not inform the UI or requirements for this first implementation. Goal is a simple UI, similar to existing XHR breakpoint implementations (aka Chrome). We will iterate on the UI in the future, @mcroud is working taking over the design work.

Just to re-iterate the basic requirements:

1. allow pausing on any resource
2. allow pausing on responses matching a URL pattern

Do they make sense?

[darkwing]

Per @digitarald's comment, the only thing missing is a "pause on all XHRs"; maybe in the short term we can simply add a checkbox like we do for "Pause on Exceptions". Up for it @AnshulMalik ? This is sooooooo close!

[digitarald]

the only thing missing is a "pause on all XHRs"; maybe in the short term we can simply add a checkbox like we do for "Pause on Exceptions".

Chrome offers a checkbox for this, so maybe. The alternative is would be an XHR breakpoint without a URL filter (which Chrome has before I think).

How are empty XHR breakpoints treated in the current solution?

[AnshulMalik]

Okay, we can have a checkbox for pause on all xhr,
@digitarald currently, if you hit enter on empty string, it will work as pause on all xhr breakpoints

[digitarald]

@digitarald currently, if you hit enter on empty string, it will work as pause on all xhr breakpoints

Looks like the latest behavior on Chrome removes empty XHR breakpoints.

[darkwing]

We need a note here.

[flodolo]

The string ID referenced in the comment should be xhrBreakpoints.header, also XHR (uppercase) in the note itself for consistency.

[darkwing]

I've rebased and fixed a header issue. @AnshulMalik Would you be able to make a quick mochitest or two for this functionality? i.e. add an xhr breakpoint and ensure it pauses when hit?

[AnshulMalik]

Created a PR here, to allow the functionality to work firefox-devtools/devtools-core#1098

[darkwing]

Current to do:

• Tests
• Localization changnes
• Update package.json's version for devtools-core

[darkwing]

Is this supposed to be here? Shouldn't the pause happen from setting the breakpoint?

[AnshulMalik]

Yep, it should not be here

[darkwing]

OK, cool, manually tested and this is totally in the right direction. Yay!

A few things:

1. When I add a create an XHR breakpoint (for example "fetch"), then click "Pause on any", then click "Pause on any" again, the "fetch" XHR breakpoint disappears. Ideally this wouldn't have any effect on XHR breakpoints added by the user; it would just disable them.

2. We need to change the label to "Pause on any URL"

3. How difficult would it be to persist XHR breakpoint strings? i.e. store them in prefs so that when we refresh the page, the breakpoint is still there?

4. How difficult would it be to add a green highlight to the currently-broken-on XHR breakpoint? This can definitely come late but worth asking.

[AnshulMalik]

1-3 are present in this commit.

4. This one is interesting, it won't be hard, but would be a nice to have.

[mcroud]

Here are the final mockups for light and dark mode complete with the agreed "pause" terminology.

Light mode:
https://mozilla.invisionapp.com/share/VTOMJAC7EH5#/326071897_XHR-Breakpoints_2

Dark mode:
https://mozilla.invisionapp.com/share/AWOP2TNUJ2V#/326848311_XHR-Breakpoints_2_Dark