Focus on the first focus-able when toggle result and message (#1147)

* when focus on the first focusable when toggle result and message

* minor change

src/sql/parts/grid/views/gridParentComponent.ts

@@ -23,7 +23,7 @@ import { DataService } from 'sql/parts/grid/services/dataService';
 import * as actions from 'sql/parts/grid/views/gridActions';
 import * as Services from 'sql/parts/grid/services/sharedServices';
 import * as GridContentEvents from 'sql/parts/grid/common/gridContentEvents';
-import { ResultsVisibleContext, ResultsGridFocussedContext, ResultsMessagesFocussedContext } from 'sql/parts/query/common/queryContext';
+import { ResultsVisibleContext, ResultsGridFocussedContext, ResultsMessagesFocussedContext, QueryEditorVisibleContext } from 'sql/parts/query/common/queryContext';
 import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
 import { error } from 'sql/base/common/log';
 
@@ -74,6 +74,7 @@ export abstract class GridParentComponent {
 	private resultsVisibleContextKey: IContextKey<boolean>;
 	private gridFocussedContextKey: IContextKey<boolean>;
 	private messagesFocussedContextKey: IContextKey<boolean>;
+	private queryEditorVisible: IContextKey<boolean>;
 
 	// All datasets
 	// Place holder data sets to buffer between data sets and rendered data sets
@@ -187,6 +188,9 @@ export abstract class GridParentComponent {
 
 	private bindKeys(contextKeyService: IContextKeyService): void {
 		if (contextKeyService) {
+			this.queryEditorVisible = QueryEditorVisibleContext.bindTo(contextKeyService);
+			this.queryEditorVisible.set(true);
+
 			let gridContextKeyService = this._bootstrapService.contextKeyService.createScoped(this._el.nativeElement);
 			this.toDispose.push(gridContextKeyService);
 			this.resultsVisibleContextKey = ResultsVisibleContext.bindTo(gridContextKeyService);
@@ -201,7 +205,7 @@ export abstract class GridParentComponent {
 		this.toDispose = dispose(this.toDispose);
 	}
 
-	private toggleResultPane(): void {
+	protected toggleResultPane(): void {
 		this.resultActive = !this.resultActive;
 		if (this.resultActive) {
 			this.resizeGrids();
@@ -209,7 +213,7 @@ export abstract class GridParentComponent {
 		this._cd.detectChanges();
 	}
 
-	private toggleMessagePane(): void {
+	protected toggleMessagePane(): void {
 		this.messageActive = !this.messageActive;
 	}
 

src/sql/parts/grid/views/query/query.component.html

@@ -46,7 +46,7 @@
 		<span> {{LocalizedConstants.messagePaneLabel}} </span>
 		<span class="queryResultsShortCut"> {{messageShortcut}} </span>
 	</div>
-	<div id="messages" class="scrollable messages" [class.hidden]="!messageActive && dataSets.length !== 0"
+	<div #messagesContainer id="messages" class="scrollable messages" [class.hidden]="!messageActive && dataSets.length !== 0"
 		(contextmenu)="openMessagesContextMenu($event)" (focusin)="onMessagesFocus()" (focusout)="onMessagesFocusout()"
 		tabindex=0>
 		<div class="messagesTopSpacing"></div>

src/sql/parts/grid/views/query/query.component.ts

@@ -153,6 +153,7 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
 	// tslint:disable-next-line:no-unused-variable
 	@ViewChild('resultsPane', { read: ElementRef }) private _resultsPane: ElementRef;
 	@ViewChild('queryLink', { read: ElementRef }) private _queryLinkElement: ElementRef;
+	@ViewChild('messagesContainer', { read: ElementRef }) private _messagesContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(forwardRef(() => ChangeDetectorRef)) cd: ChangeDetectorRef,
@@ -524,7 +525,7 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
 	 */
 	navigateToGrid(targetIndex: number): boolean {
 		// check if the target index is valid
-		if (targetIndex >= this.renderedDataSets.length || targetIndex < 0 || !this.hasFocus()) {
+		if (targetIndex >= this.renderedDataSets.length || !this.hasFocus()) {
 			return false;
 		}
 
@@ -577,16 +578,32 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
 		}
 	}
 
+	protected toggleResultPane(): void {
+		this.resultActive = !this.resultActive;
+		this._cd.detectChanges();
+		if (this.resultActive) {
+			this.resizeGrids();
+			this.slickgrids.toArray()[this.activeGrid].setActive();
+		}
+	}
+
+	protected toggleMessagePane(): void {
+		this.messageActive = !this.messageActive;
+		this._cd.detectChanges();
+		if (this.messageActive && this._messagesContainer) {
+			let header = <HTMLElement>this._messagesContainer.nativeElement;
+			header.focus();
+		}
+	}
+
 	/* Helper function to toggle messages and results panes */
 	// tslint:disable-next-line:no-unused-variable
 	private togglePane(pane: PaneType): void {
 		if (pane === 'messages') {
-			this._messageActive = !this._messageActive;
+			this.toggleMessagePane();
 		} else if (pane === 'results') {
-			this.resultActive = !this.resultActive;
+			this.toggleResultPane();
 		}
-		this._cd.detectChanges();
-		this.resizeGrids();
 	}
 
 	layout() {