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.

Sign up for GitHub

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

Jump to bottom

Add extended tab bar preview option #12350

Merged
merged 3 commits into from
Apr 13, 2023
Merged

Add extended tab bar preview option #12350

merged 3 commits into from
Apr 13, 2023

Conversation

sgraband
Copy link
Contributor

@sgraband sgraband commented Mar 27, 2023 •
edited
Loading

What it does

Add functionality to render more information on tab bar hover.
Also makes sure the feedback is styled be using the hoverService.
This currently applies to horizontal tab bars.
Right now the title and the caption will be rendered.
To not remove the old behavior this feature is enabled via the setting window.tabbar.enhancedPreview.
Also added possibility to specify cssClasses to be added to a hover, when requesting it from the HoverService.
This way special hovers, like the extended tab bar preview, can easily be styled with CSS.

Resolves #12334.

Contributed on behalf of STMicroelectronics

How to test

To test the feature:

  1. Open Theia
  2. Enable the window.tabbar.enhancedPreview setting
  3. Open an editor or any other widget in the main area
  4. Hover over the tab of the open view
  5. Confirm that the title and caption (if available) of the view are rendered in the hover feedback

Review checklist

Reminder for reviewers

@sgraband
Copy link
Contributor Author

sgraband commented Apr 5, 2023

@vince-fugnitto I rebased on the latest master changes. Could you take another look?

vince-fugnitto
vince-fugnitto reviewed Apr 5, 2023
View reviewed changes
Copy link
Member

@vince-fugnitto vince-fugnitto left a comment

Choose a reason for hiding this comment

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

The functionality seems correct from what I tested, I would like the opinion of others if possible 👍

packages/core/src/browser/hover-service.ts Outdated Show resolved Hide resolved
packages/core/src/browser/core-preferences.ts Outdated Show resolved Hide resolved
@vince-fugnitto vince-fugnitto added shell issues related to the core shell core issues related to the core of the application ui/ux issues related to user interface / user experience labels Apr 5, 2023
@JonasHelming
Copy link
Contributor

@msujew Do you want to have a look?

msujew
msujew approved these changes Apr 13, 2023
View reviewed changes
Copy link
Member

@msujew msujew left a comment

Choose a reason for hiding this comment

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

I'm fine with the changes as well 👍

@JonasHelming
Copy link
Contributor

@sgraband : Could you resolve the conflict, please?

@sgraband
Add extended tab bar preview option
1d9c76b 
Add functionality to render more information on tab bar hover.
Also makes sure the feedback is styled be using the hoverService.
This currently applies to horizontal tab bars.
Right now the title and the caption will be rendered.
To not remove the old behavior this feature is enabled via the setting
`window.extendedTabBarPreview`.
Also added possibility to specify cssClasses to be added to a hover,
when requesting it from the HoverService.
This way special hovers, like the extended tab bar preview, can easily
be styled with CSS.

Contributed on behalf of STMicroelectronics
@sgraband
Localize preference and address review feedback
06c6d66 
Remove css classes after hover is disposed.
Update tab bars after preference has been changed.

Contributed on behalf of STMicroelectronics
@sgraband
Rename setting to window.tabbar.enhancedPreview
f838260 
Also fix potential unnecessary remove class for cssClasses.

Contributed on behalf of STMicroelectronics
@JonasHelming
Copy link
Contributor

@vince-fugnitto Are you good with merging this?

vince-fugnitto
vince-fugnitto approved these changes Apr 13, 2023
View reviewed changes
Copy link
Member

@vince-fugnitto vince-fugnitto left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@msujew msujew merged commit 6c7f3b1 into eclipse-theia:master Apr 13, 2023
sgraband added a commit to eclipsesource/theia-website that referenced this pull request Apr 14, 2023
@sgraband
Add documentation for enhanced tab bar preview
7a88406 
Documentation for the feature introduced with eclipse-theia/theia#12350

Contributed on behalf of STMicroelectronics
@sgraband sgraband mentioned this pull request Apr 14, 2023
Merged
planger pushed a commit to eclipse-theia/theia-website that referenced this pull request Apr 17, 2023
@sgraband
Add documentation for enhanced tab bar preview (#411)
d12100d 
Documentation for the feature introduced with eclipse-theia/theia#12350

Contributed on behalf of STMicroelectronics
Co-authored-by: Philip Langer <[email protected]>
@vince-fugnitto vince-fugnitto added this to the 1.37.0 milestone Apr 27, 2023
@sgraband sgraband mentioned this pull request Jun 22, 2023
Closed
sgraband added a commit to eclipsesource/theia that referenced this pull request Jun 22, 2023
@sgraband
Add preference for visualPreview on hover
34185ea 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
sgraband added a commit to eclipsesource/theia that referenced this pull request Jun 22, 2023
@sgraband
Add preference for visualPreview on hover
6d78943 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
sgraband added a commit to eclipsesource/theia that referenced this pull request Jun 22, 2023
@sgraband
Add preference for visualPreview on hover
cbb9da1 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
sgraband added a commit to eclipsesource/theia that referenced this pull request Jun 22, 2023
@sgraband
Add preference for visualPreview on hover
021aa75 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
@sgraband sgraband mentioned this pull request Jun 22, 2023
Closed
1 task
sgraband added a commit to eclipsesource/theia that referenced this pull request Jun 22, 2023
@sgraband
Add preference for visualPreview on hover
122df98 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
@sgraband sgraband mentioned this pull request Jun 22, 2023
Merged
1 task
sgraband added a commit to eclipsesource/theia that referenced this pull request Jun 22, 2023
@sgraband
Add preference for visualPreview on hover
fe3e7eb 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
sgraband added a commit to eclipsesource/theia that referenced this pull request Jul 14, 2023
@sgraband
Add preference for visualPreview on hover
c5c36a1 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
sgraband added a commit to eclipsesource/theia that referenced this pull request Jul 25, 2023
@sgraband
Add preference for visualPreview on hover
a509a69 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
sgraband added a commit to eclipsesource/theia that referenced this pull request Jul 26, 2023
@sgraband
Add preference for visualPreview on hover
21d7946 
Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (eclipse-theia#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes eclipse-theia#12646

Contributed on behalf of STMicroelectronics
msujew pushed a commit that referenced this pull request Jul 27, 2023
@sgraband
Add preference for visualPreview on hover (#12648)
002fd17 
* Add preference for visualPreview on hover

Made window.tabbar.enhancedPreview an enum preference with these options:
- classic: a simple unstyled preview, containing the name
- enhanced: a styled preview containing title and caption (#12350)
- visual: the enhanced preview +  visual preview of the view
Extended the hover service so that it supports the visual preview.
Added the `PreviewableWidget` interface.
Widgets, implementing this interface, can be previewed once they were loaded.
The loaded flag is set to true when a widget is set to active.
Widgets implementing the interface can specify how the preview should look like.
The default is simply the node of the widget.
Webviews are currently not previewable, as they raise some challenges.
For example, scripts in the webviews would need to be handled/blocked.
Therefore, an approach for webviews should be tackled in a follow up.

Fixes #12646

Contributed on behalf of STMicroelectronics

* Address review feedback

Adjust changelog and preference description

Contributed on behalf of STMicroelectronics

* Scale previews to 16:9 aspect ratio

This way the size of the previews is more uniform.
If the view is wider than 16:9 the scaling is according to the width.
If the view is longer  than 16:9 the scaling is according to the height.
The other dimension is then cropped.

Contributed on behalf of STMicroelectronics

* Fix small issue with hover-title and -caption css

Before the two fields ignored the max-width.

Contributed on behalf of STMicroelectronics

* Fix preview width to 300px

Contributed on behalf of STMicroelectronics

* Rename div's css class

Contributed on behalf of STMicroelectronics
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vince-fugnitto vince-fugnitto vince-fugnitto approved these changes

@msujew msujew msujew approved these changes

Assignees
No one assigned
Labels
core issues related to the core of the application shell issues related to the core shell ui/ux issues related to user interface / user experience
Projects
None yet
Milestone
1.37.0
Development

Successfully merging this pull request may close these issues.

Provide extended tabbar preview
4 participants
@sgraband @JonasHelming @msujew @vince-fugnitto