debug: polish function breakpoint ux

fixes #44557

src/vs/workbench/parts/debug/browser/breakpointsView.ts

@@ -285,6 +285,8 @@ interface IBreakpointTemplateData extends IBaseBreakpointWithIconTemplateData {
 
 interface IInputTemplateData {
 	inputBox: InputBox;
+	checkbox: HTMLInputElement;
+	icon: HTMLElement;
 	breakpoint: IFunctionBreakpoint;
 	reactedOnEvent: boolean;
 	toDispose: IDisposable[];
@@ -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")
@@ -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 {