[GH-#10878] Fix bug of Getting Start Widget Accept Focus

[WhiteHsu]

What it does

Closes #10878.
The fix for the bug #10878 to make the Getting Start Widget could be focused.

How to test

1. Open the application with no workspace.
2. Try to focus the Getting Started Widget.
3. For now the widget will be marked active (brighter text) .

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

However, the console will still show the warning message:

root WARN Widget was activated, but did not accept focus after 2000ms: getting.started.widget

I've tried many different ways to fire the focus, but no way can resolve this warning message. May I know whether we must resolve the warning, or it should be ok because the Getting Start Widget can be focused properly for now?

Please kindly suggest and feedback. Thank you very much.

• As a reviewer, I agree to behave in accordance with the review guidelines

[vince-fugnitto]

Thank you for your contribution 👍

In order to accept your changes please be sure to sure to sign the eclipse contributor agreement (eca) with the same email as your authorship.

[WhiteHsu]

@vince-fugnitto got it and thanks!

[vince-fugnitto]

@WhiteHsu for reference theia-blueprint (downstream product) made a change to fix the issue where they could successfully accept the focus:

https://github.com/eclipse-theia/theia-blueprint/pull/201/files

[WhiteHsu]

hi @vince-fugnitto Yes I've learned from that, then the Getting Started Widget could be focused now.

[vince-fugnitto]

@WhiteHsu I had referenced the theia-blueprint commit since your changes don't actually seem to work as the widget still warns about focus not being accepted:

logger-protocol.ts:113 2022-10-28T12:47:45.505Z root WARN Widget was activated, but did not accept focus after 2000ms: getting.started.widget

You'll need to modify getting-started-contribution.ts to pass activate to the openView methods:

theia/packages/getting-started/src/browser/getting-started-contribution.ts

Lines 51 to 63 in eb4b047

	async onStart(app: FrontendApplication): Promise<void> {
	if (!this.workspaceService.opened) {
	this.stateService.reachedState('ready').then(
	() => this.openView({ reveal: true })
	);
	}
	}
	override registerCommands(registry: CommandRegistry): void {
	registry.registerCommand(GettingStartedCommand, {
	execute: () => this.openView({ reveal: true }),
	});
	}

And ensure that onActivateRequest for the widget itself can properly accept focus (ex: focus on the first available link)

[WhiteHsu]

@vince-fugnitto Ah i see! Sorry for my miss! Thanks a lot for your kind feedback and I'll revise it accordingly!

[WhiteHsu]

hi @vince-fugnitto

Many thanks for your kind feedback. I've revised further but the warning still exist. What I've updated are:

1. To modify getting-started-contribution.ts to pass activate to the openView methods.
2. To focus on the first available link in getting-started-widget.tsx.

However the warning still there:

"WARN Widget was activated, but did not accept focus after 2000ms: getting.started.widget"

I've tried to accept focus on many different elements include:

• gs-container
• The rendered Header
• The rendered class gs-hr
• The rendered class flex-grid
• The rendered class col
• The rendered links with class as gs-action-container

But nether can resolve the warning. May I ask your kind suggestion? Please kindly review my code changes here. Thank you very much.

[vince-fugnitto]

@WhiteHsu I believe that only certain elements can actually accept focus based on the following documention:

The HTMLElement.focus() method sets focus on the specified element, if it can be focused.

I believe that in theia-blueprint they correctly focus on the input field (which can accept focus), but in our case we might not have an element which can accept the focus. I would need to investigate more.

[WhiteHsu]

@vince-fugnitto Thanks for your kind feedback!

Because this bug was mentioning the dysfunctional to highlight the widget after focusing it as the description below, this bug has already been resolved as the functional perspective. Therefore should we close this ticket first, and I can open another ticket to mention the "warning", then it'll be clearer for project management? :-)

Observe that the tab is never marked active (brighter text)

Cc @JonasHelming

[colin-grant-work]

but in our case we might not have an element which can accept the focus. I would need to investigate more.

There are quite a few elements in the Getting Started widget that can accept focus. For example, this might work:

this.node.getElementsByTagName('a')[0]?.focus();

That would put focus on the first 'command link' in the widget, which in the browser is Open.

[WhiteHsu]

ah i see @colin-grant-work . thanks for suggestion!

I'll try it again on the weekend!

[WhiteHsu]

Thanks for the suggestion @colin-grant-work @vince-fugnitto , and it seems workable with getElementsByTagName('a') to accept focus!

Please kindly help review and feedback. Thank you very much!

[colin-grant-work]

I think this code could be subject to a bug that can be prevented fairly easily.

[WhiteHsu]

Hi @colin-grant-work
Many thanks for your kind feedback, which is very helpful!

I've updated codes accordingly also merge the imports to follow Lints. Please kindly help review again. :-)

[colin-grant-work]

The changes look good to me, and the widget now accepts focus. Once CI is green, I'll merge.