Test: Grid Editor Layout

[bpasero]

Refs: #14909
Complexity: 5

• macOS @roblourens
• Linux @aeschli
• Windows @Tyriar

Builds (from 05-31):

• macOS: Download
• Linux: Download
• Windows: Download

The grid editor layout feature is a rewrite of the components that we used to have for showing editors in the editor area. As such, this test covers some basic scenarios of interacting with editors as well.

Errors
If you see the following:

Find the serialized state of the grid in the dev console and attach it to the error report:

You can rightclick the value and select "Store as global variable" to then JSON.stringify() it.

General

• you can open, use and close editors as you are used to, specifically
  • text files
  • binary files
  • diff editors
  • HTML previews (markdown, etc)
  • special editors (settings, keybindings)
• there are several ways how to split into any direction
  • from the editor context menu
  • by pressing Alt+key while clicking the "Open to Side" action in the editor toolbar
• the editor title updates properly and provides functional toolbar items depending on opened editors, specifically
  • with tabs enabled
  • with tabs disabled
• you can still jump between editors via
  • the active editor picker (Ctrl/Cmd+Tab)
  • the all editors picker (type edt in quick open)
• the status bar updates properly to editor changes and is functional for its editor related entries
• the grid looks good in different themes
  • verify the new colors editorGroup.emptyBackground and editorGroup.activeEmptyBackground

Stability

• the grid view is never in a corrupt state
  • you can always resize editors using sashes
  • the layout is flexible when you change the editor container size and adjusts
• the editor should never loose focus if it has focus
  • e.g. closing an editor in one group should move focus to the next editor
• the workbench layout adjusts for the number of editors opened, e.g.
  • a panel cannot be sized larger than the minimum height of all editors that are opened above
  • the sidebar cannot be sized larger than the minimum width of all editors that are opened to the side
  • this applies for the sidebar showing to the right or the panel showing to the side too

View State

• the view state of a non-grid-enabled build is restored to the new build (opened editors, up to three columns)
• the view state of the grid is stored and restored between reloads
• the view state within an editor group for a file editor is stored and restored between reloads and within the session

New Commands
There are new commands to take the grid nature into account. When previously we talked about left/right editor group, we now talk about groups above and below as well.

• play with the editor related commands to see if they make sense in the grid world (view editor in command palette)
• play with the editor group related commands too (editor group in command palette)

Empty Editor Groups
To make testing easier, consider to change workbench.editor.closeEmptyGroups: false. Empty editor groups are showing up when the last editor of a group has closed.
Verify:

• empty groups can receive focus and serve as target for new editors to open when they are active
• the context menu of the empty group is functional
• you can close empty groups (Ctrl/Cmd+W, or via the X button) and the next editor group (in MRU order) receives focus
• you can DND editors into empty groups

Settings
There are two new grid related settings introduced that need verification:

• workbench.editor.openSideBySideDirection: controls if invoking any of the "Open to Side" actions should cause a vertical or horizontal split
• workbench.editor.closeEmptyGroups: controls if closing the last editor of an editor group should close that editor group or keep it empty

Drag and Drop

• both editors or editor groups can be dragged around:
  • when tabs are enabled, dragging a group is possible by starting to drag from the right hand side of the tabs
  • when tabs are disabled, you always drag the entire editor group around by dragging the editor title
• a drag operation can be turned into a copy operation by pressing the Alt-key while dragging
• there are 5 possible drop locations per group:
  • to start a new grid, in the top/bottom/left/right corners
  • to move/copy into a grid in the center of the editor area
• verify this works as advertised for
  • editors/groups within the editor area
  • editors from the explorer
  • editors from outside VS Code (e.g. desktop)
  • across multiple windows of VS Code

Editor Layouts

• a new entry View > Editor Layout allows to switch editor layouts quickly
• verify this works as advertised
• verify you can assign a keybinding to the new layoutEditorGroups command with arguments and it works, e.g.:

{
	"key": "Cmd+0",
	"command": "layoutEditorGroups",
	"args": {
                 "orientation": 1,
		"groups": [{ "size": 0.2 }, { "size": 0.6 }, { "size": 0.2, "groups": [{}, {}] }]
	}
}