Add toggle support to ActionBar and IQuickInputButton for toggle/button rendering #283724

Copilot · 2025-12-16T00:49:01Z

Adds createToggleActionViewItemProvider() to enable ActionBar to render toggles for actions with a checked property and buttons for regular actions, eliminating the need for custom provider boilerplate. Applied to all quick input ActionBars and added toggle property to IQuickInputButton for seamless integration.

Changes

New API: createToggleActionViewItemProvider(toggleStyles?: IToggleStyles) returns an IActionViewItemProvider that:
- Renders ToggleActionViewItem when action.checked !== undefined
- Falls back to default button rendering otherwise
- Accepts optional toggle styles for theming
IQuickInputButton Enhancement: Added toggle?: { checked: boolean } property to IQuickInputButton interface following the quickInputButtonLocation API proposal pattern
- When present, indicates the button should be rendered as a toggle
- Documented for use with QuickInputButtonLocation.Input location
quickInputButtonToAction Update: Modified to detect button.toggle property and set action.checked accordingly
- Enables automatic toggle rendering for quick input buttons with toggle property
Tests: Added comprehensive test suite in actionbar.test.ts covering:
- Toggle rendering for actions with checked state
- Button rendering for actions without checked state
- Mixed actions (toggles and buttons together)
- Toggle state synchronization
- Quick input button with toggle property integration
Quick Input Integration: Applied the provider to all quick input ActionBars:
- quickInputController.ts: leftActionBar, rightActionBar, and inlineActionBar
- quickInputList.ts: list entry ActionBar

Usage

Basic ActionBar Usage

import { createToggleActionViewItemProvider, unthemedToggleStyles } from 'vs/base/browser/ui/toggle/toggle';

const actionBar = new ActionBar(container, {
    actionViewItemProvider: createToggleActionViewItemProvider(unthemedToggleStyles)
});

// Actions with checked property render as toggles
const toggleAction = new Action('wordwrap', 'Word Wrap');
toggleAction.checked = true;

// Actions without checked property render as buttons
const saveAction = new Action('save', 'Save');

actionBar.push([toggleAction, saveAction]);

Quick Input Button Usage

// Quick input buttons with toggle property automatically render as toggles
const toggleButton: IQuickInputButton = {
    iconClass: 'my-icon',
    tooltip: 'Toggle Feature',
    toggle: { checked: true }
};

// When converted to action via quickInputButtonToAction, it will have checked property set
// and render as a toggle in ActionBars with createToggleActionViewItemProvider

Original prompt

Start implementation

[Chronological Review: The conversation began with the user requesting modifications to the ActionBar in the `toggle.ts` file to allow rendering of Toggles in addition to Buttons. The user expressed a preference for a new class to facilitate testing. Subsequent messages confirmed the user's agreement with the proposed approach and emphasized that the view item provider should still render buttons when not toggles. The user then requested a full plan for implementation.]

[Intent Mapping:

"I would like to give them an actionviewItemprovider that could render Toggles in addition to Buttons." - User's primary request for functionality.
"perhaps a new class for that" - Suggestion for implementation structure.
"that way it can be tested" - Emphasis on the need for testability.
"Remember that the view item provider should still render buttons like buttons when it's not a toggle" - Clarification on functionality requirements.
"Give me the full plan" - Request for a comprehensive implementation plan.]

[Technical Inventory:

File: /Users/tyleonha/Code/Microsoft/vscode/src/vs/base/browser/ui/toggle/toggle.ts
Concepts: ActionBar, ActionViewItemProvider, Toggles, Buttons, class structure for testability.]

[Code Archaeology:

The user is focused on modifying the toggle.ts file, specifically around the ActionBar and its rendering capabilities. No specific code changes have been documented yet, but the user is preparing to implement a new class.]

[Progress Assessment:

Completed: User has outlined the need for a new class and confirmed the requirement for rendering buttons and toggles.
Pending: Implementation of the new class and the action view item provider.]

[Context Validation: All critical information for continuation is captured, including the need for a new class, rendering requirements, and the user's request for a full plan.]

[Recent Commands Analysis:

Last Agent Commands: User requested a full plan for the implementation.
Tool Results Summary: No specific tool results were generated as the conversation focused on planning and requirements.
Pre-Summary State: The agent was actively discussing the implementation plan for the ActionBar modifications when the token budget was exceeded.
Operation Context: The commands were executed to clarify the user's goals and ensure a structured approach to the requested changes.]

1. Conversation Overview: - Primary Objectives: "I would like to give them an actionviewItemprovider that could render Toggles in addition to Buttons." The user aims to enhance the ActionBar functionality. - Session Context: The conversation flowed from initial requests for modifications to discussions about implementation structure and requirements for testability. - User Intent Evolution: The user started with a specific request and gradually clarified the requirements, emphasizing the need for a new class and the ability to render buttons alongside toggles.

Technical Foundation:

File: /Users/tyleonha/Code/Microsoft/vscode/src/vs/base/browser/ui/toggle/toggle.ts
Concepts: ActionBar, ActionViewItemProvider, Toggles, Buttons.

Codebase Status:

File Name: toggle.ts
Purpose: To manage toggle and button rendering within the ActionBar.
Current State: User is preparing to implement a new class for rendering.
Key Code Segments: No specific segments have been modified yet.
Dependencies: Relates to the ActionBar functionality and rendering logic.

Problem Resolution:

Issues Encountered: No specific technical problems have been documented yet.
Solutions Implemented: User has proposed a new class structure for testing.
Debugging Context: No ongoing troubleshooting efforts have been mentioned.
Lessons Learned: The importance of maintaining button rendering alongside toggle functionality.

Progress Tracking:

Completed Tasks: User has outlined the need for a new class and confirmed rendering requirements.
Partially Complete Work: Implementation of the new class and action view item provider is pending.
Validated Outcomes: No features have been confirmed working yet.

Active Work State:

Current Focus: User is focused on planning the implementation of the ActionBar modifications.
Recent Context: The user has been discussing the requirements for rendering buttons and toggles and requested a full plan.
Working Code: No specific code snippets have been modified or discussed recently.
Immediate Context: User is seeking a comprehensive implementation plan.

Recent Operations:

Last Agent Commands: User requested a full plan for the implementation.
Tool Results Summary: No specific results were generated as the conversation focused on planning.
Pre-Summary State: The agent was discussing the implementation plan when the token budget was exceeded.
Operation Context: The commands were executed to clarify the user's goals and ensure a structured approach to th...

Çrëætëð frøm V§ Çøðë.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

TylerLeonhardt · 2025-12-16T07:00:07Z

@copilot I was expecting you to actually use it in the quick pick action bars ...

Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

Copilot · 2025-12-16T07:14:26Z

@copilot I was expecting you to actually use it in the quick pick action bars ...

Applied the createToggleActionViewItemProvider to all quick input ActionBars in commit 84f3df4:

quickInputController.ts: leftActionBar, rightActionBar, and inlineActionBar
quickInputList.ts: list entry ActionBar

These ActionBars will now automatically render any actions with a checked property as toggles, providing forward compatibility for future toggle-enabled buttons.

TylerLeonhardt · 2025-12-16T17:34:33Z

@copilot now you need to add the toggle shape to IQuickInputButton follow what we did in the quickPickLocation api proposal

then you'll need to update the thing that turns buttons into actions

…oAction Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

Copilot · 2025-12-16T17:58:38Z

@copilot now you need to add the toggle shape to IQuickInputButton follow what we did in the quickPickLocation api proposal

then you'll need to update the thing that turns buttons into actions

Added toggle shape to IQuickInputButton and updated quickInputButtonToAction in commit de46c73:

IQuickInputButton interface: Added toggle?: { checked: boolean } property following the quickInputButtonLocation API proposal pattern
quickInputButtonToAction function: Now checks for button.toggle and sets action.checked when present
Test coverage: Added test to verify quick input buttons with toggle property create actions with checked state

Quick input buttons with a toggle property will now automatically render as toggles in ActionBars thanks to the createToggleActionViewItemProvider integration.

Initial plan

a6d380f

Copilot AI assigned Copilot and TylerLeonhardt Dec 16, 2025

Copilot started work on behalf of TylerLeonhardt December 16, 2025 00:49 View session

Add createToggleActionViewItemProvider function and comprehensive tests

7a7a711

Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add toggle rendering support to ActionBar in toggle.ts~~ Add createToggleActionViewItemProvider for ActionBar toggle/button rendering Dec 16, 2025

Copilot AI requested a review from TylerLeonhardt December 16, 2025 01:10

Copilot finished work on behalf of TylerLeonhardt December 16, 2025 01:10

Copilot started work on behalf of TylerLeonhardt December 16, 2025 07:00 View session

Apply createToggleActionViewItemProvider to quick input ActionBars

84f3df4

Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

Copilot finished work on behalf of TylerLeonhardt December 16, 2025 07:15

Copilot started work on behalf of TylerLeonhardt December 16, 2025 17:38 View session

Add toggle property to IQuickInputButton and update quickInputButtonT…

de46c73

…oAction Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

Copilot AI changed the title ~~Add createToggleActionViewItemProvider for ActionBar toggle/button rendering~~ Add toggle support to ActionBar and IQuickInputButton for toggle/button rendering Dec 16, 2025

Copilot finished work on behalf of TylerLeonhardt December 16, 2025 18:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add toggle support to ActionBar and IQuickInputButton for toggle/button rendering #283724

Add toggle support to ActionBar and IQuickInputButton for toggle/button rendering #283724

Uh oh!

Copilot AI commented Dec 16, 2025 •

edited

Loading

Uh oh!

TylerLeonhardt commented Dec 16, 2025

Uh oh!

Copilot AI commented Dec 16, 2025

Uh oh!

TylerLeonhardt commented Dec 16, 2025

Uh oh!

Copilot AI commented Dec 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add toggle support to ActionBar and IQuickInputButton for toggle/button rendering #283724

Are you sure you want to change the base?

Add toggle support to ActionBar and IQuickInputButton for toggle/button rendering #283724

Uh oh!

Conversation

Copilot AI commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Usage

Basic ActionBar Usage

Quick Input Button Usage

Uh oh!

TylerLeonhardt commented Dec 16, 2025

Uh oh!

Copilot AI commented Dec 16, 2025

Uh oh!

TylerLeonhardt commented Dec 16, 2025

Uh oh!

Copilot AI commented Dec 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 16, 2025 •

edited

Loading