From 08cf731c87a973f2ea3180eac2e44bb76b72e0f7 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Sat, 22 Jun 2019 00:29:02 -0700 Subject: [PATCH] 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 | 13 ++++++++++++- .../parts/profiler/browser/profilerActions.ts | 4 ++++ .../parts/profiler/browser/profilerEditor.ts | 13 +++++++++++-- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/sql/base/browser/ui/panel/panel.ts b/src/sql/base/browser/ui/panel/panel.ts index 2aaab2264b..db007fb7f2 100644 --- a/src/sql/base/browser/ui/panel/panel.ts +++ b/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(); } })); diff --git a/src/sql/workbench/parts/profiler/browser/profilerActions.ts b/src/sql/workbench/parts/profiler/browser/profilerActions.ts index bafcbe49e8..e49733fc2d 100644 --- a/src/sql/workbench/parts/profiler/browser/profilerActions.ts +++ b/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'); diff --git a/src/sql/workbench/parts/profiler/browser/profilerEditor.ts b/src/sql/workbench/parts/profiler/browser/profilerEditor.ts index e9e837ba37..0f86613059 100644 --- a/src/sql/workbench/parts/profiler/browser/profilerEditor.ts +++ b/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);