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

LayoutTests/inspector/dom-debugger/event-listener-breakpoints-all-events-expected.txt

@@ -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.
+