Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600

jbicker · 2019-03-18T15:12:46Z

Every sidepanel has an header now where the title and a toolbar
is shown (if tools are registered for that widget).
As an example the control buttons of search in workspace extension are
moved to the toolbar.

Additionally the tabs of sidebars don't show labels anymore but icons.

fIx #3864, fIx #716

akosyakov · 2019-03-19T07:23:16Z

@jbicker build is broken and some nice screenshots in the description will be cool :)

TODO:

fix APIs to use Event
icon placeholder for views without icons
align menu bar styles, see Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600 (comment)
align title styles and labels with VS Code, see Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600 (comment) and Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600 (comment)
fix UI tests
update CHANGELOG with a breaking change - there is no way to revert to text based titles
CQ: https://dev.eclipse.org/ipzilla/show_bug.cgi?id=19376
plugin system: view containers should work nicely, test against vscode:extension/ms-vscode.references-view

akosyakov · 2019-03-19T07:23:48Z

packages/core/src/browser/shell/tab-bar-toolbar.tsx

@@ -174,6 +180,8 @@ export interface TabBarToolbarItem {
     */
    readonly when?: string;

+    onDidChange?: (handler: () => void) => void;


please use Event<void> instead

svenefftinge

Looks great just a few small improvements.

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

packages/core/src/browser/shell/side-panel-toolbar.ts

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

svenefftinge · 2019-03-19T08:24:33Z

Also please change the label for our navigator from 'Files' to 'Explorer'.

akosyakov · 2019-03-19T08:34:21Z

For https://marketplace.visualstudio.com/items?itemName=ms-vscode.references-view extension:

There is no icon, duplicate title.

Updated
I will take care about it.

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx

akosyakov · 2019-03-19T10:06:42Z

Menubar does not seem to aligned:

It also feels so small compare to side bars.

packages/core/src/browser/style/variables-dark.useable.css

vince-fugnitto · 2019-03-19T14:54:54Z

Menubar does not seem to aligned:

It also feels so small compare to side bars.

I was also wondering, do we want to have a black background over the active items, or simply have all icons dimmed except for the active one? This of course comes from VSCode.

akosyakov · 2019-03-19T15:12:18Z

I was also wondering, do we want to have a black background over the active items, or simply have all icons dimmed except for the active one? This of course comes from VSCode.

The active item is highlighted with blue line. The current item has black background right now, in addition to having 1 as opacity. I would be for aligning with VS Code and removing black background, only use opacity.

packages/plugin-ext/src/main/browser/view/view-registry.ts

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx

packages/core/src/browser/shell/tab-bar-toolbar.tsx

kittaakos · 2019-03-19T15:47:14Z

I got this in Gitpod:

kittaakos · 2019-03-19T15:48:33Z

If I move from the side to the bottom or main panel, I do not have the icons anymore, there should be a fallback:

kittaakos · 2019-03-19T15:49:26Z

~~The SVG icons and the fallback ones have different color:~~

Not a bug, I was blind and the opened tab has a different color.

akosyakov · 2019-03-19T15:49:57Z

In the light theme it is hard to tell which tab is current and title could be a bit more darker.

For comparison in VS Code:

kittaakos · 2019-03-19T15:51:01Z

The toolbar icons have black color on the dark theme. It is hardly noticable:

kittaakos · 2019-03-19T15:52:19Z

Other strange icons on the side bar:

jbicker · 2019-03-19T15:53:05Z

The SVG icons and the fallback ones have different color:

The currently opened panel has a highlighted tab. That is why both are different.

Every sidepanel has an header now where the title and a toolbar is shown (if tools are registered for that widget). As an example the control buttons of search in workspace extension are moved to the toolbar. Additionally the tabs of sidebars don't show labels anymore but icons. Fixes #3864 Signed-off-by: Jan Bicker <jan.bicker@typefox.io>

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>

akosyakov

@jbicker looks good now, please proceed with merging

benoitf · 2019-03-22T09:36:29Z

Hello, I've noticed this PR caused a regression on webview tabs
there is a white background color behind icon

while for other icons of tabs

there is an override with background: none

I've created #4664

benoitf · 2019-03-22T15:19:32Z

I commented on #4654 but it should be better to comment it there:

I think it's misleading people to have extension icon of Theia being the same icon as VS Code extension as you might expect that you're able to use VSCode extensions while it's bring by plug-ins.

So I would be more in favor of having plug-in icon being the same than vscode extension as you're managing the same packaging unit.

akosyakov · 2019-03-23T09:43:06Z

@benoitf i don't care about extension-manager, we can just erase for now references to it from everywhere (examples, docs, images). plugin ext can us VS Code extension icon regardless of it. Also in docs we should include plugin-ext-vscode instead (see https://stackoverflow.com/questions/55254187/cant-find-hosted-mode-in-theia) Let's create an issue for it?

jbicker requested review from akosyakov and svenefftinge March 18, 2019 15:13

jbicker force-pushed the GH-3864 branch from 463d6e9 to 42c9ea2 Compare March 18, 2019 21:06

akosyakov reviewed Mar 19, 2019

View reviewed changes

svenefftinge approved these changes Mar 19, 2019

View reviewed changes

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

packages/core/src/browser/shell/side-panel-toolbar.ts Outdated Show resolved Hide resolved

packages/core/src/browser/style/sidepanel.css Outdated Show resolved Hide resolved

akosyakov reviewed Mar 19, 2019

View reviewed changes

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx Outdated Show resolved Hide resolved

akosyakov mentioned this pull request Mar 19, 2019

plugin fixes for GH-3864 #4607

Merged

jbicker requested review from benoitf and evidolob as code owners March 19, 2019 13:46

akosyakov reviewed Mar 19, 2019

View reviewed changes

packages/core/src/browser/style/variables-dark.useable.css Outdated Show resolved Hide resolved

akosyakov reviewed Mar 19, 2019

View reviewed changes

packages/plugin-ext/src/main/browser/view/view-registry.ts Outdated Show resolved Hide resolved

kittaakos reviewed Mar 19, 2019

View reviewed changes

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx Outdated Show resolved Hide resolved

kittaakos reviewed Mar 19, 2019

View reviewed changes

packages/core/src/browser/shell/tab-bar-toolbar.tsx Outdated Show resolved Hide resolved

jbicker force-pushed the GH-3864 branch from ed49b41 to ffbf2e2 Compare March 19, 2019 15:45

jbicker force-pushed the GH-3864 branch 2 times, most recently from fac3f76 to 911e13e Compare March 19, 2019 16:57

akosyakov force-pushed the GH-3864 branch from 911e13e to bb8ed7d Compare March 20, 2019 07:31

akosyakov force-pushed the GH-3864 branch from bb8ed7d to 138a6d1 Compare March 20, 2019 08:07

jbicker and others added 3 commits March 20, 2019 09:32

[plugin] use the native toolbar for view container

1b18adf

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>

[plugin] render view container icon

91b8063

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>

akosyakov force-pushed the GH-3864 branch from 138a6d1 to 91b8063 Compare March 20, 2019 08:32

akosyakov approved these changes Mar 20, 2019

View reviewed changes

jbicker merged commit 6d5c14a into master Mar 20, 2019

svenefftinge deleted the GH-3864 branch March 20, 2019 13:22

benoitf mentioned this pull request Mar 22, 2019

https://github.com/theia-ide/theia/pull/4600 has broken icon of webview #4664

Closed

sunix mentioned this pull request Mar 22, 2019

Regression: containers view is not available anymore eclipse-che/che-theia#127

Closed

benoitf mentioned this pull request Mar 22, 2019

Update readme screenshot #4654

Merged

benoitf mentioned this pull request May 15, 2019

[plugin] [webview] Add min-height for webview icon as for other icons of tabs #5154

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600

Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600

jbicker commented Mar 18, 2019 •

edited by akosyakov

Loading

akosyakov commented Mar 19, 2019 •

edited

Loading

akosyakov Mar 19, 2019 •

edited

Loading

svenefftinge left a comment

svenefftinge commented Mar 19, 2019

akosyakov commented Mar 19, 2019 •

edited

Loading

akosyakov commented Mar 19, 2019

vince-fugnitto commented Mar 19, 2019 •

edited

Loading

akosyakov commented Mar 19, 2019

kittaakos commented Mar 19, 2019

kittaakos commented Mar 19, 2019

kittaakos commented Mar 19, 2019 •

edited

Loading

akosyakov commented Mar 19, 2019

kittaakos commented Mar 19, 2019

kittaakos commented Mar 19, 2019

jbicker commented Mar 19, 2019

akosyakov left a comment

benoitf commented Mar 22, 2019 •

edited

Loading

benoitf commented Mar 22, 2019

akosyakov commented Mar 23, 2019 •

edited

Loading

Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600

Implemented Toolbar support for sidepanels and changed sidepanel tabs. #4600

Conversation

jbicker commented Mar 18, 2019 • edited by akosyakov Loading

akosyakov commented Mar 19, 2019 • edited Loading

akosyakov Mar 19, 2019 • edited Loading

Choose a reason for hiding this comment

svenefftinge left a comment

Choose a reason for hiding this comment

svenefftinge commented Mar 19, 2019

akosyakov commented Mar 19, 2019 • edited Loading

akosyakov commented Mar 19, 2019

vince-fugnitto commented Mar 19, 2019 • edited Loading

akosyakov commented Mar 19, 2019

kittaakos commented Mar 19, 2019

kittaakos commented Mar 19, 2019

kittaakos commented Mar 19, 2019 • edited Loading

akosyakov commented Mar 19, 2019

kittaakos commented Mar 19, 2019

kittaakos commented Mar 19, 2019

jbicker commented Mar 19, 2019

akosyakov left a comment

Choose a reason for hiding this comment

benoitf commented Mar 22, 2019 • edited Loading

benoitf commented Mar 22, 2019

akosyakov commented Mar 23, 2019 • edited Loading

jbicker commented Mar 18, 2019 •

edited by akosyakov

Loading

akosyakov commented Mar 19, 2019 •

edited

Loading

akosyakov Mar 19, 2019 •

edited

Loading

akosyakov commented Mar 19, 2019 •

edited

Loading

vince-fugnitto commented Mar 19, 2019 •

edited

Loading

kittaakos commented Mar 19, 2019 •

edited

Loading

benoitf commented Mar 22, 2019 •

edited

Loading

akosyakov commented Mar 23, 2019 •

edited

Loading