1695624 - Re-imagine some breakpoint UI/UX

Status: NEW

(DevTools :: Debugger, enhancement, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me) PTO July 8 - 26]

Originally reported here: https://github.com/firefox-devtools/debugger/issues/8042

There are some fundamental issues with a breakpoint in the breakpoints panel:

1. we currently only show one text value (the line snippet, condition, log value). It would be nice if we showed all three or had the option to expand.
2. we currently show the different breakpoint states in the left border (paused at "green", conditional "yellow", log "purple"). This can be a bit vague and if we address 1 i think the border could be unnecessary.

---

From @fvsch
Personally I'm unhappy with the interactions for this whole row.

We have three actions:

1. disable breakpoint (checkbox, always visible)
2. remove breakpoint (cross icon, visible on row hover only)
3. navigate to source (invisible, no specific signifier or visual feedback)

Having one interaction perceptible on hover only and a second one not perceptible at all until you click is not a great situation, to begin with. On top of that, those two interactions are not available using keyboard navigation.

We also have a full-row hover style which is very ambiguous, given how we offer 3 different click interactions in that row.

Some options:

• Remove the hover effect.
• The checkbox could have no visible label (click the checkbox to toggle); we will need an accessible label then (title + aria-label?).
• I would keep the line:column info always visible, and link that. Linking a location is consistent with what we have in Inspector and Console. A text-decoration: underline on hover + a tooltip would help make that interaction clear (see locations in Inspector > Rules, and log locations in Console).
• The code snippet could have zero interactions. Or it could have the same function as the line:column, if we show similar interactive feedback (or if we join both together). It's probably worth exploring a few options in mockups.