1542127 - Secondary panes: mark breakpoints as disabled when "Deactivate breakpoints" is on

Status: RESOLVED DUPLICATE of bug 1537884

(DevTools :: Debugger, defect)

Description

[Florens Verschelde :fvsch]

When clicking the "Deactivate breakpoints" at the top right of the command bar, Debugger will stop breaking on breakpoints, but this state is not proeminently reflected in the UI.

We probably need to fix that in several places, but one place that will help quickly is marking the breakpoints as disabled in the Breakpoints pane.

We currently have this CSS:

.breakpoints-list .breakpoint.disabled .breakpoint-label {
  color: var(--theme-comment);
  transition: color 0.15s linear;
}

But we regressed this style when we started using syntax coloring in the breakpoint label. The medium gray color (--theme-comment) does not make much of a difference because it's overriden in descendant elements.

We have two options for fixing this.

1. CSS only. We could apply a grayscale filter:

.breakpoints-list .breakpoint.disabled .breakpoint-label {
  color: var(--theme-comment);
  filter: grayscale(100%);
}

(The transition can probably be removed if it doesn't make a visual difference; small perf gain.)

2. JS only. We could apply the syntax coloring only when breakpoints are not Deactivated, and keep the current CSS.

I think #2 is my favorite, because grayscale syntax coloring can look a bit weird or buggy, it's not clear what information it conveys exactly (in my opinion; that's debatable).

I think we should also use the same --theme-comment color for the labels of the "Pause on exceptions" and "Pause on caught exceptions" checkboxes, to be consistent.

That should be it for the Breakpoints pane. (We can do separate bugs for XHR Breakpoints and Event breakpoints.)

Comment 1

[Dhyey Thakore [:dhyey35]]

Can I take this ?

Comment 2

[Florens Verschelde :fvsch]

Of course. Thanks for working on this. :)

Comment 3

[Florens Verschelde :fvsch]

Woops sorry, looks like this is a duplicate of an already assigned bug.

Comment 4

[Dhyey Thakore [:dhyey35]]

Attachment: Bug 1542127 - Secondary panes: mark breakpoints as disabled when Deactivate breakpoints is on