Add focus logic to the tabbed panel (#5649)

* add focus logic to the tabbed panel

* change enter to be on key up

* fix  tests

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

@@ -177,6 +177,9 @@ export class ChartView extends Disposable implements IPanelView {
 		}
 	}
 
+	focus(): void {
+	}
+
 	public set queryRunner(runner: QueryRunner) {
 		this._queryRunner = runner;
 		this.shouldGraph();

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

@@ -341,7 +341,8 @@ export class ProfilerEditor extends BaseEditor {
 			title: nls.localize('text', "Text"),
 			view: {
 				layout: dim => this._editor.layout(dim),
-				render: parent => parent.appendChild(editorContainer)
+				render: parent => parent.appendChild(editorContainer),
+				focus: () => this._editor.focus()
 			}
 		});
 
@@ -379,7 +380,8 @@ export class ProfilerEditor extends BaseEditor {
 			title: nls.localize('details', "Details"),
 			view: {
 				layout: dim => this._detailTable.layout(dim),
-				render: parent => parent.appendChild(detailTableContainer)
+				render: parent => parent.appendChild(detailTableContainer),
+				focus: () => this._detailTable.focus()
 			}
 		});
 

src/sql/workbench/parts/query/browser/messagePanel.ts

@@ -94,6 +94,7 @@ export class MessagePanel extends Disposable {
 			renderer: this.renderer,
 			controller: this.controller
 		}, { keyboardSupport: false, horizontalScrollMode: ScrollbarVisibility.Auto }));
+		this.tree.setInput(this.model);
 		this.tree.onDidScroll(e => {
 			// convert to old VS Code tree interface with expandable methods
 			let expandableTree: IExpandableTree = <IExpandableTree>this.tree;
@@ -158,7 +159,6 @@ export class MessagePanel extends Disposable {
 		this.container.style.height = '100%';
 		this._register(attachListStyler(this.tree, this.themeService));
 		container.appendChild(this.container);
-		this.tree.setInput(this.model);
 	}
 
 	public layout(size: Dimension): void {
@@ -176,6 +176,11 @@ export class MessagePanel extends Disposable {
 		}
 	}
 
+	public focus(): void {
+		this.tree.refresh();
+		this.tree.domFocus();
+	}
+
 	public set queryRunner(runner: QueryRunner) {
 		dispose(this.queryRunnerDisposables);
 		this.queryRunnerDisposables = [];

src/sql/workbench/parts/query/browser/queryEditor.ts

@@ -110,7 +110,7 @@ export class QueryEditor extends BaseEditor {
 		this.splitview.addView({
 			element: this.textEditorContainer,
 			layout: size => this.textEditor.layout(new DOM.Dimension(this.dimension.width, size)),
-			minimumSize: 220,
+			minimumSize: 0,
 			maximumSize: Number.POSITIVE_INFINITY,
 			onDidChange: Event.None
 		}, Sizing.Distribute);
@@ -336,7 +336,7 @@ export class QueryEditor extends BaseEditor {
 			this.splitview.addView({
 				element: this.resultsEditorContainer,
 				layout: size => this.resultsEditor && this.resultsEditor.layout(new DOM.Dimension(this.dimension.width, size)),
-				minimumSize: 220,
+				minimumSize: 0,
 				maximumSize: Number.POSITIVE_INFINITY,
 				onDidChange: Event.None
 			}, Sizing.Distribute);

src/sql/workbench/parts/query/browser/queryResultsView.ts

@@ -42,6 +42,10 @@ class MessagesView extends Disposable implements IPanelView {
 		this.messagePanel.layout(dimension);
 	}
 
+	focus(): void {
+		this.messagePanel.focus();
+	}
+
 	public clear() {
 		this.messagePanel.clear();
 	}
@@ -85,6 +89,10 @@ class ResultsView extends Disposable implements IPanelView {
 		this.gridPanel.layout(dimension);
 	}
 
+	focus(): void {
+		this.gridPanel.focus();
+	}
+
 	public clear() {
 		this.gridPanel.clear();
 	}

src/sql/workbench/parts/query/electron-browser/gridPanel.ts

@@ -155,6 +155,10 @@ export class GridPanel {
 		this.currentHeight = size.height;
 	}
 
+	public focus(): void {
+		// will need to add logic to save the focused grid and focus that
+	}
+
 	public set queryRunner(runner: QueryRunner) {
 		dispose(this.queryRunnerDisposables);
 		this.reset();

src/sql/workbench/parts/query/modelViewTab/queryModelViewTab.ts

@@ -49,6 +49,10 @@ export class QueryModelViewTabView implements IPanelView {
 	public layout(dimension: Dimension): void {
 	}
 
+	public focus(): void {
+
+	}
+
 	/**
 	 * Load the angular components and record for this input that we have done so
 	 */

src/sql/workbench/parts/queryPlan/browser/topOperations.ts

@@ -89,6 +89,10 @@ export class TopOperationsView implements IPanelView {
 		this.table.layout(dimension);
 	}
 
+	public focus(): void {
+		this.table.focus();
+	}
+
 	public clear() {
 		this.dataView.clear();
 	}

src/sql/workbench/parts/queryPlan/electron-browser/queryPlan.ts

@@ -64,6 +64,10 @@ export class QueryPlanView implements IPanelView {
 		this.container.style.height = dimension.height + 'px';
 	}
 
+	public focus() {
+		this.container.focus();
+	}
+
 	public clear() {
 		if (this.qp) {
 			this.qp.xml = undefined;

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

@@ -336,7 +336,8 @@ export class RestoreDialog extends Modal {
 				render: c => {
 					DOM.append(c, generalTab);
 				},
-				layout: () => { }
+				layout: () => { },
+				focus: () => generalTab.focus()
 			}
 		});
 
@@ -347,7 +348,8 @@ export class RestoreDialog extends Modal {
 				layout: () => { },
 				render: c => {
 					c.appendChild(fileContentElement);
-				}
+				},
+				focus: () => fileContentElement.focus()
 			}
 		});
 
@@ -358,7 +360,8 @@ export class RestoreDialog extends Modal {
 				layout: () => { },
 				render: c => {
 					c.appendChild(optionsContentElement);
-				}
+				},
+				focus: () => optionsContentElement.focus()
 			}
 		});
 

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

@@ -163,7 +163,8 @@ export class ConnectionDialogWidget extends Modal {
 				render: c => {
 					c.append(recentConnectionTab);
 				},
-				layout: () => { }
+				layout: () => { },
+				focus: () => this._recentConnectionTree.domFocus()
 			}
 		});
 
@@ -174,7 +175,8 @@ export class ConnectionDialogWidget extends Modal {
 				layout: () => { },
 				render: c => {
 					c.append(savedConnectionTab);
-				}
+				},
+				focus: () => this._savedConnectionTree.domFocus()
 			}
 		});