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/base/browser/ui/panel/panel.ts

@@ -29,6 +29,7 @@ export interface IPanelOptions {
 export interface IPanelView {
 	render(container: HTMLElement): void;
 	layout(dimension: DOM.Dimension): void;
+	focus(): void;
 	remove?(): void;
 }
 
@@ -143,7 +144,7 @@ export class TabbedPanel extends Disposable {
 		tabLabel.innerText = tab.title;
 		tabElement.appendChild(tabLabel);
 		tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.CLICK, e => this.showTab(tab.identifier)));
-		tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
+		tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.KEY_UP, (e: KeyboardEvent) => {
 			let event = new StandardKeyboardEvent(e);
 			if (event.equals(KeyCode.Enter)) {
 				this.showTab(tab.identifier);
@@ -188,6 +189,7 @@ export class TabbedPanel extends Disposable {
 		if (this._currentDimensions) {
 			this._layoutCurrentTab(new DOM.Dimension(this._currentDimensions.width, this._currentDimensions.height - this.headersize));
 		}
+		this.focus();
 	}
 
 	public removeTab(tab: PanelTabIdentifier) {
@@ -306,7 +308,12 @@ export class TabbedPanel extends Disposable {
 	}
 
 	public focus(): void {
-
+		if (this._shownTabId) {
+			const tab = this._tabMap.get(this._shownTabId);
+			if (tab) {
+				tab.view.focus();
+			}
+		}
 	}
 
 	public set collapsed(val: boolean) {

src/sql/platform/dialog/dialogPane.ts

@@ -78,9 +78,10 @@ export class DialogPane extends Disposable implements IThemable {
 							container.appendChild(tabContainer);
 							tabContainer.style.display = 'block';
 						},
-						layout: (dimension) => { this.getTabDimension(); }
-					} as IPanelView
-				} as IPanelTab);
+						layout: (dimension) => { this.getTabDimension(); },
+						focus: () => { }
+					}
+				});
 			});
 		}
 

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()
 			}
 		});