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

[Copilot]

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:

1. "I would like to give them an actionviewItemprovider that could render Toggles in addition to Buttons." - User's primary request for functionality.
2. "perhaps a new class for that" - Suggestion for implementation structure.
3. "that way it can be tested" - Emphasis on the need for testability.
4. "Remember that the view item provider should still render buttons like buttons when it's not a toggle" - Clarification on functionality requirements.
5. "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.

2. Technical Foundation:

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

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

[TylerLeonhardt]

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

[Copilot]

@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]

@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

[Copilot]

@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:

1. IQuickInputButton interface: Added toggle?: { checked: boolean } property following the quickInputButtonLocation API proposal pattern
2. quickInputButtonToAction function: Now checks for button.toggle and sets action.checked when present
3. 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.