diff --git a/src/vs/workbench/parts/debug/browser/breakpointWidget.ts b/src/vs/workbench/parts/debug/browser/breakpointWidget.ts index dc13999eeea53..3535484833810 100644 --- a/src/vs/workbench/parts/debug/browser/breakpointWidget.ts +++ b/src/vs/workbench/parts/debug/browser/breakpointWidget.ts @@ -9,6 +9,7 @@ import async = require('vs/base/common/async'); import errors = require('vs/base/common/errors'); import {KeyCode, KeyMod} from 'vs/base/common/keyCodes'; import platform = require('vs/base/common/platform'); +import {SelectBox} from 'vs/base/browser/ui/selectBox/selectBox'; import lifecycle = require('vs/base/common/lifecycle'); import dom = require('vs/base/browser/dom'); import {InputBox} from 'vs/base/browser/ui/inputbox/inputBox'; @@ -33,15 +34,25 @@ export class BreakpointWidget extends ZoneWidget { private inputBox: InputBox; private toDispose: lifecycle.IDisposable[]; private breakpointWidgetVisible: IContextKey; + private expressionPlaceholder: string; + private expressionAriaLabel: string; + private hitCountPlaceholder: string; + private hitCountAriaLabel: string; + private hitCountContext: boolean; constructor(editor: editorbrowser.ICodeEditor, private lineNumber: number, @IContextViewService private contextViewService: IContextViewService, @debug.IDebugService private debugService: debug.IDebugService, @IContextKeyService contextKeyService: IContextKeyService ) { - super(editor, { showFrame: true, showArrow: false }); + super(editor, { showFrame: true, showArrow: false, frameColor: '#007ACC', frameWidth: 1 }); this.toDispose = []; + this.expressionPlaceholder = nls.localize('breakpointWidgetExpressionPlaceholder', "Breakpoint on line {0} will only stop if this expression is true.", this.lineNumber); + this.expressionAriaLabel = nls.localize('breakpointWidgetAriaLabel', "Type the breakpoint condition for line {0}. The program will only stop here if this condition is true. Press Enter to accept or Escape to cancel.", this.lineNumber); + this.hitCountPlaceholder = nls.localize('breakpointWidgetHitCountPlaceholder', "Breakpoint on line {0} will only stop if the hit count condition is true.", this.lineNumber); + this.hitCountAriaLabel = nls.localize('breakpointWidgetHitCountAriaLabel', "Type the breakpoint hit count condition for line {0}. The program will only stop here if the hit count is met. Press Enter to accept or Escape to cancel.", this.lineNumber); + this.create(); this.breakpointWidgetVisible = CONTEXT_BREAKPOINT_WIDGET_VISIBLE.bindTo(contextKeyService); this.breakpointWidgetVisible.set(true); @@ -63,10 +74,19 @@ export class BreakpointWidget extends ZoneWidget { const uri = this.editor.getModel().uri; const breakpoint = this.debugService.getModel().getBreakpoints().filter(bp => bp.lineNumber === this.lineNumber && bp.source.uri.toString() === uri.toString()).pop(); + const selectBox = new SelectBox([nls.localize('expression', "Expression"), nls.localize('hitCount', "Hit Count")], 0); + selectBox.render(dom.append(container, $('.breakpoint-select-container'))); + selectBox.onDidSelect(e => { + this.hitCountContext = e === 'Hit Count'; + this.inputBox.setAriaLabel(this.hitCountContext ? this.hitCountAriaLabel : this.expressionAriaLabel); + this.inputBox.setPlaceHolder(this.hitCountContext ? this.hitCountPlaceholder : this.expressionPlaceholder); + this.inputBox.value = (this.hitCountContext && breakpoint && breakpoint.hitCondition) ? breakpoint.hitCondition : breakpoint && breakpoint.condition ? breakpoint.condition : ''; + }); + const inputBoxContainer = dom.append(container, $('.inputBoxContainer')); this.inputBox = new InputBox(inputBoxContainer, this.contextViewService, { - placeholder: nls.localize('breakpointWidgetPlaceholder', "Breakpoint on line {0} will only stop if this condition is true.", this.lineNumber), - ariaLabel: nls.localize('breakpointWidgetAriaLabel', "Type the breakpoint condition for line {0}. The program will only stop here if this condition is true. Press Enter to accept or Escape to cancel.") + placeholder: this.expressionPlaceholder, + ariaLabel: this.expressionAriaLabel }); this.toDispose.push(this.inputBox); @@ -80,12 +100,16 @@ export class BreakpointWidget extends ZoneWidget { if (!disposed) { disposed = true; if (success) { - const raw = { + const raw: debug.IRawBreakpoint = { uri, lineNumber: this.lineNumber, - enabled: true, - condition: this.inputBox.value + enabled: true }; + if (this.hitCountContext) { + raw.hitCondition = this.inputBox.value; + } else { + raw.condition = this.inputBox.value; + } // if there is already a breakpoint on this location - remove it. const oldBreakpoint = this.debugService.getModel().getBreakpoints() diff --git a/src/vs/workbench/parts/debug/browser/media/breakpointWidget.css b/src/vs/workbench/parts/debug/browser/media/breakpointWidget.css index 65c0f1f320e5d..0fb6516a856a3 100644 --- a/src/vs/workbench/parts/debug/browser/media/breakpointWidget.css +++ b/src/vs/workbench/parts/debug/browser/media/breakpointWidget.css @@ -4,9 +4,25 @@ *--------------------------------------------------------------------------------------------*/ .monaco-editor .zone-widget .zone-widget-container.breakpoint-widget { - border-top-color: #E89208; - border-bottom-color: #E89208; height: 30px !important; + display: flex; + background-color: var(--input-bgcolor); +} + +.monaco-editor .zone-widget .zone-widget-container.breakpoint-widget .breakpoint-select-container { + display: flex; + justify-content: center; + flex-direction: column; + padding: 0 10px; +} + +.monaco-editor .zone-widget .zone-widget-container.breakpoint-widget .breakpoint-select-container .select-box { + margin-top: 0px; + border-color: rgba(128, 128, 128, 0.35); +} + +.monaco-editor .zone-widget .zone-widget-container.breakpoint-widget .inputBoxContainer { + flex: 1; } .monaco-editor .zone-widget .zone-widget-container.breakpoint-widget .monaco-inputbox {