1667074 - The interface used to create conditional breakpoints and logpoints is not user friendly

Status: UNCONFIRMED

(DevTools :: Debugger, enhancement, P3)

Description

[Kyle Knaggs]

Attachment: 20200922_conditionalPanelBug.mp4

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36

Steps to reproduce:

1. Visit http://todomvc.com/examples/jquery/#/all and open the Debugger in the Mozilla Developer Tools.
2. Open app.js in the Editor.
3. Right-click on the line numbers at the very left side of the Editor and select "Add condition" or "Add log" from the context menu that appears.

Actual results:

1. If you click on the ">>" to the left of the input, the ConditionalPanel disappears. This behavior is unexpected.
2. The placeholder text states "Breakpoint condition, e.g. items.length > 0" when a user has selected "Add condition". It also states "Log message, e.g. displayName" when a user has selected "Add log".
3. The conditional panel does not have a visual element that confirms to the user the relationship between the ConditionalPanel and the line where the breakpoint associated with the condition or the log will be created.

Expected results:

1. If you click on the "prompt" to the left of the input, the ConditionalPanel should not disappear. This issue is a result of a blur based event handler causing the conditional panel to dismount and rectifying this problem will make it easier to add affordances such as the one suggested by Bug 1655649 in the future.
2. The examples in the placeholder text should be as consistent as possible as this is the best way of highlighting the differences between conditional breakpoints and logpoints. In addition to this, the placeholder text also gives no indication that if you create a condition and a log on the same breakpoint you can conditionally log values to the Console. The placeholder text is a great medium for conveying this functionality to users.
3. The conditional panel should display a line number. This strategy is employed by the conditional panel in Chrome and is a small affordance that will be of most benefit first-time users of the feature who are trying to understand how conditional breakpoints and logpoints work.

Comment 1

[Kyle Knaggs]

Attachment: 20200922_conditionalBreakpointUI.png

The current interface used to create conditional breakpoints.

Comment 2

[Kyle Knaggs]

Attachment: 20200922_logpointUI.png

The current interface used to create logpoints.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

:kyleknaggs, if you think that's a regression, then could you try to find a regression range in using for example mozregression?

Comment 4

[Kyle Knaggs]

Attachment: Bug 1667074 - Improves the usability of the conditional panel r=nchevobbe

Before this patch the interface used to create conditional breakpoints and logpoints was not user friendly. This patch solves this issue by:

1. Replacing the 'blurbased event handler attached to the CodeMirror instance with aclick` based event handler that dismounts the panel whenever a user clicks outside of the conditional panel.
2. Replacing the existing placholder text in the panel with "Condition to associate with breakpoint, e.g. x > 0" and "Message to log to Console instead of pausing, e.g. 'x is', x". The new placeholder text uses consistent examples to highlight differences in functionality and makes users aware that once a log is added to a breakpoint, that breakpoint will no longer pause execution.
3. Adds a line number to the top of the conditional panel. The line number provides the user with visual confirmation of the relationship between the conditional panel and the line where the breakpoint being created or edited is located.
4. Adds a close button to the top of the conditioanl panel. The close button provides the user with an additional, more obvious mechanism for closing the conditional panel than either (a) Clicking anywhere outside the panel (b) Pressing the enter or escape key.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months.
:bomsy, could you have a look please?
For more information, please visit auto_nag documentation.