Editor actions are hard to discover when tabs are enabled

[bpasero]

Due to limited space in a tab, we put the editor actions into the context menu. This makes them much harder to use and explore compared to having them visible with icons in the title header when tabs are disabled.

[bpasero]

Since this is a somewhat adoption blocker for people in the team to use tabs, we should look into this.

[bpasero]

We also have an issue that the path on a tab is only accessible from the native hover (which sometimes appears late). So I wonder if maybe we could combine both issues into one and show the path of the file along with the editor actions somewhere when you hover over the tab. Or, if we decide to introduce an editor toolbar, maybe it could be in there?

I think for this issue we should just sit together and brainstorm UX ideas.

[MovGP0]

when the filename is very long, a tab takes lots of width. the name should be shortened with an hellipsis character.

Instead of 'thisisaverylongfilename.txt' it might only show 'thisisav…e.txt'.

[bgashler1]

UX Meeting Summary:
We will put local commands back where they used to be before we introduced tabs. But we don’t want to mix group-level and editor-level commands in the same area. Thus a few things need to change. See #9159 for more info...

[bpasero]

I pushed a first cut of this work, feedback welcome. Nothing changed for when tabs are disabled but showing it here for the sake of completeness:

Tabs Disabled (same UI as before)
Editor actions show up in the right corner with an additional X button to close the editor:

For the diff editor:

If the group is inactive we only show the X button to close the editor:

You can right click in the title to trigger a context menu with additional commands:

Tabs Enabled
Editor actions show up in the right corner:

For the diff editor:

The overflow icon moved into the "..." and so there are always two entries in the "..." to show all opened editors and close all:

For the diff editor (which is the only one to add additional secondary actions currently):

If the editor group is inactive we show "..." with the 2 actions:

You can right click on a tab to trigger a context menu with additional commands:

There are things about this solution that are questionable:

• the fact that the overflow icon is gone and moved into the "..." where it is harder to find (this can be solved by having an additional overflow indication in the tabs container itself, e.g. where the scrollbar is)
• the fact that for an inactive group I only show "..." as the action violates our action contract where we say that "..." can only be there if there are other primary actions (we could just not show any "..." for inactive groups however people might want a quick way to "Close All" even for inactive groups).

[jrieken]

Just to add more complexity there are now also menu contributions. Specifically editor/title which targets -depending on the group property- either in the action bar or the overflow menu - see markdown or Bookmarks extensions.

[skolmer]

Is this the reason why the current version of vscode is not showing command icons defined like:

      {
        "command": "i18nTag.validateTranslation",
        "category": "i18nTag",
        "title": "Validate translation file",
        "icon": {
          "light": "./media/validate_icon.svg",
          "dark": "./media/validate_icon_inverted.svg"
        }
      }

or do I have to add the media files somehow to the release output of my extension?

[bgashler1]

Just talked over standup with the PMs. We can go ahead and test this with insiders over the next 3 weeks and monitor feedback from insiders. If there are any big gotchas, we can revert before the July release.

When you're back we can further iterate.

[bpasero]

@bgashler1 sounds good. I would not go as far as to revert this change entirely, imho the only questionable thing is the overflow action. Let me push a boolean flag to bring it back and instruct you guys here how to enable that in case needed!

[jrieken]

@skolmer I depends where you let the command show. Currently, only editor/title with group=navigation shows icons. Context menus don't show icons

[skolmer]

@jrieken thank you! I think that's it. I used a custom group and not group=navigation

[bpasero]

I added a flag to https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/browser/parts/editor/titleControl.ts#L56

@isidorn is fit enough for July to tweak this experience as needed 👍

[Tyriar]

Verified via #9701