Skip to content
Permalink
Browse files
Web Inspector: DOMDebugger: event breakpoints should support case ins…
…ensitive and regex matching

https://bugs.webkit.org/show_bug.cgi?id=246090

Reviewed by Patrick Angle.

This allows developers to create breakpoints for entire groups of events (e.g. `mouse*`) instead of
having to create separate ones for each item in the group (e.g. `mousedown`, `mouseup`, etc.). This
also allows for easier sharing of any actions since there's only one breakpoint instead of multiple.

* Source/JavaScriptCore/inspector/protocol/DOMDebugger.json:
* Source/WebCore/inspector/agents/InspectorDOMDebuggerAgent.h:
(WebCore::InspectorDOMDebuggerAgent::EventBreakpoint::operator== const): Added.
* Source/WebCore/inspector/agents/InspectorDOMDebuggerAgent.cpp:
(WebCore::InspectorDOMDebuggerAgent::mainFrameNavigated):
(WebCore::InspectorDOMDebuggerAgent::setEventBreakpoint):
(WebCore::InspectorDOMDebuggerAgent::removeEventBreakpoint):
(WebCore::InspectorDOMDebuggerAgent::willHandleEvent):
(WebCore::InspectorDOMDebuggerAgent::didHandleEvent):
(WebCore::InspectorDOMDebuggerAgent::EventBreakpoint::matches): Added.
* Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js:
(WI.DOMDebuggerManager.prototype.listenerBreakpointsForEventName): Added.
(WI.DOMDebuggerManager.prototype.addEventBreakpoint):
(WI.DOMDebuggerManager.prototype._commandArgumentsForEventBreakpoint):
(WI.DOMDebuggerManager.prototype.listenerBreakpointForEventName): Deleted.
* Source/WebInspectorUI/UserInterface/Models/EventBreakpoint.js:
(WI.EventBreakpoint):
(WI.EventBreakpoint.get supportsCaseSensitive): Added.
(WI.EventBreakpoint.get supportsIsRegex): Added.
(WI.EventBreakpoint.fromJSON):
(WI.EventBreakpoint.prototype.get caseSensitive): Added.
(WI.EventBreakpoint.prototype.get isRegex): Added.
(WI.EventBreakpoint.prototype.get displayName):
(WI.EventBreakpoint.prototype.matches): Added.
(WI.EventBreakpoint.prototype.equals): Added.
(WI.EventBreakpoint.prototype.saveIdentityToCookie):
(WI.EventBreakpoint.prototype.toJSON):

* Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js:
(WI.EventBreakpointPopover):
(WI.EventBreakpointPopover.prototype.completionControllerCompletionsNeeded): Added.
(WI.EventBreakpointPopover.prototype.populateContent):
(WI.EventBreakpointPopover.prototype.createBreakpoint):
(WI.EventBreakpointPopover.prototype._updateDOMEventNameCodeMirrorMode): Added.
(WI.EventBreakpointPopover.prototype.dismiss): Deleted.
(WI.EventBreakpointPopover.prototype.completionSuggestionsClickedCompletion): Deleted.
(WI.EventBreakpointPopover.prototype._showSuggestionsView): Deleted.
(WI.EventBreakpointPopover.prototype._handleEventInputKeydown): Deleted.
(WI.EventBreakpointPopover.prototype._handleEventInputInput): Deleted.
(WI.EventBreakpointPopover.prototype._handleEventInputBlur): Deleted.
Rework how builtin event name autocomplete works now that the event name input is a CodeMirror.

* Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js:
(WI.SourcesNavigationSidebarPanel.prototype._updatePauseReasonSection):
It's now possible for multiple `WI.EventBreakpoint` to match a given event name.

* Source/WebInspectorUI/UserInterface/Views/BreakpointPopover.css:
(.popover .edit-breakpoint-popover-content > table > tr > td > .editor): Added.
(.popover .edit-breakpoint-popover-content > table > tr:last-child > td > .editor): Added.
(.popover .edit-breakpoint-popover-content > table > tr > td > .editor > .CodeMirror): Added.
(.popover .edit-breakpoint-popover-content.wide > table > tr > td > .editor > .CodeMirror): Added.
(.popover .edit-breakpoint-popover-content > table > tr > td > .editor + label + label): Added.
(@media (prefers-color-scheme: dark) .popover .edit-breakpoint-popover-content > table > tr > td > .editor): Added.
(.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor): Deleted.
(.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor > .CodeMirror): Deleted.
(.popover .edit-breakpoint-popover-content.wide .condition > .CodeMirror): Deleted.
* Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css: Removed.
* Source/WebInspectorUI/UserInterface/Views/SymbolicBreakpointPopover.css: Removed.
* Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css: Removed.
* Source/WebInspectorUI/UserInterface/Main.html:
Unify the styling across all `WI.BreakpointPopover` subclasses.

* Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js:
(WI.CodeMirrorCompletionController.prototype.commitCurrentCompletion): Added.
(WI.CodeMirrorCompletionController.prototype.get _currentReplacementText):
(WI.CodeMirrorCompletionController.prototype._commitCompletionHint):
(WI.CodeMirrorCompletionController.prototype._commitCompletionHint.update): Deleted.
Drive-by: Add utility methods for forcing the current completion to commit, as well as fixing a bug
          where unset variables would result in a completion of `"undefined"`.

* Source/WebInspectorUI/UserInterface/Views/BreakpointPopover.js:
(WI.BreakpointPopover.prototype._handleAddActionButtonClick):
Drive-by: Wait to `update` so that CodeMirror has a chance to render first (which avoids scrollbars).

* LayoutTests/inspector/dom-debugger/event-listener-breakpoints.html:
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-expected.txt:
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-all-events.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-all-events-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-exact-case-insensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-exact-case-insensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-exact-case-sensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-exact-case-sensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-regex-case-insensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-regex-case-insensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-regex-case-sensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-builtin-regex-case-sensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-exact-case-insensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-exact-case-insensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-exact-case-sensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-exact-case-sensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-regex-case-insensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-regex-case-insensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-regex-case-sensitive.html: Added.
* LayoutTests/inspector/dom-debugger/event-listener-breakpoints-custom-regex-case-sensitive-expected.txt: Added.
* LayoutTests/inspector/dom-debugger/resources/event-breakpoint-utilities.js:
(TestPage.registerInitializer.InspectorTest.EventBreakpoint.createBreakpoint):
Split tests for `WI.EventBreakpoint` into multiple files for better sharding.

Canonical link: https://commits.webkit.org/255196@main
  • Loading branch information
dcrousso committed Oct 5, 2022
1 parent 67bf270 commit fcd2b36fa9f947a3182686b28c5af0f3f553b188
Show file tree
Hide file tree
Showing 35 changed files with 3,262 additions and 665 deletions.
@@ -0,0 +1,332 @@
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 1
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 2
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 3
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 4
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 1
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 2
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 3
CONSOLE MESSAGE: BREAKPOINT ACTION LOG 4
Tests for Event Listener breakpoints.


== Running test suite: DOMDebugger.Event.Listener
-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...
Firing "click" on body...
PASS: Should pause before event handler is run.
CALL STACK:
0: [F] handleBody_click
1: [F] trigger_click
2: [P] Global Code
Firing "custom" on body...
PASS: Should pause before event handler is run.
CALL STACK:
0: [F] handleBody_custom
1: [F] trigger_custom
2: [P] Global Code
PASS: Should have paused twice.
-- Running test teardown.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.BuiltinOptions.Condition
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Setting condition to 'false'...

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should not pause.

Setting condition to 'true'...

Triggering breakpoint...
PASS: Should pause.

Triggering breakpoint...
PASS: Should pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.BuiltinOptions.Condition.ConsoleCommandLineAPI
Adding saved console value 'false'...
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Setting condition to saved console value...

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should not pause.

Adding saved console value 'true'...
Setting condition to saved console value...

Triggering breakpoint...
PASS: Should pause.

Triggering breakpoint...
PASS: Should pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.BuiltinOptions.IgnoreCount
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Setting ignoreCount to '2'...

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should pause.

Triggering breakpoint...
PASS: Should pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.BuiltinOptions.Action.Log
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Adding log action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing log action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing log action...
Enabling auto-continue...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

Editing log action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.BuiltinOptions.Actions.Evaluate
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Adding evaluate action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing evaluate action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing evaluate action...
Enabling auto-continue...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

Editing evaluate action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.BuiltinOptions.Actions.Evaluate.ConsoleCommandLineAPI
Adding saved console value '1'...
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Adding evaluate action using saved console value...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Adding saved console value '2'...
Editing evaluate action using saved console value...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Adding saved console value '3'...
Editing evaluate action using saved console value...
Enabling auto-continue...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

Adding saved console value '4'...
Editing evaluate action using saved console value...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.CustomOptions.Condition
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Setting condition to 'false'...

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should not pause.

Setting condition to 'true'...

Triggering breakpoint...
PASS: Should pause.

Triggering breakpoint...
PASS: Should pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.CustomOptions.Condition.ConsoleCommandLineAPI
Adding saved console value 'false'...
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Setting condition to saved console value...

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should not pause.

Adding saved console value 'true'...
Setting condition to saved console value...

Triggering breakpoint...
PASS: Should pause.

Triggering breakpoint...
PASS: Should pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.CustomOptions.IgnoreCount
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Setting ignoreCount to '2'...

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should not pause.

Triggering breakpoint...
PASS: Should pause.

Triggering breakpoint...
PASS: Should pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.CustomOptions.Action.Log
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Adding log action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing log action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing log action...
Enabling auto-continue...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

Editing log action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.CustomOptions.Actions.Evaluate
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Adding evaluate action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing evaluate action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Editing evaluate action...
Enabling auto-continue...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

Editing evaluate action...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

-- Running test case: DOMDebugger.Event.Listener.AllEventsBreakpoint.CustomOptions.Actions.Evaluate.ConsoleCommandLineAPI
Adding saved console value '1'...
Creating "listener" Event Breakpoint...
Adding "listener" Event Breakpoint...

Adding evaluate action using saved console value...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Adding saved console value '2'...
Editing evaluate action using saved console value...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should pause.

Adding saved console value '3'...
Editing evaluate action using saved console value...
Enabling auto-continue...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

Adding saved console value '4'...
Editing evaluate action using saved console value...

Triggering breakpoint...
PASS: Should execute breakpoint action.
PASS: Should not pause.

0 comments on commit fcd2b36

Please sign in to comment.