Add rich tooltips for plugin trees and VSX extensions #10108

thegecko · 2021-09-15T15:41:14Z

Signed-off-by: robmor01 [email protected]

What it does

The plugin-ext support for tree views coming from VSCode plugins doesn't support rendering markdown in tooltips.
This PR introduces functionality to render a rich tooltip when a plugin supplies markdown for that purpose.

It checks that the string passed is markdown before rendering, so shouldn't interfere with normal titles and doesn't instantiate the tooltip renderer until required.

Additionally, this new tooltip functionality has been used to add a tooltip to the VSX extensions panel.

This PR introduces a new direct dependency to react-tooltip (MIT), so let's see what the new License check GitHub CI flow says.

The tooltip has been made available to the entire application and can render html. As this has to be set programmatically, it shouldn't pose a security risk.

Tooltip follows the theming of Theia (see below)

Note: There is a minor addition to the launch.json file for a compound configuration to Launch Browser Backend & Frontend

How to test

Open the VSX extensions panel and observe the tooltips.

To test tooltips on plugin trees, use theia with a plugin which offers known markdown tooltips, e.g. the SVD peripheral viewer of cortex-debug

Screenies

Tooltip support for the VSX-extensions:

Plugin tree tooltip (Dark):

Plugin tree tooltip (Light):

Review checklist

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

Reminder for reviewers

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

vince-fugnitto

@thegecko given the fact we don't have an example where the new tooltip renderer is actually used in the codebase (meaning it is hard to test especially regressions), can we not add a example in the api-samples?

packages/core/src/browser/tooltip-renderer.tsx

packages/core/src/browser/style/tooltip.css

thegecko · 2021-09-15T16:20:24Z

can we not add a example in the api-samples

Depends on the effort involved...

Is api-samples a package or repo?

vince-fugnitto · 2021-09-15T16:36:39Z

Is api-samples a package or repo?

It's an extension that is part of our repo and included in the examples (browser and electron) but not published:

https://github.com/eclipse-theia/theia/tree/master/examples/api-samples

The idea is to at least have one example in the repo for test purposes, and given nothing at the moment uses the new tooltip renderer it is hard to test, add features to, and verify for any possible regressions.

packages/core/src/browser/tooltip-renderer.tsx

packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx

thegecko · 2021-09-23T18:54:28Z

Still working on an api-example, please bear with me.

I believe all other comments/requests have been resolved.

vince-fugnitto · 2021-09-23T19:02:26Z

A good place to use it in the future would be the following like in vscode :)

Signed-off-by: robmor01 <[email protected]>

thegecko · 2021-10-01T19:08:11Z

@vince-fugnitto I spent some time trying to devise an api-example for this, but it got too complicated and was taking too long.

I found it far easier to simply implement the vsx-extension tooltips you suggested (see updated PR description).

Would this suffice as a usage example?

thegecko · 2021-10-10T12:23:30Z

bump @vince-fugnitto

vince-fugnitto · 2021-10-10T13:42:28Z

bump @vince-fugnitto

Sorry @thegecko I didn’t get a chance to review the pull-request yet, I’ll likely do so on Tuesday when I’m back at work. I think implementing it for vsx was a great idea 👍

thegecko · 2021-10-10T13:59:00Z

I’ll likely do so on Tuesday

No problem!

vince-fugnitto · 2021-10-12T12:45:19Z

.vscode/launch.json

+    },
+    {
+      "name": "Launch Browser Backend & Frontend",
+      "configurations": [
+        "Launch Browser Backend",
+        "Attach to Plugin Host",
+        "Launch Browser Frontend"
+      ]


@thegecko should the changes be added to a separate commit, I believe they are overall unrelated to the pull-request.

vince-fugnitto · 2021-10-12T12:47:17Z

packages/vsx-registry/src/browser/vsx-extension.tsx

+    }
+
+    get tooltip(): string {
+        const details = this.getData('readme') || this.description;


@thegecko I believe it might be too much information to use the readme, it will lead to the following issue:

search gitlens

use the tooltip on the first result

vsx-tooltip.mp4

Readme removed

thegecko · 2021-10-12T14:07:23Z

@vince-fugnitto Comments addressed

vince-fugnitto · 2021-10-12T16:53:36Z

packages/core/src/browser/tooltip-service.tsx

+    }
+
+    protected doRender(): React.ReactNode {
+        return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={1000} />;


Could we use some type of TooltipProps where clients can more easily configure how they want their tooltips to behave, and possibly support other react-tooltip options? For example if they want to update delayShow.

I looked at the props and didn't find much we'd want to expose. I'd also suggest the popup delay is kept consistent across the product

vince-fugnitto · 2021-10-12T16:54:16Z

packages/core/src/browser/tooltip-service.tsx

+    }
+
+    protected doRender(): React.ReactNode {
+        return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={1000} />;


The delay in the vsx-registry felt a bit long, any reason you chose 1 second?

Suggested change

return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={1000} />;

return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={500} />;

I timed the vscode popup

I agree with Vince here. It seems like the delay is indeed a bit long (depending on which OS you're using). See this setting in the vscode codebase which controlls the delay of the tooltip popup.

I'd be in favor of adding a similar setting to the preferences in here.

Heh, I'm on a mac hence the longer delay experienced!

vince-fugnitto

The changes look good to me 👍
I'll give others the opportunity to review as a well!

msujew

Code looks good to me as well! I have one minor comment and also would like to see the hover delay preference added. Afterwards this is good to go 👍

packages/vsx-registry/src/browser/vsx-extension.tsx

thegecko · 2021-10-13T13:33:42Z

...would like to see the hover delay preference added

What is wanted here? @vince-fugnitto suggested making it quicker, alternatively it could be editable. Is that globally or on a per popup basis?

msujew · 2021-10-13T13:37:02Z

What is wanted here?

@thegecko I left a comment in this thread (I know, github is incredibly bad at showing that someone appended a comment in a review thread). I would like to align with vscode in that regard. The delay would be global in that case.

thegecko · 2021-10-13T13:40:16Z

@thegecko I left a comment in this thread (I know, github is incredibly bad at showing that someone appended a comment in a review thread). I would like to align with vscode in that regard. The delay would be global in that case.

Ack, I'll do that

thegecko · 2021-10-13T14:25:35Z

Version and preference suggestions implemented.

packages/core/src/browser/tooltip-service.tsx

msujew

Great, LGTM!

vince-fugnitto reviewed Sep 15, 2021

View reviewed changes

packages/core/src/browser/tooltip-renderer.tsx Outdated Show resolved Hide resolved

packages/core/src/browser/style/tooltip.css Show resolved Hide resolved

vince-fugnitto added the ui/ux issues related to user interface / user experience label Sep 15, 2021

thegecko force-pushed the plugin-tree-rich-tooltip branch from cc59a3c to 5d43e3d Compare September 15, 2021 17:22

colin-grant-work reviewed Sep 17, 2021

View reviewed changes

packages/core/src/browser/tooltip-renderer.tsx Outdated Show resolved Hide resolved

packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx Outdated Show resolved Hide resolved

thegecko force-pushed the plugin-tree-rich-tooltip branch from 5d43e3d to ae8192a Compare September 18, 2021 16:24

Add markdown renderer for plugin tree tooltips

2fed721

Signed-off-by: robmor01 <[email protected]>

thegecko force-pushed the plugin-tree-rich-tooltip branch from 88f61fd to 2fed721 Compare October 1, 2021 19:00

thegecko changed the title ~~Add markdown renderer for plugin tree tooltips~~ Add rich tooltips for plugin trees and VSX registry Oct 1, 2021

Merge branch 'master' into plugin-tree-rich-tooltip

faa1ed7

thegecko changed the title ~~Add rich tooltips for plugin trees and VSX registry~~ Add rich tooltips for plugin trees and VSX extensions Oct 1, 2021

vince-fugnitto reviewed Oct 12, 2021

View reviewed changes

vince-fugnitto added the vsx-registry Issues related to Open VSX Registry Integration label Oct 12, 2021

thegecko added 2 commits October 12, 2021 15:05

Removed launch.json fixes

8384a8f

Don't use readme details

b6f58b8

vince-fugnitto reviewed Oct 12, 2021

View reviewed changes

vince-fugnitto reviewed Oct 13, 2021

View reviewed changes

vince-fugnitto requested a review from msujew October 13, 2021 12:07

msujew reviewed Oct 13, 2021

View reviewed changes

packages/vsx-registry/src/browser/vsx-extension.tsx Show resolved Hide resolved

thegecko added 2 commits October 13, 2021 15:23

Add preference for tooltip delay

377e5c5

Ensure extensions have a version starting with 'v'

aab37ea

Add fullRender option

cf8e2fe

msujew reviewed Oct 14, 2021

View reviewed changes

packages/core/src/browser/tooltip-service.tsx Outdated Show resolved Hide resolved

thegecko commented Oct 14, 2021

View reviewed changes

packages/core/src/browser/tooltip-service.tsx Outdated Show resolved Hide resolved

Update packages/core/src/browser/tooltip-service.tsx

199cc76

msujew approved these changes Oct 14, 2021

View reviewed changes

thegecko merged commit 5d88bf5 into eclipse-theia:master Oct 14, 2021

vince-fugnitto added this to the 1.19.0 milestone Oct 28, 2021

msujew mentioned this pull request Nov 15, 2022

Generic hover service support #11869

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add rich tooltips for plugin trees and VSX extensions #10108

Add rich tooltips for plugin trees and VSX extensions #10108

thegecko commented Sep 15, 2021 •

edited

Loading

vince-fugnitto left a comment

thegecko commented Sep 15, 2021

vince-fugnitto commented Sep 15, 2021

thegecko commented Sep 23, 2021

vince-fugnitto commented Sep 23, 2021

thegecko commented Oct 1, 2021 •

edited

Loading

thegecko commented Oct 10, 2021

vince-fugnitto commented Oct 10, 2021

thegecko commented Oct 10, 2021

vince-fugnitto Oct 12, 2021

thegecko Oct 12, 2021

vince-fugnitto Oct 12, 2021

thegecko Oct 12, 2021

thegecko commented Oct 12, 2021

vince-fugnitto Oct 12, 2021

thegecko Oct 12, 2021

vince-fugnitto Oct 12, 2021

thegecko Oct 12, 2021

msujew Oct 13, 2021 •

edited

Loading

thegecko Oct 13, 2021

vince-fugnitto left a comment

msujew left a comment

thegecko commented Oct 13, 2021

msujew commented Oct 13, 2021

thegecko commented Oct 13, 2021

thegecko commented Oct 13, 2021

msujew left a comment

	return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={1000} />;
	return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={500} />;

Add rich tooltips for plugin trees and VSX extensions #10108

Add rich tooltips for plugin trees and VSX extensions #10108

Conversation

thegecko commented Sep 15, 2021 • edited Loading

What it does

How to test

Screenies

Review checklist

Reminder for reviewers

vince-fugnitto left a comment

Choose a reason for hiding this comment

thegecko commented Sep 15, 2021

vince-fugnitto commented Sep 15, 2021

thegecko commented Sep 23, 2021

vince-fugnitto commented Sep 23, 2021

thegecko commented Oct 1, 2021 • edited Loading

thegecko commented Oct 10, 2021

vince-fugnitto commented Oct 10, 2021

thegecko commented Oct 10, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thegecko commented Oct 12, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

msujew Oct 13, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vince-fugnitto left a comment

Choose a reason for hiding this comment

msujew left a comment

Choose a reason for hiding this comment

thegecko commented Oct 13, 2021

msujew commented Oct 13, 2021

thegecko commented Oct 13, 2021

thegecko commented Oct 13, 2021

msujew left a comment

Choose a reason for hiding this comment

thegecko commented Sep 15, 2021 •

edited

Loading

thegecko commented Oct 1, 2021 •

edited

Loading

msujew Oct 13, 2021 •

edited

Loading