expand the detail section by selecting the headers (#6130)

* expand the detail section by selecting the headers

* use methods

* address comments

src/sql/base/browser/ui/panel/panel.ts

@@ -39,6 +39,7 @@ export interface IPanelTab {
 	title: string;
 	identifier: string;
 	view: IPanelView;
+	tabSelectedHandler?(): void;
 }
 
 interface IInternalPanelTab {
@@ -148,11 +149,21 @@ export class TabbedPanel extends Disposable {
 		let tabLabel = DOM.$('a.tabLabel');
 		tabLabel.innerText = tab.tab.title;
 		tabElement.appendChild(tabLabel);
-		tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.CLICK, e => this.showTab(tab.tab.identifier)));
+		const invokeTabSelectedHandler = () => {
+			if (tab.tab.tabSelectedHandler) {
+				tab.tab.tabSelectedHandler();
+			}
+		};
+		tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.CLICK, e => {
+			this.showTab(tab.tab.identifier);
+			invokeTabSelectedHandler();
+		}));
+
 		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.tab.identifier);
+				invokeTabSelectedHandler();
 				e.stopImmediatePropagation();
 			}
 		}));

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

@@ -206,6 +206,10 @@ export class ProfilerCollapsablePanelAction extends Action {
 		return Promise.resolve(true);
 	}
 
+	get collapsed(): boolean {
+		return this._collapsed;
+	}
+
 	set collapsed(val: boolean) {
 		this._collapsed = val === false ? false : true;
 		this._setClass(this._collapsed ? 'maximize-panel-action' : 'minimize-panel-action');

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

@@ -336,6 +336,13 @@ export class ProfilerEditor extends BaseEditor {
 		tabbedPanelContainer.className = 'profiler-tabbedPane';
 		this._tabbedPanel = new TabbedPanel(tabbedPanelContainer);
 		attachTabbedPanelStyler(this._tabbedPanel, this.themeService);
+
+		const expandPanel = () => {
+			if (this._collapsedPanelAction.collapsed) {
+				this._collapsedPanelAction.run(this.input);
+			}
+		};
+
 		this._tabbedPanel.pushTab({
 			identifier: 'editor',
 			title: nls.localize('text', "Text"),
@@ -343,7 +350,8 @@ export class ProfilerEditor extends BaseEditor {
 				layout: dim => this._editor.layout(dim),
 				render: parent => parent.appendChild(editorContainer),
 				focus: () => this._editor.focus()
-			}
+			},
+			tabSelectedHandler: expandPanel
 		});
 
 		let detailTableContainer = document.createElement('div');
@@ -382,7 +390,8 @@ export class ProfilerEditor extends BaseEditor {
 				layout: dim => this._detailTable.layout(dim),
 				render: parent => parent.appendChild(detailTableContainer),
 				focus: () => this._detailTable.focus()
-			}
+			},
+			tabSelectedHandler: expandPanel
 		});
 
 		this._collapsedPanelAction = this._instantiationService.createInstance(Actions.ProfilerCollapsablePanelAction, Actions.ProfilerCollapsablePanelAction.ID, Actions.ProfilerCollapsablePanelAction.LABEL);