Web Inspector: Add regular expression support to XHR breakpoints
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Apr 2017 23:09:55 +0000 (23:09 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Apr 2017 23:09:55 +0000 (23:09 +0000)
commit4e03c0ecd542d3b5c49f707f19b1059078a7ca79
tree40f74f8554911946e5b10c53760dcae8d2c6acc1
parente527982568f6bb1cc5207cdcf455719282ae06f3
Web Inspector: Add regular expression support to XHR breakpoints
https://bugs.webkit.org/show_bug.cgi?id=170099
<rdar://problem/31558082>

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

* inspector/protocol/DOMDebugger.json:
New optional `isRegex` parameter denotes whether `url` contains
a regular expression.

Source/WebCore:

* inspector/InspectorDOMDebuggerAgent.cpp:
(WebCore::InspectorDOMDebuggerAgent::setXHRBreakpoint):
(WebCore::InspectorDOMDebuggerAgent::willSendXMLHttpRequest):
Use ContentSearchUtilities for both Text and RegularExpression breakpoints.

* inspector/InspectorDOMDebuggerAgent.h:
Associate XHR breakpoint with a type.

Source/WebInspectorUI:

* Localizations/en.lproj/localizedStrings.js:
New strings for the Add XHR Breakpoint popover.

* UserInterface/Controllers/DOMDebuggerManager.js:
(WebInspector.DOMDebuggerManager):
(WebInspector.DOMDebuggerManager.prototype.addXHRBreakpoint):
Update for new XHRBreakpoint constructor.
(WebInspector.DOMDebuggerManager.prototype._updateXHRBreakpoint):
Set `isRegex` flag.

* UserInterface/Main.html:
New files for CodeMirror mode and breakpoint popover.

* UserInterface/Models/XHRBreakpoint.js:
Breakpoint can be of type Text or RegularExpression.
(WebInspector.XHRBreakpoint):
(WebInspector.XHRBreakpoint.prototype.get type):
(WebInspector.XHRBreakpoint.prototype.get serializableInfo):

* UserInterface/Views/CodeMirrorRegexMode.css: Added.
(.cm-s-default .cm-regex-character-set):
(.cm-s-default .cm-regex-character-set-negate):
(.cm-s-default :matches(.cm-regex-escape, .cm-regex-escape-2, .cm-regex-escape-3)):
(.cm-s-default :matches(.cm-regex-group, .cm-regex-lookahead)):
(.cm-s-default .cm-regex-quantifier):
(.cm-s-default :matches(.cm-regex-literal, .cm-regex-special, .cm-regex-backreference)):
Colors for regular expression syntax highlighting. The regex mode emits
more class names than we have separate colors for, allowing for further
customization in the future.

* UserInterface/Views/CodeMirrorRegexMode.js: Added.
(characterSetTokenizer):
(consumeEscapeSequence):
(tokenBase):
New CodeMirror mode for highlighting "text/x-regex" content.

* UserInterface/Views/DebuggerSidebarPanel.js:
Use new popover type for creating XHR breakpoints.
(WebInspector.DebuggerSidebarPanel.prototype._addXHRBreakpointButtonClicked):
(WebInspector.DebuggerSidebarPanel.prototype.willDismissPopover):
(WebInspector.DebuggerSidebarPanel):

* UserInterface/Views/XHRBreakpointPopover.css: Added.
(.popover .xhr-breakpoint-content):
(.popover .xhr-breakpoint-content > .editor-wrapper):
(.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
(body[dir=ltr] .popover .xhr-breakpoint-content > .editor-wrapper > .editor):
(body[dir=rtl] .popover .xhr-breakpoint-content > .editor-wrapper > .editor):
(.popover .xhr-breakpoint-content > .editor-wrapper > .editor > .CodeMirror):
(.popover .xhr-breakpoint-content > .editor-wrapper > .editor > .CodeMirror-scroll):
Styles for new popover.

* UserInterface/Views/XHRBreakpointPopover.js: Added.
New popover class. Includes a picker for selecting breakpoint type
(Text or RegularExpression), and has an improved popover caption. Input
field style and placeholder text changes based on the breakpoint type.

(WebInspector.XHRBreakpointPopover):
(WebInspector.XHRBreakpointPopover.prototype.get result):
(WebInspector.XHRBreakpointPopover.prototype.get type):
(WebInspector.XHRBreakpointPopover.prototype.get value):
(WebInspector.XHRBreakpointPopover.prototype.show.addOption):
(WebInspector.XHRBreakpointPopover.prototype.show):
(WebInspector.XHRBreakpointPopover.prototype._createEditor):
(WebInspector.XHRBreakpointPopover.prototype._updateEditor):
(WebInspector.XHRBreakpointPopover.prototype._presentOverTargetElement):

* UserInterface/Views/XHRBreakpointTreeElement.js:
(WebInspector.XHRBreakpointTreeElement):
Differentiate breakpoint type by enclosing subtitle in either double quotes
or regex-literal delimiters, depending on the type of breakpoint.

LayoutTests:

Update tests and expectations for new XHR breakpoint type.

* inspector/dom-debugger/xhr-breakpoints-expected.txt:
* inspector/dom-debugger/xhr-breakpoints.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@215584 268f45cc-cd09-0410-ab3c-d52691b4dbfc
20 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/dom-debugger/xhr-breakpoints-expected.txt
LayoutTests/inspector/dom-debugger/xhr-breakpoints.html
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/DOMDebugger.json
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorDOMDebuggerAgent.cpp
Source/WebCore/inspector/InspectorDOMDebuggerAgent.h
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/XHRBreakpoint.js
Source/WebInspectorUI/UserInterface/Views/CodeMirrorRegexMode.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/CodeMirrorRegexMode.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/Variables.css
Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js