Changeset 266480 in webkit


Ignore:
Timestamp:
Sep 2, 2020 12:20:23 PM (4 years ago)
Author:
Devin Rousso
Message:

Web Inspector: allow event breakpoints to be configured when they're added
​https://bugs.webkit.org/show_bug.cgi?id=215747

Reviewed by Brian Burg.

Source/WebInspectorUI:

  • UserInterface/Models/Breakpoint.js:

(WI.Breakpoint):
(WI.Breakpoint.prototype.get displayName): Added.
(WI.Breakpoint.prototype.addAction): Added.
(WI.Breakpoint.prototype.removeAction):
(WI.Breakpoint.prototype._handleBreakpointActionChanged): Added.
(WI.Breakpoint.prototype.createAction): Deleted.
(WI.Breakpoint.prototype.recreateAction): Deleted.
(WI.Breakpoint.prototype.breakpointActionDidChange): Deleted.

  • UserInterface/Models/DOMBreakpoint.js:

(WI.DOMBreakpoint.displayNameForType):
(WI.DOMBreakpoint.prototype.get displayName): Added.

  • UserInterface/Models/EventBreakpoint.js:

(WI.EventBreakpoint.get editable): Added.
(WI.EventBreakpoint.fromJSON):
(WI.EventBreakpoint.prototype.get displayName): Added.
(WI.EventBreakpoint.prototype.get editable):

  • UserInterface/Models/JavaScriptBreakpoint.js:

(WI.JavaScriptBreakpoint.fromJSON):
(WI.JavaScriptBreakpoint.prototype.get displayName): Added.

  • UserInterface/Models/URLBreakpoint.js:

(WI.URLBreakpoint.prototype.get displayName): Added.
Add a get displayName "virtual" member function.

  • UserInterface/Models/BreakpointAction.js:

(WI.BreakpointAction):
(WI.BreakpointAction.fromJSON):
(WI.BreakpointAction.prototype.get type):
(WI.BreakpointAction.prototype.set type): Added.
(WI.BreakpointAction.prototype.set data): Added.
(WI.BreakpointAction.prototype.get breakpoint): Deleted.
Remove the requirement that WI.BreakpointAction be passed a WI.Breakpoint when its
constructed. Instead, have WI.BreakpointAction dispatch events when its type or data
changes.

  • UserInterface/Views/BreakpointActionView.js:

(WI.BreakpointActionView):
(WI.BreakpointActionView.prototype._pickerChanged):
(WI.BreakpointActionView.prototype._appendActionButtonClicked):
(WI.BreakpointActionView.prototype._removeAction):
(WI.BreakpointActionView.prototype._updateBody):
(WI.BreakpointActionView.prototype._handleLogInputInput): Added.
(WI.BreakpointActionView.prototype._handleJavaScriptCodeMirrorChange): Added.
(WI.BreakpointActionView.prototype._logInputChanged): Deleted.
(WI.BreakpointActionView.prototype._codeMirrorBlurred): Deleted.
Call functions on the delegate instead of directly manipulating a WI.Breakpoint as there
is no longer a WI.Breakpoint to manipulate since WI.BreakpointAction doesn't have one.

  • UserInterface/Controllers/BreakpointPopoverController.js: Removed.
  • UserInterface/Views/BreakpointPopoverController.css: Removed.
  • UserInterface/Views/BreakpointPopover.js: Renamed from Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css.

(WI.BreakpointPopover):
(WI.BreakpointPopover.appendContextMenuItems):
(WI.BreakpointPopover.prototype.get breakpoint):
(WI.BreakpointPopover.prototype.show):
(WI.BreakpointPopover.dismiss):
(WI.BreakpointPopover.prototype.completionControllerShouldAllowEscapeCompletion):
(WI.BreakpointPopover.prototype.breakpointActionViewAppendActionView):
(WI.BreakpointPopover.prototype.breakpointActionViewRemoveActionView):
(WI.BreakpointPopover.prototype.breakpointActionViewResized):
(WI.BreakpointPopover.prototype.populateContent):
(WI.BreakpointPopover.prototype.addRow):
(WI.BreakpointPopover.prototype.createBreakpoint):
(WI.BreakpointPopover.prototype._presentOverTargetElement):
(WI.BreakpointPopover.prototype._parseIgnoreCountNumber):
(WI.BreakpointPopover.prototype._updateIgnoreCountText):
(WI.BreakpointPopover.prototype._createAddActionButton):
(WI.BreakpointPopover.prototype._insertBreakpointActionView):
(WI.BreakpointPopover.prototype._handleEnabledCheckboxChange):
(WI.BreakpointPopover.prototype._handleConditionCodeMirrorBeforeChange):
(WI.BreakpointPopover.prototype._handleConditionCodeMirrorChange):
(WI.BreakpointPopover.prototype._handleIgnoreCountInputChange):
(WI.BreakpointPopover.prototype._handleAddActionButtonClick):
(WI.BreakpointPopover.prototype._handleAutoContinueCheckboxChange):

  • UserInterface/Views/BreakpointPopover.css: Added.

(.popover .edit-breakpoint-popover-content):
(.popover .edit-breakpoint-popover-content.wide):
(.popover .edit-breakpoint-popover-content > label.toggle):
(.popover .edit-breakpoint-popover-content > table):
(.popover .edit-breakpoint-popover-content > table > tr > th):
(.popover .edit-breakpoint-popover-content > table > tr > td):
(.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor):
(.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor > .CodeMirror):
(.popover .edit-breakpoint-popover-content.wide .condition > .CodeMirror):
(.popover .edit-breakpoint-popover-content input#edit-breakpoint-popover-ignore-count):
(.popover .edit-breakpoint-popover-content input:is(#edit-breakpoint-popover-ignore-count, #edit-breakpoint-popover-auto-continue)):
(.popover .edit-breakpoint-popover-content > .reference-page-link-container):
(body[dir=ltr] .popover .edit-breakpoint-popover-content > .reference-page-link-container):
(body[dir=rtl] .popover .edit-breakpoint-popover-content > .reference-page-link-container):
(@media (prefers-color-scheme: dark) .popover .edit-breakpoint-popover-content > table > tr > th):

  • UserInterface/Views/EventBreakpointPopover.js:

(WI.EventBreakpointPopover):
(WI.EventBreakpointPopover.get editable): Added.
(WI.EventBreakpointPopover.prototype.dismiss):
(WI.EventBreakpointPopover.prototype.populateContent): Added.
(WI.EventBreakpointPopover.prototype.createBreakpoint): Added.
(WI.EventBreakpointPopover.prototype._showSuggestionsView):
(WI.EventBreakpointPopover.prototype._handleDOMEventNameInputKeydown): Added.
(WI.EventBreakpointPopover.prototype._handleDOMEventNameInputInput): Added.
(WI.EventBreakpointPopover.prototype._handleDOMEventNameInputBlur): Added.
(WI.EventBreakpointPopover.prototype.get breakpoint): Deleted.
(WI.EventBreakpointPopover.prototype.show): Deleted.
(WI.EventBreakpointPopover.prototype._presentOverTargetElement): Deleted.

  • UserInterface/Views/EventBreakpointPopover.css:

(.popover .edit-breakpoint-popover-content .event input): Added.
(.popover .edit-breakpoint-popover-content .event:last-child input): Added.
(.popover .edit-breakpoint-popover-content .event input::placeholder): Added.
(.popover .event-breakpoint-content): Deleted.
(.popover .event-breakpoint-content > input): Deleted.
(.popover .event-breakpoint-content > input::placeholder): Deleted.
(.popover .event-breakpoint-content .reference-page-link-container): Deleted.

  • UserInterface/Views/URLBreakpointPopover.js:

(WI.URLBreakpointPopover):
(WI.URLBreakpointPopover.get editable): Added.
(WI.URLBreakpointPopover.prototype.populateContent): Added.
(WI.URLBreakpointPopover.prototype.createBreakpoint): Added.
(WI.URLBreakpointPopover.prototype._updateEditor):
(WI.URLBreakpointPopover.prototype.get breakpoint): Deleted.
(WI.URLBreakpointPopover.prototype.show): Deleted.
(WI.URLBreakpointPopover.prototype.dismiss): Deleted.
(WI.URLBreakpointPopover.prototype._createEditor): Deleted.
(WI.URLBreakpointPopover.prototype._presentOverTargetElement): Deleted.

  • UserInterface/Views/URLBreakpointPopover.css:

(.popover .edit-breakpoint-popover-content .url .editor): Added.
(.popover .edit-breakpoint-popover-content .url:last-child .editor): Added.
(.popover .edit-breakpoint-popover-content .url .editor > .CodeMirror): Added.
(.popover .edit-breakpoint-popover-content .url .editor > .CodeMirror-scroll): Added.
(@media (prefers-color-scheme: dark) .popover .edit-breakpoint-popover-content .url .editor): Added.
(.popover .url-breakpoint-content): Deleted.
(.popover .url-breakpoint-content > .editor-wrapper): Deleted.
(.popover .url-breakpoint-content > .editor-wrapper > .editor): Deleted.
(.popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror): Deleted.
(.popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror-scroll): Deleted.
(.popover .url-breakpoint-content .reference-page-link-container): Deleted.
(@media (prefers-color-scheme: dark) .popover .url-breakpoint-content > .editor-wrapper > .editor): Deleted.
Make WI.BreakpointPopoverController into a subclass of WI.Popover with a static member
function for adding context menu items. This allows both WI.EventBreakpointPopover and
WI.URLBreakpointPopover to inherit from WI.BreakpointPopover, meaning that they can show
the configuration UI when adding the breakpoint instead of as a second step after creating
the breakpoint.

  • UserInterface/Models/ProbeSet.js:

(WI.ProbeSet.prototype.createProbe):
Update to use newly named WI.Breakpoint.prototype.addAction.

  • UserInterface/Views/ContextMenuUtilities.js:
  • UserInterface/Views/DOMBreakpointTreeElement.js:

(WI.DOMBreakpointTreeElement):
(WI.DOMBreakpointTreeElement.displayNameForType): Deleted.

  • UserInterface/Views/EventBreakpointTreeElement.js:

(WI.EventBreakpointTreeElement):

  • UserInterface/Views/JavaScriptBreakpointTreeElement.js:

(WI.JavaScriptBreakpointTreeElement):
(WI.JavaScriptBreakpointTreeElement.prototype.updateTitles):

  • UserInterface/Views/URLBreakpointTreeElement.js:

(WI.URLBreakpointTreeElement):

  • UserInterface/Views/ProbeSetDetailsSection.js:

(WI.ProbeSetDetailsSection):

  • UserInterface/Views/SourcesNavigationSidebarPanel.js:

(WI.SourcesNavigationSidebarPanel.prototype._addBreakpoint):
(WI.SourcesNavigationSidebarPanel.prototype._updatePauseReasonSection):
(WI.SourcesNavigationSidebarPanel.prototype._populateCreateBreakpointContextMenu):
Use the new WI.Breakpoint.prototype.get displayName.

  • UserInterface/Base/Main.js:
  • UserInterface/Views/BreakpointTreeElement.js:

(WI.BreakpointTreeElement.prototype.populateContextMenu):

  • UserInterface/Views/SourceCodeTextEditor.js:

(WI.SourceCodeTextEditor.prototype.textEditorGutterContextMenu):
Replace WI.breakpointPopoverController with WI.BreakpointPopover.

  • UserInterface/Views/Variables.css:

(:root):

  • UserInterface/Views/Main.css:

(.reference-page-link):
Create a variable for the size of the reference page (?) button so it can be use elsewhere.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/LoadLocalizedStrings.js:

(WI.repeatedUIString.debuggerStatements): Added.
(WI.repeatedUIString.allExceptions): Added.
(WI.repeatedUIString.uncaughtExceptions): Added.
(WI.repeatedUIString.assertionFailures): Added.
(WI.repeatedUIString.allMicrotasks): Added.
(WI.repeatedUIString.allAnimationFrames): Added.
(WI.repeatedUIString.allIntervals): Added.
(WI.repeatedUIString.allEvents): Added.
(WI.repeatedUIString.allTimeouts): Added.
Create repeated localized string helper functions for special breakpoints.

  • UserInterface/Base/ReferencePage.js: Added.

Add an enum for reference page URLs.

  • UserInterface/Main.html:

LayoutTests:

  • inspector/debugger/breakpoint-action-eval.html:
  • inspector/debugger/breakpoint-action-log.html:
  • inspector/debugger/probe-manager-add-remove-actions.html:
  • inspector/debugger/stepping/stepping-through-autoContinue-breakpoint.html:
  • inspector/dom-debugger/resources/event-breakpoint-utilities.js:

(TestPage.registerInitializer.async suite):
(TestPage.registerInitializer.InspectorTest.EventBreakpoint.addBreakpointOptionsTestCases):

  • inspector/dom/breakpoint-for-event-listener.html:

Update to use newly named WI.Breakpoint.prototype.addAction.

Location:
trunk
Files:
1 added
1 deleted
36 edited
1 copied
1 moved

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r266479 r266480  
     12020-09-02  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: allow event breakpoints to be configured when they're added
     4        https://bugs.webkit.org/show_bug.cgi?id=215747
     5
     6        Reviewed by Brian Burg.
     7
     8        * inspector/debugger/breakpoint-action-eval.html:
     9        * inspector/debugger/breakpoint-action-log.html:
     10        * inspector/debugger/probe-manager-add-remove-actions.html:
     11        * inspector/debugger/stepping/stepping-through-autoContinue-breakpoint.html:
     12        * inspector/dom-debugger/resources/event-breakpoint-utilities.js:
     13        (TestPage.registerInitializer.async suite):
     14        (TestPage.registerInitializer.InspectorTest.EventBreakpoint.addBreakpointOptionsTestCases):
     15        * inspector/dom/breakpoint-for-event-listener.html:
     16        Update to use newly named `WI.Breakpoint.prototype.addAction`.
     17
    1182020-09-02  John Wilander  <wilander@apple.com>
    219

  • trunk/LayoutTests/inspector/debugger/breakpoint-action-eval.html

    r266074 r266480  
    3131        var breakpoint = new WI.JavaScriptBreakpoint(location);
    3232        breakpoint.autoContinue = true;
    33         breakpoint.createAction(WI.BreakpointAction.Type.Evaluate, {data: "action(a, b)"});
     33        breakpoint.addAction(new WI.BreakpointAction(WI.BreakpointAction.Type.Evaluate, {data: "action(a, b)"}));
    3434
    3535        WI.debuggerManager.addBreakpoint(breakpoint);

  • trunk/LayoutTests/inspector/debugger/breakpoint-action-log.html

    r266074 r266480  
    2929
    3030                function addLogAction(data) {
    31                     breakpoint.createAction(WI.BreakpointAction.Type.Log, {data});
     31                    breakpoint.addAction(new WI.BreakpointAction(WI.BreakpointAction.Type.Log, {data}));
    3232                }
    3333

  • trunk/LayoutTests/inspector/debugger/probe-manager-add-remove-actions.html

    r266074 r266480  
    3737            breakpoint.autoContinue = true;
    3838            for (var i of [0, 1])
    39                 breakpoint.createAction(WI.BreakpointAction.Type.Probe, {data: "a"});
     39                breakpoint.addAction(new WI.BreakpointAction(WI.BreakpointAction.Type.Probe, {data: "a"}));
    4040
    4141            WI.debuggerManager.addBreakpoint(breakpoint);

  • trunk/LayoutTests/inspector/debugger/stepping/stepping-through-autoContinue-breakpoint.html

    r266074 r266480  
    2727            var breakpoint = new WI.JavaScriptBreakpoint(location);
    2828            breakpoint.autoContinue = true;
    29             breakpoint.createAction(WI.BreakpointAction.Type.Evaluate, {data: "alert(1.5);"});
     29            breakpoint.addAction(new WI.BreakpointAction(WI.BreakpointAction.Type.Evaluate, {data: "alert(1.5);"}));
    3030            WI.debuggerManager.addBreakpoint(breakpoint);
    3131

  • trunk/LayoutTests/inspector/dom-debugger/resources/event-breakpoint-utilities.js

    r266074 r266480  
    102102
    103103                InspectorTest.log("Adding log action...");
    104                 let action = breakpoint.createAction(WI.BreakpointAction.Type.Log, {data: "BREAKPOINT ACTION LOG 1"});
     104                let action = new WI.BreakpointAction(WI.BreakpointAction.Type.Log, {data: "BREAKPOINT ACTION LOG 1"});
     105                breakpoint.addAction(action);
    105106
    106107                for (let i = 1; i <= 4; ++i) {
    … …  
    153154
    154155                InspectorTest.log("Adding evaluate action...");
    155                 let action = breakpoint.createAction(WI.BreakpointAction.Type.Evaluate, {data: "window.BREAKPOINT_ACTION_EVALUATE = 1;"});
     156                let action = new WI.BreakpointAction(WI.BreakpointAction.Type.Evaluate, {data: "window.BREAKPOINT_ACTION_EVALUATE = 1;"});
     157                breakpoint.addAction(action);
    156158
    157159                for (let i = 1; i <= 4; ++i) {

  • trunk/LayoutTests/inspector/dom/breakpoint-for-event-listener.html

    r266074 r266480  
    267267
    268268            InspectorTest.log("Adding log action...");
    269             let action = breakpoint.createAction(WI.BreakpointAction.Type.Log, {data: "BREAKPOINT ACTION LOG 1"});
     269            let action = new WI.BreakpointAction(WI.BreakpointAction.Type.Log, {data: "BREAKPOINT ACTION LOG 1"});
     270            breakpoint.addAction(action);
    270271
    271272            for (let i = 1; i <= 4; ++i) {
    … …  
    320321
    321322            InspectorTest.log("Adding evaluate action...");
    322             let action = breakpoint.createAction(WI.BreakpointAction.Type.Evaluate, {data: "window.BREAKPOINT_ACTION_EVALUATE = 1;"});
     323            let action = new WI.BreakpointAction(WI.BreakpointAction.Type.Evaluate, {data: "window.BREAKPOINT_ACTION_EVALUATE = 1;"});
     324            breakpoint.addAction(action);
    323325
    324326            for (let i = 1; i <= 4; ++i) {

  • trunk/Source/WebInspectorUI/ChangeLog

    r266477 r266480  
     12020-09-02  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: allow event breakpoints to be configured when they're added
     4        https://bugs.webkit.org/show_bug.cgi?id=215747
     5
     6        Reviewed by Brian Burg.
     7
     8        * UserInterface/Models/Breakpoint.js:
     9        (WI.Breakpoint):
     10        (WI.Breakpoint.prototype.get displayName): Added.
     11        (WI.Breakpoint.prototype.addAction): Added.
     12        (WI.Breakpoint.prototype.removeAction):
     13        (WI.Breakpoint.prototype._handleBreakpointActionChanged): Added.
     14        (WI.Breakpoint.prototype.createAction): Deleted.
     15        (WI.Breakpoint.prototype.recreateAction): Deleted.
     16        (WI.Breakpoint.prototype.breakpointActionDidChange): Deleted.
     17        * UserInterface/Models/DOMBreakpoint.js:
     18        (WI.DOMBreakpoint.displayNameForType):
     19        (WI.DOMBreakpoint.prototype.get displayName): Added.
     20        * UserInterface/Models/EventBreakpoint.js:
     21        (WI.EventBreakpoint.get editable): Added.
     22        (WI.EventBreakpoint.fromJSON):
     23        (WI.EventBreakpoint.prototype.get displayName): Added.
     24        (WI.EventBreakpoint.prototype.get editable):
     25        * UserInterface/Models/JavaScriptBreakpoint.js:
     26        (WI.JavaScriptBreakpoint.fromJSON):
     27        (WI.JavaScriptBreakpoint.prototype.get displayName): Added.
     28        * UserInterface/Models/URLBreakpoint.js:
     29        (WI.URLBreakpoint.prototype.get displayName): Added.
     30        Add a `get displayName` "virtual" member function.
     31
     32        * UserInterface/Models/BreakpointAction.js:
     33        (WI.BreakpointAction):
     34        (WI.BreakpointAction.fromJSON):
     35        (WI.BreakpointAction.prototype.get type):
     36        (WI.BreakpointAction.prototype.set type): Added.
     37        (WI.BreakpointAction.prototype.set data): Added.
     38        (WI.BreakpointAction.prototype.get breakpoint): Deleted.
     39        Remove the requirement that `WI.BreakpointAction` be passed a `WI.Breakpoint` when its
     40        constructed. Instead, have `WI.BreakpointAction` dispatch events when its `type` or `data`
     41        changes.
     42
     43        * UserInterface/Views/BreakpointActionView.js:
     44        (WI.BreakpointActionView):
     45        (WI.BreakpointActionView.prototype._pickerChanged):
     46        (WI.BreakpointActionView.prototype._appendActionButtonClicked):
     47        (WI.BreakpointActionView.prototype._removeAction):
     48        (WI.BreakpointActionView.prototype._updateBody):
     49        (WI.BreakpointActionView.prototype._handleLogInputInput): Added.
     50        (WI.BreakpointActionView.prototype._handleJavaScriptCodeMirrorChange): Added.
     51        (WI.BreakpointActionView.prototype._logInputChanged): Deleted.
     52        (WI.BreakpointActionView.prototype._codeMirrorBlurred): Deleted.
     53        Call functions on the `delegate` instead of directly manipulating a `WI.Breakpoint` as there
     54        is no longer a `WI.Breakpoint` to manipulate since `WI.BreakpointAction` doesn't have one.
     55
     56        * UserInterface/Controllers/BreakpointPopoverController.js: Removed.
     57        * UserInterface/Views/BreakpointPopoverController.css: Removed.
     58        * UserInterface/Views/BreakpointPopover.js: Renamed from Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css.
     59        (WI.BreakpointPopover):
     60        (WI.BreakpointPopover.appendContextMenuItems):
     61        (WI.BreakpointPopover.prototype.get breakpoint):
     62        (WI.BreakpointPopover.prototype.show):
     63        (WI.BreakpointPopover.dismiss):
     64        (WI.BreakpointPopover.prototype.completionControllerShouldAllowEscapeCompletion):
     65        (WI.BreakpointPopover.prototype.breakpointActionViewAppendActionView):
     66        (WI.BreakpointPopover.prototype.breakpointActionViewRemoveActionView):
     67        (WI.BreakpointPopover.prototype.breakpointActionViewResized):
     68        (WI.BreakpointPopover.prototype.populateContent):
     69        (WI.BreakpointPopover.prototype.addRow):
     70        (WI.BreakpointPopover.prototype.createBreakpoint):
     71        (WI.BreakpointPopover.prototype._presentOverTargetElement):
     72        (WI.BreakpointPopover.prototype._parseIgnoreCountNumber):
     73        (WI.BreakpointPopover.prototype._updateIgnoreCountText):
     74        (WI.BreakpointPopover.prototype._createAddActionButton):
     75        (WI.BreakpointPopover.prototype._insertBreakpointActionView):
     76        (WI.BreakpointPopover.prototype._handleEnabledCheckboxChange):
     77        (WI.BreakpointPopover.prototype._handleConditionCodeMirrorBeforeChange):
     78        (WI.BreakpointPopover.prototype._handleConditionCodeMirrorChange):
     79        (WI.BreakpointPopover.prototype._handleIgnoreCountInputChange):
     80        (WI.BreakpointPopover.prototype._handleAddActionButtonClick):
     81        (WI.BreakpointPopover.prototype._handleAutoContinueCheckboxChange):
     82        * UserInterface/Views/BreakpointPopover.css: Added.
     83        (.popover .edit-breakpoint-popover-content):
     84        (.popover .edit-breakpoint-popover-content.wide):
     85        (.popover .edit-breakpoint-popover-content > label.toggle):
     86        (.popover .edit-breakpoint-popover-content > table):
     87        (.popover .edit-breakpoint-popover-content > table > tr > th):
     88        (.popover .edit-breakpoint-popover-content > table > tr > td):
     89        (.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor):
     90        (.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor > .CodeMirror):
     91        (.popover .edit-breakpoint-popover-content.wide .condition > .CodeMirror):
     92        (.popover .edit-breakpoint-popover-content input#edit-breakpoint-popover-ignore-count):
     93        (.popover .edit-breakpoint-popover-content input:is(#edit-breakpoint-popover-ignore-count, #edit-breakpoint-popover-auto-continue)):
     94        (.popover .edit-breakpoint-popover-content > .reference-page-link-container):
     95        (body[dir=ltr] .popover .edit-breakpoint-popover-content > .reference-page-link-container):
     96        (body[dir=rtl] .popover .edit-breakpoint-popover-content > .reference-page-link-container):
     97        (@media (prefers-color-scheme: dark) .popover .edit-breakpoint-popover-content > table > tr > th):
     98        * UserInterface/Views/EventBreakpointPopover.js:
     99        (WI.EventBreakpointPopover):
     100        (WI.EventBreakpointPopover.get editable): Added.
     101        (WI.EventBreakpointPopover.prototype.dismiss):
     102        (WI.EventBreakpointPopover.prototype.populateContent): Added.
     103        (WI.EventBreakpointPopover.prototype.createBreakpoint): Added.
     104        (WI.EventBreakpointPopover.prototype._showSuggestionsView):
     105        (WI.EventBreakpointPopover.prototype._handleDOMEventNameInputKeydown): Added.
     106        (WI.EventBreakpointPopover.prototype._handleDOMEventNameInputInput): Added.
     107        (WI.EventBreakpointPopover.prototype._handleDOMEventNameInputBlur): Added.
     108        (WI.EventBreakpointPopover.prototype.get breakpoint): Deleted.
     109        (WI.EventBreakpointPopover.prototype.show): Deleted.
     110        (WI.EventBreakpointPopover.prototype._presentOverTargetElement): Deleted.
     111        * UserInterface/Views/EventBreakpointPopover.css:
     112        (.popover .edit-breakpoint-popover-content .event input): Added.
     113        (.popover .edit-breakpoint-popover-content .event:last-child input): Added.
     114        (.popover .edit-breakpoint-popover-content .event input::placeholder): Added.
     115        (.popover .event-breakpoint-content): Deleted.
     116        (.popover .event-breakpoint-content > input): Deleted.
     117        (.popover .event-breakpoint-content > input::placeholder): Deleted.
     118        (.popover .event-breakpoint-content .reference-page-link-container): Deleted.
     119        * UserInterface/Views/URLBreakpointPopover.js:
     120        (WI.URLBreakpointPopover):
     121        (WI.URLBreakpointPopover.get editable): Added.
     122        (WI.URLBreakpointPopover.prototype.populateContent): Added.
     123        (WI.URLBreakpointPopover.prototype.createBreakpoint): Added.
     124        (WI.URLBreakpointPopover.prototype._updateEditor):
     125        (WI.URLBreakpointPopover.prototype.get breakpoint): Deleted.
     126        (WI.URLBreakpointPopover.prototype.show): Deleted.
     127        (WI.URLBreakpointPopover.prototype.dismiss): Deleted.
     128        (WI.URLBreakpointPopover.prototype._createEditor): Deleted.
     129        (WI.URLBreakpointPopover.prototype._presentOverTargetElement): Deleted.
     130        * UserInterface/Views/URLBreakpointPopover.css:
     131        (.popover .edit-breakpoint-popover-content .url .editor): Added.
     132        (.popover .edit-breakpoint-popover-content .url:last-child .editor): Added.
     133        (.popover .edit-breakpoint-popover-content .url .editor > .CodeMirror): Added.
     134        (.popover .edit-breakpoint-popover-content .url .editor > .CodeMirror-scroll): Added.
     135        (@media (prefers-color-scheme: dark) .popover .edit-breakpoint-popover-content .url .editor): Added.
     136        (.popover .url-breakpoint-content): Deleted.
     137        (.popover .url-breakpoint-content > .editor-wrapper): Deleted.
     138        (.popover .url-breakpoint-content > .editor-wrapper > .editor): Deleted.
     139        (.popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror): Deleted.
     140        (.popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror-scroll): Deleted.
     141        (.popover .url-breakpoint-content .reference-page-link-container): Deleted.
     142        (@media (prefers-color-scheme: dark) .popover .url-breakpoint-content > .editor-wrapper > .editor): Deleted.
     143        Make `WI.BreakpointPopoverController` into a subclass of `WI.Popover` with a `static` member
     144        function for adding context menu items. This allows both `WI.EventBreakpointPopover` and
     145        `WI.URLBreakpointPopover` to inherit from `WI.BreakpointPopover`, meaning that they can show
     146        the configuration UI when adding the breakpoint instead of as a second step after creating
     147        the breakpoint.
     148
     149        * UserInterface/Models/ProbeSet.js:
     150        (WI.ProbeSet.prototype.createProbe):
     151        Update to use newly named `WI.Breakpoint.prototype.addAction`.
     152
     153        * UserInterface/Views/ContextMenuUtilities.js:
     154        * UserInterface/Views/DOMBreakpointTreeElement.js:
     155        (WI.DOMBreakpointTreeElement):
     156        (WI.DOMBreakpointTreeElement.displayNameForType): Deleted.
     157        * UserInterface/Views/EventBreakpointTreeElement.js:
     158        (WI.EventBreakpointTreeElement):
     159        * UserInterface/Views/JavaScriptBreakpointTreeElement.js:
     160        (WI.JavaScriptBreakpointTreeElement):
     161        (WI.JavaScriptBreakpointTreeElement.prototype.updateTitles):
     162        * UserInterface/Views/URLBreakpointTreeElement.js:
     163        (WI.URLBreakpointTreeElement):
     164        * UserInterface/Views/ProbeSetDetailsSection.js:
     165        (WI.ProbeSetDetailsSection):
     166        * UserInterface/Views/SourcesNavigationSidebarPanel.js:
     167        (WI.SourcesNavigationSidebarPanel.prototype._addBreakpoint):
     168        (WI.SourcesNavigationSidebarPanel.prototype._updatePauseReasonSection):
     169        (WI.SourcesNavigationSidebarPanel.prototype._populateCreateBreakpointContextMenu):
     170        Use the new `WI.Breakpoint.prototype.get displayName`.
     171
     172        * UserInterface/Base/Main.js:
     173        * UserInterface/Views/BreakpointTreeElement.js:
     174        (WI.BreakpointTreeElement.prototype.populateContextMenu):
     175        * UserInterface/Views/SourceCodeTextEditor.js:
     176        (WI.SourceCodeTextEditor.prototype.textEditorGutterContextMenu):
     177        Replace `WI.breakpointPopoverController` with `WI.BreakpointPopover`.
     178
     179        * UserInterface/Views/Variables.css:
     180        (:root):
     181        * UserInterface/Views/Main.css:
     182        (.reference-page-link):
     183        Create a variable for the size of the reference page (?) button so it can be use elsewhere.
     184
     185        * Localizations/en.lproj/localizedStrings.js:
     186        * UserInterface/Base/LoadLocalizedStrings.js:
     187        (WI.repeatedUIString.debuggerStatements): Added.
     188        (WI.repeatedUIString.allExceptions): Added.
     189        (WI.repeatedUIString.uncaughtExceptions): Added.
     190        (WI.repeatedUIString.assertionFailures): Added.
     191        (WI.repeatedUIString.allMicrotasks): Added.
     192        (WI.repeatedUIString.allAnimationFrames): Added.
     193        (WI.repeatedUIString.allIntervals): Added.
     194        (WI.repeatedUIString.allEvents): Added.
     195        (WI.repeatedUIString.allTimeouts): Added.
     196        Create repeated localized string helper functions for special breakpoints.
     197
     198        * UserInterface/Base/ReferencePage.js: Added.
     199        Add an enum for reference page URLs.
     200
     201        * UserInterface/Main.html:
     202
    12032020-09-02  Devin Rousso  <drousso@apple.com>
    2204

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r266317 r266480  
    119119localizedStrings["Address"] = "Address";
    120120localizedStrings["All"] = "All";
    121 localizedStrings["All Animation Frames"] = "All Animation Frames";
     121/* Break (pause) on All animation frames */
     122localizedStrings["All Animation Frames @ Event Breakpoint"] = "All Animation Frames";
    122123localizedStrings["All Changes"] = "All Changes";
    123 localizedStrings["All Events"] = "All Events";
     124/* Break (pause) on all events */
     125localizedStrings["All Events @ Event Breakpoint"] = "All Events";
    124126/* Break (pause) on all exceptions */
    125 localizedStrings["All Exceptions"] = "All Exceptions";
    126 localizedStrings["All Intervals"] = "All Intervals";
     127localizedStrings["All Exceptions @ JavaScript Breakpoint"] = "All Exceptions";
     128/* Break (pause) on all intervals */
     129localizedStrings["All Intervals @ Event Breakpoint"] = "All Intervals";
    127130localizedStrings["All Layers"] = "All Layers";
    128 localizedStrings["All Microtasks"] = "All Microtasks";
     131/* Break (pause) on all microtasks */
     132localizedStrings["All Microtasks @ JavaScript Breakpoint"] = "All Microtasks";
    129133/* A submenu item of 'Break on' that breaks (pauses) before all network requests */
    130134localizedStrings["All Requests"] = "All Requests";
    131135localizedStrings["All Storage"] = "All Storage";
    132 localizedStrings["All Timeouts"] = "All Timeouts";
     136/* Break (pause) on all timeouts */
     137localizedStrings["All Timeouts @ Event Breakpoint"] = "All Timeouts";
    133138localizedStrings["All items in \u0022%s\u0022 must be error objects"] = "All items in \u0022%s\u0022 must be error objects";
    134139localizedStrings["All items in \u0022%s\u0022 must be non-empty strings"] = "All items in \u0022%s\u0022 must be non-empty strings";
    … …  
    162167localizedStrings["Assertion Failed: %s"] = "Assertion Failed: %s";
    163168/* Break (pause) when console.assert() fails */
    164 localizedStrings["Assertion Failures"] = "Assertion Failures";
     169localizedStrings["Assertion Failures @ JavaScript Breakpoint"] = "Assertion Failures";
    165170localizedStrings["Assertion with message: %s"] = "Assertion with message: %s";
    166171localizedStrings["Assertive"] = "Assertive";
    … …  
    169174localizedStrings["Attribute"] = "Attribute";
    170175/* A submenu item of 'Break On' that breaks (pauses) before DOM attribute is modified */
    171 localizedStrings["Attribute Modified"] = "Attribute Modified";
     176localizedStrings["Attribute Modified @ DOM Breakpoint"] = "Attribute Modified";
    172177localizedStrings["Attributes"] = "Attributes";
    173178localizedStrings["Audit Error: %s"] = "Audit Error: %s";
    … …  
    204209localizedStrings["Box Model"] = "Box Model";
    205210localizedStrings["Break on"] = "Break on";
    206 localizedStrings["Break on events with name:"] = "Break on events with name:";
    207 localizedStrings["Break on request with URL:"] = "Break on request with URL:";
    208211localizedStrings["Breakdown"] = "Breakdown";
    209212localizedStrings["Breakdown of each memory category at the end of the selected time range"] = "Breakdown of each memory category at the end of the selected time range";
    … …  
    385388localizedStrings["Debug: "] = "Debug: ";
    386389localizedStrings["Debugger Statement"] = "Debugger Statement";
    387 localizedStrings["Debugger Statements"] = "Debugger Statements";
     390/* Break (pause) on debugger statements */
     391localizedStrings["Debugger Statements @ JavaScript Breakpoint"] = "Debugger Statements";
    388392localizedStrings["Debugger disabled during Audit"] = "Debugger disabled during Audit";
    389393localizedStrings["Debugger disabled during Timeline recording"] = "Debugger disabled during Timeline recording";
    … …  
    556560localizedStrings["Events"] = "Events";
    557561localizedStrings["Events:"] = "Events:";
    558 localizedStrings["Example: \u201C%s\u201D"] = "Example: \u201C%s\u201D";
    559562localizedStrings["Exception with thrown value: %s"] = "Exception with thrown value: %s";
    560563localizedStrings["Execution context for %s"] = "Execution context for %s";
    … …  
    880883localizedStrings["Node"] = "Node";
    881884/* A submenu item of 'Break On' that breaks (pauses) before DOM node is removed */
    882 localizedStrings["Node Removed"] = "Node Removed";
     885localizedStrings["Node Removed @ DOM Breakpoint"] = "Node Removed";
    883886localizedStrings["Nodes"] = "Nodes";
    884887localizedStrings["None"] = "None";
    … …  
    12561259localizedStrings["Subject"] = "Subject";
    12571260/* A submenu item of 'Break On' that breaks (pauses) before child DOM node is modified */
    1258 localizedStrings["Subtree Modified"] = "Subtree Modified";
     1261localizedStrings["Subtree Modified @ DOM Breakpoint"] = "Subtree Modified";
    12591262localizedStrings["Summary"] = "Summary";
    12601263/* Label of dropdown item used for forcing Web Inspector to be shown using the system's theme */
    … …  
    13781381localizedStrings["Unblackbox script to include it when debugging"] = "Unblackbox script to include it when debugging";
    13791382/* Break (pause) on uncaught (unhandled) exceptions */
    1380 localizedStrings["Uncaught Exceptions"] = "Uncaught Exceptions";
     1383localizedStrings["Uncaught Exceptions @ JavaScript Breakpoint"] = "Uncaught Exceptions";
    13811384localizedStrings["Undefined custom element"] = "Undefined custom element";
    13821385localizedStrings["Unique"] = "Unique";

  • trunk/Source/WebInspectorUI/UserInterface/Base/LoadLocalizedStrings.js

    r265675 r266480  
    8888};
    8989
     90WI.repeatedUIString.debuggerStatements = function() {
     91    return WI.UIString("Debugger Statements", "Debugger Statements @ JavaScript Breakpoint", "Break (pause) on debugger statements");
     92};
     93
    9094WI.repeatedUIString.allExceptions = function() {
    91     return WI.UIString("All Exceptions", "Break (pause) on all exceptions");
     95    return WI.UIString("All Exceptions", "All Exceptions @ JavaScript Breakpoint", "Break (pause) on all exceptions");
    9296};
    9397
    9498WI.repeatedUIString.uncaughtExceptions = function() {
    95     return WI.UIString("Uncaught Exceptions", "Break (pause) on uncaught (unhandled) exceptions");
     99    return WI.UIString("Uncaught Exceptions", "Uncaught Exceptions @ JavaScript Breakpoint", "Break (pause) on uncaught (unhandled) exceptions");
    96100};
    97101
    98102WI.repeatedUIString.assertionFailures = function() {
    99     return WI.UIString("Assertion Failures", "Break (pause) when console.assert() fails");
     103    return WI.UIString("Assertion Failures", "Assertion Failures @ JavaScript Breakpoint", "Break (pause) when console.assert() fails");
     104};
     105
     106WI.repeatedUIString.allMicrotasks = function() {
     107    return WI.UIString("All Microtasks", "All Microtasks @ JavaScript Breakpoint", "Break (pause) on all microtasks");
     108};
     109
     110WI.repeatedUIString.allAnimationFrames = function() {
     111    return WI.UIString("All Animation Frames", "All Animation Frames @ Event Breakpoint", "Break (pause) on All animation frames");
     112};
     113
     114WI.repeatedUIString.allIntervals = function() {
     115    return WI.UIString("All Intervals", "All Intervals @ Event Breakpoint", "Break (pause) on all intervals");
     116};
     117
     118WI.repeatedUIString.allEvents = function() {
     119    return WI.UIString("All Events", "All Events @ Event Breakpoint", "Break (pause) on all events");
     120};
     121
     122WI.repeatedUIString.allTimeouts = function() {
     123    return WI.UIString("All Timeouts", "All Timeouts @ Event Breakpoint", "Break (pause) on all timeouts");
    100124};
    101125

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r266076 r266480  
    278278    WI.consoleContentView = WI.consoleDrawer.contentViewForRepresentedObject(WI._consoleRepresentedObject);
    279279    WI.consoleLogViewController = WI.consoleContentView.logViewController;
    280     WI.breakpointPopoverController = new WI.BreakpointPopoverController;
    281280
    282281    // FIXME: The sidebars should be flipped in RTL languages.

  • trunk/Source/WebInspectorUI/UserInterface/Base/ReferencePage.js

    r266479 r266480  
    11/*
    2  * Copyright (C) 2018 Apple Inc. All rights reserved.
     2 * Copyright (C) 2020 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .popover .event-breakpoint-content {
    27     margin: 2px;
    28     padding: 5px;
    29 }
    30 
    31 .popover .event-breakpoint-content > input {
    32     margin-top: 4px;
    33     font-family: Menlo, monospace;
    34     text-align: left;
    35 }
    36 
    37 .popover .event-breakpoint-content > input::placeholder {
    38     font-family: system-ui;
    39 }
    40 
    41 .popover .event-breakpoint-content .reference-page-link-container {
    42     -webkit-margin-start: 0.5em;
    43     vertical-align: -1px;
    44 }
     26WI.ReferencePage = {
     27    DOMBreakpoints: "dom-breakpoints",
     28    EventBreakpoints: "event-breakpoints",
     29    JavaScriptBreakpoints: "javascript-breakpoints",
     30    URLBreakpoints: "url-breakpoints",
     31};

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r266317 r266480  
    4646    <link rel="stylesheet" href="Views/BoxShadowEditor.css">
    4747    <link rel="stylesheet" href="Views/BreakpointActionView.css">
    48     <link rel="stylesheet" href="Views/BreakpointPopoverController.css">
     48    <link rel="stylesheet" href="Views/BreakpointPopover.css">
    4949    <link rel="stylesheet" href="Views/BreakpointTreeElement.css">
    5050    <link rel="stylesheet" href="Views/ButtonNavigationItem.css">
    … …  
    294294    <script src="Base/Multimap.js"></script>
    295295    <script src="Base/Object.js"></script>
     296    <script src="Base/ReferencePage.js"></script>
    296297    <script src="Base/TargetType.js"></script>
    297298    <script src="Base/Throttler.js"></script>
    … …  
    614615    <script src="Views/BoxShadowEditor.js"></script>
    615616    <script src="Views/BreakpointActionView.js"></script>
     617    <script src="Views/BreakpointPopover.js"></script>
    616618    <script src="Views/BreakpointTreeElement.js"></script>
    617619    <script src="Views/CPUTimelineOverviewGraph.js"></script>
    … …  
    862864    <script src="Controllers/BasicBlockAnnotator.js"></script>
    863865    <script src="Controllers/BreakpointLogMessageLexer.js"></script>
    864     <script src="Controllers/BreakpointPopoverController.js"></script>
    865866    <script src="Controllers/BrowserManager.js"></script>
    866867    <script src="Controllers/CSSManager.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Models/Breakpoint.js

    r266074 r266480  
    2626WI.Breakpoint = class Breakpoint extends WI.Object
    2727{
    28     constructor({disabled, condition, ignoreCount, autoContinue} = {})
     28    constructor({disabled, condition, actions, ignoreCount, autoContinue} = {})
    2929    {
    3030        console.assert(!disabled || typeof disabled === "boolean", disabled);
    3131        console.assert(!condition || typeof condition === "string", condition);
     32        console.assert(!actions || Array.isArray(actions), actions);
    3233        console.assert(!ignoreCount || !isNaN(ignoreCount), ignoreCount);
    3334        console.assert(!autoContinue || typeof autoContinue === "boolean", autoContinue);
    … …  
    3738        // This class should not be instantiated directly. Create a concrete subclass instead.
    3839        console.assert(this.constructor !== WI.Breakpoint && this instanceof WI.Breakpoint);
     40        console.assert(this.constructor.ReferencePage, "Should have a link to a reference page.");
    3941
    4042        this._disabled = disabled || false;
    … …  
    4244        this._ignoreCount = ignoreCount || 0;
    4345        this._autoContinue = autoContinue || false;
    44         this._actions = [];
     46        this._actions = actions || [];
     47
     48        for (let action of this._actions) {
     49            action.addEventListener(WI.BreakpointAction.Event.DataChanged, this._handleBreakpointActionChanged, this);
     50            action.addEventListener(WI.BreakpointAction.Event.TypeChanged, this._handleBreakpointActionChanged, this);
     51        }
    4552    }
    4653
    … …  
    6774    // Public
    6875
     76    get displayName()
     77    {
     78        throw WI.NotImplementedError.subclassMustOverride();
     79    }
     80
    6981    get special()
    7082    {
    … …  
    203215    }
    204216
    205     createAction(type, {data, precedingAction} = {})
    206     {
    207         console.assert(this.editable, this);
    208 
    209         var newAction = new WI.BreakpointAction(this, type, data || null);
     217    addAction(action, {precedingAction} = {})
     218    {
     219        console.assert(this.editable, this);
     220        console.assert(action instanceof WI.BreakpointAction, action);
     221
     222        action.addEventListener(WI.BreakpointAction.Event.DataChanged, this._handleBreakpointActionChanged, this);
     223        action.addEventListener(WI.BreakpointAction.Event.TypeChanged, this._handleBreakpointActionChanged, this);
    210224
    211225        if (!precedingAction)
    212             this._actions.push(newAction);
     226            this._actions.push(action);
    213227        else {
    214228            var index = this._actions.indexOf(precedingAction);
    215229            console.assert(index !== -1);
    216230            if (index === -1)
    217                 this._actions.push(newAction);
     231                this._actions.push(action);
    218232            else
    219                 this._actions.splice(index + 1, 0, newAction);
     233                this._actions.splice(index + 1, 0, action);
    220234        }
    221235
    222236        this.dispatchEventToListeners(WI.Breakpoint.Event.ActionsDidChange);
    223 
    224         return newAction;
    225     }
    226 
    227     recreateAction(type, actionToReplace)
    228     {
    229         console.assert(this.editable, this);
    230 
    231         let index = this._actions.indexOf(actionToReplace);
    232         console.assert(index !== -1);
    233         if (index === -1)
    234             return null;
    235 
    236         const data = null;
    237         let action = new WI.BreakpointAction(this, type, data);
    238         this._actions[index] = action;
    239 
    240         this.dispatchEventToListeners(WI.Breakpoint.Event.ActionsDidChange);
    241 
    242         return action;
    243237    }
    244238
    … …  
    246240    {
    247241        console.assert(this.editable, this);
     242        console.assert(action instanceof WI.BreakpointAction, action);
    248243
    249244        var index = this._actions.indexOf(action);
    … …  
    253248
    254249        this._actions.splice(index, 1);
     250
     251        action.removeEventListener(WI.BreakpointAction.Event.DataChanged, this._handleBreakpointActionChanged, this);
     252        action.removeEventListener(WI.BreakpointAction.Event.TypeChanged, this._handleBreakpointActionChanged, this);
    255253
    256254        if (!this._actions.length)
    … …  
    324322    }
    325323
    326     // Protected (Called by BreakpointAction)
    327 
    328     breakpointActionDidChange(action)
    329     {
    330         console.assert(this.editable, this);
    331 
    332         var index = this._actions.indexOf(action);
    333         console.assert(index !== -1);
    334         if (index === -1)
    335             return;
     324    // Private
     325
     326    _handleBreakpointActionChanged(event)
     327    {
     328        console.assert(this.editable, this);
    336329
    337330        this.dispatchEventToListeners(WI.Breakpoint.Event.ActionsDidChange);

  • trunk/Source/WebInspectorUI/UserInterface/Models/BreakpointAction.js

    r266074 r266480  
    2424 */
    2525
    26 WI.BreakpointAction = class BreakpointAction
     26WI.BreakpointAction = class BreakpointAction extends WI.Object
    2727{
    28     constructor(breakpoint, type, data)
     28    constructor(type, {data} = {})
    2929    {
    30         console.assert(breakpoint instanceof WI.Breakpoint, breakpoint);
    3130        console.assert(Object.values(WI.BreakpointAction.Type).includes(type), type);
    3231        console.assert(!data || typeof data === "string", data);
    3332
    34         this._breakpoint = breakpoint;
     33        super();
     34
    3535        this._type = type;
    3636        this._data = data || null;
    … …  
    4040    // Import / Export
    4141
    42     static fromJSON(json, breakpoint)
     42    static fromJSON(json)
    4343    {
    44         return new BreakpointAction(breakpoint, json.type, json.data);
     44        return new WI.BreakpointAction(json.type, {
     45            data: json.data,
     46        });
    4547    }
    4648
    … …  
    5759    // Public
    5860
    59     get breakpoint() { return this._breakpoint; }
    6061    get id() { return this._id; }
    61     get type() { return this._type; }
     62
     63    get type()
     64    {
     65        return this._type;
     66    }
     67
     68    set type(type)
     69    {
     70        console.assert(Object.values(WI.BreakpointAction.Type).includes(type), type);
     71
     72        if (type === this._type)
     73            return;
     74
     75        this._type = type;
     76
     77        this.dispatchEventToListeners(WI.BreakpointAction.Event.TypeChanged);
     78    }
    6279
    6380    get data()
    … …  
    6885    set data(data)
    6986    {
     87        console.assert(!data || typeof data === "string", data);
     88
    7089        if (this._data === data)
    7190            return;
    … …  
    7392        this._data = data;
    7493
    75         this._breakpoint.breakpointActionDidChange(this);
     94        this.dispatchEventToListeners(WI.BreakpointAction.Event.DataChanged);
    7695    }
    7796
    … …  
    90109    Probe: "probe"
    91110};
     111
     112WI.BreakpointAction.Event = {
     113    DataChanged: "breakpoint-action-data-changed",
     114    TypeChanged: "breakpoint-action-type-changed",
     115};

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMBreakpoint.js

    r266074 r266480  
    4949    // Static
    5050
     51    static displayNameForType(type)
     52    {
     53        console.assert(Object.values(WI.DOMBreakpoint.Type).includes(type), type);
     54
     55        switch (type) {
     56        case WI.DOMBreakpoint.Type.SubtreeModified:
     57            return WI.UIString("Subtree Modified", "Subtree Modified @ DOM Breakpoint", "A submenu item of 'Break On' that breaks (pauses) before child DOM node is modified");
     58
     59        case WI.DOMBreakpoint.Type.AttributeModified:
     60            return WI.UIString("Attribute Modified", "Attribute Modified @ DOM Breakpoint", "A submenu item of 'Break On' that breaks (pauses) before DOM attribute is modified");
     61
     62        case WI.DOMBreakpoint.Type.NodeRemoved:
     63            return WI.UIString("Node Removed", "Node Removed @ DOM Breakpoint", "A submenu item of 'Break On' that breaks (pauses) before DOM node is removed");
     64        }
     65
     66        console.error();
     67        return WI.UIString("DOM");
     68    }
     69
    5170    static fromJSON(json)
    5271    {
    … …  
    6180    get url() { return this._url; }
    6281    get path() { return this._path; }
     82
     83    get displayName()
     84    {
     85        return WI.DOMBreakpoint.displayNameForType(this._type);
     86    }
    6387
    6488    get domNodeIdentifier()
    … …  
    116140    DOMNodeChanged: "dom-breakpoint-dom-node-changed",
    117141};
     142
     143WI.DOMBreakpoint.ReferencePage = WI.ReferencePage.DOMBreakpoints;

  • trunk/Source/WebInspectorUI/UserInterface/Models/EventBreakpoint.js

    r266074 r266480  
    5454    // Static
    5555
     56    static get supportsEditing()
     57    {
     58        if (this._eventListener) {
     59            // COMPATIBILITY (iOS 14): DOM.setBreakpointForEventListener did not have an "options" parameter yet.
     60            return InspectorBackend.hasCommand("DOM.setBreakpointForEventListener", "options");
     61        }
     62
     63        // COMPATIBILITY (iOS 14): DOMDebugger.setEventBreakpoint did not have an "options" parameter yet.
     64        return InspectorBackend.hasCommand("DOMDebugger.setEventBreakpoint", "options");
     65    }
     66
    5667    static fromJSON(json)
    5768    {
    58         let breakpoint = new WI.EventBreakpoint(json.type, {
     69        return new WI.EventBreakpoint(json.type, {
    5970            eventName: json.eventName,
    6071            disabled: json.disabled,
    6172            condition: json.condition,
     73            actions: json.actions?.map((actionJSON) => WI.BreakpointAction.fromJSON(actionJSON)) || [],
    6274            ignoreCount: json.ignoreCount,
    6375            autoContinue: json.autoContinue,
    6476        });
    65         breakpoint._actions = json.actions?.map((actionJSON) => WI.BreakpointAction.fromJSON(actionJSON, breakpoint)) || [];
    66         return breakpoint;
    6777    }
    6878
    … …  
    7282    get eventName() { return this._eventName; }
    7383    get eventListener() { return this._eventListener; }
     84
     85    get displayName()
     86    {
     87        switch (this) {
     88        case WI.domDebuggerManager.allAnimationFramesBreakpoint:
     89            return WI.repeatedUIString.allAnimationFrames();
     90
     91        case WI.domDebuggerManager.allIntervalsBreakpoint:
     92            return WI.repeatedUIString.allIntervals();
     93
     94        case WI.domDebuggerManager.allListenersBreakpoint:
     95            return WI.repeatedUIString.allEvents();
     96
     97        case WI.domDebuggerManager.allTimeoutsBreakpoint:
     98            return WI.repeatedUIString.allTimeouts();
     99        }
     100
     101        return this._eventName;
     102    }
    74103
    75104    get special()
    … …  
    88117    get editable()
    89118    {
    90         // COMPATIBILITY (iOS 14): DOM.setBreakpointForEventListener did not have an "options" parameter yet.
    91         // COMPATIBILITY (iOS 14): DOMDebugger.setEventBreakpoint did not have an "options" parameter yet.
    92         return (this._eventListener ? InspectorBackend.hasCommand("DOM.setBreakpointForEventListener", "options") : InspectorBackend.hasCommand("DOMDebugger.setEventBreakpoint", "options")) || super.editable;
     119        return WI.EventBreakpoint.editable || super.editable;
    93120    }
    94121
    … …  
    130157    Timeout: "timeout",
    131158};
     159
     160WI.EventBreakpoint.ReferencePage = WI.ReferencePage.EventBreakpoints;

  • trunk/Source/WebInspectorUI/UserInterface/Models/JavaScriptBreakpoint.js

    r266193 r266480  
    5757    {
    5858        const sourceCode = null;
    59         let breakpoint = new WI.JavaScriptBreakpoint(new WI.SourceCodeLocation(sourceCode, json.lineNumber || 0, json.columnNumber || 0), {
     59        return new WI.JavaScriptBreakpoint(new WI.SourceCodeLocation(sourceCode, json.lineNumber || 0, json.columnNumber || 0), {
    6060            // The 'url' fallback is for transitioning from older frontends and should be removed.
    6161            contentIdentifier: json.contentIdentifier || json.url,
    6262            disabled: json.disabled,
    6363            condition: json.condition,
     64            actions: json.actions?.map((actionJSON) => WI.BreakpointAction.fromJSON(actionJSON)) || [],
    6465            ignoreCount: json.ignoreCount,
    6566            autoContinue: json.autoContinue,
    6667        });
    67         breakpoint._actions = json.actions?.map((actionJSON) => WI.BreakpointAction.fromJSON(actionJSON, breakpoint)) || [];
    68         return breakpoint;
    6968    }
    7069
    … …  
    8887    get target() { return this._target; }
    8988
     89    get displayName()
     90    {
     91        switch (this) {
     92        case WI.debuggerManager.debuggerStatementsBreakpoint:
     93            return WI.repeatedUIString.debuggerStatements();
     94
     95        case WI.debuggerManager.allExceptionsBreakpoint:
     96            return WI.repeatedUIString.allExceptions();
     97
     98        case WI.debuggerManager.uncaughtExceptionsBreakpoint:
     99            return WI.repeatedUIString.uncaughtExceptions();
     100
     101        case WI.debuggerManager.assertionFailuresBreakpoint:
     102            return WI.repeatedUIString.assertionFailures();
     103
     104        case WI.debuggerManager.allMicrotasksBreakpoint:
     105            return WI.repeatedUIString.allMicrotasks();
     106        }
     107
     108        return this._sourceCodeLocation.displayLocationString()
     109    }
     110
    90111    get special()
    91112    {
    … …  
    194215    DisplayLocationDidChange: "javascript-breakpoint-display-location-did-change",
    195216};
     217
     218WI.JavaScriptBreakpoint.ReferencePage = WI.ReferencePage.JavaScriptBreakpoints;

  • trunk/Source/WebInspectorUI/UserInterface/Models/ProbeSet.js

    r266074 r266480  
    6969    createProbe(expression)
    7070    {
    71         this.breakpoint.createAction(WI.BreakpointAction.Type.Probe, {data: expression});
     71        this._breakpoint.addAction(new WI.BreakpointAction(WI.BreakpointAction.Type.Probe, {data: expression}));
    7272    }
    7373

  • trunk/Source/WebInspectorUI/UserInterface/Models/URLBreakpoint.js

    r266074 r266480  
    5151    get url() { return this._url; }
    5252
     53    get displayName()
     54    {
     55        if (this === WI.domDebuggerManager.allRequestsBreakpoint)
     56            return WI.repeatedUIString.allRequests();
     57
     58        switch (this._type) {
     59        case WI.URLBreakpoint.Type.Text:
     60            return doubleQuotedString(this._url);
     61
     62        case WI.URLBreakpoint.Type.RegularExpression:
     63            return "/" + this._url + "/";
     64        }
     65
     66        console.assert();
     67        return WI.UIString("URL");
     68    }
     69
    5370    get special()
    5471    {
    … …  
    84101    RegularExpression: "regex",
    85102};
     103
     104WI.URLBreakpoint.ReferencePage = WI.ReferencePage.URLBreakpoints;

  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r266074 r266480  
    4444    <script src="Base/Multimap.js"></script>
    4545    <script src="Base/Object.js"></script>
     46    <script src="Base/ReferencePage.js"></script>
    4647    <script src="Base/TargetType.js"></script>
    4748    <script src="Base/Throttler.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js

    r266074 r266480  
    2626WI.BreakpointActionView = class BreakpointActionView extends WI.Object
    2727{
    28     constructor(action, delegate, omitFocus)
     28    constructor(action, delegate, {omitFocus} = {})
    2929    {
    3030        super();
    … …  
    108108    _pickerChanged(event)
    109109    {
    110         var newType = event.target.value;
    111         this._action = this._action.breakpoint.recreateAction(newType, this._action);
     110        this._action.type = event.target.value;
    112111        this._updateBody();
    113112        this._delegate.breakpointActionViewResized(this);
    … …  
    116115    _appendActionButtonClicked(event)
    117116    {
    118         var newAction = this._action.breakpoint.createAction(this._action.type, {precedingAction: this._action});
    119         this._delegate.breakpointActionViewAppendActionView(this, newAction);
     117        this._delegate.breakpointActionViewAppendActionView(this, new WI.BreakpointAction(this._action.type));
    120118    }
    121119
    122120    _removeAction()
    123121    {
    124         this._action.breakpoint.removeAction(this._action);
    125122        this._delegate.breakpointActionViewRemoveActionView(this);
    126123    }
    … …  
    136133            var input = this._bodyElement.appendChild(document.createElement("input"));
    137134            input.placeholder = WI.UIString("Message");
    138             input.addEventListener("change", this._logInputChanged.bind(this));
     135            input.addEventListener("input", this._handleLogInputInput.bind(this));
    139136            input.value = this._action.data || "";
    140137            input.spellcheck = false;
    … …  
    164161
    165162            this._codeMirror.on("viewportChange", this._codeMirrorViewportChanged.bind(this));
    166             this._codeMirror.on("blur", this._codeMirrorBlurred.bind(this));
     163            this._codeMirror.on("change", this._handleJavaScriptCodeMirrorChange.bind(this));
    167164
    168165            this._codeMirrorViewport = {from: null, to: null};
    … …  
    171168            completionController.addExtendedCompletionProvider("javascript", WI.javaScriptRuntimeCompletionProvider);
    172169
    173             // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
     170            // CodeMirror needs a refresh after the popover displays to layout otherwise it doesn't appear.
    174171            setTimeout(() => {
    175172                this._codeMirror.refresh();
    … …  
    191188    }
    192189
    193     _logInputChanged(event)
     190    _handleLogInputInput(event)
    194191    {
    195192        this._action.data = event.target.value;
    196193    }
    197194
    198     _codeMirrorBlurred(event)
     195    _handleJavaScriptCodeMirrorChange(event)
    199196    {
    200197        // Throw away the expression if it's just whitespace.
    201         this._action.data = (this._codeMirror.getValue() || "").trim();
     198        this._action.data = this._codeMirror.getValue().trim();
    202199    }
    203200

  • trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopover.css

    r266479 r266480  
    2525
    2626.popover .edit-breakpoint-popover-content {
    27     width: 420px;
     27    position: relative;
     28    max-width: 420px;
    2829    padding: 5px 15px;
    2930}
    3031
    3132.popover .edit-breakpoint-popover-content.wide {
    32     width: 460px;
     33    max-width: 460px;
    3334}
    3435
    … …  
    5657}
    5758
    58 .popover .edit-breakpoint-popover-content > table > tr > td.options {
    59     position: relative;
    60 }
    61 
    62 .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container {
    63     position: absolute;
    64 }
    65 
    66 body[dir=ltr] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container {
    67     right: 0;
    68 }
    69 
    70 body[dir=rtl] .popover .edit-breakpoint-popover-content > table > tr > td.options > .reference-page-link-container {
    71     left: 0;
    72 }
    73 
    74 body[dir=ltr] .popover .edit-breakpoint-popover-content .reference-page-link-container {
    75     float: right;
    76 }
    77 
    78 body[dir=rtl] .popover .edit-breakpoint-popover-content .reference-page-link-container {
    79     float: left;
    80 }
    81 
    82 .edit-breakpoint-popover-condition {
     59.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor {
    8360    width: 100%;
    8461    padding: 4px 0 2px;
    … …  
    8865}
    8966
    90 .edit-breakpoint-popover-condition > .CodeMirror {
     67.popover .edit-breakpoint-popover-content > table > tr.condition > td > .editor > .CodeMirror {
    9168    width: 320px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content width. */
    9269    height: auto;
    9370}
    9471
    95 .wide .edit-breakpoint-popover-condition > .CodeMirror {
     72.popover .edit-breakpoint-popover-content.wide .condition > .CodeMirror {
    9673    width: 360px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content width. */
    9774}
    9875
    99 #edit-breakpoint-popover-ignore {
     76.popover .edit-breakpoint-popover-content input#edit-breakpoint-popover-ignore-count {
    10077    width: 40px;
    10178}
    10279
    103 #edit-breakpoint-popover-ignore,
    104 #edit-breakpoint-popover-auto-continue {
     80.popover .edit-breakpoint-popover-content input:is(#edit-breakpoint-popover-ignore-count, #edit-breakpoint-popover-auto-continue) {
    10581    -webkit-margin-start: 0;
    10682    -webkit-margin-end: 4px;
     83}
     84
     85.popover .edit-breakpoint-popover-content > .reference-page-link-container {
     86    position: absolute;
     87    bottom: 0.9em;
     88}
     89
     90body[dir=ltr] .popover .edit-breakpoint-popover-content > .reference-page-link-container {
     91    right: 1.5em;
     92}
     93
     94body[dir=rtl] .popover .edit-breakpoint-popover-content > .reference-page-link-container {
     95    left: 1.5em;
    10796}
    10897

  • trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js

    r266074 r266480  
    125125    populateContextMenu(contextMenu, event)
    126126    {
    127         WI.breakpointPopoverController.appendContextMenuItems(contextMenu, this._breakpoint, this.status);
     127        WI.BreakpointPopover.appendContextMenuItems(contextMenu, this._breakpoint, this.status);
    128128
    129129        super.populateContextMenu(contextMenu, event);

  • trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js

    r266074 r266480  
    395395
    396396    for (let type of Object.values(WI.DOMBreakpoint.Type)) {
    397         let label = WI.DOMBreakpointTreeElement.displayNameForType(type);
     397        let label = WI.DOMBreakpoint.displayNameForType(type);
    398398        let breakpoint = breakpoints.find((breakpoint) => breakpoint.type === type);
    399399

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js

    r266074 r266480  
    3535
    3636        if (!title)
    37             title = WI.DOMBreakpointTreeElement.displayNameForType(breakpoint.type);
     37            title = breakpoint.displayName;
    3838
    3939        super(breakpoint, {classNames, title});
    4040    }
    41 
    42     // Static
    43 
    44     static displayNameForType(type)
    45     {
    46         switch (type) {
    47         case WI.DOMBreakpoint.Type.SubtreeModified:
    48             return WI.UIString("Subtree Modified", "A submenu item of 'Break On' that breaks (pauses) before child DOM node is modified");
    49         case WI.DOMBreakpoint.Type.AttributeModified:
    50             return WI.UIString("Attribute Modified", "A submenu item of 'Break On' that breaks (pauses) before DOM attribute is modified");
    51         case WI.DOMBreakpoint.Type.NodeRemoved:
    52             return WI.UIString("Node Removed", "A submenu item of 'Break On' that breaks (pauses) before DOM node is removed");
    53         default:
    54             console.error("Unexpected DOM breakpoint type: " + type);
    55             return null;
    56         }
    57     }
    5841};

  • trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css

    r254730 r266480  
    2424 */
    2525
    26 .popover .event-breakpoint-content {
    27     margin: 2px;
    28     padding: 5px;
     26.popover .edit-breakpoint-popover-content .event input {
     27    width: -webkit-fill-available;
     28    margin: 0;
     29    font-family: Menlo, monospace;
    2930}
    3031
    31 .popover .event-breakpoint-content > input {
    32     margin-top: 4px;
    33     font-family: Menlo, monospace;
    34     text-align: left;
     32.popover .edit-breakpoint-popover-content .event:last-child input {
     33    margin-inline-end: calc(var(--reference-page-link-size) + 4px);
    3534}
    3635
    37 .popover .event-breakpoint-content > input::placeholder {
     36.popover .edit-breakpoint-popover-content .event input::placeholder {
    3837    font-family: system-ui;
    3938}
    40 
    41 .popover .event-breakpoint-content .reference-page-link-container {
    42     -webkit-margin-start: 0.5em;
    43     vertical-align: -1px;
    44 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js

    r254730 r266480  
    2424 */
    2525
    26 WI.EventBreakpointPopover = class EventBreakpointPopover extends WI.Popover
     26WI.EventBreakpointPopover = class EventBreakpointPopover extends WI.BreakpointPopover
    2727{
    28     constructor(delegate)
     28    constructor(delegate, breakpoint)
    2929    {
    30         super(delegate);
     30        console.assert(!breakpoint || breakpoint instanceof WI.EventBreakpoint, breakpoint);
    3131
    32         this._breakpoint = null;
     32        super(delegate, breakpoint);
    3333
    34         this._currentCompletions = [];
    35         this._suggestionsView = new WI.CompletionSuggestionsView(this, {preventBlur: true});
     34        this._currentEventNameCompletions = [];
     35        this._eventNameSuggestionsView = new WI.CompletionSuggestionsView(this, {preventBlur: true});
     36    }
    3637
    37         this._targetElement = null;
    38         this._preferredEdges = null;
     38    // Static
    3939
    40         this.windowResizeHandler = this._presentOverTargetElement.bind(this);
     40    static get supportsEditing()
     41    {
     42        return WI.EventBreakpoint.supportsEditing;
    4143    }
    4244
    4345    // Public
    4446
    45     get breakpoint() { return this._breakpoint; }
    46 
    47     show(targetElement, preferredEdges)
    48     {
    49         this._targetElement = targetElement;
    50         this._preferredEdges = preferredEdges;
    51 
    52         let contentElement = document.createElement("div");
    53         contentElement.classList.add("event-breakpoint-content");
    54 
    55         let label = contentElement.appendChild(document.createElement("div"));
    56         label.classList.add("label");
    57         label.textContent = WI.UIString("Break on events with name:");
    58 
    59         this._domEventNameInputElement = contentElement.appendChild(document.createElement("input"));
    60         this._domEventNameInputElement.setAttribute("dir", "ltr");
    61         this._domEventNameInputElement.placeholder = WI.UIString("Example: \u201C%s\u201D").format("click");
    62         this._domEventNameInputElement.spellcheck = false;
    63         this._domEventNameInputElement.addEventListener("keydown", (event) => {
    64             if (isEnterKey(event) || event.key === "Tab") {
    65                 this._result = WI.InputPopover.Result.Committed;
    66 
    67                 if (this._suggestionsView.visible && this._suggestionsView.selectedIndex < this._currentCompletions.length)
    68                     this._domEventNameInputElement.value = this._currentCompletions[this._suggestionsView.selectedIndex];
    69 
    70                 this.dismiss();
    71             } else if ((event.key === "ArrowUp" || event.key === "ArrowDown") && this._suggestionsView.visible) {
    72                 event.stop();
    73 
    74                 if (event.key === "ArrowDown")
    75                     this._suggestionsView.selectNext();
    76                 else
    77                     this._suggestionsView.selectPrevious();
    78             }
    79         });
    80         this._domEventNameInputElement.addEventListener("input", (event) => {
    81             WI.domManager.getSupportedEventNames()
    82             .then((eventNames) => {
    83                 this._currentCompletions = [];
    84                 for (let eventName of eventNames) {
    85                     if (eventName.toLowerCase().startsWith(this._domEventNameInputElement.value.toLowerCase()))
    86                         this._currentCompletions.push(eventName);
    87                 }
    88 
    89                 if (!this._currentCompletions.length) {
    90                     this._suggestionsView.hide();
    91                     return;
    92                 }
    93 
    94                 this._suggestionsView.update(this._currentCompletions);
    95                 this._showSuggestionsView();
    96             });
    97         });
    98 
    99         contentElement.appendChild(WI.createReferencePageLink("event-breakpoints", "global-event-breakpoints"));
    100 
    101         this.content = contentElement;
    102 
    103         this._presentOverTargetElement();
    104 
    105         this._domEventNameInputElement.select();
    106     }
    107 
    10847    dismiss()
    10948    {
    110         let eventName = this._domEventNameInputElement.value;
    111         if (eventName)
    112             this._breakpoint = new WI.EventBreakpoint(WI.EventBreakpoint.Type.Listener, {eventName});
    113 
    114         this._suggestionsView.hide();
     49        this._eventNameSuggestionsView.hide();
    11550
    11651        super.dismiss();
    … …  
    12661    }
    12762
     63    // Protected
     64
     65    populateContent()
     66    {
     67        let eventLabelElement = document.createElement("label");
     68        eventLabelElement.textContent = WI.UIString("Event");
     69
     70        this._domEventNameInputElement = document.createElement("input");
     71        this._domEventNameInputElement.id = "edit-breakpoint-popover-content-event-name";
     72        this._domEventNameInputElement.setAttribute("dir", "ltr");
     73        this._domEventNameInputElement.spellcheck = false;
     74        this._domEventNameInputElement.addEventListener("keydown", this._handleEventInputKeydown.bind(this));
     75        this._domEventNameInputElement.addEventListener("input", this._handleEventInputInput.bind(this));
     76        this._domEventNameInputElement.addEventListener("blur", this._handleEventInputBlur.bind(this));
     77
     78        eventLabelElement.setAttribute("for", this._domEventNameInputElement.id);
     79
     80        this.addRow("event", eventLabelElement, this._domEventNameInputElement);
     81
     82        // Focus the event name input after the popover is shown.
     83        setTimeout(() => {
     84            this._domEventNameInputElement.focus();
     85        });
     86    }
     87
     88    createBreakpoint(options = {})
     89    {
     90        console.assert(!options.eventName, options);
     91        options.eventName = this._domEventNameInputElement.value;
     92        if (!options.eventName)
     93            return null;
     94
     95        return new WI.EventBreakpoint(WI.EventBreakpoint.Type.Listener, options);
     96    }
     97
    12898    // Private
    129 
    130     _presentOverTargetElement()
    131     {
    132         if (!this._targetElement)
    133             return;
    134 
    135         let targetFrame = WI.Rect.rectFromClientRect(this._targetElement.getBoundingClientRect());
    136         this.present(targetFrame, this._preferredEdges);
    137     }
    13899
    139100     _showSuggestionsView()
    … …  
    145106        rect.origin.x += padding;
    146107        rect.size.width -= padding + parseInt(computedStyle.borderRightWidth) + parseInt(computedStyle.paddingRight);
    147         this._suggestionsView.show(rect.pad(2));
     108        this._eventNameSuggestionsView.show(rect.pad(2));
    148109     }
     110
     111    _handleEventInputKeydown(event)
     112    {
     113        let shouldDismiss = isEnterKey(event);
     114
     115        if (shouldDismiss || (event.key === "Tab" && this._eventNameSuggestionsView.visible)) {
     116            if (this._eventNameSuggestionsView.visible && this._eventNameSuggestionsView.selectedIndex < this._currentEventNameCompletions.length)
     117                this._domEventNameInputElement.value = this._currentEventNameCompletions[this._eventNameSuggestionsView.selectedIndex];
     118        } else if ((event.key === "ArrowUp" || event.key === "ArrowDown") && this._eventNameSuggestionsView.visible) {
     119            event.stop();
     120
     121            if (event.key === "ArrowDown")
     122                this._eventNameSuggestionsView.selectNext();
     123            else
     124                this._eventNameSuggestionsView.selectPrevious();
     125        }
     126
     127        if (shouldDismiss)
     128            this.dismiss();
     129    }
     130
     131    _handleEventInputInput(event)
     132    {
     133        let eventName = this._domEventNameInputElement.value.toLowerCase();
     134
     135        WI.domManager.getSupportedEventNames().then((supportedEventNames) => {
     136            this._currentEventNameCompletions = [];
     137            for (let supportedEventName of supportedEventNames) {
     138                if (supportedEventName.toLowerCase().startsWith(eventName))
     139                    this._currentEventNameCompletions.push(supportedEventName);
     140            }
     141
     142            if (!this._currentEventNameCompletions.length || (this._currentEventNameCompletions.length === 1 && this._currentEventNameCompletions[0].toLowerCase() === eventName)) {
     143                this._eventNameSuggestionsView.hide();
     144                return;
     145            }
     146
     147            this._eventNameSuggestionsView.update(this._currentEventNameCompletions);
     148            this._showSuggestionsView();
     149        });
     150    }
     151
     152    _handleEventInputBlur(event)
     153    {
     154        this._eventNameSuggestionsView.hide();
     155    }
    149156};
     157
     158WI.EventBreakpointPopover.ReferencePage = WI.ReferencePage.EventBreakpoints;

  • trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js

    r266074 r266480  
    3535
    3636        if (!title)
    37             title = breakpoint.eventName;
     37            title = breakpoint.displayName;
    3838
    3939        super(breakpoint, {classNames, title});

  • trunk/Source/WebInspectorUI/UserInterface/Views/JavaScriptBreakpointTreeElement.js

    r266074 r266480  
    3434        classNames.push("javascript");
    3535
     36        if (!title)
     37            title = breakpoint.displayName;
     38
    3639        super(breakpoint, {classNames, title});
    3740
    38         if (!title)
     41        if (!breakpoint.special)
    3942            this.listenerSet.register(breakpoint, WI.JavaScriptBreakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
    4043        this.listenerSet.register(breakpoint, WI.JavaScriptBreakpoint.Event.ResolvedStateDidChange, this.updateStatus);
    … …  
    6366    {
    6467        super.updateTitles();
     68
     69        console.assert(!this.breakpoint.special);
    6570
    6671        let sourceCodeLocation = this.breakpoint.sourceCodeLocation;

  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r266317 r266480  
    464464    justify-content: center;
    465465    align-items: center;
    466     width: 20px;
    467     height: 20px;
     466    width: var(--reference-page-link-size);
     467    height: var(--reference-page-link-size);
    468468    font-size: 14px;
    469469    line-height: 18px;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ProbeSetDetailsSection.js

    r266074 r266480  
    3131        console.assert(probeSet instanceof WI.ProbeSet, "Invalid ProbeSet argument:", probeSet);
    3232
    33         let title = "";
    34         if (probeSet.breakpoint instanceof WI.EventBreakpoint) {
    35             if (probeSet.breakpoint === WI.domDebuggerManager.allAnimationFramesBreakpoint)
    36                 title = WI.UIString("All Animation Frames");
    37             else if (probeSet.breakpoint === WI.domDebuggerManager.allIntervalsBreakpoint)
    38                 title = WI.UIString("All Intervals");
    39             else if (probeSet.breakpoint === WI.domDebuggerManager.allListenersBreakpoint)
    40                 title = WI.UIString("All Events");
    41             else if (probeSet.breakpoint === WI.domDebuggerManager.allTimeoutsBreakpoint)
    42                 title = WI.UIString("All Timeouts");
    43             else
    44                 title = probeSet.breakpoint.eventName;
    45         }
     33        let title = probeSet.breakpoint.displayName;
    4634
    4735        var optionsElement = document.createElement("div");

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js

    r266074 r266480  
    12721272        // Single breakpoint.
    12731273        if (breakpoints.length === 1) {
    1274             WI.breakpointPopoverController.appendContextMenuItems(contextMenu, breakpoints[0], event.target);
     1274            WI.BreakpointPopover.appendContextMenuItems(contextMenu, breakpoints[0], event.target);
    12751275
    12761276            if (!WI.isShowingSourcesTab()) {

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js

    r266074 r266480  
    12701270        };
    12711271
    1272         if (breakpoint === WI.debuggerManager.debuggerStatementsBreakpoint) {
     1272        if (breakpoint === WI.debuggerManager.debuggerStatementsBreakpoint)
    12731273            options.classNames = ["debugger-statement"];
    1274             options.title = WI.UIString("Debugger Statements");
    1275         } else if (breakpoint === WI.debuggerManager.allExceptionsBreakpoint) {
     1274        else if (breakpoint === WI.debuggerManager.allExceptionsBreakpoint)
    12761275            options.classNames = ["exception"];
    1277             options.title = WI.repeatedUIString.allExceptions();
    1278         } else if (breakpoint === WI.debuggerManager.uncaughtExceptionsBreakpoint) {
     1276        else if (breakpoint === WI.debuggerManager.uncaughtExceptionsBreakpoint)
    12791277            options.classNames = ["exception"];
    1280             options.title = WI.repeatedUIString.uncaughtExceptions();
    1281         } else if (breakpoint === WI.debuggerManager.assertionFailuresBreakpoint) {
     1278        else if (breakpoint === WI.debuggerManager.assertionFailuresBreakpoint)
    12821279            options.classNames = ["assertion"];
    1283             options.title = WI.repeatedUIString.assertionFailures();
    1284         } else if (breakpoint === WI.debuggerManager.allMicrotasksBreakpoint) {
     1280        else if (breakpoint === WI.debuggerManager.allMicrotasksBreakpoint)
    12851281            options.classNames = ["microtask"];
    1286             options.title = WI.UIString("All Microtasks");
    1287         } else if (breakpoint instanceof WI.DOMBreakpoint) {
     1282        else if (breakpoint instanceof WI.DOMBreakpoint) {
    12881283            if (!breakpoint.domNodeIdentifier)
    12891284                return null;
    … …  
    12961291            constructor = WI.EventBreakpointTreeElement;
    12971292
    1298             if (breakpoint === WI.domDebuggerManager.allAnimationFramesBreakpoint)
    1299                 options.title = WI.UIString("All Animation Frames");
    1300             else if (breakpoint === WI.domDebuggerManager.allIntervalsBreakpoint)
    1301                 options.title = WI.UIString("All Intervals");
    1302             else if (breakpoint === WI.domDebuggerManager.allListenersBreakpoint)
    1303                 options.title = WI.UIString("All Events");
    1304             else if (breakpoint === WI.domDebuggerManager.allTimeoutsBreakpoint)
    1305                 options.title = WI.UIString("All Timeouts");
    1306             else if (breakpoint.eventListener) {
     1293            if (breakpoint.eventListener) {
    13071294                let eventTargetTreeElement = null;
    13081295                if (breakpoint.eventListener.onWindow) {
    … …  
    13211308                    parentTreeElement = eventTargetTreeElement;
    13221309            }
    1323         } else if (breakpoint instanceof WI.URLBreakpoint) {
     1310        } else if (breakpoint instanceof WI.URLBreakpoint)
    13241311            constructor = WI.URLBreakpointTreeElement;
    1325 
    1326             if (breakpoint === WI.domDebuggerManager.allRequestsBreakpoint)
    1327                 options.title = WI.repeatedUIString.allRequests();
    1328         } else {
     1312        else {
    13291313            let sourceCode = breakpoint.sourceCodeLocation && breakpoint.sourceCodeLocation.displaySourceCode;
    13301314            if (!sourceCode)
    … …  
    16451629            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
    16461630
    1647             let type = WI.DOMBreakpointTreeElement.displayNameForType(domBreakpoint.type);
     1631            let type = WI.DOMBreakpoint.displayNameForType(domBreakpoint.type);
    16481632            let domBreakpointTreeElement = new WI.DOMBreakpointTreeElement(domBreakpoint, {
    16491633                classNames: ["paused"],
    … …  
    20272011            let allMicrotasksBreakpointShown = WI.settings.showAllMicrotasksBreakpoint.value;
    20282012
    2029             contextMenu.appendCheckboxItem(WI.UIString("All Microtasks"), () => {
     2013            contextMenu.appendCheckboxItem(WI.repeatedUIString.allMicrotasks(), () => {
    20302014                if (allMicrotasksBreakpointShown)
    20312015                    WI.debuggerManager.removeBreakpoint(WI.debuggerManager.allMicrotasksBreakpoint);
    … …  
    20472031            }
    20482032
    2049             addToggleForSpecialEventBreakpoint(WI.UIString("All Animation Frames"), WI.domDebuggerManager.allAnimationFramesBreakpoint, WI.EventBreakpoint.Type.AnimationFrame);
    2050             addToggleForSpecialEventBreakpoint(WI.UIString("All Timeouts"), WI.domDebuggerManager.allTimeoutsBreakpoint, WI.EventBreakpoint.Type.Timeout);
    2051             addToggleForSpecialEventBreakpoint(WI.UIString("All Intervals"), WI.domDebuggerManager.allIntervalsBreakpoint, WI.EventBreakpoint.Type.Interval);
     2033            addToggleForSpecialEventBreakpoint(WI.repeatedUIString.allAnimationFrames(), WI.domDebuggerManager.allAnimationFramesBreakpoint, WI.EventBreakpoint.Type.AnimationFrame);
     2034            addToggleForSpecialEventBreakpoint(WI.repeatedUIString.allTimeouts(), WI.domDebuggerManager.allTimeoutsBreakpoint, WI.EventBreakpoint.Type.Timeout);
     2035            addToggleForSpecialEventBreakpoint(WI.repeatedUIString.allIntervals(), WI.domDebuggerManager.allIntervalsBreakpoint, WI.EventBreakpoint.Type.Interval);
    20522036
    20532037            contextMenu.appendSeparator();
    20542038
    20552039            if (WI.DOMDebuggerManager.supportsAllListenersBreakpoint())
    2056                 addToggleForSpecialEventBreakpoint(WI.UIString("All Events"), WI.domDebuggerManager.allListenersBreakpoint, WI.EventBreakpoint.Type.Listener);
     2040                addToggleForSpecialEventBreakpoint(WI.repeatedUIString.allEvents(), WI.domDebuggerManager.allListenersBreakpoint, WI.EventBreakpoint.Type.Listener);
    20572041
    20582042            contextMenu.appendItem(WI.UIString("Event Breakpoint\u2026"), () => {

  • trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css

    r265120 r266480  
    2424 */
    2525
    26 .popover .url-breakpoint-content {
    27     padding: 5px;
    28     margin: 2px;
    29 }
    30 
    31 .popover .url-breakpoint-content > .editor-wrapper {
    32     margin-top: 4px;
    33     display: flex;
    34     flex-direction: row;
    35 }
    36 
    37 .popover .url-breakpoint-content > .editor-wrapper > .editor {
     26.popover .edit-breakpoint-popover-content .url .editor {
    3827    width: 180px;
    39     -webkit-margin-start: 4px;
    4028    padding: 4px 0 2px;
    4129    -webkit-appearance: textfield;
    … …  
    4432}
    4533
    46 .popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror {
     34.popover .edit-breakpoint-popover-content .url:last-child .editor {
     35    margin-inline-end: calc(var(--reference-page-link-size) + 4px);
     36}
     37
     38
     39.popover .edit-breakpoint-popover-content .url .editor > .CodeMirror {
    4740    width: calc(100% - 2px);
    4841    height: auto;
    4942}
    5043
    51 .popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror-scroll {
     44.popover .edit-breakpoint-popover-content .url .editor > .CodeMirror-scroll {
    5245    width: calc(100% - 2px);
    5346    overflow: hidden;
    5447}
    5548
    56 .popover .url-breakpoint-content .reference-page-link-container {
    57     -webkit-margin-start: 0.5em;
    58     vertical-align: -1px;
    59 }
    60 
    6149@media (prefers-color-scheme: dark) {
    62     .popover .url-breakpoint-content > .editor-wrapper > .editor {
     50    .popover .edit-breakpoint-popover-content .url .editor {
    6351        -webkit-appearance: unset;
    6452        border-color: var(--text-color-quaternary);

  • trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.js

    r254730 r266480  
    2424 */
    2525
    26 WI.URLBreakpointPopover = class URLBreakpointPopover extends WI.Popover
     26WI.URLBreakpointPopover = class URLBreakpointPopover extends WI.BreakpointPopover
    2727{
    28     constructor(delegate)
     28    constructor(delegate, breakpoint)
    2929    {
    30         super(delegate);
     30        console.assert(!breakpoint || breakpoint instanceof WI.URLBreakpoint, breakpoint);
    3131
    32         this._breakpoint = null;
     32        super(delegate, breakpoint);
    3333
    34         this._codeMirror = null;
    35         this._targetElement = null;
    36         this._preferredEdges = null;
    37 
    38         this.windowResizeHandler = this._presentOverTargetElement.bind(this);
     34        this._urlCodeMirror = null;
    3935    }
    4036
    41     // Public
     37    // Static
    4238
    43     get breakpoint() { return this._breakpoint; }
     39    static get supportsEditing()
     40    {
     41        return false;
     42    }
    4443
    45     show(targetElement, preferredEdges)
     44    // Protected
     45
     46    populateContent(contentElement)
    4647    {
    47         this._targetElement = targetElement;
    48         this._preferredEdges = preferredEdges;
    49 
    50         let contentElement = document.createElement("div");
    51         contentElement.classList.add("url-breakpoint-content");
    52 
    53         let label = document.createElement("div");
    54         label.classList.add("label");
    55         label.textContent = WI.UIString("Break on request with URL:");
    56 
    57         let editorWrapper = document.createElement("div");
    58         editorWrapper.classList.add("editor-wrapper");
     48        let typeLabelElement = document.createElement("label");
     49        typeLabelElement.textContent = WI.UIString("Type");
    5950
    6051        this._typeSelectElement = document.createElement("select");
     52        this._typeSelectElement.id = "edit-breakpoint-popover-content-type";
    6153
    6254        let createOption = (text, value) => {
    … …  
    7264        this._typeSelectElement.addEventListener("change", (event) => {
    7365            this._updateEditor();
    74             this._codeMirror.focus();
     66            this._urlCodeMirror.focus();
    7567        });
    7668
    77         editorWrapper.append(this._typeSelectElement, this._createEditor(), WI.createReferencePageLink("url-breakpoints", "configuration"));
    78         contentElement.append(label, editorWrapper);
     69        typeLabelElement.setAttribute("for", this._typeSelectElement.id);
    7970
    80         this.content = contentElement;
     71        this.addRow("type", typeLabelElement, this._typeSelectElement);
    8172
    82         this._presentOverTargetElement();
    83     }
     73        let urlLabelElement = document.createElement("label");
     74        urlLabelElement.textContent = WI.UIString("URL");
    8475
    85     dismiss()
    86     {
    87         let type = this._typeSelectElement.value;
    88         let url = this._codeMirror.getValue();
    89         if (type && url)
    90             this._breakpoint = new WI.URLBreakpoint(type, url);
     76        let urlEditorElement = document.createElement("div");
     77        urlEditorElement.classList.add("editor");
    9178
    92         super.dismiss();
    93     }
    94 
    95     // Private
    96 
    97     _createEditor()
    98     {
    99         let editorElement = document.createElement("div");
    100         editorElement.classList.add("editor");
    101 
    102         this._codeMirror = WI.CodeMirrorEditor.create(editorElement, {
     79        this._urlCodeMirror = WI.CodeMirrorEditor.create(urlEditorElement, {
    10380            lineWrapping: false,
    10481            matchBrackets: false,
    10582            scrollbarStyle: null,
    106             value: "",
    10783        });
     84        this._updateEditor();
    10885
    109         this._codeMirror.addKeyMap({
     86        this._urlCodeMirror.addKeyMap({
    11087            "Enter": () => { this.dismiss(); },
    11188            "Esc": () => { this.dismiss(); },
    11289        });
    11390
    114         this._updateEditor();
     91        let urlCodeMirrorInputField = this._urlCodeMirror.getInputField();
     92        urlCodeMirrorInputField.id = "edit-breakpoint-popover-content-url";
     93        urlLabelElement.setAttribute("for", urlCodeMirrorInputField.id);
    11594
    116         return editorElement;
     95        this.addRow("url", urlLabelElement, urlEditorElement);
     96
     97        // CodeMirror needs to refresh after the popover is shown as otherwise it doesn't appear.
     98        setTimeout(() => {
     99            this._urlCodeMirror.refresh();
     100            this._urlCodeMirror.focus();
     101
     102            this.update();
     103        });
    117104    }
     105
     106    createBreakpoint(options = {})
     107    {
     108        let type = this._typeSelectElement.value;
     109        if (!type)
     110            return null;
     111
     112        let url = this._urlCodeMirror.getValue();
     113        if (!url)
     114            return null;
     115
     116        return new WI.URLBreakpoint(type, url, options);
     117    }
     118
     119    // Private
    118120
    119121    _updateEditor()
    … …  
    129131        }
    130132
    131         this._codeMirror.setOption("mode", mimeType);
    132         this._codeMirror.setOption("placeholder", placeholder);
    133     }
    134 
    135     _presentOverTargetElement()
    136     {
    137         if (!this._targetElement)
    138             return;
    139 
    140         let targetFrame = WI.Rect.rectFromClientRect(this._targetElement.getBoundingClientRect());
    141         this.present(targetFrame.pad(2), this._preferredEdges);
    142 
    143         // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
    144         setTimeout(() => {
    145             this._codeMirror.refresh();
    146             this._codeMirror.focus();
    147             this.update();
    148         }, 0);
     133        this._urlCodeMirror.setOption("mode", mimeType);
     134        this._urlCodeMirror.setOption("placeholder", placeholder);
    149135    }
    150136};
     137
     138WI.URLBreakpointPopover.ReferencePage = WI.ReferencePage.URLBreakpoints;

  • trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointTreeElement.js

    r266074 r266480  
    3434        classNames.push("url");
    3535
    36         let subtitle;
    37         if (!title) {
    38             title = WI.UIString("URL");
    39             if (breakpoint.type === WI.URLBreakpoint.Type.Text)
    40                 subtitle = doubleQuotedString(breakpoint.url);
    41             else
    42                 subtitle = "/" + breakpoint.url + "/";
    43         }
     36        if (!title)
     37            title = breakpoint.displayName;
    4438
    45         super(breakpoint, {classNames, title, subtitle});
     39        super(breakpoint, {classNames, title});
    4640    }
    4741};

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r266317 r266480  
    212212
    213213    --sorted-header-font-weight: 500;
     214
     215    --reference-page-link-size: 20px;
    214216}
    215217
Note: See TracChangeset for help on using the changeset viewer.