Bug 29251 – Implement distinguishing of un/conditional breakpoints in the Breakpoints sidebar pane

• Status: NEW
• Component: Web Inspector

[Alexander Pavlov (apavlov)]

Currently there is no way to tell if a breakpoint in the sidebar has a condition associated with it.

The original conditional breakpoints UI issue is https://bugs.webkit.org/show_bug.cgi?id=28908

[Radar WebKit Bug Importer]

<rdar://problem/15801499>

[Brian Burg]

There is *sort of* a visual difference now when a breakpoint has any actions, but not for a conditional breakpoint. This would be an easy fix-Tim, any ideas for the icon?

[Blaze Burg]

Maybe we can add a ? on top of the wedge.

[Matt Baker]

We don't style breakpoints with actions differently from default breakpoints, unless they are set to auto-continue (which breakpoints having actions typically are).

What Other Do:
- Chrome: conditional breakpoints are orange/yellow
- Edge: overlays a "+" icon in the breakpoint
- FireFox: look identical to regular breakpoints

Fun Fact:
Edge breakpoints are styled after Visual Studio, which also styles auto-continue breakpoints as a diamond rather than a circle.

[Matt Baker]

Three methods of distinguishing breakpoints come to mind:

1. Shape
2. Color
3. Decorations

We only use method 2: unresolved breakpoints are gray, and disabled breakpoints are slightly transparent. There are accessibility concerns with method 2, but for non-critical UI hints color is a simple solution.

Method 3 is interesting, and doesn't suffer from the same issues as method 2. However, since our breakpoints overlap the line number some accommodations would need to be made for large files.