Workbench UI Framework

Relevant source files

• src/vs/base/browser/ui/actionbar/actionbar.css
• src/vs/base/browser/ui/splitview/paneview.css
• src/vs/base/browser/ui/splitview/paneview.ts
• src/vs/platform/editor/common/editor.ts
• src/vs/platform/theme/common/colorRegistry.ts
• src/vs/workbench/browser/actions/layoutActions.ts
• src/vs/workbench/browser/actions/windowActions.ts
• src/vs/workbench/browser/actions/workspaceActions.ts
• src/vs/workbench/browser/actions/workspaceCommands.ts
• src/vs/workbench/browser/composite.ts
• src/vs/workbench/browser/contextkeys.ts
• src/vs/workbench/browser/layout.ts
• src/vs/workbench/browser/media/part.css
• src/vs/workbench/browser/panecomposite.ts
• src/vs/workbench/browser/part.ts
• src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
• src/vs/workbench/browser/parts/activitybar/media/activityaction.css
• src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css
• src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarActions.ts
• src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts
• src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css
• src/vs/workbench/browser/parts/compositeBar.ts
• src/vs/workbench/browser/parts/compositeBarActions.ts
• src/vs/workbench/browser/parts/compositePart.ts
• src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts
• src/vs/workbench/browser/parts/editor/editor.contribution.ts
• src/vs/workbench/browser/parts/editor/editor.ts
• src/vs/workbench/browser/parts/editor/editorActions.ts
• src/vs/workbench/browser/parts/editor/editorCommands.ts
• src/vs/workbench/browser/parts/editor/editorGroupView.ts
• src/vs/workbench/browser/parts/editor/editorPart.ts
• src/vs/workbench/browser/parts/editor/editorParts.ts
• src/vs/workbench/browser/parts/editor/media/modalEditorPart.css
• src/vs/workbench/browser/parts/editor/modalEditorPart.ts
• src/vs/workbench/browser/parts/media/paneCompositePart.css
• src/vs/workbench/browser/parts/paneCompositeBar.ts
• src/vs/workbench/browser/parts/paneCompositePart.ts
• src/vs/workbench/browser/parts/panel/media/panelpart.css
• src/vs/workbench/browser/parts/panel/panelActions.ts
• src/vs/workbench/browser/parts/panel/panelPart.ts
• src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css
• src/vs/workbench/browser/parts/sidebar/sidebarPart.ts
• src/vs/workbench/browser/parts/views/media/paneviewlet.css
• src/vs/workbench/browser/parts/views/viewMenuActions.ts
• src/vs/workbench/browser/parts/views/viewPane.ts
• src/vs/workbench/browser/parts/views/viewPaneContainer.ts
• src/vs/workbench/browser/workbench.contribution.ts
• src/vs/workbench/browser/workbench.ts
• src/vs/workbench/common/composite.ts
• src/vs/workbench/common/contextkeys.ts
• src/vs/workbench/common/editor.ts
• src/vs/workbench/common/editor/editorGroupModel.ts
• src/vs/workbench/common/panecomposite.ts
• src/vs/workbench/common/theme.ts
• src/vs/workbench/contrib/remote/browser/media/remoteViewlet.css
• src/vs/workbench/services/editor/browser/editorService.ts
• src/vs/workbench/services/editor/common/editorGroupFinder.ts
• src/vs/workbench/services/editor/common/editorGroupsService.ts
• src/vs/workbench/services/editor/common/editorService.ts
• src/vs/workbench/services/editor/test/browser/editorGroupsService.test.ts
• src/vs/workbench/services/editor/test/browser/editorService.test.ts
• src/vs/workbench/services/editor/test/browser/modalEditorGroup.test.ts
• src/vs/workbench/services/layout/browser/layoutService.ts
• src/vs/workbench/services/progress/browser/media/progressService.css
• src/vs/workbench/services/progress/browser/progressIndicator.ts
• src/vs/workbench/services/progress/test/browser/progressIndicator.test.ts
• src/vs/workbench/services/views/browser/viewDescriptorService.ts
• src/vs/workbench/services/views/browser/viewsService.ts
• src/vs/workbench/services/views/common/viewContainerModel.ts
• src/vs/workbench/services/views/common/viewsService.ts
• src/vs/workbench/services/views/test/browser/viewContainerModel.test.ts
• src/vs/workbench/services/views/test/browser/viewDescriptorService.test.ts
• src/vs/workbench/test/browser/parts/editor/editorGroupModel.test.ts
• src/vs/workbench/test/browser/viewlet.test.ts
• src/vs/workbench/test/browser/workbenchTestServices.ts

The Workbench UI Framework provides the structural foundation for the VS Code interface. It manages a parts-based layout system that organizes the editor area, sidebars, panels, and toolbars into a cohesive user experience. The framework is built on a service-oriented architecture, using dependency injection to coordinate complex interactions between the layout, editor management, and view contributions.

Layout and Parts System

The workbench is divided into several distinct Parts, each represented by a class extending Part src/vs/workbench/browser/part.ts29 The Layout class src/vs/workbench/browser/layout.ts143 orchestrates the visibility, sizing, and positioning of these parts using a grid-based system.

• Main Parts: Includes the TitleBarPart, EditorPart, SidebarPart, PanelPart, AuxiliaryBarPart, and StatusbarPart src/vs/workbench/services/layout/browser/layoutService.ts15
• Grid Management: Uses SerializableGrid src/vs/workbench/browser/layout.ts28 to maintain the proportional relationship between UI elements via a set of LayoutClasses such as SIDEBAR_HIDDEN, PANEL_HIDDEN, or STATUSBAR_HIDDEN src/vs/workbench/browser/layout.ts98-104
• Multi-Window Support: The IAuxiliaryWindowService src/vs/workbench/browser/layout.ts50 allows the workbench to span across multiple native windows, with certain parts like the Editor area being capable of existing in auxiliary windows via AuxiliaryEditorPart.

For details, see Layout and Parts System.

Sources: src/vs/workbench/browser/layout.ts143 src/vs/workbench/services/layout/browser/layoutService.ts15 src/vs/workbench/browser/part.ts29

Editor Groups and Editor Service

The Editor area is the central component of the workbench. It is managed by two primary services: IEditorService src/vs/workbench/services/editor/common/editorService.ts19 and IEditorGroupsService src/vs/workbench/services/editor/common/editorGroupsService.ts35

• Editor Groups: Editors are organized into groups (EditorGroupView), which can be split vertically or horizontally src/vs/workbench/browser/parts/editor/editorGroupView.ts65
• Editor Inputs: Every resource opened in the editor is represented by an EditorInput src/vs/workbench/common/editor/editorInput.ts28 such as TextResourceEditorInput or DiffEditorInput src/vs/workbench/browser/parts/editor/editor.contribution.ts20-22
• Models: The EditorGroupModel tracks the state of editors within a group, including the Most Recently Used (MRU) order, pinned state, and sticky editors src/vs/workbench/common/editor/editorGroupModel.ts7

For details, see Editor Groups and Editor Service.

Sources: src/vs/workbench/services/editor/browser/editorService.ts39 src/vs/workbench/browser/parts/editor/editorGroupView.ts65 src/vs/workbench/common/editor.ts13

Views, Panels, and Activity Bar

Views are specialized UI components (typically trees or lists) that reside within containers like the Sidebar or Panel.

• View Containers: Managed by IViewDescriptorService src/vs/workbench/common/views.ts61 which handles the registration and location of view containers.
• View Panes: Individual sections within a sidebar or panel are ViewPane instances src/vs/workbench/browser/parts/views/viewPane.ts59
• Activity Bar: The ActivitybarPart src/vs/workbench/browser/parts/activitybar/activitybarPart.ts43 provides navigation for switching between view containers. It supports a standard width (48px) and a compact mode (36px) src/vs/workbench/browser/parts/activitybar/activitybarPart.ts48-49

For details, see Views, Panels, and Activity Bar.

Sources: src/vs/workbench/common/views.ts61 src/vs/workbench/browser/parts/views/viewPane.ts59 src/vs/workbench/browser/parts/activitybar/activitybarPart.ts43

Workbench Service Layer

The following diagram illustrates how the core services interact to form the Workbench UI.

UI Service Interaction

Sources: src/vs/workbench/browser/layout.ts143 src/vs/workbench/services/editor/browser/editorService.ts39 src/vs/workbench/browser/parts/views/viewPaneContainer.ts37

Code Entity Mapping

This table bridges the conceptual UI parts to their primary implementation classes and associated services.

UI Concept	Code Entity (Class)	Primary Service
Main Layout	Layout src/vs/workbench/browser/layout.ts143	IWorkbenchLayoutService
Editor Area	EditorPart src/vs/workbench/browser/parts/editor/editorPart.ts89	IEditorGroupsService
Sidebar	SidebarPart src/vs/workbench/browser/parts/sidebar/sidebarPart.ts25	IPaneCompositePartService
Activity Bar	ActivitybarPart src/vs/workbench/browser/parts/activitybar/activitybarPart.ts43	IViewDescriptorService
Status Bar	StatusbarPart src/vs/workbench/browser/parts/statusbar/statusbarPart.ts64	IStatusbarService
Title Bar	BrowserTitlebarPart src/vs/workbench/browser/parts/titlebar/titlebarPart.ts91	ITitleService

Workbench Composition Diagram

Sources: src/vs/workbench/browser/parts/editor/editorGroupView.ts65 src/vs/workbench/browser/parts/views/viewPaneContainer.ts37 src/vs/workbench/common/editor.ts97

Child Pages

• Layout and Parts System — Details on the grid layout, part lifecycle, and multi-window orchestration via AuxiliaryWindowService.
• Editor Groups and Editor Service — Deep dive into editor management, EditorInput types, and EditorGroupModel.
• Views, Panels, and Activity Bar — Explanation of the view contribution system, ViewPaneContainer, and the composite bar.
• Theming, Icons, and Styling — How the workbench applies colors, ThemeIcon, and CSS variables.
• Settings, Keybindings, and Configuration — The infrastructure for user preferences, IConfigurationService, and command shortcuts.