Changeset 161687 in webkit
- Timestamp:
- Jan 10, 2014 3:48:54 PM (10 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 7 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r161677 r161687 1 2014-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 1 58 2014-01-10 Timothy Hatcher <timothy@apple.com> 2 59 -
trunk/Source/WebInspectorUI/UserInterface/Breakpoint.js
r160025 r161687 67 67 WebInspector.Breakpoint.PopoverConditionInputId = "edit-breakpoint-popover-condition"; 68 68 WebInspector.Breakpoint.PopoverOptionsAutoContinueInputId = "edit-breakpoint-popoover-auto-continue"; 69 WebInspector.Breakpoint.HiddenStyleClassName = "hidden"; 69 70 70 71 WebInspector.Breakpoint.DefaultBreakpointActionType = WebInspector.BreakpointAction.Type.Log; … … 203 204 }, 204 205 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 205 228 appendContextMenuItems: function(contextMenu, breakpointDisplayElement) 206 229 { … … 224 247 } 225 248 249 function toggleAutoContinue() 250 { 251 this.autoContinue = !this.autoContinue; 252 } 253 226 254 function revealOriginalSourceCodeLocation() 227 255 { … … 232 260 contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpoint.bind(this)); 233 261 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 235 268 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)); 238 272 239 273 if (WebInspector.debuggerManager.isBreakpointRemovable(this)) { … … 292 326 293 327 this._actions.splice(index, 1); 328 329 if (!this._actions.length) 330 this.autoContinue = false; 294 331 295 332 this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange); … … 397 434 } 398 435 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); 400 439 var optionsHeader = optionsRow.appendChild(document.createElement("th")); 401 440 var optionsData = optionsRow.appendChild(document.createElement("td")); 402 441 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")); 404 443 var optionsCheckboxLabel = optionsData.appendChild(document.createElement("label")); 405 444 optionsCheckbox.id = WebInspector.Breakpoint.PopoverOptionsAutoContinueInputId; … … 436 475 var newBreakpointActionView = new WebInspector.BreakpointActionView(newAction, this); 437 476 this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, -1); 438 477 this._popoverOptionsRowElement.classList.remove(WebInspector.Breakpoint.HiddenStyleClassName); 439 478 this._popover.update(); 440 479 }, … … 464 503 465 504 this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, index); 505 this._popoverOptionsRowElement.classList.remove(WebInspector.Breakpoint.HiddenStyleClassName); 466 506 467 507 this._popover.update(); … … 472 512 breakpointActionView.element.remove(); 473 513 474 if (!this._actionsContainer.children.length) 514 if (!this._actionsContainer.children.length) { 475 515 this._popoverActionsCreateAddActionButton(); 516 this._popoverOptionsRowElement.classList.add(WebInspector.Breakpoint.HiddenStyleClassName); 517 this._popoverOptionsCheckboxElement.checked = false; 518 } 476 519 477 520 this._popover.update(); … … 487 530 console.assert(this._popover === popover); 488 531 delete this._popoverContentElement; 532 delete this._popoverOptionsRowElement; 533 delete this._popoverOptionsCheckboxElement; 489 534 delete this._actionsContainer; 490 535 delete this._popover; -
trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
r153761 r161687 35 35 } 36 36 37 .item.breakpoint .status > .status-image.auto-continue { 38 opacity: 0.6; 39 } 40 37 41 .item.breakpoint .status > .status-image.disabled { 38 opacity: 0. 45;42 opacity: 0.35; 39 43 } 40 44 -
trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
r151453 r161687 38 38 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this); 39 39 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this); 40 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus, this); 40 41 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this); 41 42 … … 57 58 WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image"; 58 59 WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved"; 60 WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue"; 59 61 WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled"; 60 62 WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location"; … … 81 83 onenter: function() 82 84 { 83 this._breakpoint. disabled = !this._breakpoint.disabled;85 this._breakpoint.cycleToNextMode(); 84 86 return true; 85 87 }, … … 87 89 onspace: function() 88 90 { 89 this._breakpoint. disabled = !this._breakpoint.disabled;91 this._breakpoint.cycleToNextMode(); 90 92 return true; 91 93 }, … … 130 132 this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName); 131 133 134 if (this._breakpoint.autoContinue) 135 this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName); 136 else 137 this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName); 138 132 139 if (this._breakpoint.resolved) 133 140 this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName); … … 144 151 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this); 145 152 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this); 153 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus, this); 146 154 this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this); 147 155 return; … … 159 167 _statusImageElementClicked: function(event) 160 168 { 161 this._breakpoint. disabled = !this._breakpoint.disabled;169 this._breakpoint.cycleToNextMode(); 162 170 } 163 171 }; -
trunk/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
r160552 r161687 44 44 if (this._supportsDebugging) { 45 45 WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this); 46 WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateBreakpointStatus, this); 46 47 WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this); 47 48 WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this); … … 113 114 if (this._supportsDebugging) { 114 115 WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this); 116 WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateBreakpointStatus, this); 115 117 WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this); 116 118 WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this); … … 711 713 _breakpointInfoForBreakpoint: function(breakpoint) 712 714 { 713 return {resolved: breakpoint.resolved, disabled: breakpoint.disabled };715 return {resolved: breakpoint.resolved, disabled: breakpoint.disabled, autoContinue: breakpoint.autoContinue}; 714 716 }, 715 717 … … 909 911 }, 910 912 911 textEditorBreakpoint Toggled: function(textEditor, lineNumber, columnNumber, disabled)913 textEditorBreakpointClicked: function(textEditor, lineNumber, columnNumber) 912 914 { 913 915 console.assert(this._supportsDebugging); … … 920 922 return; 921 923 922 breakpoint. disabled = disabled;924 breakpoint.cycleToNextMode(); 923 925 }, 924 926 -
trunk/Source/WebInspectorUI/UserInterface/TextEditor.css
r151687 r161687 65 65 .text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before { 66 66 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; 67 71 } 68 72 -
trunk/Source/WebInspectorUI/UserInterface/TextEditor.js
r160552 r161687 77 77 WebInspector.TextEditor.HasBreakpointStyleClassName = "has-breakpoint"; 78 78 WebInspector.TextEditor.BreakpointResolvedStyleClassName = "breakpoint-resolved"; 79 WebInspector.TextEditor.BreakpointAutoContinueStyleClassName = "breakpoint-auto-continue"; 79 80 WebInspector.TextEditor.BreakpointDisabledStyleClassName = "breakpoint-disabled"; 80 81 WebInspector.TextEditor.MultipleBreakpointsStyleClassName = "multiple-breakpoints"; … … 907 908 var allDisabled = true; 908 909 var allResolved = true; 910 var allAutoContinue = true; 909 911 var multiple = Object.keys(columnBreakpoints).length > 1; 910 912 for (var columnNumber in columnBreakpoints) { … … 914 916 if (!breakpointInfo.resolved) 915 917 allResolved = false; 918 if (!breakpointInfo.autoContinue) 919 allAutoContinue = false; 916 920 } 917 921 … … 936 940 this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName); 937 941 942 if (allAutoContinue) 943 this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName); 944 else 945 this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName); 946 938 947 if (multiple) 939 948 this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName); … … 976 985 this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName); 977 986 this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName); 987 this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName); 978 988 this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName); 979 989 } … … 1117 1127 document.removeEventListener("mouseup", this._documentMouseUpEventListener, true); 1118 1128 1119 const delegateImplementsBreakpoint Toggled = this._delegate && typeof this._delegate.textEditorBreakpointToggled === "function";1129 const delegateImplementsBreakpointClicked = this._delegate && typeof this._delegate.textEditorBreakpointClicked === "function"; 1120 1130 const delegateImplementsBreakpointRemoved = this._delegate && typeof this._delegate.textEditorBreakpointRemoved === "function"; 1121 1131 const delegateImplementsBreakpointMoved = this._delegate && typeof this._delegate.textEditorBreakpointMoved === "function"; … … 1153 1163 console.assert(this._lineNumberWithMousedDownBreakpoint in this._breakpoints); 1154 1164 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); 1160 1167 } 1161 1168
Note: See TracChangeset
for help on using the changeset viewer.