Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve widget focus handling #7707

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions packages/core/src/browser/common-frontend-contribution.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,26 @@ export namespace CommonCommands {
category: VIEW_CATEGORY,
label: 'Switch to Previous Tab'
};
export const NEXT_TAB_IN_GROUP: Command = {
id: 'core.nextTabInGroup',
category: VIEW_CATEGORY,
label: 'Switch to Next Tab in Group'
};
export const PREVIOUS_TAB_IN_GROUP: Command = {
id: 'core.previousTabInGroup',
category: VIEW_CATEGORY,
label: 'Switch to Previous Tab in Group'
};
export const NEXT_TAB_GROUP: Command = {
id: 'core.nextTabGroup',
category: VIEW_CATEGORY,
label: 'Switch to Next Tab Group'
};
export const PREVIOUS_TAB_GROUP: Command = {
id: 'core.previousTabBar',
category: VIEW_CATEGORY,
label: 'Switch to Previous Tab Group'
};
export const CLOSE_TAB: Command = {
id: 'core.close.tab',
category: VIEW_CATEGORY,
Expand Down Expand Up @@ -529,6 +549,22 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
isEnabled: () => this.shell.currentTabBar !== undefined,
execute: () => this.shell.activatePreviousTab()
});
commandRegistry.registerCommand(CommonCommands.NEXT_TAB_IN_GROUP, {
isEnabled: () => this.shell.nextTabIndexInTabBar() !== -1,
execute: () => this.shell.activateNextTabInTabBar()
});
commandRegistry.registerCommand(CommonCommands.PREVIOUS_TAB_IN_GROUP, {
isEnabled: () => this.shell.previousTabIndexInTabBar() !== -1,
execute: () => this.shell.activatePreviousTabInTabBar()
});
commandRegistry.registerCommand(CommonCommands.NEXT_TAB_GROUP, {
isEnabled: () => this.shell.nextTabBar() !== undefined,
execute: () => this.shell.activateNextTabBar()
});
commandRegistry.registerCommand(CommonCommands.PREVIOUS_TAB_GROUP, {
isEnabled: () => this.shell.previousTabBar() !== undefined,
execute: () => this.shell.activatePreviousTabBar()
});
commandRegistry.registerCommand(CommonCommands.CLOSE_TAB, {
isEnabled: (event?: Event) => {
const tabBar = this.findTabBar(event);
Expand Down
131 changes: 117 additions & 14 deletions packages/core/src/browser/shell/application-shell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -877,6 +877,8 @@ export class ApplicationShell extends Widget {
*/
readonly activeChanged = new Signal<this, FocusTracker.IChangedArgs<Widget>>(this);

protected readonly toDisposeOnActiveChanged = new DisposableCollection();

/**
* Handle a change to the active widget.
*/
Expand Down Expand Up @@ -914,6 +916,28 @@ export class ApplicationShell extends Widget {
}
// Set the z-index so elements with `position: fixed` contained in the active widget are displayed correctly
this.setZIndex(newValue.node, '1');

// activate another widget if an active widget gets closed
const onCloseRequest = newValue['onCloseRequest'];
newValue['onCloseRequest'] = msg => {
const currentTabBar = this.currentTabBar;
if (currentTabBar) {
const recentlyUsedInTabBar = currentTabBar['_previousTitle'] as TabBar<Widget>['currentTitle'];
if (recentlyUsedInTabBar && recentlyUsedInTabBar.owner !== newValue) {
currentTabBar.currentIndex = ArrayExt.firstIndexOf(currentTabBar.titles, recentlyUsedInTabBar);
if (currentTabBar.currentTitle) {
currentTabBar.currentTitle.owner.activate();
}
} else if (!this.activateNextTabInTabBar(currentTabBar)) {
if (!this.activatePreviousTabBar(currentTabBar)) {
this.activateNextTabBar(currentTabBar);
}
}
}
newValue['onCloseRequest'] = onCloseRequest;
newValue['onCloseRequest'](msg);
};
this.toDisposeOnActiveChanged.push(Disposable.create(() => newValue['onCloseRequest'] = onCloseRequest));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In case we fork or reimplement PhosphorJS, we should add direct support for this so we don't have to fiddle with the onCloseRequest method.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah something like onWillClose event for all widgets will be better.

}
this.activeChanged.emit(args);
this.onDidChangeActiveWidgetEmitter.fire(args);
Expand Down Expand Up @@ -1502,7 +1526,33 @@ export class ApplicationShell extends Widget {
/*
* Activate the next tab in the current tab bar.
*/
activateNextTab(): void {
activateNextTabInTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): boolean {
const index = this.nextTabIndexInTabBar(current);
if (!current || index === -1) {
return false;
}
current.currentIndex = index;
if (current.currentTitle) {
current.currentTitle.owner.activate();
}
return true;
}

nextTabIndexInTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): number {
if (!current || current.titles.length <= 1) {
return -1;
}
const index = current.currentIndex;
if (index === -1) {
return -1;
}
if (index < current.titles.length - 1) {
return index + 1;
}
return 0;
}

activateNextTab(): boolean {
const current = this.currentTabBar;
if (current) {
const ci = current.currentIndex;
Expand All @@ -1512,21 +1562,31 @@ export class ApplicationShell extends Widget {
if (current.currentTitle) {
current.currentTitle.owner.activate();
}
return true;
} else if (ci === current.titles.length - 1) {
const nextBar = this.nextTabBar(current);
nextBar.currentIndex = 0;
if (nextBar.currentTitle) {
nextBar.currentTitle.owner.activate();
}
return this.activateNextTabBar(current);
}
}
}
return false;
}

activateNextTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): boolean {
const nextBar = this.nextTabBar(current);
if (nextBar) {
nextBar.currentIndex = 0;
if (nextBar.currentTitle) {
nextBar.currentTitle.owner.activate();
}
return true;
}
return false;
}

/**
* Return the tab bar next to the given tab bar; return the given tab bar if there is no adjacent one.
*/
private nextTabBar(current: TabBar<Widget>): TabBar<Widget> {
nextTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): TabBar<Widget> | undefined {
let bars = toArray(this.bottomPanel.tabBars());
let len = bars.length;
let ci = ArrayExt.firstIndexOf(bars, current);
Expand All @@ -1547,6 +1607,32 @@ export class ApplicationShell extends Widget {
/*
* Activate the previous tab in the current tab bar.
*/
activatePreviousTabInTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): boolean {
const index = this.previousTabIndexInTabBar(current);
if (!current || index === -1) {
return false;
}
current.currentIndex = index;
if (current.currentTitle) {
current.currentTitle.owner.activate();
}
return true;
}

previousTabIndexInTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): number {
if (!current || current.titles.length <= 1) {
return -1;
}
const index = current.currentIndex;
if (index === -1) {
return -1;
}
if (index > 0) {
return index - 1;
}
return current.titles.length - 1;
}

activatePreviousTab(): void {
const current = this.currentTabBar;
if (current) {
Expand All @@ -1558,21 +1644,29 @@ export class ApplicationShell extends Widget {
current.currentTitle.owner.activate();
}
} else if (ci === 0) {
const prevBar = this.previousTabBar(current);
const len = prevBar.titles.length;
prevBar.currentIndex = len - 1;
if (prevBar.currentTitle) {
prevBar.currentTitle.owner.activate();
}
this.activatePreviousTabBar(current);
}
}
}
}

activatePreviousTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): boolean {
const prevBar = this.previousTabBar(current);
if (!prevBar) {
return false;
}
const len = prevBar.titles.length;
prevBar.currentIndex = len - 1;
if (prevBar.currentTitle) {
prevBar.currentTitle.owner.activate();
}
return true;
}

/**
* Return the tab bar previous to the given tab bar; return the given tab bar if there is no adjacent one.
*/
private previousTabBar(current: TabBar<Widget>): TabBar<Widget> {
previousTabBar(current: TabBar<Widget> | undefined = this.currentTabBar): TabBar<Widget> | undefined {
const bars = toArray(this.mainPanel.tabBars());
const len = bars.length;
const ci = ArrayExt.firstIndexOf(bars, current);
Expand Down Expand Up @@ -1620,6 +1714,15 @@ export class ApplicationShell extends Widget {
return [...this.tracker.widgets];
}

getWidgetById(id: string): Widget | undefined {
for (const widget of this.tracker.widgets) {
if (widget.id === id) {
return widget;
}
}
return undefined;
}

canToggleMaximized(): boolean {
const area = this.currentWidget && this.getAreaFor(this.currentWidget);
return area === 'main' || area === 'bottom';
Expand Down
37 changes: 35 additions & 2 deletions packages/editor/src/browser/editor-manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,40 @@ export class EditorManager extends NavigatableWidgetOpenHandler<EditorWidget> {
super.init();
this.shell.activeChanged.connect(() => this.updateActiveEditor());
this.shell.currentChanged.connect(() => this.updateCurrentEditor());
this.onCreated(widget => widget.disposed.connect(() => this.updateCurrentEditor()));
this.onCreated(widget => {
widget.onDidChangeVisibility(() => {
if (widget.isVisible) {
this.addRecentlyVisible(widget);
this.updateCurrentEditor();
}
});
widget.disposed.connect(() => {
this.removeRecentlyVisible(widget);
this.updateCurrentEditor();
});
});
for (const widget of this.all) {
if (widget.isVisible) {
this.addRecentlyVisible(widget);
}
}
this.updateCurrentEditor();
}

protected readonly recentlyVisibleIds: string[] = [];
protected get recentlyVisible(): EditorWidget | undefined {
const id = this.recentlyVisibleIds[0];
return id && this.all.find(w => w.id === id) || undefined;
}
protected addRecentlyVisible(widget: EditorWidget): void {
this.removeRecentlyVisible(widget);
this.recentlyVisibleIds.unshift(widget.id);
}
protected removeRecentlyVisible(widget: EditorWidget): void {
const index = this.recentlyVisibleIds.indexOf(widget.id);
if (index !== -1) {
this.recentlyVisibleIds.splice(index, 1);
}
}

protected _activeEditor: EditorWidget | undefined;
Expand Down Expand Up @@ -93,7 +126,7 @@ export class EditorManager extends NavigatableWidgetOpenHandler<EditorWidget> {
if (widget instanceof EditorWidget) {
this.setCurrentEditor(widget);
} else if (!this._currentEditor || !this._currentEditor.isVisible) {
this.setCurrentEditor(undefined);
this.setCurrentEditor(this.recentlyVisible);
}
}

Expand Down
11 changes: 8 additions & 3 deletions packages/markers/src/browser/marker-tree-label-provider.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ let disableJSDOM = enableJSDOM();
import URI from '@theia/core/lib/common/uri';
import { expect } from 'chai';
import { Container } from 'inversify';
import { ContributionProvider } from '@theia/core/lib/common';
import { ContributionProvider, Event } from '@theia/core/lib/common';
import { FileStat, FileSystem } from '@theia/filesystem/lib/common';
import { LabelProvider, LabelProviderContribution, DefaultUriLabelProviderContribution, ApplicationShell } from '@theia/core/lib/browser';
import { LabelProvider, LabelProviderContribution, DefaultUriLabelProviderContribution, ApplicationShell, WidgetManager } from '@theia/core/lib/browser';
import { MarkerInfoNode } from './marker-tree';
import { MarkerTreeLabelProvider } from './marker-tree-label-provider';
import { Signal } from '@phosphor/signaling';
Expand All @@ -46,7 +46,12 @@ before(() => {
testContainer.bind(WorkspaceService).toConstantValue(workspaceService);
testContainer.bind(WorkspaceVariableContribution).toSelf().inSingletonScope();
testContainer.bind(ApplicationShell).toConstantValue({
currentChanged: new Signal({})
currentChanged: new Signal({}),
widgets: () => []
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
testContainer.bind(WidgetManager).toConstantValue({
onDidCreateWidget: Event.None
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
testContainer.bind(FileSystem).to(MockFilesystem).inSingletonScope();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ import { expect } from 'chai';
import * as sinon from 'sinon';
import { Container } from 'inversify';
import { Signal } from '@phosphor/signaling';
import { ApplicationShell } from '@theia/core/lib/browser';
import { Event } from '@theia/core/lib/common/event';
import { ApplicationShell, WidgetManager } from '@theia/core/lib/browser';
import { FileStat, FileSystem } from '@theia/filesystem/lib/common/filesystem';
import { MockFilesystem } from '@theia/filesystem/lib/common/test';
import { DefaultUriLabelProviderContribution } from '@theia/core/lib/browser/label-provider';
Expand All @@ -44,7 +45,12 @@ beforeEach(() => {

container = new Container();
container.bind(ApplicationShell).toConstantValue({
currentChanged: new Signal({})
currentChanged: new Signal({}),
widgets: () => []
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
container.bind(WidgetManager).toConstantValue({
onDidCreateWidget: Event.None
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
const workspaceService = new WorkspaceService();
Expand Down
Loading