Register disposables for cleanup - Part 1 (#24092)

src/sql/base/browser/ui/checkbox/checkbox.ts

@@ -25,10 +25,10 @@ export class Checkbox extends Widget {
 	private _el: HTMLInputElement;
 	private _label: HTMLSpanElement;
 
-	private _onChange = new Emitter<boolean>();
+	private _onChange = this._register(new Emitter<boolean>());
 	public readonly onChange: Event<boolean> = this._onChange.event;
 
-	private _onFocus = new Emitter<void>();
+	private _onFocus = this._register(new Emitter<void>());
 	public readonly onFocus: Event<void> = this._onFocus.event;
 
 	constructor(container: HTMLElement, private readonly _options: ICheckboxOptions) {

src/sql/base/browser/ui/colorbox/colorbox.ts

@@ -19,7 +19,7 @@ export class Colorbox extends Widget {
 	readonly colorElement: HTMLDivElement;
 	private labelNode: HTMLLabelElement;
 
-	private _onSelect = new Emitter<void>();
+	private _onSelect = this._register(new Emitter<void>());
 	public readonly onSelect: Event<void> = this._onSelect.event;
 
 	constructor(container: HTMLElement, opts: ColorboxOptions) {

src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts

@@ -117,7 +117,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 		this._selectListContainer.style.backgroundColor = opt.contextBackground;
 		this._selectListContainer.style.outline = `1px solid ${opt.contextBorder}`;
 
-		this._input = new InputBox(this._inputContainer, contextViewService, {
+		this._input = this._register(new InputBox(this._inputContainer, contextViewService, {
 			validationOptions: {
 				// @SQLTODO
 				// showMessage: false,
@@ -127,7 +127,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 			ariaLabel: this._options.ariaLabel,
 			ariaDescription: this._options.ariaDescription,
 			inputBoxStyles: <IInputBoxStyles>this._options
-		});
+		}));
 
 		// Clear title from input box element (defaults to placeholder value) since we don't want a tooltip for the selected value
 		// in the text box - we already have tooltips for each item in the dropdown itself.

src/sql/base/browser/ui/listBox/listBox.ts

@@ -35,7 +35,7 @@ export class ListBox extends SelectBox {
 	private contextViewProvider: IContextViewProvider;
 	private isValid: boolean;
 
-	private _onKeyDown = new Emitter<StandardKeyboardEvent>();
+	private _onKeyDown = this._register(new Emitter<StandardKeyboardEvent>());
 	public readonly onKeyDown = this._onKeyDown.event;
 
 	constructor(private readonly options: IListBoxOptions,

src/sql/base/browser/ui/panel/panel.ts

@@ -74,7 +74,7 @@ export class TabbedPanel extends Disposable {
 	private _headerVisible: boolean;
 	private _styleElement: HTMLStyleElement;
 
-	private _onTabChange = new Emitter<PanelTabIdentifier>();
+	private _onTabChange = this._register(new Emitter<PanelTabIdentifier>());
 	public onTabChange: Event<PanelTabIdentifier> = this._onTabChange.event;
 
 	private tabHistory: string[] = [];

src/sql/base/browser/ui/radioButton/radioButton.ts

@@ -17,9 +17,9 @@ export interface IRadioButtonOptions {
 export class RadioButton extends Widget {
 
 	private inputElement: HTMLInputElement;
-	private _onClicked = new Emitter<void>();
+	private _onClicked = this._register(new Emitter<void>());
 	public readonly onClicked: Event<void> = this._onClicked.event;
-	private _onChangedCheckedState = new Emitter<boolean>();
+	private _onChangedCheckedState = this._register(new Emitter<boolean>());
 	public readonly onDidChangeCheckedState: Event<boolean> = this._onChangedCheckedState.event;
 	private _label: HTMLSpanElement;
 	private _internalCheckedStateTracker: boolean = false;

src/sql/base/browser/ui/selectBox/selectBox.ts

@@ -50,8 +50,8 @@ export class SelectBox extends vsSelectBox implements AdsWidget {
 		let optionItems: SelectOptionItemSQL[] = SelectBox.createOptions(options);
 		super(optionItems, 0, contextViewProvider, _styles, selectBoxOptions);
 
-		this._onDidSelect = new Emitter<ISelectData>();
+		this._onDidSelect = this._register(new Emitter<ISelectData>());
-		this._onDidFocus = new Emitter<void>();
+		this._onDidFocus = this._register(new Emitter<void>());
 		this._optionsDictionary = new Map<string, number>();
 		this.populateOptionsDictionary(optionItems);
 		this._dialogOptions = optionItems;

src/sql/base/browser/ui/slider/slider.ts

@@ -65,14 +65,14 @@ export class Slider extends Widget {
 	private _datalist: HTMLDataListElement | undefined = undefined;
 	private _showTicks: boolean = false;
 
-	private _onChange = new Emitter<number>();
+	private _onChange = this._register(new Emitter<number>());
 	/**
 	 * Event that is fired every time the user stops dragging the slider.
 	 * Value is the current value of the slider.
 	 */
 	public readonly onChange: Event<number> = this._onChange.event;
 
-	private _onInput = new Emitter<number>();
+	private _onInput = this._register(new Emitter<number>());
 	/**
 	 * Event that is fires every time the value changes while the user is
 	 * dragging the slider. Value is the current value of the slider.

src/sql/base/browser/ui/table/table.ts

@@ -47,25 +47,25 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 
 	private _classChangeTimeout: any;
 
-	private _onContextMenu = new Emitter<ITableMouseEvent>();
+	private _onContextMenu = this._register(new Emitter<ITableMouseEvent>());
 	public readonly onContextMenu: Event<ITableMouseEvent> = this._onContextMenu.event;
 
-	private _onClick = new Emitter<ITableMouseEvent>();
+	private _onClick = this._register(new Emitter<ITableMouseEvent>());
 	public readonly onClick: Event<ITableMouseEvent> = this._onClick.event;
 
-	private _onDoubleClick = new Emitter<ITableMouseEvent>();
+	private _onDoubleClick = this._register(new Emitter<ITableMouseEvent>());
 	public readonly onDoubleClick: Event<ITableMouseEvent> = this._onDoubleClick.event;
 
-	private _onHeaderClick = new Emitter<ITableMouseEvent>();
+	private _onHeaderClick = this._register(new Emitter<ITableMouseEvent>());
 	public readonly onHeaderClick: Event<ITableMouseEvent> = this._onHeaderClick.event;
 
-	private _onColumnResize = new Emitter<void>();
+	private _onColumnResize = this._register(new Emitter<void>());
 	public readonly onColumnResize = this._onColumnResize.event;
 
-	private _onKeyDown = new Emitter<ITableKeyboardEvent>();
+	private _onKeyDown = this._register(new Emitter<ITableKeyboardEvent>());
 	public readonly onKeyDown = this._onKeyDown.event;
 
-	private _onBlur = new Emitter<void>();
+	private _onBlur = this._register(new Emitter<void>());
 	public readonly onBlur = this._onBlur.event;
 
 	constructor(

src/sql/base/browser/ui/table/tableCellEditorFactory.ts

@@ -67,15 +67,15 @@ export class TableCellEditorFactory {
 			}
 
 			public init(): void {
-				this._input = new InputBox(this._args.container, self._contextViewProvider, {
+				this._input = this._register(new InputBox(this._args.container, self._contextViewProvider, {
 					type: inputType,
 					inputBoxStyles: defaultInputBoxStyles
-				});
+				}));
 				this._input.element.style.height = '100%';
 				this._input.focus();
-				this._input.onLoseFocus(async () => {
+				this._register(this._input.onLoseFocus(async () => {
 					await this.commitEdit();
-				});
+				}));
 				this._register(this._input);
 				this._input.value = presetValue ?? '';
 			}
@@ -162,19 +162,19 @@ export class TableCellEditorFactory {
 				container.style.width = '100%';
 				if (isEditable) {
 					this._component = new Dropdown(container, self._contextViewProvider, self._options.editableDropdownStyles);
-					this._component.onValueChange(async () => {
+					this._register(this._component.onValueChange(async () => {
 						await this.commitEdit();
-					});
+					}));
-					this._component.onBlur(async () => {
+					this._register(this._component.onBlur(async () => {
 						await this.commitEdit();
-					});
+					}));
 				} else {
 					this._component = new SelectBox([], undefined, self._options.selectBoxStyles, self._contextViewProvider);
 					this._component.render(container);
 					this._component.selectElem.style.height = '100%';
-					this._component.onDidSelect(async () => {
+					this._register(this._component.onDidSelect(async () => {
 						await this.commitEdit();
-					});
+					}));
 				}
 				this._component.focus();
 				this._register(this._component);

src/sql/platform/accounts/common/accountActions.ts

@@ -40,9 +40,9 @@ export class AddAccountAction extends Action {
 		super(AddAccountAction.ID, AddAccountAction.LABEL);
 		this.class = 'add-linked-account-action';
 
-		this._addAccountCompleteEmitter = new Emitter<void>();
+		this._addAccountCompleteEmitter = this._register(new Emitter<void>());
-		this._addAccountErrorEmitter = new Emitter<string>();
+		this._addAccountErrorEmitter = this._register(new Emitter<string>());
-		this._addAccountStartEmitter = new Emitter<void>();
+		this._addAccountStartEmitter = this._register(new Emitter<void>());
 	}
 
 	public override async run(): Promise<void> {

src/sql/platform/editableDropdown/browser/editableDropdown.component.ts

@@ -45,11 +45,12 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha
 			...defaultEditableDropdownStyles
 		};
 		this._selectbox = new Dropdown(this._el.nativeElement, this.contextViewService, dropdownOptions);
+		this._register(this._selectbox);
 		this._selectbox.values = this.options;
 		this._selectbox.value = this.selectedOption;
 		this._selectbox.fireOnTextChange = true;
 
-		this._selectbox.onValueChange(e => {
+		this._register(this._selectbox.onValueChange(e => {
 			if (this.onlyEmitOnChange) {
 				if (this._previousVal !== e) {
 					this.onDidSelect.emit(e);
@@ -58,7 +59,7 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha
 			} else {
 				this.onDidSelect.emit(e);
 			}
-		});
+		}));
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {

src/sql/platform/inputBox/browser/inputBox.component.ts

@@ -37,18 +37,18 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges {
 	}
 
 	ngOnInit(): void {
-		this._inputbox = new vsInputBox(this._el.nativeElement, this.contextViewService, {
+		this._inputbox = this._register(new vsInputBox(this._el.nativeElement, this.contextViewService, {
 			min: this.min,
 			max: this.max,
 			type: this.type,
 			placeholder: this.placeholder,
 			ariaLabel: this.ariaLabel,
 			inputBoxStyles: defaultInputBoxStyles
-		});
+		}));
 		if (this.value) {
 			this._inputbox.value = this.value;
 		}
-		this._inputbox.onDidChange(e => {
+		this._register(this._inputbox.onDidChange(e => {
 			switch (this.type) {
 				case 'number':
 					if (e) {
@@ -58,7 +58,7 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges {
 				default:
 					this.onDidChange.emit(e);
 			}
-		});
+		}));
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {

src/sql/platform/selectBox/browser/selectBox.component.ts

@@ -39,9 +39,9 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 	}
 
 	ngOnInit(): void {
-		this._selectbox = new sqlSelectBox(this.options, this.selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
+		this._selectbox = this._register(new sqlSelectBox(this.options, this.selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.ariaLabel }));
 		this._selectbox.render(this._el.nativeElement);
-		this._selectbox.onDidSelect(e => {
+		this._register(this._selectbox.onDidSelect(e => {
 			if (this.onlyEmitOnChange) {
 				if (this._previousVal !== e.selected) {
 					this.onDidSelect.emit(e);
@@ -50,7 +50,7 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 			} else {
 				this.onDidSelect.emit(e);
 			}
-		});
+		}));
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {

src/sql/workbench/browser/designer/designer.ts

@@ -141,7 +141,7 @@ export class Designer extends Disposable {
 		this._propertiesPaneContainer = DOM.$('.properties-container');
 		this._verticalSplitView = new SplitView(this._verticalSplitViewContainer, { orientation: Orientation.VERTICAL });
 		this._horizontalSplitView = new SplitView(this._horizontalSplitViewContainer, { orientation: Orientation.HORIZONTAL });
-		this._contentTabbedPanel = new TabbedPanel(this._tabbedPanelContainer);
+		this._contentTabbedPanel = this._register(new TabbedPanel(this._tabbedPanelContainer));
 		this._container.appendChild(this._verticalSplitViewContainer);
 		this._contentContainer.appendChild(this._topContentContainer);
 		this._contentContainer.appendChild(this._tabbedPanelContainer);
@@ -154,7 +154,7 @@ export class Designer extends Disposable {
 			maximumSize: Number.POSITIVE_INFINITY,
 			onDidChange: Event.None
 		}, Sizing.Distribute);
-		this._scriptTabbedPannel = new TabbedPanel(this._editorContainer);
+		this._scriptTabbedPannel = this._register(new TabbedPanel(this._editorContainer));
 		this._issuesView = this._instantiationService.createInstance(DesignerIssuesTabPanelView);
 		this._register(this._issuesView.onIssueSelected((path) => {
 			if (path && path.length > 0) {
@@ -638,6 +638,7 @@ export class Designer extends Disposable {
 						dropdown.select(idx);
 					}
 				}
+				this._register(dropdown);
 				break;
 			default:
 				break;
@@ -693,24 +694,24 @@ export class Designer extends Disposable {
 				container.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = componentDefinition.componentProperties?.title ?? '';
 				const inputContainer = container.appendChild(DOM.$(''));
 				const inputProperties = componentDefinition.componentProperties as InputBoxProperties;
-				const input = new InputBox(inputContainer, this._contextViewProvider, {
+				const input = this._register(new InputBox(inputContainer, this._contextViewProvider, {
 					ariaLabel: inputProperties.title,
 					type: inputProperties.inputType,
 					ariaDescription: componentDefinition.description,
 					inputBoxStyles: defaultInputBoxStyles
-				});
+				}));
-				input.onLoseFocus((args) => {
+				this._register(input.onLoseFocus((args) => {
 					if (args.hasChanged) {
 						this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: args.value, source: view });
 					}
-				});
+				}));
-				input.onInputFocus(() => {
+				this._register(input.onInputFocus(() => {
 					if (view === 'PropertiesView') {
 						this._propertiesPane.updateDescription(componentDefinition);
 					} else if (view === 'TabsView' || view === 'TopContentView') {
 						this.updatePropertiesPane(DesignerRootObjectPath);
 					}
-				});
+				}));
 				if (view === 'TopContentView' && inputProperties.width) {
 					input.width = inputProperties.width as number;
 				}
@@ -722,39 +723,39 @@ export class Designer extends Disposable {
 				const dropdownProperties = componentDefinition.componentProperties as DropDownProperties;
 				let dropdown;
 				if (dropdownProperties.isEditable) {
-					dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, {
+					dropdown = this._register(new Dropdown(dropdownContainer, this._contextViewProvider, {
 						values: dropdownProperties.values as string[] || [],
 						ariaLabel: componentDefinition.componentProperties?.title,
 						ariaDescription: componentDefinition.description,
 						...defaultEditableDropdownStyles
-					});
+					}));
-					dropdown.onValueChange((value) => {
+					this._register(dropdown.onValueChange((value) => {
 						this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: value, source: view });
-					});
+					}));
-					dropdown.onFocus(() => {
+					this._register(dropdown.onFocus(() => {
 						if (view === 'PropertiesView') {
 							this._propertiesPane.updateDescription(componentDefinition);
 						} else if (view === 'TabsView' || view === 'TopContentView') {
 							this.updatePropertiesPane(DesignerRootObjectPath);
 						}
-					});
+					}));
 				} else {
-					dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, defaultSelectBoxStyles, this._contextViewProvider, undefined, {
+					dropdown = this._register(new SelectBox(dropdownProperties.values as string[] || [], undefined, defaultSelectBoxStyles, this._contextViewProvider, undefined, {
 						ariaLabel: componentDefinition.componentProperties?.title,
 						ariaDescription: componentDefinition.description
-					});
+					}));
 					dropdown.render(dropdownContainer);
 					dropdown.selectElem.style.height = '25px';
-					dropdown.onDidSelect((e) => {
+					this._register(dropdown.onDidSelect((e) => {
 						this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected, source: view });
-					});
+					}));
-					dropdown.onDidFocus(() => {
+					this._register(dropdown.onDidFocus(() => {
 						if (view === 'PropertiesView') {
 							this._propertiesPane.updateDescription(componentDefinition);
 						} else if (view === 'TabsView' || view === 'TopContentView') {
 							this.updatePropertiesPane(DesignerRootObjectPath);
 						}
-					});
+					}));
 				}
 				component = dropdown;
 				break;
@@ -762,17 +763,17 @@ export class Designer extends Disposable {
 				container.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = componentDefinition.componentProperties?.title ?? '';
 				const checkboxContainer = container.appendChild(DOM.$(''));
 				const checkboxProperties = componentDefinition.componentProperties as CheckBoxProperties;
-				const checkbox = new Checkbox(checkboxContainer, { ...defaultCheckboxStyles, label: '', ariaLabel: checkboxProperties.title, ariaDescription: componentDefinition.description });
+				const checkbox = this._register(new Checkbox(checkboxContainer, { ...defaultCheckboxStyles, label: '', ariaLabel: checkboxProperties.title, ariaDescription: componentDefinition.description }));
-				checkbox.onChange((newValue) => {
+				this._register(checkbox.onChange((newValue) => {
 					this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: newValue, source: view });
-				});
+				}));
-				checkbox.onFocus(() => {
+				this._register(checkbox.onFocus(() => {
 					if (view === 'PropertiesView') {
 						this._propertiesPane.updateDescription(componentDefinition);
 					} else if (view === 'TabsView' || view === 'TopContentView') {
 						this.updatePropertiesPane(DesignerRootObjectPath);
 					}
-				});
+				}));
 				component = checkbox;
 				break;
 			case 'table':
@@ -782,7 +783,7 @@ export class Designer extends Disposable {
 				const tableProperties = componentDefinition.componentProperties as DesignerTableProperties;
 				const taskbar = this.addTableTaskbar(container, tableProperties);
 				const tableContainer = container.appendChild(DOM.$('.full-row'));
-				const table = new Table(tableContainer, this._accessibilityService, this._quickInputService, getTableStyles({
+				const table = this._register(new Table(tableContainer, this._accessibilityService, this._quickInputService, getTableStyles({
 					listActiveSelectionBackground: undefined,
 					listActiveSelectionForeground: undefined,
 					listFocusAndSelectionBackground: undefined,
@@ -805,7 +806,7 @@ export class Designer extends Disposable {
 					rowHeight: TableRowHeight,
 					headerRowHeight: TableHeaderRowHeight,
 					editorLock: new Slick.EditorLock()
-				});
+				}));
 				table.grid.setSelectionModel(new RowSelectionModel());
 				if (taskbar) {
 					taskbar.context = { table: table, path: propertyPath, source: view };
@@ -854,14 +855,14 @@ export class Designer extends Disposable {
 								width: propertyDefinition.componentProperties.width as number
 							});
 							table.registerPlugin(checkboxColumn);
-							checkboxColumn.onChange((e) => {
+							this._register(checkboxColumn.onChange((e) => {
 								this.handleEdit({
 									type: DesignerEditType.Update,
 									path: [...propertyPath, e.row, propertyDefinition.propertyName],
 									value: e.value,
 									source: view
 								});
-							});
+							}));
 							return checkboxColumn.definition;
 						case 'dropdown':
 							const dropdownProperties = propertyDefinition.componentProperties as DropDownProperties;

src/sql/workbench/browser/modal/optionsDialog.ts

@@ -123,7 +123,7 @@ export class OptionsDialog extends Modal {
 			let option: azdata.ServiceOption = options[i];
 			let rowContainer = DialogHelper.appendRow(container, option.displayName, 'optionsDialog-label', 'optionsDialog-input', `option-${option.name}`, option.isRequired);
 			const optionElement = OptionsDialogHelper.createOptionElement(option, rowContainer, this._optionValues, this._optionElements, this._contextViewService, (name) => this.onOptionLinkClicked(name));
-			this.disposableStore.add(optionElement.optionWidget);
+			this._register(optionElement.optionWidget);
 		}
 	}
 

src/sql/workbench/browser/modelComponents/componentBase.ts

@@ -43,7 +43,7 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
 
 	abstract descriptor: IComponentDescriptor;
 	abstract modelStore: IModelStore;
-	protected _onEventEmitter = new Emitter<IComponentEventArgs>();
+	protected _onEventEmitter = this._register(new Emitter<IComponentEventArgs>());
 
 	public layout(): void {
 		if (!this._changeRef['destroyed']) {

src/sql/workbench/browser/modelComponents/listbox.component.ts

@@ -48,7 +48,7 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 				items: [],
 				...defaultListBoxStyles
 			}, this.contextViewService);
-			this._input.onKeyDown(e => {
+			this._register(this._input.onKeyDown(e => {
 				if (this._input.selectedOptions.length > 0) {
 					const key = e.keyCode;
 					const ctrlOrCmd = e.ctrlKey || e.metaKey;
@@ -65,7 +65,7 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 						e.stopPropagation();
 					}
 				}
-			});
+			}));
 			this._input.render(this._inputContainer.nativeElement);
 
 			this._register(this._input);

src/sql/workbench/contrib/charts/browser/chartView.ts

@@ -326,7 +326,7 @@ export class ChartView extends Disposable implements IPanelView {
 		let value = this.state ? this.state.options[entry] || option.default : option.default;
 		switch (option.type) {
 			case ControlType.checkbox:
-				let checkbox = new Checkbox(optionInput, {
+				let checkbox = this._register(new Checkbox(optionInput, {
 					label: option.label,
 					ariaLabel: option.label,
 					checked: value,
@@ -338,25 +338,25 @@ export class ChartView extends Disposable implements IPanelView {
 							}
 						}
 					}
-				});
+				}));
 				setFunc = (val: boolean) => {
 					checkbox.checked = val;
 				};
 				break;
 			case ControlType.combo:
 				//pass options into changeAltNames in order for SelectBox to show user-friendly names.
-				let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options!), undefined!, defaultSelectBoxStyles, this._contextViewService);
+				let dropdown = this._register(new SelectBox(option.displayableOptions || this.changeToAltNames(option.options!), undefined!, defaultSelectBoxStyles, this._contextViewService));
 				dropdown.setAriaLabel(option.label);
 				dropdown.select(option.options!.indexOf(value));
 				dropdown.render(optionInput);
-				dropdown.onDidSelect(e => {
+				this._register(dropdown.onDidSelect(e => {
 					if (this._options[entry] !== option.options![e.index]) {
 						(this._options[entry] as any) = option.options![e.index];
 						if (this.insight) {
 							this.insight.options = this._options;
 						}
 					}
-				});
+				}));
 				setFunc = (val: string) => {
 					if (!isUndefinedOrNull(val)) {
 						dropdown.select(option.options!.indexOf(val));
@@ -364,19 +364,19 @@ export class ChartView extends Disposable implements IPanelView {
 				};
 				break;
 			case ControlType.input:
-				let input = new InputBox(optionInput, this._contextViewService, {
+				let input = this._register(new InputBox(optionInput, this._contextViewService, {
 					ariaLabel: option.label,
 					inputBoxStyles: defaultInputBoxStyles
-				});
+				}));
 				input.value = value || '';
-				input.onDidChange(e => {
+				this._register(input.onDidChange(e => {
 					if (this._options[entry] !== e) {
 						(this._options[entry] as any) = e;
 						if (this.insight) {
 							this.insight.options = this._options;
 						}
 					}
-				});
+				}));
 				setFunc = (val: string) => {
 					if (!isUndefinedOrNull(val)) {
 						input.value = val;
@@ -384,13 +384,13 @@ export class ChartView extends Disposable implements IPanelView {
 				};
 				break;
 			case ControlType.numberInput:
-				let numberInput = new InputBox(optionInput, this._contextViewService, {
+				let numberInput = this._register(new InputBox(optionInput, this._contextViewService, {
 					type: 'number',
 					ariaLabel: option.label,
 					inputBoxStyles: defaultInputBoxStyles
-				});
+				}));
 				numberInput.value = value || '';
-				numberInput.onDidChange(e => {
+				this._register(numberInput.onDidChange(e => {
 					if (this._options[entry] !== e) {
 						// When user clears the input box, the value we get from the input box will be empty string.
 						(this._options[entry] as any) = (e === '' ? undefined : Number(e));
@@ -398,7 +398,7 @@ export class ChartView extends Disposable implements IPanelView {
 							this.insight.options = this._options;
 						}
 					}
-				});
+				}));
 				setFunc = (val: string) => {
 					if (!isUndefinedOrNull(val)) {
 						numberInput.value = val;
@@ -406,21 +406,21 @@ export class ChartView extends Disposable implements IPanelView {
 				};
 				break;
 			case ControlType.dateInput:
-				let dateInput = new InputBox(optionInput, this._contextViewService, {
+				let dateInput = this._register(new InputBox(optionInput, this._contextViewService, {
 					type: 'datetime-local',
 					ariaLabel: option.label,
 					inputBoxStyles: defaultInputBoxStyles
-				});
+				}));
 
 				dateInput.value = value || '';
-				dateInput.onDidChange(e => {
+				this._register(dateInput.onDidChange(e => {
 					if (this._options[entry] !== e) {
 						(this._options[entry] as any) = e;
 						if (this.insight) {
 							this.insight.options = this._options;
 						}
 					}
-				});
+				}));
 				setFunc = (val: string) => {
 					if (!isUndefinedOrNull(val)) {
 						dateInput.value = val;

src/sql/workbench/contrib/editData/browser/editDataActions.ts

@@ -161,7 +161,7 @@ export class ChangeMaxRowsActionItem extends Disposable implements IActionViewIt
 		super();
 		this._options = ['200', '1000', '10000'];
 		this._currentOptionsIndex = 0;
-		this.selectBox = new SelectBox(this._options, this._options[this._currentOptionsIndex], defaultSelectBoxStyles, contextViewService);
+		this.selectBox = this._register(new SelectBox(this._options, this._options[this._currentOptionsIndex], defaultSelectBoxStyles, contextViewService));
 		this._registerListeners();
 		this._refreshOptions();
 		this.defaultRowCount = Number(this._options[this._currentOptionsIndex]);

src/sql/workbench/contrib/notebook/browser/calloutDialog/imageCalloutDialog.ts

@@ -115,16 +115,16 @@ export class ImageCalloutDialog extends Modal {
 		DOM.append(locationRow, this._imageLocationLabel);
 
 		let radioButtonGroup = DOM.$('.radio-group');
-		this._imageLocalRadioButton = new RadioButton(radioButtonGroup, {
+		this._imageLocalRadioButton = this._register(new RadioButton(radioButtonGroup, {
 			label: constants.localImageLabel,
 			enabled: true,
 			checked: true
-		});
+		}));
-		this._imageRemoteRadioButton = new RadioButton(radioButtonGroup, {
+		this._imageRemoteRadioButton = this._register(new RadioButton(radioButtonGroup, {
 			label: constants.remoteImageLabel,
 			enabled: true,
 			checked: false
-		});
+		}));
 		this._imageLocalRadioButton.name = this._editorImageLocationGroup;
 		this._imageLocalRadioButton.value = constants.locationLocal;
 		this._imageRemoteRadioButton.name = this._editorImageLocationGroup;

src/sql/workbench/contrib/profiler/browser/profilerEditor.ts

@@ -365,7 +365,7 @@ export class ProfilerEditor extends EditorPane {
 		let editorContainer = this._createProfilerEditor();
 		let tabbedPanelContainer = document.createElement('div');
 		tabbedPanelContainer.className = 'profiler-tabbedPane';
-		this._tabbedPanel = new TabbedPanel(tabbedPanelContainer);
+		this._tabbedPanel = this._register(new TabbedPanel(tabbedPanelContainer));
 		attachTabbedPanelStyler(this._tabbedPanel, this.themeService);
 
 		const expandPanel = () => {
@@ -415,7 +415,7 @@ export class ProfilerEditor extends EditorPane {
 		});
 
 		const detailTableCopyKeybind = new CopyKeybind<IDetailData>();
-		detailTableCopyKeybind.onCopy((ranges: Slick.Range[]) => {
+		this._register(detailTableCopyKeybind.onCopy((ranges: Slick.Range[]) => {
 			// we always only get 1 item in the ranges
 			if (ranges && ranges.length === 1) {
 				handleCopyRequest(this._clipboardService, this.textResourcePropertiesService, ranges[0], (row, cell) => {
@@ -424,7 +424,7 @@ export class ProfilerEditor extends EditorPane {
 					return cell === 0 ? item.label : item.value;
 				});
 			}
-		});
+		}));
 		this._detailTable.setSelectionModel(new CellSelectionModel());
 		this._detailTable.registerPlugin(detailTableCopyKeybind);
 		this._register(this._componentContextService.registerTable(this._detailTable));

src/sql/workbench/contrib/profiler/browser/profilerTableEditor.ts

@@ -106,7 +106,7 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 		});
 		this._profilerTable.setSelectionModel(new RowSelectionModel());
 		const copyKeybind = new CopyKeybind();
-		copyKeybind.onCopy((e) => {
+		this._register(copyKeybind.onCopy((e) => {
 			// in context of this table, the selection mode is row selection, copy the whole row will get a lot of unwanted data
 			// ignore the passed in range and create a range so that it only copies the currently selected cell value.
 			const activeCell = this._profilerTable.activeCell;
@@ -114,7 +114,7 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 				const fieldName = this._input.columns[cell].field;
 				return this._input.data.getItem(row)[fieldName];
 			});
-		});
+		}));
 		this._profilerTable.registerPlugin(copyKeybind);
 		this._register(this._componentContextService.registerTable(this._profilerTable));
 

src/sql/workbench/contrib/query/browser/queryActions.ts

@@ -646,12 +646,12 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt
 	) {
 		super();
 		this._databaseListDropdown = $('.databaseListDropdown');
-		this._dropdown = new Dropdown(this._databaseListDropdown, contextViewProvider, {
+		this._dropdown = this._register(new Dropdown(this._databaseListDropdown, contextViewProvider, {
 			strictSelection: true,
 			placeholder: this._selectDatabaseString,
 			ariaLabel: this._selectDatabaseString,
 			...defaultEditableDropdownStyles
-		});
+		}));
 
 		// Allows database selector to commit typed or pasted DB names without the need to click
 		// or press enter to make a selection when focus is moved away from the selector.

src/sql/workbench/services/accountManagement/browser/accountDialog.ts

@@ -340,6 +340,7 @@ export class AccountDialog extends Modal {
 			AddAccountAction,
 			newProvider.addedProvider.id
 		);
+		this._register(addAccountAction);
 		addAccountAction.addAccountErrorEvent(msg => this._onAddAccountErrorEmitter.fire(msg));
 
 		let providerView = new AccountPanel(

src/sql/workbench/services/accountManagement/browser/accountPickerImpl.ts

@@ -146,10 +146,11 @@ export class AccountPicker extends Disposable {
 		};
 
 		// Create the add account action
-		const addAccountAction = this._instantiationService.createInstance(AddAccountAction, undefined);
+		const addAccountAction = this._register(this._instantiationService.createInstance(AddAccountAction, undefined));
-		addAccountAction.addAccountCompleteEvent(() => this._addAccountCompleteEmitter.fire());
+		this._register(addAccountAction.addAccountCompleteEvent(() => this._addAccountCompleteEmitter.fire()));
-		addAccountAction.addAccountErrorEvent((msg) => this._addAccountErrorEmitter.fire(msg));
+		this._register(addAccountAction.addAccountErrorEvent((msg) => this._addAccountErrorEmitter.fire(msg)));
-		addAccountAction.addAccountStartEvent(() => this._addAccountStartEmitter.fire());
+		this._register(addAccountAction.addAccountStartEvent(() => this._addAccountStartEmitter.fire()));
+		this._register(addAccountAction);
 
 		this._dropdown = this._register(new DropdownList(this._accountContainer, accountOptions, this._accountListContainer, this._accountList, addAccountAction));
 		this._tenantDropdown = this._register(new DropdownList(this._tenantContainer, tenantOption, this._tenantListContainer, this._tenantList));

src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts

@@ -56,7 +56,7 @@ export class CmsConnectionWidget extends ConnectionWidget {
 		if (authTypeOption) {
 			let authTypeDefault = this.getAuthTypeDefault(authTypeOption, OS);
 			let authTypeDefaultDisplay = this.getAuthTypeDisplayName(authTypeDefault);
-			this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName });
+			this._authTypeSelectBox = this._register(new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName }));
 		}
 	}
 

src/sql/workbench/services/connection/browser/connectionDialogWidget.ts

@@ -192,7 +192,7 @@ export class ConnectionDialogWidget extends Modal {
 		this._body = DOM.append(container, DOM.$('.connection-dialog'));
 
 		const connectTypeLabel = localize('connectType', "Connection type");
-		this._providerTypeSelectBox = new SelectBox(this.providerDisplayNameOptions, this.selectedProviderType, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: connectTypeLabel });
+		this._providerTypeSelectBox = this._register(new SelectBox(this.providerDisplayNameOptions, this.selectedProviderType, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: connectTypeLabel }));
 		// Recent connection tab
 		const recentConnectionTab = DOM.$('.connection-recent-tab');
 		const recentConnectionContainer = DOM.append(recentConnectionTab, DOM.$('.connection-recent', { id: 'recentConnection' }));
@@ -202,7 +202,7 @@ export class ConnectionDialogWidget extends Modal {
 		this.createRecentConnections();
 		DOM.hide(this._recentConnection);
 
-		this._panel = new TabbedPanel(this._body);
+		this._panel = this._register(new TabbedPanel(this._body));
 		this._panel.element.style.margin = '0px 10px';
 		attachTabbedPanelStyler(this._panel, this._themeService);
 		this._recentConnectionTabId = this._panel.pushTab({

src/sql/workbench/services/dialog/browser/dialogPane.ts

@@ -59,7 +59,7 @@ export class DialogPane extends Disposable {
 			let modelViewId = typeof this._content === 'string' ? this._content : this._content[0].content;
 			this.initializeModelViewContainer(this._body, modelViewId, undefined, this.setInitialFocus);
 		} else {
-			this._tabbedPanel = new TabbedPanel(this._body);
+			this._tabbedPanel = this._register(new TabbedPanel(this._body));
 			attachTabbedPanelStyler(this._tabbedPanel, this._themeService);
 			this._content.forEach((tab, tabIndex) => {
 				if (this._selectedTabIndex === tabIndex) {

src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts

@@ -95,7 +95,7 @@ export class FileBrowserDialog extends Modal {
 		});
 
 		let filterLabel = localize('fileFilter', "Files of type");
-		this._fileFilterSelectBox = new SelectBox(['*'], '*', defaultSelectBoxStyles, this._contextViewService);
+		this._fileFilterSelectBox = this._register(new SelectBox(['*'], '*', defaultSelectBoxStyles, this._contextViewService));
 		this._fileFilterSelectBox.setAriaLabel(filterLabel);
 		let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box');
 		DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox);

src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts

@@ -187,7 +187,7 @@ export class ProfilerFilterDialog extends Modal {
 	}
 
 	private createSelectBox(container: HTMLElement, options: string[], selectedOption: string, ariaLabel: string): SelectBox {
-		const dropdown = new SelectBox(options, selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: ariaLabel });
+		const dropdown = this._register(new SelectBox(options, selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: ariaLabel }));
 		dropdown.render(container);
 		return dropdown;
 	}

src/sql/workbench/services/restore/browser/restoreDialog.ts

@@ -268,17 +268,17 @@ export class RestoreDialog extends Modal {
 				...defaultEditableDropdownStyles
 			}
 		));
-		this._databaseDropdown.onValueChange(s => {
+		this._register(this._databaseDropdown.onValueChange(s => {
 			this.databaseSelected(s);
-		});
+		}));
 
-		this._databaseDropdown.onBlur(() => {
+		this._register(this._databaseDropdown.onBlur(() => {
 			this.databaseSelected(this._databaseDropdown!.value);
-		});
+		}));
 
-		this._databaseDropdown.onFocus(() => {
+		this._register(this._databaseDropdown.onFocus(() => {
 			this._onDatabaseListFocused.fire();
-		});
+		}));
 
 		this._databaseDropdown.value = this.viewModel.targetDatabaseName!;
 
@@ -402,7 +402,7 @@ export class RestoreDialog extends Modal {
 
 		const restorePanel = DOM.$('.restore-panel');
 		container.appendChild(restorePanel);
-		this._panel = new TabbedPanel(restorePanel);
+		this._panel = this._register(new TabbedPanel(restorePanel));
 		attachTabbedPanelStyler(this._panel, this._themeService);
 		this._generalTab = {
 			identifier: 'general',

src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts

@@ -192,11 +192,10 @@ export class ServerGroupDialog extends Modal {
 		for (let i = 0; i < this.withViewModel.colors.length; i++) {
 			const color = this.withViewModel.colors[i];
 
-			const colorBox = new Colorbox(container, {
+			const colorBox = this._register(new Colorbox(container, {
 				name: 'server-group-color',
 				color: color
-			});
+			}));
-
 			this._register(colorBox.onSelect((viaKeyboard) => {
 				this.onSelectGroupColor(color);
 			}));