Changeset 161687 in webkit


Ignore:
Timestamp:
Jan 10, 2014 3:48:54 PM (10 years ago)
Author:
BJ Burg
Message:

Web Inspector: cycle clicked breakpoints between enabled, auto-continue, and disabled
​https://bugs.webkit.org/show_bug.cgi?id=126669

Reviewed by Joseph Pecoraro.

It's time-consuming to change a breakpoint's auto-continue setting through the
breakpoint editor popup. This patch enables the user to toggle between enabled,
auto-continue, and disabled by clicking on the breakpoint wedge in the sidebar
tree and in the source text editor gutter. The auto-continue option is only
cycled when the breakpoint has associated actions.

Clean up the breakpoint editor dialog so it hides irrelevant options when
no breakpoint actions have been added.

Automatically unset auto-continue when the last breakpoint action is removed.

Rename the delegate textEditorBreakpointToggled to textEditorBreakpointClicked, since
the behavior of the click depends on breakpoint state not available in the text editor.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Breakpoint.js:

(WebInspector.Breakpoint.prototype.cycleToNextMode): Added.
(WebInspector.Breakpoint.prototype.toggleAutoContinue): Added.
(WebInspector.Breakpoint.prototype.appendContextMenuItems): Add auto-continue options.
(WebInspector.Breakpoint.prototype.removeAction):

(WebInspector.Breakpoint.prototype._editBreakpointPopoverContentElement):
(WebInspector.Breakpoint.prototype._popoverActionsAddActionButtonClicked):
(WebInspector.Breakpoint.prototype.breakpointActionViewAppendActionView):
(WebInspector.Breakpoint.prototype.breakpointActionViewRemoveActionView):
(WebInspector.Breakpoint.prototype.willDismissPopover):

  • UserInterface/BreakpointTreeElement.css:

(.item.breakpoint .status > .status-image.auto-continue):
(.item.breakpoint .status > .status-image.disabled):

  • UserInterface/BreakpointTreeElement.js:

(WebInspector.BreakpointTreeElement):
(WebInspector.BreakpointTreeElement.prototype.onenter):
(WebInspector.BreakpointTreeElement.prototype.onspace):
(WebInspector.BreakpointTreeElement.prototype._updateStatus):
(WebInspector.BreakpointTreeElement.prototype._breakpointLocationDidChange):
(WebInspector.BreakpointTreeElement.prototype._statusImageElementClicked):

  • UserInterface/SourceCodeTextEditor.js:

(WebInspector.SourceCodeTextEditor):
(WebInspector.SourceCodeTextEditor.prototype.close):
(WebInspector.SourceCodeTextEditor.prototype._breakpointInfoForBreakpoint):
(WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointClicked):

  • UserInterface/TextEditor.css:

(.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before):

  • UserInterface/TextEditor.js:

(WebInspector.TextEditor.prototype._setBreakpointStylesOnLine.updateStyles):
(WebInspector.TextEditor.prototype._setBreakpointStylesOnLine):
(WebInspector.TextEditor.prototype.updateStyles):
(WebInspector.TextEditor.prototype._removeBreakpointFromLineAndColumn):
(WebInspector.TextEditor.prototype._documentMouseUp):

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r161677 r161687  
     12014-01-10  Brian Burg  <bburg@apple.com>
     2
     3        Web Inspector: cycle clicked breakpoints between enabled, auto-continue, and disabled
     4        https://bugs.webkit.org/show_bug.cgi?id=126669
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        It's time-consuming to change a breakpoint's auto-continue setting through the
     9        breakpoint editor popup. This patch enables the user to toggle between enabled,
     10        auto-continue, and disabled by clicking on the breakpoint wedge in the sidebar
     11        tree and in the source text editor gutter. The auto-continue option is only
     12        cycled when the breakpoint has associated actions.
     13
     14        Clean up the breakpoint editor dialog so it hides irrelevant options when
     15        no breakpoint actions have been added.
     16
     17        Automatically unset auto-continue when the last breakpoint action is removed.
     18
     19        Rename the delegate textEditorBreakpointToggled to textEditorBreakpointClicked, since
     20        the behavior of the click depends on breakpoint state not available in the text editor.
     21
     22        * Localizations/en.lproj/localizedStrings.js:
     23        * UserInterface/Breakpoint.js:
     24        (WebInspector.Breakpoint.prototype.cycleToNextMode): Added.
     25        (WebInspector.Breakpoint.prototype.toggleAutoContinue): Added.
     26        (WebInspector.Breakpoint.prototype.appendContextMenuItems): Add auto-continue options.
     27        (WebInspector.Breakpoint.prototype.removeAction):
     28
     29        (WebInspector.Breakpoint.prototype._editBreakpointPopoverContentElement):
     30        (WebInspector.Breakpoint.prototype._popoverActionsAddActionButtonClicked):
     31        (WebInspector.Breakpoint.prototype.breakpointActionViewAppendActionView):
     32        (WebInspector.Breakpoint.prototype.breakpointActionViewRemoveActionView):
     33        (WebInspector.Breakpoint.prototype.willDismissPopover):
     34        * UserInterface/BreakpointTreeElement.css:
     35        (.item.breakpoint .status > .status-image.auto-continue):
     36        (.item.breakpoint .status > .status-image.disabled):
     37        * UserInterface/BreakpointTreeElement.js:
     38        (WebInspector.BreakpointTreeElement):
     39        (WebInspector.BreakpointTreeElement.prototype.onenter):
     40        (WebInspector.BreakpointTreeElement.prototype.onspace):
     41        (WebInspector.BreakpointTreeElement.prototype._updateStatus):
     42        (WebInspector.BreakpointTreeElement.prototype._breakpointLocationDidChange):
     43        (WebInspector.BreakpointTreeElement.prototype._statusImageElementClicked):
     44        * UserInterface/SourceCodeTextEditor.js:
     45        (WebInspector.SourceCodeTextEditor):
     46        (WebInspector.SourceCodeTextEditor.prototype.close):
     47        (WebInspector.SourceCodeTextEditor.prototype._breakpointInfoForBreakpoint):
     48        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointClicked):
     49        * UserInterface/TextEditor.css:
     50        (.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before):
     51        * UserInterface/TextEditor.js:
     52        (WebInspector.TextEditor.prototype._setBreakpointStylesOnLine.updateStyles):
     53        (WebInspector.TextEditor.prototype._setBreakpointStylesOnLine):
     54        (WebInspector.TextEditor.prototype.updateStyles):
     55        (WebInspector.TextEditor.prototype._removeBreakpointFromLineAndColumn):
     56        (WebInspector.TextEditor.prototype._documentMouseUp):
     57
    1582014-01-10  Timothy Hatcher  <timothy@apple.com>
    259

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

    r160025 r161687  
    6767WebInspector.Breakpoint.PopoverConditionInputId = "edit-breakpoint-popover-condition";
    6868WebInspector.Breakpoint.PopoverOptionsAutoContinueInputId = "edit-breakpoint-popoover-auto-continue";
     69WebInspector.Breakpoint.HiddenStyleClassName = "hidden";
    6970
    7071WebInspector.Breakpoint.DefaultBreakpointActionType = WebInspector.BreakpointAction.Type.Log;
    … …  
    203204    },
    204205
     206    cycleToNextMode: function()
     207    {
     208        if (this.disabled) {
     209            // When cycling, clear auto-continue when going from disabled to enabled.
     210            this.autoContinue = false;
     211            this.disabled = false;
     212            return;
     213        }
     214
     215        if (this.autoContinue) {
     216            this.disabled = true;
     217            return;
     218        }
     219
     220        if (this.actions.length) {
     221            this.autoContinue = true;
     222            return;
     223        }
     224
     225        this.disabled = true;
     226    },
     227
    205228    appendContextMenuItems: function(contextMenu, breakpointDisplayElement)
    206229    {
    … …  
    224247        }
    225248
     249        function toggleAutoContinue()
     250        {
     251            this.autoContinue = !this.autoContinue;
     252        }
     253
    226254        function revealOriginalSourceCodeLocation()
    227255        {
    … …  
    232260            contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpoint.bind(this));
    233261
    234         if (this._disabled)
     262        if (this.autoContinue && !this.disabled) {
     263            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
     264            contextMenu.appendItem(WebInspector.UIString("Cancel Automatic Continue"), toggleAutoContinue.bind(this));
     265        } else if (!this.disabled)
     266            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
     267        else
    235268            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoint"), toggleBreakpoint.bind(this));
    236         else
    237             contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
     269
     270        if (!this.autoContinue && !this.disabled && this.actions.length)
     271            contextMenu.appendItem(WebInspector.UIString("Set to Automatically Continue"), toggleAutoContinue.bind(this));
    238272
    239273        if (WebInspector.debuggerManager.isBreakpointRemovable(this)) {
    … …  
    292326
    293327        this._actions.splice(index, 1);
     328
     329        if (!this._actions.length)
     330            this.autoContinue = false;
    294331
    295332        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
    … …  
    397434            }
    398435
    399             var optionsRow = table.appendChild(document.createElement("tr"));
     436            var optionsRow = this._popoverOptionsRowElement = table.appendChild(document.createElement("tr"));
     437            if (!this._actions.length)
     438                optionsRow.classList.add(WebInspector.Breakpoint.HiddenStyleClassName);
    400439            var optionsHeader = optionsRow.appendChild(document.createElement("th"));
    401440            var optionsData = optionsRow.appendChild(document.createElement("td"));
    402441            var optionsLabel = optionsHeader.appendChild(document.createElement("label"));
    403             var optionsCheckbox = optionsData.appendChild(document.createElement("input"));
     442            var optionsCheckbox = this._popoverOptionsCheckboxElement = optionsData.appendChild(document.createElement("input"));
    404443            var optionsCheckboxLabel = optionsData.appendChild(document.createElement("label"));
    405444            optionsCheckbox.id = WebInspector.Breakpoint.PopoverOptionsAutoContinueInputId;
    … …  
    436475        var newBreakpointActionView = new WebInspector.BreakpointActionView(newAction, this);
    437476        this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, -1);
    438 
     477        this._popoverOptionsRowElement.classList.remove(WebInspector.Breakpoint.HiddenStyleClassName);
    439478        this._popover.update();
    440479    },
    … …  
    464503
    465504        this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, index);
     505        this._popoverOptionsRowElement.classList.remove(WebInspector.Breakpoint.HiddenStyleClassName);
    466506
    467507        this._popover.update();
    … …  
    472512        breakpointActionView.element.remove();
    473513
    474         if (!this._actionsContainer.children.length)
     514        if (!this._actionsContainer.children.length) {
    475515            this._popoverActionsCreateAddActionButton();
     516            this._popoverOptionsRowElement.classList.add(WebInspector.Breakpoint.HiddenStyleClassName);
     517            this._popoverOptionsCheckboxElement.checked = false;
     518        }
    476519
    477520        this._popover.update();
    … …  
    487530        console.assert(this._popover === popover);
    488531        delete this._popoverContentElement;
     532        delete this._popoverOptionsRowElement;
     533        delete this._popoverOptionsCheckboxElement;
    489534        delete this._actionsContainer;
    490535        delete this._popover;

  • trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css

    r153761 r161687  
    3535}
    3636
     37.item.breakpoint .status > .status-image.auto-continue {
     38    opacity: 0.6;
     39}
     40
    3741.item.breakpoint .status > .status-image.disabled {
    38     opacity: 0.45;
     42    opacity: 0.35;
    3943}
    4044

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

    r151453 r161687  
    3838        this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
    3939    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
     40    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus, this);
    4041    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
    4142
    … …  
    5758WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image";
    5859WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved";
     60WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue";
    5961WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
    6062WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
    … …  
    8183    onenter: function()
    8284    {
    83         this._breakpoint.disabled = !this._breakpoint.disabled;
     85        this._breakpoint.cycleToNextMode();
    8486        return true;
    8587    },
    … …  
    8789    onspace: function()
    8890    {
    89         this._breakpoint.disabled = !this._breakpoint.disabled;
     91        this._breakpoint.cycleToNextMode();
    9092        return true;
    9193    },
    … …  
    130132            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
    131133
     134        if (this._breakpoint.autoContinue)
     135            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
     136        else
     137            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
     138
    132139        if (this._breakpoint.resolved)
    133140            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
    … …  
    144151            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
    145152            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
     153            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus, this);
    146154            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
    147155            return;
    … …  
    159167    _statusImageElementClicked: function(event)
    160168    {
    161         this._breakpoint.disabled = !this._breakpoint.disabled;
     169        this._breakpoint.cycleToNextMode();
    162170    }
    163171};

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

    r160552 r161687  
    4444    if (this._supportsDebugging) {
    4545        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this);
     46        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateBreakpointStatus, this);
    4647        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this);
    4748        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
    … …  
    113114        if (this._supportsDebugging) {
    114115            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this);
     116            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateBreakpointStatus, this);
    115117            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this);
    116118            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
    … …  
    711713    _breakpointInfoForBreakpoint: function(breakpoint)
    712714    {
    713         return {resolved: breakpoint.resolved, disabled: breakpoint.disabled};
     715        return {resolved: breakpoint.resolved, disabled: breakpoint.disabled, autoContinue: breakpoint.autoContinue};
    714716    },
    715717
    … …  
    909911    },
    910912
    911     textEditorBreakpointToggled: function(textEditor, lineNumber, columnNumber, disabled)
     913    textEditorBreakpointClicked: function(textEditor, lineNumber, columnNumber)
    912914    {
    913915        console.assert(this._supportsDebugging);
    … …  
    920922            return;
    921923
    922         breakpoint.disabled = disabled;
     924        breakpoint.cycleToNextMode();
    923925    },
    924926

  • trunk/Source/WebInspectorUI/UserInterface/TextEditor.css

    r151687 r161687  
    6565.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before {
    6666    border-image-source: -webkit-image-set(url(Images/Breakpoint.png) 1x, url(Images/Breakpoint@2x.png) 2x);
     67}
     68
     69.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before {
     70    opacity: 0.6;
    6771}
    6872

  • trunk/Source/WebInspectorUI/UserInterface/TextEditor.js

    r160552 r161687  
    7777WebInspector.TextEditor.HasBreakpointStyleClassName = "has-breakpoint";
    7878WebInspector.TextEditor.BreakpointResolvedStyleClassName = "breakpoint-resolved";
     79WebInspector.TextEditor.BreakpointAutoContinueStyleClassName = "breakpoint-auto-continue";
    7980WebInspector.TextEditor.BreakpointDisabledStyleClassName = "breakpoint-disabled";
    8081WebInspector.TextEditor.MultipleBreakpointsStyleClassName = "multiple-breakpoints";
    … …  
    907908        var allDisabled = true;
    908909        var allResolved = true;
     910        var allAutoContinue = true;
    909911        var multiple = Object.keys(columnBreakpoints).length > 1;
    910912        for (var columnNumber in columnBreakpoints) {
    … …  
    914916            if (!breakpointInfo.resolved)
    915917                allResolved = false;
     918            if (!breakpointInfo.autoContinue)
     919                allAutoContinue = false;
    916920        }
    917921
    … …  
    936940                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
    937941
     942            if (allAutoContinue)
     943                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName);
     944            else
     945                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName);
     946
    938947            if (multiple)
    939948                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
    … …  
    976985            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
    977986            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
     987            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName);
    978988            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
    979989        }
    … …  
    11171127        document.removeEventListener("mouseup", this._documentMouseUpEventListener, true);
    11181128
    1119         const delegateImplementsBreakpointToggled = this._delegate && typeof this._delegate.textEditorBreakpointToggled === "function";
     1129        const delegateImplementsBreakpointClicked = this._delegate && typeof this._delegate.textEditorBreakpointClicked === "function";
    11201130        const delegateImplementsBreakpointRemoved = this._delegate && typeof this._delegate.textEditorBreakpointRemoved === "function";
    11211131        const delegateImplementsBreakpointMoved = this._delegate && typeof this._delegate.textEditorBreakpointMoved === "function";
    … …  
    11531163            console.assert(this._lineNumberWithMousedDownBreakpoint in this._breakpoints);
    11541164            console.assert(this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint]);
    1155             if (this._lineNumberWithMousedDownBreakpoint in this._breakpoints && this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint] && delegateImplementsBreakpointToggled) {
    1156                 var disabled = this._codeMirror.toggleLineClass(this._lineNumberWithMousedDownBreakpoint, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
    1157                 this._breakpoints[this._lineNumberWithMousedDownBreakpoint][this._columnNumberWithMousedDownBreakpoint].disabled = disabled;
    1158                 this._delegate.textEditorBreakpointToggled(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint, disabled);
    1159             }
     1165            if (this._lineNumberWithMousedDownBreakpoint in this._breakpoints && this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint] && delegateImplementsBreakpointClicked)
     1166                this._delegate.textEditorBreakpointClicked(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint);
    11601167        }
    11611168
Note: See TracChangeset for help on using the changeset viewer.