debug: improve breakpoint pane, use flex

src/vs/workbench/parts/debug/browser/media/debugViewlet.css

@@ -76,9 +76,8 @@
 }
 
 .debug-viewlet .monaco-tree .monaco-tree-row .content .monaco-action-bar {
-	float: right;
-	display: none;
-	margin-right: 12px;
+	visibility: hidden;
+	flex-shrink: 0;
 }
 
 .debug-viewlet .monaco-tree .monaco-tree-row .content .monaco-action-bar .action-label {
@@ -89,7 +88,7 @@
 
 .debug-viewlet .monaco-tree .monaco-tree-row:hover .content .monaco-action-bar,
 .debug-viewlet .monaco-tree.focused .monaco-tree-row.focused .content .monaco-action-bar {
-	display: block;
+	visibility: visible;
 }
 
 .debug-viewlet .disabled {
@@ -160,7 +159,6 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	padding-right: 0.8em;
-	margin-right: 0.2em;
 }
 
 .debug-viewlet .debug-call-stack .stack-frame > .file {
@@ -235,6 +233,7 @@
 
 .debug-viewlet .inputBoxContainer {
 	box-sizing: border-box;
+	flex-grow: 1;
 }
 
 .debug-viewlet .debug-watch .monaco-inputbox {
@@ -277,19 +276,32 @@
 /* Breakpoints */
 
 .debug-viewlet .debug-breakpoints .breakpoint {
-	overflow: hidden;
-	text-overflow: ellipsis;
+	display: flex;
+	padding-right: 0.8em;
+	flex: 1;
+	align-items: center;
+}
+
+.debug-viewlet .debug-breakpoints .breakpoint.exception {
+	padding-left: 16px;
+}
+
+.debug-viewlet .debug-breakpoints .breakpoint input {
+	flex-shrink: 0;
 }
 
 .debug-viewlet .debug-breakpoints .breakpoint > .file-path {
 	opacity: 0.7;
 	font-size: 0.9em;
 	margin-left: 0.8em;
+	flex: 1;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
-.monaco-workbench.windows debug-viewlet .debug-breakpoints .breakpoint > .checkbox,
-.monaco-workbench.linux debug-viewlet .debug-breakpoints .breakpoint > .checkbox {
-	vertical-align: middle;
+
+.debug-viewlet .monaco-tree .monaco-tree-row .breakpoint .monaco-action-bar .action-label {
+	margin-right: 0px;
 }
 
 .debug-viewlet .debug-action.remove {

src/vs/workbench/parts/debug/electron-browser/debugViewer.ts

@@ -1182,12 +1182,12 @@ export class BreakpointsRenderer implements IRenderer {
 
 	public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
 		const data: IBreakpointTemplateData = Object.create(null);
+		data.breakpoint = dom.append(container, $('.breakpoint'));
 		if (templateId === BreakpointsRenderer.BREAKPOINT_TEMPLATE_ID || templateId === BreakpointsRenderer.FUNCTION_BREAKPOINT_TEMPLATE_ID) {
-			data.actionBar = new ActionBar(container, { actionRunner: this.actionRunner });
+			data.actionBar = new ActionBar(data.breakpoint, { actionRunner: this.actionRunner });
 			data.actionBar.push(this.actionProvider.getBreakpointActions(), { icon: true, label: false });
 		}
 
-		data.breakpoint = dom.append(container, $('.breakpoint'));
 		data.toDisposeBeforeRender = [];
 
 		data.checkbox = <HTMLInputElement>$('input');
@@ -1198,8 +1198,12 @@ export class BreakpointsRenderer implements IRenderer {
 		data.name = dom.append(data.breakpoint, $('span.name'));
 
 		if (templateId === BreakpointsRenderer.BREAKPOINT_TEMPLATE_ID) {
-			data.lineNumber = dom.append(data.breakpoint, $('span.line-number'));
 			data.filePath = dom.append(data.breakpoint, $('span.file-path'));
+			const lineNumberContainer = dom.append(data.breakpoint, $('.line-number-container'));
+			data.lineNumber = dom.append(lineNumberContainer, $('span.line-number'));
+		}
+		if (templateId === BreakpointsRenderer.EXCEPTION_BREAKPOINT_TEMPLATE_ID) {
+			dom.addClass(data.breakpoint, 'exception');
 		}
 
 		return data;

src/vs/workbench/parts/debug/electron-browser/debugViews.ts

@@ -13,11 +13,11 @@ import * as errors from 'vs/base/common/errors';
 import { EventType } from 'vs/base/common/events';
 import { IActionRunner, IAction } from 'vs/base/common/actions';
 import { prepareActions } from 'vs/workbench/browser/actionBarRegistry';
-import { ITreeOptions, IHighlightEvent, ITree } from 'vs/base/parts/tree/browser/tree';
+import { IHighlightEvent, ITree } from 'vs/base/parts/tree/browser/tree';
 import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
 import { CollapsibleState } from 'vs/base/browser/ui/splitview/splitview';
 import { CollapsibleViewletView, AdaptiveCollapsibleViewletView, CollapseAction } from 'vs/workbench/browser/viewlet';
-import * as debug from 'vs/workbench/parts/debug/common/debug';
+import { IDebugService, State, IBreakpoint, IExpression } from 'vs/workbench/parts/debug/common/debug';
 import { Expression, Variable, ExceptionBreakpoint, FunctionBreakpoint, Thread } from 'vs/workbench/parts/debug/common/debugModel';
 import * as viewer from 'vs/workbench/parts/debug/electron-browser/debugViewer';
 import { AddWatchExpressionAction, RemoveAllWatchExpressionsAction, AddFunctionBreakpointAction, ToggleBreakpointsActivatedAction, RemoveAllBreakpointsAction } from 'vs/workbench/parts/debug/browser/debugActions';
@@ -27,15 +27,6 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IMessageService } from 'vs/platform/message/common/message';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 
-import IDebugService = debug.IDebugService;
-
-const debugTreeOptions = (ariaLabel: string) => {
-	return <ITreeOptions>{
-		twistiePixels: 20,
-		ariaLabel
-	};
-};
-
 function renderViewTree(container: HTMLElement): HTMLElement {
 	const treeContainer = document.createElement('div');
 	dom.addClass(treeContainer, 'debug-view-content');
@@ -95,7 +86,10 @@ export class VariablesView extends CollapsibleViewletView {
 			renderer: this.instantiationService.createInstance(viewer.VariablesRenderer),
 			accessibilityProvider: new viewer.VariablesAccessibilityProvider(),
 			controller: new viewer.VariablesController(this.debugService, this.contextMenuService, new viewer.VariablesActionProvider(this.instantiationService))
-		}, debugTreeOptions(nls.localize('variablesAriaTreeLabel', "Debug Variables")));
+		}, {
+				ariaLabel: nls.localize('variablesAriaTreeLabel', "Debug Variables"),
+				twistiePixels: 20
+			});
 
 		const viewModel = this.debugService.getViewModel();
 
@@ -115,7 +109,7 @@ export class VariablesView extends CollapsibleViewletView {
 		}));
 		this.toDispose.push(this.debugService.onDidChangeState(() => {
 			const state = this.debugService.state;
-			collapseAction.enabled = state === debug.State.Running || state === debug.State.Stopped;
+			collapseAction.enabled = state === State.Running || state === State.Stopped;
 		}));
 
 		this.toDispose.push(this.debugService.getViewModel().onDidSelectExpression(expression => {
@@ -144,7 +138,7 @@ export class WatchExpressionsView extends CollapsibleViewletView {
 
 	private static MEMENTO = 'watchexpressionsview.memento';
 	private onWatchExpressionsUpdatedScheduler: RunOnceScheduler;
-	private toReveal: debug.IExpression;
+	private toReveal: IExpression;
 
 	constructor(
 		actionRunner: IActionRunner,
@@ -189,7 +183,10 @@ export class WatchExpressionsView extends CollapsibleViewletView {
 			accessibilityProvider: new viewer.WatchExpressionsAccessibilityProvider(),
 			controller: new viewer.WatchExpressionsController(this.debugService, this.contextMenuService, actionProvider),
 			dnd: this.instantiationService.createInstance(viewer.WatchExpressionsDragAndDrop)
-		}, debugTreeOptions(nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'watchAriaTreeLabel' }, "Debug Watch Expressions")));
+		}, {
+				ariaLabel: nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'watchAriaTreeLabel' }, "Debug Watch Expressions"),
+				twistiePixels: 20
+			});
 
 		this.tree.setInput(this.debugService.getModel());
 
@@ -304,7 +301,10 @@ export class CallStackView extends CollapsibleViewletView {
 			renderer: this.instantiationService.createInstance(viewer.CallStackRenderer),
 			accessibilityProvider: this.instantiationService.createInstance(viewer.CallstackAccessibilityProvider),
 			controller: new viewer.CallStackController(this.debugService, this.contextMenuService, actionProvider)
-		}, debugTreeOptions(nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'callStackAriaLabel' }, "Debug Call Stack")));
+		}, {
+				ariaLabel: nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'callStackAriaLabel' }, "Debug Call Stack"),
+				twistiePixels: 20
+			});
 
 		this.toDispose.push(this.debugService.getModel().onDidChangeCallStack(() => {
 			if (!this.onCallStackChangeScheduler.isScheduled()) {
@@ -313,7 +313,7 @@ export class CallStackView extends CollapsibleViewletView {
 		}));
 
 		// Schedule the update of the call stack tree if the viewlet is opened after a session started #14684
-		if (this.debugService.state === debug.State.Stopped) {
+		if (this.debugService.state === State.Stopped) {
 			this.onCallStackChangeScheduler.schedule();
 		}
 	}
@@ -363,8 +363,8 @@ export class BreakpointsView extends AdaptiveCollapsibleViewletView {
 			controller: new viewer.BreakpointsController(this.debugService, this.contextMenuService, actionProvider),
 			sorter: {
 				compare(tree: ITree, element: any, otherElement: any): number {
-					const first = <debug.IBreakpoint>element;
-					const second = <debug.IBreakpoint>otherElement;
+					const first = <IBreakpoint>element;
+					const second = <IBreakpoint>otherElement;
 					if (first instanceof ExceptionBreakpoint) {
 						return -1;
 					}
@@ -385,7 +385,10 @@ export class BreakpointsView extends AdaptiveCollapsibleViewletView {
 					return first.lineNumber - second.lineNumber;
 				}
 			}
-		}, debugTreeOptions(nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'breakpointsAriaTreeLabel' }, "Debug Breakpoints")));
+		}, {
+				ariaLabel: nls.localize({ comment: ['Debug is a noun in this context, not a verb.'], key: 'breakpointsAriaTreeLabel' }, "Debug Breakpoints"),
+				twistiePixels: 0
+			});
 
 		const debugModel = this.debugService.getModel();