Skip to content

Commit

Permalink
debug: polish function breakpoint ux
Browse files Browse the repository at this point in the history
fixes #44557
  • Loading branch information
isidorn committed Sep 20, 2018
1 parent 7c2d950 commit c0c1293
Showing 1 changed file with 21 additions and 4 deletions.
25 changes: 21 additions & 4 deletions src/vs/workbench/parts/debug/browser/breakpointsView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,8 @@ interface IBreakpointTemplateData extends IBaseBreakpointWithIconTemplateData {

interface IInputTemplateData {
inputBox: InputBox;
checkbox: HTMLInputElement;
icon: HTMLElement;
breakpoint: IFunctionBreakpoint;
reactedOnEvent: boolean;
toDispose: IDisposable[];
Expand Down Expand Up @@ -484,7 +486,14 @@ class FunctionBreakpointInputRenderer implements IRenderer<IFunctionBreakpoint,

renderTemplate(container: HTMLElement): IInputTemplateData {
const template: IInputTemplateData = Object.create(null);
const inputBoxContainer = dom.append(container, $('.inputBoxContainer'));

const breakpoint = dom.append(container, $('.breakpoint'));
template.icon = $('.icon');
template.checkbox = createCheckbox();

dom.append(breakpoint, template.icon);
dom.append(breakpoint, template.checkbox);
const inputBoxContainer = dom.append(breakpoint, $('.inputBoxContainer'));
const inputBox = new InputBox(inputBoxContainer, this.contextViewService, {
placeholder: nls.localize('functionBreakpointPlaceholder', "Function to break on"),
ariaLabel: nls.localize('functionBreakPointInputAriaLabel', "Type function breakpoint")
Expand Down Expand Up @@ -527,12 +536,20 @@ class FunctionBreakpointInputRenderer implements IRenderer<IFunctionBreakpoint,
return template;
}

renderElement(functionBreakpoint: IFunctionBreakpoint, index: number, data: IInputTemplateData): void {
renderElement(functionBreakpoint: FunctionBreakpoint, index: number, data: IInputTemplateData): void {
data.breakpoint = functionBreakpoint;
data.reactedOnEvent = false;
const { className, message } = getBreakpointMessageAndClassName(this.debugService, functionBreakpoint);

data.icon.className = className + ' icon';
data.icon.title = message ? message : '';
data.checkbox.checked = functionBreakpoint.enabled;
data.checkbox.disabled = true;
data.inputBox.value = functionBreakpoint.name || '';
data.inputBox.focus();
data.inputBox.select();
setTimeout(() => {
data.inputBox.focus();
data.inputBox.select();
}, 0);
}

disposeElement(): void {
Expand Down

0 comments on commit c0c1293

Please sign in to comment.