Better table implementation (#11781)

* wip

* wip

* weird splitview scrolling stuff

* working table

* remove spliceable table

* handling resizing columns

* get perf table integrated into grid

* make more improvments to table view

* testing

* wip

* wip

* fix async data window; add more optimization to scrolling

* work on scrolling

* fix column resizing

* start working on table widget

* inital work to get table widget working with styles and mouse controls

* fix unrendering selection; fix sizes of cells

* support high perf table option; remove unused files; add cell borders to high perf

* add accessibility tags

* handle borders and row count

* more styling changfes

* fix strict null checks

* adding inital keyboard navigation

* center row count; add padding left to rows

* inital drag selection

* remove drag implementation; it can be done better utilizing the global mouse monitor object

* range logic

* create custom grid range

* work with new range

* remove unused code

* fix how plus range works

* add drag selection; change focus to set selection; fix problem with creating a range with inverse start and end

* code cleanup

* fix strict-null-checks

* fix up perf table

* fix layering

* inital table service

* finish table service

* fix some compile errors

* fix compile

* fix compile

* fix up for use

* fix layering

* remove console use

* fix strict nulls

src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts

@@ -135,7 +135,7 @@ class DataResourceTable extends GridTableBase<any> {
 		@IUntitledTextEditorService untitledEditorService: IUntitledTextEditorService,
 		@IConfigurationService configurationService: IConfigurationService
 	) {
-		super(state, createResultSet(source), contextMenuService, instantiationService, editorService, untitledEditorService, configurationService);
+		super(state, createResultSet(source), undefined, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService);
 		this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.cellModel.notebookModel.notebookUri.toString());
 		this._chart = this.instantiationService.createInstance(ChartView, false);
 

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

@@ -5,6 +5,7 @@
 
 import 'vs/css!./media/gridPanel';
 
+import { ITableStyles, ITableMouseEvent } from 'sql/base/browser/ui/table/interfaces';
 import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import QueryRunner, { QueryGridDataProvider } from 'sql/workbench/services/query/common/queryRunner';
 import { ResultSetSummary, IColumn } from 'sql/workbench/services/query/common/query';
@@ -17,9 +18,9 @@ import { CellSelectionModel } from 'sql/base/browser/ui/table/plugins/cellSelect
 import { RowNumberColumn } from 'sql/base/browser/ui/table/plugins/rowNumberColumn.plugin';
 import { escape } from 'sql/base/common/strings';
 import { hyperLinkFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters';
-import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugin';
 import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additionalKeyBindings.plugin';
-import { ITableStyles, ITableMouseEvent } from 'sql/base/browser/ui/table/interfaces';
+import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugin';
+import { GridTable as HighPerfGridTable } from 'sql/workbench/contrib/query/browser/highPerfGridPanel';
 
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
@@ -27,9 +28,8 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { Emitter, Event } from 'vs/base/common/event';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { isUndefinedOrNull } from 'vs/base/common/types';
-import { range, find } from 'vs/base/common/arrays';
-import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
 import { Disposable, dispose, DisposableStore } from 'vs/base/common/lifecycle';
+import { range, find } from 'vs/base/common/arrays';
 import { generateUuid } from 'vs/base/common/uuid';
 import { ActionBar, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import { isInDOM, Dimension } from 'vs/base/browser/dom';
@@ -47,6 +47,7 @@ import { SaveFormat } from 'sql/workbench/services/query/common/resultSerializer
 import { Progress } from 'vs/platform/progress/common/progress';
 import { ScrollableView, IView } from 'sql/base/browser/ui/scrollableView/scrollableView';
 import { IQueryEditorConfiguration } from 'sql/platform/query/common/query';
+import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
 
 const ROW_HEIGHT = 29;
 const HEADER_HEIGHT = 26;
@@ -64,24 +65,25 @@ const MIN_GRID_HEIGHT = (MIN_GRID_HEIGHT_ROWS * ROW_HEIGHT) + HEADER_HEIGHT + ES
 export class GridPanel extends Disposable {
 	private container = document.createElement('div');
 	private scrollableView: ScrollableView;
-	private tables: GridTable<any>[] = [];
+	private tables: Array<GridTable<any> | HighPerfGridTable<any>> = [];
 	private tableDisposable = this._register(new DisposableStore());
 	private queryRunnerDisposables = this._register(new DisposableStore());
-	private currentHeight: number;
 
 	private runner: QueryRunner;
 
-	private maximizedGrid: GridTable<any>;
+	private maximizedGrid: GridTable<any> | HighPerfGridTable<any>;
 	private _state: GridPanelState | undefined;
 
+	private readonly optimized = this.configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.optimizedTable;
+
 	constructor(
 		@IConfigurationService private readonly configurationService: IConfigurationService,
-		@IThemeService private readonly themeService: IThemeService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
-		@ILogService private readonly logService: ILogService
+		@ILogService private readonly logService: ILogService,
+		@IThemeService private readonly themeService: IThemeService,
 	) {
 		super();
-		this.scrollableView = new ScrollableView(this.container);
+		this.scrollableView = new ScrollableView(this.container, { scrollDebouce: this.optimized ? 0 : undefined });
 		this.scrollableView.onDidScroll(e => {
 			if (this.state && this.scrollableView.length !== 0) {
 				this.state.scrollPosition = e.scrollTop;
@@ -97,12 +99,7 @@ export class GridPanel extends Disposable {
 	}
 
 	public layout(size: Dimension): void {
-		this.scrollableView.layout(size.height);
-		// if the size hasn't change it won't layout our table so we have to do it manually
-		if (size.height === this.currentHeight) {
-			this.tables.map(e => e.layout());
-		}
-		this.currentHeight = size.height;
+		this.scrollableView.layout(size.height, size.width);
 	}
 
 	public focus(): void {
@@ -203,9 +200,9 @@ export class GridPanel extends Disposable {
 	}
 
 	private addResultSet(resultSet: ResultSetSummary[]) {
-		let tables: GridTable<any>[] = [];
+		const tables: Array<GridTable<any> | HighPerfGridTable<any>> = [];
 
-		for (let set of resultSet) {
+		for (const set of resultSet) {
 			// ensure we aren't adding a resultSet that is already visible
 			if (find(this.tables, t => t.resultSet.batchId === set.batchId && t.resultSet.id === set.id)) {
 				continue;
@@ -220,7 +217,12 @@ export class GridPanel extends Disposable {
 					this.state.tableStates.push(tableState);
 				}
 			}
-			let table = this.instantiationService.createInstance(GridTable, this.runner, set, tableState);
+			let table: GridTable<any> | HighPerfGridTable<any>;
+			if (this.optimized) {
+				table = this.instantiationService.createInstance(HighPerfGridTable, this.runner, set, tableState);
+			} else {
+				table = this.instantiationService.createInstance(GridTable, this.runner, set, tableState);
+			}
 			this.tableDisposable.add(tableState.onMaximizedChange(e => {
 				if (e) {
 					this.maximizeTable(table.id);
@@ -365,12 +367,12 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 	constructor(
 		state: GridTableState,
 		protected _resultSet: ResultSetSummary,
-		protected contextMenuService: IContextMenuService,
-		protected instantiationService: IInstantiationService,
-		protected editorService: IEditorService,
-		protected untitledEditorService: IUntitledTextEditorService,
-		protected configurationService: IConfigurationService,
-		private readonly options: IGridTableOptions = { actionOrientation: ActionsOrientation.VERTICAL }
+		private readonly options: IGridTableOptions = { actionOrientation: ActionsOrientation.VERTICAL },
+		@IContextMenuService private readonly contextMenuService: IContextMenuService,
+		@IInstantiationService protected readonly instantiationService: IInstantiationService,
+		@IEditorService private readonly editorService: IEditorService,
+		@IUntitledTextEditorService private readonly untitledEditorService: IUntitledTextEditorService,
+		@IConfigurationService private readonly configurationService: IConfigurationService
 	) {
 		super();
 		let config = this.configurationService.getValue<{ rowHeight: number }>('resultsGrid');
@@ -768,7 +770,7 @@ class GridTable<T> extends GridTableBase<T> {
 		@IUntitledTextEditorService untitledEditorService: IUntitledTextEditorService,
 		@IConfigurationService configurationService: IConfigurationService
 	) {
-		super(state, resultSet, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService);
+		super(state, resultSet, undefined, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService);
 		this._gridDataProvider = this.instantiationService.createInstance(QueryGridDataProvider, this._runner, resultSet.batchId, resultSet.id);
 	}
 

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

@@ -0,0 +1,165 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./media/optimizedGridPanel';
+
+import { ITableRenderer, ITableColumn } from 'sql/base/browser/ui/table/highPerf/table';
+import { VirtualizedWindow } from 'sql/base/browser/ui/table/highPerf/virtualizedWindow';
+import { attachHighPerfTableStyler } from 'sql/platform/theme/common/styler';
+import QueryRunner from 'sql/workbench/services/query/common/queryRunner';
+import { GridTableState } from 'sql/workbench/common/editor/query/gridTableState';
+import { ResultSetSummary } from 'sql/workbench/services/query/common/query';
+
+import { append, $ } from 'vs/base/browser/dom';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Emitter, Event } from 'vs/base/common/event';
+import { generateUuid } from 'vs/base/common/uuid';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { WorkbenchTable } from 'sql/platform/table/browser/tableService';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IView } from 'sql/base/browser/ui/scrollableView/scrollableView';
+
+type ICellTemplate = HTMLElement;
+
+class TableFormatter<T> implements ITableRenderer<T, ICellTemplate> {
+	renderTemplate(container: HTMLElement): ICellTemplate {
+		return append(container, $('.cell'));
+	}
+
+	renderCell(element: T, index: number, cellIndex: number, columnId: string, templateData: ICellTemplate, width: number): void {
+		templateData.innerText = element[columnId];
+	}
+
+	disposeCell?(element: T, index: number, cellIndex: number, columnId: string, templateData: ICellTemplate, width: number): void {
+		templateData.innerText = '';
+	}
+
+	disposeTemplate(templateData: ICellTemplate): void {
+	}
+
+}
+
+const ROW_HEIGHT = 22;
+const HEADER_HEIGHT = 22;
+const MIN_GRID_HEIGHT_ROWS = 8;
+const ESTIMATED_SCROLL_BAR_SIZE = 10;
+const BOTTOM_PADDING = 15;
+
+// this handles min size if rows is greater than the min grid visible rows
+const MIN_GRID_HEIGHT = (MIN_GRID_HEIGHT_ROWS * ROW_HEIGHT) + HEADER_HEIGHT + ESTIMATED_SCROLL_BAR_SIZE;
+
+export class GridTable<T> extends Disposable implements IView {
+
+	private _onDidChange = new Emitter<number>();
+	public readonly onDidChange: Event<number> = this._onDidChange.event;
+
+	private virtWindow: VirtualizedWindow<T>;
+	private table: WorkbenchTable<T>;
+	private tableContainer: HTMLElement;
+	private columns: ITableColumn<T, ICellTemplate>[];
+
+	public id = generateUuid();
+	readonly element = $('.grid-panel.optimized');
+
+	private _state: GridTableState;
+
+	private rowHeight: number;
+
+	public get resultSet(): ResultSetSummary {
+		return this._resultSet;
+	}
+
+	// this handles if the row count is small, like 4-5 rows
+	private get maxSize(): number {
+		return ((this.resultSet.rowCount) * this.rowHeight) + HEADER_HEIGHT + ESTIMATED_SCROLL_BAR_SIZE;
+	}
+
+	// worthless for this table
+	public isOnlyTable: boolean;
+
+	constructor(
+		private readonly runner: QueryRunner,
+		private _resultSet: ResultSetSummary,
+		state: GridTableState,
+		@IConfigurationService private readonly configurationService: IConfigurationService,
+		@IThemeService private readonly themeService: IThemeService,
+		@IInstantiationService private readonly instantiationService: IInstantiationService
+	) {
+		super();
+		this.tableContainer = append(this.element, $('.table-panel'));
+		let config = this.configurationService.getValue<{ rowHeight: number }>('resultsGrid');
+		this.rowHeight = config && config.rowHeight ? config.rowHeight : ROW_HEIGHT;
+		this.state = state;
+
+		this.columns = this.resultSet.columnInfo.map<ITableColumn<T, any>>((c, i) => ({
+			id: i.toString(),
+			name: c.columnName === 'Microsoft SQL Server 2005 XML Showplan'
+				? 'XML Showplan'
+				: escape(c.columnName),
+			renderer: new TableFormatter(),
+			width: this.state.columnSizes && this.state.columnSizes[i] ? this.state.columnSizes[i] : undefined
+		}));
+
+		this.virtWindow = new VirtualizedWindow<T>(50, this.resultSet.rowCount, (offset, count) => {
+			return Promise.resolve(this.runner.getQueryRows(offset, count, this._resultSet.batchId, this._resultSet.id).then(r => {
+				return r.rows.map(c => c.reduce((p, c, i) => {
+					p[this.columns[i].id] = c.displayValue;
+					return p;
+				}, Object.create(null)));
+			}));
+		});
+
+		this.table = this._register(this.instantiationService.createInstance(WorkbenchTable, 'gridPanel', this.tableContainer, this.columns, {
+			getRow: index => this.virtWindow.getIndex(index)
+		}, { rowHeight: this.rowHeight, headerHeight: HEADER_HEIGHT, rowCountColumn: false }) as WorkbenchTable<T>);
+
+		this.table.length = this.resultSet.rowCount;
+
+		this._register(attachHighPerfTableStyler(this.table, this.themeService));
+	}
+
+	public get state(): GridTableState {
+		return this._state;
+	}
+
+	public set state(val: GridTableState) {
+		this._state = val;
+	}
+
+	public updateResult(resultSet: ResultSetSummary) {
+		this._resultSet = resultSet;
+		if (this.table) {
+			this.virtWindow.length = resultSet.rowCount;
+			this.table.length = resultSet.rowCount;
+		}
+		this._onDidChange.fire(undefined);
+	}
+
+	public layout(height: number, width: number): void {
+		this.tableContainer.style.width = `${width - ESTIMATED_SCROLL_BAR_SIZE}px`;
+		this.table.layout(height, width - ESTIMATED_SCROLL_BAR_SIZE);
+	}
+
+	public get minimumSize(): number {
+		// clamp between ensuring we can show the actionbar, while also making sure we don't take too much space
+		// if there is only one table then allow a minimum size of ROW_HEIGHT
+		return Math.max(Math.min(this.maxSize, MIN_GRID_HEIGHT), BOTTOM_PADDING);
+	}
+
+	public get maximumSize(): number {
+		return Math.max(this.maxSize, BOTTOM_PADDING);
+	}
+
+	public dispose() {
+		this.element.remove();
+		super.dispose();
+	}
+
+	public style(): void {
+	}
+
+	public focus() { }
+}

src/sql/workbench/contrib/query/browser/media/binarydiffeditor.css

@@ -1,20 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench .binarydiff-left {
-	float: left;
-}
-
-.monaco-workbench .binarydiff-right {
-	border-left: 3px solid #DDD;
-}
-
-.monaco-workbench.vs-dark .binarydiff-right {
-	border-left: 3px solid rgb(20, 20, 20);
-}
-
-.monaco-workbench.hc-black .binarydiff-right {
-	border-left: 3px solid #6FC3DF;
-}

src/sql/workbench/contrib/query/browser/media/close-dirty-inverse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle fill="#C5C5C5" cx="8" cy="8" r="4"/></svg>

src/sql/workbench/contrib/query/browser/media/close-dirty.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle fill="#424242" cx="8" cy="8" r="4"/></svg>

src/sql/workbench/contrib/query/browser/media/close-inverse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#e8e8e8" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>

src/sql/workbench/contrib/query/browser/media/close.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#424242" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>

src/sql/workbench/contrib/query/browser/media/editorGroupsControl.css

@@ -1,152 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench.vs > .editor > .content.drag {
-	background-color: #ECECEC;
-}
-
-.monaco-workbench.vs-dark > .editor > .content.drag {
-	background-color: #2D2D2D;
-}
-
-.monaco-workbench > .editor > .content.dragging > .monaco-sash {
-	display: none; /* hide sashes while dragging editors around */
-}
-
-#monaco-workbench-editor-move-overlay,
-#monaco-workbench-editor-drop-overlay {
-	position: absolute;
-	left: 0;
-	width: 100%;
-	z-index: 10000;
-}
-
-#monaco-workbench-editor-drop-overlay {
-	opacity: 0; /* initially not visible until moving around */
-}
-
-.vs #monaco-workbench-editor-drop-overlay,
-.monaco-workbench.vs > .editor.empty > .content.dropfeedback {
-	background-color: rgba(51,153,255, 0.18);
-}
-
-.vs-dark #monaco-workbench-editor-drop-overlay,
-.monaco-workbench.vs-dark > .editor.empty > .content.dropfeedback {
-	background-color: rgba(83, 89, 93, 0.5);
-}
-
-.hc-black #monaco-workbench-editor-drop-overlay,
-.monaco-workbench.hc-black > .editor.empty > .content.dropfeedback {
-	background: none !important;
-	outline: 2px dashed #f38518;
-	outline-offset: -2px;
-}
-
-.monaco-workbench > .editor > .content > .one-editor-silo {
-	position: absolute;
-	box-sizing:	border-box; /* use border box to be able to draw a border as separator between editors */
-}
-
-.monaco-workbench > .editor > .content > .one-editor-silo.editor-one {
-	left: 0;
-	top: 0;
-}
-
-.monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
-	right: 0;
-}
-
-.monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
-	bottom: 0;
-}
-
-.monaco-workbench > .editor > .content > .one-editor-silo.dragging {
-	z-index: 70;
-	box-sizing: content-box;
-}
-
-.monaco-workbench.vs > .editor > .content.vertical-layout > .one-editor-silo.dragging {
-	border-left: 1px solid #E7E7E7;
-	border-right: 1px solid #E7E7E7;
-}
-
-.monaco-workbench.vs > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
-	border-top: 1px solid #E7E7E7;
-	border-bottom: 1px solid #E7E7E7;
-}
-
-.monaco-workbench.vs > .editor > .content.vertical-layout > .one-editor-silo.editor-two,
-.monaco-workbench.vs > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
-	border-left: 1px solid #E7E7E7;
-}
-
-.monaco-workbench.vs > .editor > .content.horizontal-layout > .one-editor-silo.editor-two,
-.monaco-workbench.vs > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
-	border-top: 1px solid #E7E7E7;
-}
-
-.monaco-workbench.vs-dark > .editor > .content.vertical-layout > .one-editor-silo.dragging {
-	border-left: 1px solid #444;
-	border-right: 1px solid #444;
-}
-
-.monaco-workbench.vs-dark > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
-	border-top: 1px solid #444;
-	border-bottom: 1px solid #444;
-}
-
-.monaco-workbench.vs-dark > .editor > .content.vertical-layout > .one-editor-silo.editor-two,
-.monaco-workbench.vs-dark > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
-	border-left: 1px solid #444;
-}
-
-.monaco-workbench.vs-dark > .editor > .content.horizontal-layout > .one-editor-silo.editor-two,
-.monaco-workbench.vs-dark > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
-	border-top: 1px solid #444;
-}
-
-.monaco-workbench.hc-black > .editor > .content.vertical-layout > .one-editor-silo.dragging {
-	border-left: 1px solid #6FC3DF;
-	border-right: 1px solid #6FC3DF;
-}
-
-.monaco-workbench.hc-black > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
-	border-top: 1px solid #6FC3DF;
-	border-bottom: 1px solid #6FC3DF;
-}
-
-.monaco-workbench.hc-black > .editor > .content.vertical-layout > .one-editor-silo.editor-two,
-.monaco-workbench.hc-black > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
-	border-left: 1px solid #6FC3DF;
-}
-
-.monaco-workbench.hc-black > .editor > .content.horizontal-layout > .one-editor-silo.editor-two,
-.monaco-workbench.hc-black > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
-	border-top: 1px solid #6FC3DF;
-}
-
-.monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.draggedunder {
-	transition: left 200ms ease-out;
-}
-
-.monaco-workbench > .editor > .content.vertical-layout > .editor-three.draggedunder {
-	transition-property: right;
-}
-
-.monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.draggedunder {
-	transition: top 200ms ease-out;
-}
-
-.monaco-workbench > .editor > .content.horizontal-layout > .editor-three.draggedunder {
-	transition-property: bottom;
-}
-
-.monaco-workbench > .editor > .content > .one-editor-silo > .container {
-	height: 100%;
-}
-
-.monaco-workbench > .editor > .content > .one-editor-silo > .container > .editor-container {
-	height: calc(100% - 35px); /* Editor is below editor title */
-}

src/sql/workbench/contrib/query/browser/media/editorpart.css

@@ -1,41 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench.vs .monaco-editor-background {
-	background-color: white;
-}
-
-.monaco-workbench.vs-dark .monaco-editor-background {
-	background-color: #1E1E1E;
-}
-
-.monaco-workbench.hc-black .monaco-editor-background {
-	background-color: #000;
-}
-
-.monaco-workbench .part.editor {
-	background-repeat: no-repeat;
-	background-position: 50% 50%;
-}
-
-.monaco-workbench .part.editor.empty {
-	background-image: url('letterpress.svg');
-}
-
-.monaco-workbench.vs-dark .part.editor.empty {
-	background-image: url('letterpress-dark.svg');
-}
-
-.monaco-workbench.hc-black .part.editor.empty {
-	background-image: url('letterpress-hc.svg');
-}
-
-@media
-(-webkit-min-device-pixel-ratio: 2),
-(min-resolution: 192dppx) {
-	.monaco-workbench .part.editor {
-		background-size: 260px 260px;
-	}
-}

src/sql/workbench/contrib/query/browser/media/editorstatus.css

@@ -1,26 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench .editor-statusbar-item > a:not(:first-child) {
-	margin-left: 5px;
-}
-
-.monaco-workbench .editor-statusbar-item > .editor-status-mode,
-.monaco-workbench .editor-statusbar-item > .editor-status-encoding,
-.monaco-workbench .editor-statusbar-item > .editor-status-eol,
-.monaco-workbench .editor-statusbar-item > .editor-status-selection,
-.monaco-workbench .editor-statusbar-item > .editor-status-indentation,
-.monaco-workbench .editor-statusbar-item > .editor-status-metadata {
-	padding: 0 5px 0 5px;
-}
-
-.monaco-workbench .editor-statusbar-item > .editor-status-metadata {
-	cursor: default;
-}
-
-.monaco-workbench .editor-statusbar-item > .editor-status-tabfocusmode {
-	padding: 0 5px 0 5px;
-	background-color: brown !important;
-}

src/sql/workbench/contrib/query/browser/media/gridPanel.css

@@ -13,3 +13,8 @@
 	width : 100%;
 	display: flex;
 }
+
+.grid-panel .cell {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}

src/sql/workbench/contrib/query/browser/media/letterpress-dark.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="260" height="260" viewBox="0 0 260 260"><style>.st0{opacity:.25}.st1{opacity:3e-2}.st2{fill:#fff}</style><path d="M194 2L92.4 103.6 27.6 53.2 2 66v128l25.6 12.8 64.8-50.4L194 258l64-25.6V27.6L194 2zM27 169V91l39 39-39 39zm99.4-39L194 77v106l-67.6-53z" class="st0"/><path class="st1 st2" d="M194 2l64 25.6v204.8L194 258 92.4 156.4l-64.8 50.4L2 194V66l25.6-12.8 64.8 50.4L194 2m0 181V77l-67.6 53 67.6 53M27 169l39-39-39-39v78M193.8.8l-.5.5-101 101-64.1-49.9-.5-.4-.6.3L1.6 65.1l-.6.3v129.2l.6.3 25.6 12.8.6.3.5-.4 64.1-49.9 101 101 .5.5.6-.2 64-25.6.6-.3V26.9l-.6-.3-64-25.6-.7-.2zM128 130l65-50.9V181l-65-51zM28 166.6V93.4L64.6 130 28 166.6z"/></svg>

src/sql/workbench/contrib/query/browser/media/letterpress-hc.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="260" height="260" viewBox="0 0 260 260"><style>.st0{fill:#fff;fill-opacity:.13;enable-background:new}</style><path class="st0" d="M194 2L92.4 103.6 27.6 53.2 2 66v128l25.6 12.8 64.8-50.4L194 258l64-25.6V27.6L194 2zM27 169V91l39 39-39 39zm99.4-39L194 77v106l-67.6-53z"/></svg>

src/sql/workbench/contrib/query/browser/media/letterpress.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="260" height="260" viewBox="0 0 260 260"><style>.st0{opacity:.1}.st1{opacity:5e-2}.st2{fill:#231f20}</style><path d="M194 2L92.4 103.6 27.6 53.2 2 66v128l25.6 12.8 64.8-50.4L194 258l64-25.6V27.6L194 2zM27 169V91l39 39-39 39zm99.4-39L194 77v106l-67.6-53z" class="st0"/><path class="st1 st2" d="M194 2l64 25.6v204.8L194 258 92.4 156.4l-64.8 50.4L2 194V66l25.6-12.8 64.8 50.4L194 2m0 181V77l-67.6 53 67.6 53M27 169l39-39-39-39v78M193.8.8l-.5.5-101 101-64.1-49.9-.5-.4-.6.3L1.6 65.1l-.6.3v129.2l.6.3 25.6 12.8.6.3.5-.4 64.1-49.9 101 101 .5.5.6-.2 64-25.6.6-.3V26.9l-.6-.3-64-25.6-.7-.2zM128 130l65-50.9V181l-65-51zM28 166.6V93.4L64.6 130 28 166.6z"/></svg>

src/sql/workbench/contrib/query/browser/media/next-diff-inverse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16"><path fill="#C5C5C5" d="M1 4h7l-3-3h3l4 4-4 4h-3l3-3h-7v-2z"/></svg>

src/sql/workbench/contrib/query/browser/media/next-diff.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16"><path fill="#656565" d="M1 4h7l-3-3h3l4 4-4 4h-3l3-3h-7v-2z"/></svg>

src/sql/workbench/contrib/query/browser/media/notabstitle.css

@@ -1,38 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/* Title Label */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label {
-	line-height: 35px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	position: relative;
-	padding-left: 20px;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .monaco-icon-label::before {
-	height: 35px; /* tweak the icon size of the editor labels when icons are enabled */
-}
-
-/* Title Actions */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-actions {
-	display: flex;
-	flex: initial;
-	opacity: 0.5;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .title-actions {
-	opacity: 1;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title.dirty .title-actions .close-editor-action {
-	background: url('close-dirty.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title.dirty .title-actions .close-editor-action,
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title.dirty .title-actions .close-editor-action {
-	background: url('close-dirty-inverse.svg') center center no-repeat;
-}

src/sql/workbench/contrib/query/browser/media/optimizedGridPanel.css

@@ -3,6 +3,12 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .quick-open-widget .quick-open-tree .quick-open-entry.editor-preview {
-	font-style: italic;
+.grid-panel.optimized {
+	width: 100%;
+	height: 100%;
+}
+
+.grid-panel.optimized > .table-panel {
+	width: 100%;
+	height: 100%;
 }

src/sql/workbench/contrib/query/browser/media/parseQuery.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>ParseQuery_16x</title><rect width="16" height="16" fill="#f6f6f6" opacity="0"/><polygon points="4.382 15 0.382 7 5.618 7 6.5 8.764 10.382 1 15.618 1 8.618 15 4.382 15" fill="#f6f6f6"/><polygon points="11 2 6.5 11 5 8 2 8 5 14 8 14 14 2 11 2" fill="#424242"/></svg>

src/sql/workbench/contrib/query/browser/media/previous-diff-inverse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16"><polygon fill="#C5C5C5" points="13,4 6,4 9,1 6,1 2,5 6,9 9,9 6,6 13,6"/></svg>

src/sql/workbench/contrib/query/browser/media/previous-diff.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16"><polygon fill="#656565" points="13,4 6,4 9,1 6,1 2,5 6,9 9,9 6,6 13,6"/></svg>

src/sql/workbench/contrib/query/browser/media/runWithoutDebug.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1,.cls-2{fill:#f6f6f6;}.cls-1{opacity:0;}.cls-3{fill:#388a34;}.cls-4{fill:#f0eff1;}</style></defs><title>StartWithoutDebug@2x</title><g id="Layer_2" data-name="Layer 2"><g id="outline"><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M3,0,13.67,8,3,16Z"/></g><g id="color_action"><path class="cls-3" d="M6,6,8.67,8,6,10V6M4,2V14l8-6L4,2Z"/></g><g id="icon_fg"><path class="cls-4" d="M8.67,8,6,10V6Z"/></g></g></svg>

src/sql/workbench/contrib/query/browser/media/sidebysideEditor.css

@@ -1,12 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.vs-dark .side-by-side-editor > .master-editor-container {
-	box-shadow: -6px 0 5px -5px black;
-}
-
-.side-by-side-editor > .master-editor-container {
-	box-shadow: -6px 0 5px -5px #DDD;
-}

src/sql/workbench/contrib/query/browser/media/split-editor-horizontal-inverse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#2d2d30}.icon-vs-out{fill:#2d2d30}.icon-vs-bg{fill:#c5c5c5}.icon-vs-fg{fill:#2b282e}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 15H0V1h16v14z" id="outline" style="display: none;"/><path class="icon-vs-bg" d="M1 2v12h14V2H1zm13 11H2v-3h12v3zm0-5H2V5h12v3z" id="iconBg"/><g id="iconFg" style="display: none;"><path class="icon-vs-fg" d="M14 8H2V5h12v3zm0 2H2v3h12v-3z"/></g></svg>

src/sql/workbench/contrib/query/browser/media/split-editor-horizontal.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}.icon-vs-fg{fill:#f0eff1}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 15H0V1h16v14z" id="outline" style="display: none;"/><path class="icon-vs-bg" d="M1 2v12h14V2H1zm13 11H2v-3h12v3zm0-5H2V5h12v3z" id="iconBg"/><g id="iconFg" style="display: none;"><path class="icon-vs-fg" d="M14 8H2V5h12v3zm0 2H2v3h12v-3z"/></g></svg>

src/sql/workbench/contrib/query/browser/media/split-editor-vertical-inverse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -1 16 16" enable-background="new 0 -1 16 16"><path fill="#C5C5C5" d="M1 1v12h14v-12h-14zm1 3h4.999v8h-4.999v-8zm12 8h-5.001v-8h5.001v8z"/></svg>

src/sql/workbench/contrib/query/browser/media/split-editor-vertical.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -1 16 16" enable-background="new 0 -1 16 16"><path fill="#656565" d="M1 1v12h14v-12h-14zm1 3h4.999v8h-4.999v-8zm12 8h-5.001v-8h5.001v8z"/></svg>

src/sql/workbench/contrib/query/browser/media/stackview-inverse.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#C5C5C5;}
-</style>
-<g id="outline">
-</g>
-<g id="icon_x5F_bg">
-	<path class="st0" d="M7.6,5H3c0,0-1,0-1,1c0,0.8,0,5.4,0,8c0,1,1,1,1,1s1.5,0,3,0s3,0,3,0s1,0,1-1c0-2.6,0-6.9,0-6.9L7.6,5z M9,14
-		H3V6h4v2h2V14z"/>
-	<path class="st0" d="M9.6,3H5c0,0-1,0-1,1h5v0.9L10.2,6H11v7c1,0,1-1,1-1V5.1L9.6,3z"/>
-	<path class="st0" d="M11.6,1H7c0,0-1,0-1,1h5v0.9L12.2,4H13v7c1,0,1-1,1-1V3.1L11.6,1z"/>
-</g>
-<g id="color_x5F_action">
-</g>
-<g id="icon_x5F_fg">
-</g>
-</svg>

src/sql/workbench/contrib/query/browser/media/stackview.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#656565;}
-</style>
-<g id="outline">
-</g>
-<g id="icon_x5F_bg">
-	<path class="st0" d="M7.6,5H3c0,0-1,0-1,1c0,0.8,0,5.4,0,8c0,1,1,1,1,1s1.5,0,3,0s3,0,3,0s1,0,1-1c0-2.6,0-6.9,0-6.9L7.6,5z M9,14
-		H3V6h4v2h2V14z"/>
-	<path class="st0" d="M9.6,3H5c0,0-1,0-1,1h5v0.9L10.2,6H11v7c1,0,1-1,1-1V5.1L9.6,3z"/>
-	<path class="st0" d="M11.6,1H7c0,0-1,0-1,1h5v0.9L12.2,4H13v7c1,0,1-1,1-1V3.1L11.6,1z"/>
-</g>
-<g id="color_x5F_action">
-</g>
-<g id="icon_x5F_fg">
-</g>
-</svg>

src/sql/workbench/contrib/query/browser/media/tabstitle.css

@@ -1,220 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/* Title Container */
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title.tabs {
-	background: #F3F3F3;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title.tabs {
-	background: #252526;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs > .monaco-scrollable-element {
-	flex: 1;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs > .monaco-scrollable-element .scrollbar {
-	z-index: 3; /* on top of tabs */
-	cursor: default;
-}
-
-/* Tabs Container */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container {
-	display: flex;
-	height: 35px;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container.scroll {
-	overflow: scroll !important;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container::-webkit-scrollbar {
-	display: none;
-}
-
-/* Tab */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab {
-	display: flex;
-	width: 120px;
-	min-width: fit-content;
-	white-space: nowrap;
-	cursor: pointer;
-	height: 35px;
-	box-sizing: border-box;
-	border: 1px solid transparent;
-	padding-left: 10px;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active) {
-	background-color: #ECECEC;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active) {
-	background-color: #2D2D2D;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab  {
-	border-left-color: #F3F3F3;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child  {
-	border-right-color: #F3F3F3;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab  {
-	border-left-color: #252526;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child  {
-	border-right-color: #252526;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:first-child,
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:first-child {
-	border-left-color: transparent;
-}
-
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab  {
-	border-left-color: #6FC3DF;
-}
-
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active  {
-	outline: 2px solid #f38518;
-	outline-offset: -1px;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container.dropfeedback,
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dropfeedback {
-	background-color: #DDECFF;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container.dropfeedback,
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dropfeedback {
-	background-color: #383B3D;
-}
-
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container.dropfeedback,
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dropfeedback {
-	background: none !important;
-	outline: 2px dashed #f38518;
-	outline-offset: -2px;
-}
-
-/* Tab Label */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label {
-	margin-top: auto;
-	margin-bottom: auto;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .monaco-icon-label::before {
-	height: 16px; /* tweak the icon size of the editor labels when icons are enabled */
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label {
-	opacity: 0.7 !important;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label {
-	opacity: 0.5 !important;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active .tab-label,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dropfeedback .tab-label {
-	opacity: 1 !important;
-}
-
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label {
-	opacity: 1 !important;
-}
-
-/* Tab Close */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close {
-	margin-top: auto;
-	margin-bottom: auto;
-	width: 28px;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.no-close-button > .tab-close {
-	display: none; /* hide the close action bar when we are configured to hide it */
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab.active > .tab-close .action-label,			/* always show it for active tab */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab > .tab-close .action-label:focus,			/* always show it on focus */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab:hover > .tab-close .action-label,			/* always show it on hover */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab.active:hover > .tab-close .action-label,		/* always show it on hover */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab.dirty > .tab-close .action-label {			/* always show it for dirty tabs */
-	opacity: 1;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active > .tab-close .action-label,					/* show dimmed for inactive group */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:hover > .tab-close .action-label,			/* show dimmed for inactive group */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty > .tab-close .action-label,					/* show dimmed for inactive group */
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:hover > .tab-close .action-label {					/* show dimmed for inactive group */
-	opacity: 0.5;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close .action-label {
-	opacity: 0;
-	display: block;
-	height: 16px;
-	width: 16px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-	margin-right: 0.5em;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty .close-editor-action {
-	background: url('close-dirty.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty .close-editor-action,
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty .close-editor-action {
-	background: url('close-dirty-inverse.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty .close-editor-action:hover {
-	background: url('close.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty .close-editor-action:hover,
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dirty .close-editor-action:hover {
-	background: url('close-inverse.svg') center center no-repeat;
-}
-
-/* No Tab Close Button */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.no-close-button {
-	padding-right: 28px; /* make room for dirty indication when we are running without close button */
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.no-close-button.dirty {
-	background-repeat: no-repeat;
-	background-position-y: center;
-	background-position-x: calc(100% - 6px); /* to the right of the tab label */
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.no-close-button.dirty {
-	background-image: url('close-dirty.svg');
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.no-close-button.dirty,
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.no-close-button.dirty {
-	background-image: url('close-dirty-inverse.svg');
-}
-
-/* Editor Actions */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .editor-actions {
-	cursor: default;
-	flex: initial;
-	padding-left: 4px;
-}

src/sql/workbench/contrib/query/browser/media/textdiffeditor.css

@@ -1,22 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench.vs .textdiff-editor-action.next {
-	background: url('next-diff.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs .textdiff-editor-action.previous {
-	background: url('previous-diff.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark .textdiff-editor-action.next,
-.monaco-workbench.hc-black .textdiff-editor-action.next {
-	background: url('next-diff-inverse.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark .textdiff-editor-action.previous,
-.monaco-workbench.hc-black .textdiff-editor-action.previous {
-	background: url('previous-diff-inverse.svg') center center no-repeat;
-}

src/sql/workbench/contrib/query/browser/media/titlecontrol.css

@@ -1,127 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/* Editor Label */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label {
-	white-space: nowrap;
-	flex: 1;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label a,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label a {
-	text-decoration: none;
-	font-size: 13px;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .monaco-icon-label::before,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .monaco-icon-label::before,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label a,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label a,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label span,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label span {
-	cursor: pointer;
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .title-label a,
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label a {
-	color: rgba(51, 51, 51, 0.5);
-}
-
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title.active .title-label a,
-.monaco-workbench.vs > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab .tab-label a {
-	color: #333333;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .title-label a,
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label a {
-	color: rgba(255, 255, 255, 0.5);
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title.active .title-label a,
-.monaco-workbench.vs-dark > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab .tab-label a {
-	color: white;
-}
-
-/* Title Actions */
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-actions .action-label,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .editor-actions .action-label {
-	display: block;
-	height: 35px;
-	line-height: 35px;
-	min-width: 28px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-}
-
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .title-actions .action-label,
-.monaco-workbench.hc-black > .part.editor > .content > .one-editor-silo > .container > .title .editor-actions .action-label {
-	line-height: initial;
-}
-
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .editor-actions .action-label .label,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-actions .action-label .label {
-	display: none;
-}
-
-/* Drag Cursor */
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo > .container > .title,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo > .container > .title.tabs .scrollbar .slider,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo > .container > .title .monaco-icon-label::before,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo > .container > .title .title-label a,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo > .container > .title .title-label span {
-	cursor: -webkit-grab;
-}
-
-#monaco-workbench-editor-move-overlay,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo.drag,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo.drag > .container > .title,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo.drag > .container > .title.tabs .scrollbar .slider,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo.drag > .container > .title .monaco-icon-label::before,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo.drag > .container > .title .title-label a,
-.monaco-workbench > .part.editor > .content.multiple-editors > .one-editor-silo.drag > .container > .title .title-label span {
-	cursor: -webkit-grabbing;
-}
-
-/* Actions */
-
-.monaco-workbench .close-editor-action {
-	background: url('close.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark .close-editor-action,
-.monaco-workbench.hc-black .close-editor-action {
-	background: url('close-inverse.svg') center center no-repeat;
-}
-
-.monaco-workbench > .part.editor > .content.vertical-layout > .one-editor-silo > .container > .title .split-editor-action {
-	background: url('split-editor-vertical.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content.vertical-layout > .one-editor-silo > .container > .title .split-editor-action,
-.monaco-workbench.hc-black > .part.editor > .content.vertical-layout > .one-editor-silo > .container > .title .split-editor-action {
-	background: url('split-editor-vertical-inverse.svg') center center no-repeat;
-}
-
-.monaco-workbench > .part.editor > .content.horizontal-layout > .one-editor-silo > .container > .title .split-editor-action {
-	background: url('split-editor-horizontal.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark > .part.editor > .content.horizontal-layout > .one-editor-silo > .container > .title .split-editor-action,
-.monaco-workbench.hc-black > .part.editor > .content.horizontal-layout > .one-editor-silo > .container > .title .split-editor-action {
-	background: url('split-editor-horizontal-inverse.svg') center center no-repeat;
-}
-
-.monaco-workbench .show-group-editors-action {
-	background: url('stackview.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark .show-group-editors-action,
-.monaco-workbench.hc-black .show-group-editors-action {
-	background: url('stackview-inverse.svg') center center no-repeat;
-}

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

@@ -365,6 +365,11 @@ const queryEditorConfiguration: IConfigurationNode = {
 			'description': localize('queryEditor.results.copyRemoveNewLine', "Configuration options for copying multi-line results from the Results View"),
 			'default': true
 		},
+		'queryEditor.results.optimizedTable': {
+			'type': 'boolean',
+			'description': localize('queryEditor.results.optimizedTable', "(Experimental) Use a optimized table in the results out. Some functionality might be missing and in the works."),
+			'default': false
+		},
 		'queryEditor.messages.showBatchTime': {
 			'type': 'boolean',
 			'description': localize('queryEditor.messages.showBatchTime', "Should execution time be shown for individual batches"),