Fix some cell UI issues (toolbar background color, unselected cells) (#3881)

- Toolbar background is now differentiated from the editor
- For unselected cells there's no longer a line selection in the cell. This makes it clearer what the active cell is (and cleans the UI up)

src/sql/parts/modelComponents/queryTextEditor.ts

@@ -10,7 +10,7 @@ import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorIn
 import { ResourceEditorModel } from 'vs/workbench/common/editor/resourceEditorModel';
 import * as editorCommon from 'vs/editor/common/editorCommon';
 
-import { BaseTextEditor } from 'vs/workbench/browser/parts/editor/textEditor';
+import { BaseTextEditor, IEditorConfiguration } from 'vs/workbench/browser/parts/editor/textEditor';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -35,6 +35,7 @@ export class QueryTextEditor extends BaseTextEditor {
 	private _dimension: DOM.Dimension;
 	private _config: editorCommon.IConfiguration;
 	private _minHeight: number;
+	private _selected: boolean;
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IInstantiationService instantiationService: IInstantiationService,
@@ -62,8 +63,6 @@ export class QueryTextEditor extends BaseTextEditor {
 			options.inDiffEditor = true;
 			options.scrollBeyondLastLine = false;
 			options.folding = false;
-			options.renderWhitespace = 'none';
-			options.wordWrap = 'on';
 			options.renderIndentGuides = false;
 			options.rulers = [];
 			options.glyphMargin = true;
@@ -73,6 +72,9 @@ export class QueryTextEditor extends BaseTextEditor {
 			options.overviewRulerLanes = 0;
 			options.overviewRulerBorder = false;
 			options.hideCursorInOverviewRuler = true;
+			if (!this._selected) {
+				options.renderLineHighlight = 'none';
+			}
 		}
 		return options;
 	}
@@ -140,4 +142,19 @@ export class QueryTextEditor extends BaseTextEditor {
 	public setMinimumHeight(height: number) : void {
 		this._minHeight = height;
 	}
+
+	public toggleEditorSelected(selected: boolean): void {
+		this._selected = selected;
+		this.refreshEditorConfguration();
+	}
+
+	private refreshEditorConfguration(configuration = this.configurationService.getValue<IEditorConfiguration>(this.getResource())): void {
+		if (!this.getControl()) {
+			return;
+		}
+
+		const editorConfiguration = this.computeConfiguration(configuration);
+		let editorSettingsToApply = editorConfiguration;
+		this.getControl().updateOptions(editorSettingsToApply);
+	}
 }

src/sql/parts/notebook/cellViews/code.component.ts

@@ -93,11 +93,10 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 		for (let propName in changes) {
 			if (propName === 'activeCellId') {
 				let changedProp = changes[propName];
-				if (this.cellModel.id === changedProp.currentValue) {
-					this._cellToggleMoreActions.toggle(true, this.moreActionsElementRef, this.model, this.cellModel);
-				}
-				else {
-					this._cellToggleMoreActions.toggle(false, this.moreActionsElementRef, this.model, this.cellModel);
+				let isActive = this.cellModel.id === changedProp.currentValue;
+				this._cellToggleMoreActions.toggle(isActive, this.moreActionsElementRef, this.model, this.cellModel);
+				if (this._editor) {
+					this._editor.toggleEditorSelected(isActive);
 				}
 				break;
 			}
@@ -133,6 +132,8 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 			this._editorModel = model.textEditorModel;
 			this._modelService.updateModel(this._editorModel, this.cellModel.source);
 		});
+		let isActive = this.cellModel.id === this._activeCellId;
+		this._editor.toggleEditorSelected(isActive);
 
 		this._register(this._editor);
 		this._register(this._editorInput);

src/sql/parts/notebook/notebookStyles.ts

@@ -31,6 +31,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 				border-width: 1px;
 			}
 		`);
+		// toolbar
+		collector.addRule(`
+			code-component .toolbar {
+				background-color: ${inactiveBorder};
+			}
+		`);
 	}
 
 	// Styling with Outline color (e.g. high contrast theme)

src/sql/workbench/services/notebook/common/sqlSessionManager.ts

@@ -191,7 +191,7 @@ class SqlKernel extends Disposable implements nb.IKernel {
 			this._queryRunner.runQuery(content.code);
 		} else if (this._currentConnection) {
 			let connectionUri = Utils.generateUri(this._currentConnection, 'notebook');
-			this._queryRunner = this._instantiationService.createInstance(QueryRunner, connectionUri, undefined);
+			this._queryRunner = this._instantiationService.createInstance(QueryRunner, connectionUri);
 			this._connectionManagementService.connect(this._currentConnection, connectionUri).then((result) =>
 			{
 				this.addQueryEventListeners(this._queryRunner);