Fixing the layering in the base folder (#5308)

* removes more builder references

* remove builder from profiler

* formatting

* fix profiler dailog

* remove builder from oatuhdialog

* remove the rest of builder references

* formatting

* add more strict null checks to base

* enable strict tslint rules

* code layering of base

* wip

* working through changes to table data view

* fix tests

* update editabledropdown to not use layout service

* wip

* fix imports

* fix import

* fix compile error

* add more localization

* add comments to changes to import patterns

* add more import comments

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

@@ -3,6 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/checkbox';
+
 import { Color } from 'vs/base/common/color';
 import { Event, Emitter } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';

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

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./scrollableSplitview';
+import 'vs/css!./media/scrollableSplitview';
 import { HeightMap, IView as HeightIView, IViewItem as HeightIViewItem } from './heightMap';
 
 import { IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';

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

@@ -1,65 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import {
-	Component, Inject, forwardRef, ElementRef, OnInit, Input,
-	Output, OnChanges, SimpleChanges, EventEmitter
-} from '@angular/core';
-
-import { SelectBox as vsSelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { AngularDisposable } from 'sql/base/node/lifecycle';
-
-import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
-import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
-
-@Component({
-	selector: 'select-box',
-	template: ''
-})
-export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
-	private _selectbox: vsSelectBox;
-
-	@Input() options: string[];
-	@Input() selectedOption: string;
-	@Input() onlyEmitOnChange = false;
-	@Input('aria-label') ariaLabel: string;
-
-	@Output() onDidSelect = new EventEmitter<ISelectData>();
-
-	private _previousVal: string;
-
-	constructor(
-		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
-		@Inject(IThemeService) private themeService: IThemeService,
-		@Inject(IContextViewService) private contextViewService: IContextViewService
-	) {
-		super();
-	}
-
-	ngOnInit(): void {
-		this._selectbox = new vsSelectBox(this.options, this.selectedOption, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
-		this._selectbox.render(this._el.nativeElement);
-		this._selectbox.onDidSelect(e => {
-			if (this.onlyEmitOnChange) {
-				if (this._previousVal !== e.selected) {
-					this.onDidSelect.emit(e);
-					this._previousVal = e.selected;
-				}
-			} else {
-				this.onDidSelect.emit(e);
-			}
-		});
-		this._register(attachSelectBoxStyler(this._selectbox, this.themeService));
-	}
-
-	ngOnChanges(changes: SimpleChanges): void {
-	}
-
-	public get value(): string {
-		return this._selectbox.value;
-	}
-}

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

@@ -11,8 +11,8 @@ import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contex
 import * as dom from 'vs/base/browser/dom';
 import { RenderOptions, renderFormattedText, renderText } from 'vs/base/browser/htmlContentRenderer';
 import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
-import aria = require('vs/base/browser/ui/aria/aria');
-import nls = require('vs/nls');
+import * as aria from 'vs/base/browser/ui/aria/aria';
+import * as nls from 'vs/nls';
 
 const $ = dom.$;
 

src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts

@@ -1,7 +1,5 @@
 // Adopted and converted to typescript from https://github.com/6pac/SlickGrid/blob/master/plugins/slick.checkboxselectcolumn.js
 
-import 'vs/css!vs/base/browser/ui/checkbox/checkbox';
-
 import { mixin } from 'vs/base/common/objects';
 import * as nls from 'vs/nls';
 import { ICheckboxStyles } from 'vs/base/browser/ui/checkbox/checkbox';

src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts

@@ -2,10 +2,11 @@
 // heavily modified
 
 import { mixin } from 'vs/base/common/objects';
-import { Button } from '../../button/button';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
+import { IButtonStyles } from 'vs/base/browser/ui/button/button';
+import { localize } from 'vs/nls';
+
+import { Button } from 'sql/base/browser/ui/button/button';
 import { escape } from 'sql/base/common/strings';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class HeaderFilter {
 
@@ -28,7 +29,7 @@ export class HeaderFilter {
 	private workingFilters: any;
 	private columnDef: any;
 
-	constructor(options: any, private _themeService: IThemeService) {
+	constructor(options: any) {
 		this.options = mixin(options, this.defaults, false);
 	}
 
@@ -191,8 +192,8 @@ export class HeaderFilter {
 			.appendTo(this.$menu);
 
 		this.okButton = new Button(this.$menu.get(0));
-		this.okButton.label = 'OK';
-		this.okButton.title = 'OK';
+		this.okButton.label = localize('headerFilter.ok', "OK");
+		this.okButton.title = localize('headerFilter.ok', "OK");
 		this.okButton.element.id = 'filter-ok-button';
 		const okElement = jQuery('#filter-ok-button');
 		okElement.bind('click', (ev) => {
@@ -202,8 +203,8 @@ export class HeaderFilter {
 		});
 
 		this.clearButton = new Button(this.$menu.get(0));
-		this.clearButton.label = 'Clear';
-		this.clearButton.title = 'Clear';
+		this.clearButton.label = localize('headerFilter.clear', "Clear");
+		this.clearButton.title = localize('headerFilter.clear', "Clear");
 		this.clearButton.element.id = 'filter-clear-button';
 		const clearElement = jQuery('#filter-clear-button');
 		clearElement.bind('click', (ev) => {
@@ -213,14 +214,11 @@ export class HeaderFilter {
 		});
 
 		this.cancelButton = new Button(this.$menu.get(0));
-		this.cancelButton.label = 'Cancel';
-		this.cancelButton.title = 'Cancel';
+		this.cancelButton.label = localize('headerFilter.cancel', "Cancel");
+		this.cancelButton.title = localize('headerFilter.cancel', "Cancel");
 		this.cancelButton.element.id = 'filter-cancel-button';
 		const cancelElement = jQuery('#filter-cancel-button');
 		cancelElement.bind('click', () => this.hideMenu());
-		attachButtonStyler(this.okButton, this._themeService);
-		attachButtonStyler(this.clearButton, this._themeService);
-		attachButtonStyler(this.cancelButton, this._themeService);
 
 		jQuery(':checkbox', $filter).bind('click', (e) => {
 			this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, jQuery(e.target));
@@ -238,6 +236,12 @@ export class HeaderFilter {
 			.css('left', (left > 0 ? left : 0));
 	}
 
+	public style(styles: IButtonStyles): void {
+		this.okButton.style(styles);
+		this.clearButton.style(styles);
+		this.cancelButton.style(styles);
+	}
+
 	private columnsResized() {
 		this.hideMenu();
 	}

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

@@ -11,7 +11,6 @@ import 'vs/css!./media/slickGrid';
 import { TableDataView } from './tableDataView';
 import { IDisposableDataProvider, ITableSorter, ITableMouseEvent, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 
-import { IThemable } from 'vs/platform/theme/common/styler';
 import * as DOM from 'vs/base/browser/dom';
 import { mixin } from 'vs/base/common/objects';
 import { IDisposable } from 'vs/base/common/lifecycle';
@@ -29,7 +28,7 @@ function getDefaultOptions<T>(): Slick.GridOptions<T> {
 	};
 }
 
-export class Table<T extends Slick.SlickData> extends Widget implements IThemable, IDisposable {
+export class Table<T extends Slick.SlickData> extends Widget implements IDisposable {
 	private styleElement: HTMLStyleElement;
 	private idPrefix: string;
 

src/sql/base/browser/ui/taskbar/actionbar.ts

@@ -3,8 +3,6 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!vs/base/browser/ui/actionbar/actionbar';
-
 import { IAction, IActionRunner, ActionRunner } from 'vs/base/common/actions';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
@@ -16,7 +14,7 @@ import * as lifecycle from 'vs/base/common/lifecycle';
 import * as DOM from 'vs/base/browser/dom';
 import * as types from 'vs/base/common/types';
 
-let defaultOptions: IActionBarOptions = {
+const defaultOptions: IActionBarOptions = {
 	orientation: ActionsOrientation.HORIZONTAL,
 	context: null
 };

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

@@ -5,7 +5,6 @@
 
 import 'vs/css!./media/taskbar';
 import 'vs/css!./media/icons';
-import 'vs/css!sql/media/icons/common-icons';
 
 import { ActionBar } from './actionbar';
 

src/sql/base/electron-browser/ui/breadcrumb/breadcrumb.component.ts

@@ -3,7 +3,6 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!sql/media/icons/common-icons';
 import 'vs/css!./media/breadcrumb';
 
 import { Component, Inject, forwardRef, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';

src/sql/base/electron-browser/ui/panel/panel.component.ts

@@ -8,8 +8,8 @@ import {
 	Input, EventEmitter, Output, ViewChild, ElementRef
 } from '@angular/core';
 
-import { TabComponent } from './tab.component';
-import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
+import { TabComponent } from 'sql/base/electron-browser/ui/panel/tab.component';
+import { ScrollableDirective } from 'sql/base/electron-browser/ui/scrollable/scrollable.directive';
 import { subscriptionToDisposable } from 'sql/base/node/lifecycle';
 
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
@@ -17,7 +17,7 @@ import { Action } from 'vs/base/common/actions';
 import * as types from 'vs/base/common/types';
 import { mixin } from 'vs/base/common/objects';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { ScrollbarVisibility } from 'vs/editor/common/standalone/standaloneEnums';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 
 export interface IPanelOptions {
 	/**
@@ -47,7 +47,7 @@ let idPool = 0;
 		<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
 			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
 				<div class="tabContainer">
-					<div class="tabList" role="tablist" scrollable [horizontalScroll]="ScrollbarVisibility.Auto" [verticalScroll]="ScrollbarVisibility.Hidden" [scrollYToX]="true">
+					<div class="tabList" role="tablist" scrollable [horizontalScroll]="AutoScrollbarVisibility" [verticalScroll]="HiddenScrollbarVisibility" [scrollYToX]="true">
 						<div role="presentation" *ngFor="let tab of _tabs">
 							<tab-header role="presentation" [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'></tab-header>
 						</div>
@@ -79,7 +79,8 @@ export class PanelComponent extends Disposable {
 	private _actionbar: ActionBar;
 	private _mru: TabComponent[];
 
-	protected ScrollbarVisibility = ScrollbarVisibility; // used by angular template
+	protected AutoScrollbarVisibility = ScrollbarVisibility.Auto; // used by angular template
+	protected HiddenScrollbarVisibility = ScrollbarVisibility.Hidden; // used by angular template
 	protected NavigationBarLayout = NavigationBarLayout; // used by angular template
 
 	@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef: ElementRef;

src/sql/base/electron-browser/ui/panel/panel.module.ts

@@ -10,7 +10,7 @@ import { TabComponent } from './tab.component';
 import { TabHeaderComponent } from './tabHeader.component';
 import { PanelComponent } from './panel.component';
 
-import { ScrollableModule } from 'sql/base/browser/ui/scrollable/scrollable.module';
+import { ScrollableModule } from 'sql/base/electron-browser/ui/scrollable/scrollable.module';
 
 @NgModule({
 	imports: [CommonModule, ScrollableModule],

src/sql/base/electron-browser/ui/panel/tabHeader.component.ts

@@ -3,8 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!sql/media/icons/common-icons';
-import 'vs/css!./tabHeader';
+import 'vs/css!./media/tabHeader';
 
 import { Component, AfterContentInit, OnDestroy, Input, Output, ElementRef, ViewChild, EventEmitter } from '@angular/core';
 
@@ -15,7 +14,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
 
 import { TabComponent } from './tab.component';
-import { CloseTabAction } from './tabActions';
+import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions';
 
 @Component({
 	selector: 'tab-header',