FG
🛠️ Developer ToolsMicrosoft

Alternative locations for the outline view

Freshabout 19 hours ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

The outline view lives inside the file explorer and while it can be re-arranges in there it cannot be dragged into its own view. Alternative locations could be: 1. a standalone viewlet, 2. inside another viewlets, 3. the bottom panel, or 4. as a re-arrangable view that can be docked anywhere in the UI (like most others have it).

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Implement Dockable Outline View in VSCode

Medium Risk

The current implementation of the outline view is constrained within the file explorer, limiting user flexibility in UI customization. This design choice restricts the outline view from being utilized as a standalone component or docked in various locations, which is a common feature in many modern IDEs.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Create a Standalone Outline Viewlet

    Develop a new viewlet for the outline that can be opened independently of the file explorer. This will involve creating a new view container in the VSCode extension API.

    typescript
    vscode.window.createTreeView('outlineView', { treeDataProvider: outlineProvider });
  2. 2

    Enable Drag-and-Drop Functionality

    Implement drag-and-drop support for the outline viewlet to allow users to rearrange items within the view. Utilize the TreeView API to handle drag events.

    typescript
    outlineProvider.onDidChangeTreeData(() => this._onDidChangeTreeData.fire());
  3. 3

    Add Docking Capability

    Modify the viewlet to support docking functionality, allowing users to place the outline view in various locations within the UI. This will require adjustments to the layout management system.

    typescript
    vscode.commands.registerCommand('outlineView.dock', () => { /* docking logic */ });
  4. 4

    Integrate with Existing Viewlets

    Allow the outline view to be embedded within other viewlets, enhancing its accessibility and usability. This will involve updating the viewlet registration process to include options for embedding.

    typescript
    vscode.window.registerWebviewViewProvider('outlineEmbedded', new OutlineEmbeddedProvider());

Validation

To confirm the fix worked, open the VSCode editor and check if the outline view can be opened as a standalone viewlet. Test the drag-and-drop functionality by rearranging items within the outline and verify if it can be docked in different locations in the UI.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

vscodeideeditorfeature-requestlayoutoutline