Osvaldo Ortega
b48d6739c4
* feat: replace host picker context menu with mobile-native bottom sheet on phone layout Agent-Logs-Url: https://github.com/microsoft/vscode/sessions/c0ced124-328e-43c3-a95c-34c56f55a84d Co-authored-by: osortega <48293249+osortega@users.noreply.github.com> * fix: guard bottom sheet dismiss against double-invocation and stop event propagation from sheet Agent-Logs-Url: https://github.com/microsoft/vscode/sessions/c0ced124-328e-43c3-a95c-34c56f55a84d Co-authored-by: osortega <48293249+osortega@users.noreply.github.com> * refactor: extract mobile host picker into MobileHostFilterActionViewItem Move the bottom sheet UI from an inline phone-layout branch in the desktop HostFilterActionViewItem into a proper mobile subclass in browser/parts/mobile/, following the established mobile architecture: - Create MobileHostFilterActionViewItem extending the desktop class, overriding _showMenu() to show a bottom sheet instead of a context menu - Remove IsPhoneLayoutContext branching from the desktop component - Move bottom sheet CSS from hostFilter.css to mobileChatShell.css - Update hostFilter.contribution.ts to instantiate the mobile variant for the MobileTitleBarCenter menu registration - Add Mobile Component Architecture rules to sessions.instructions.md Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: replace bottom sheet with dropdown anchored below trigger The bottom sheet slid up from the bottom of the screen, far from the picker trigger at the top, and had a transparent background. Replace with a dropdown panel that: - Anchors directly below the trigger element - Has a solid background with border and shadow - Animates in/out with a subtle fade + slide from above - Uses 44px min-height items for touch targets - Transparent backdrop for dismiss-on-tap without visual overlay Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: improve mobile host picker dropdown design - Use agentsChatInput background color to match the chat input - Add font-weight: normal to prevent bold text in items - Add Gesture.addTarget + TouchEventType.Tap on each item button so taps register on iOS/touch devices (CLICK alone is unreliable) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * refactor: move host picker dropdown CSS to own component file - Create media/hostPickerDropdown.css in mobile parts folder - Move all host picker styles from mobileChatShell.css to dedicated component file - Add CSS import in mobileHostFilterActionViewItem.ts - Document CSS organization pattern in sessions.instructions.md This follows the same pattern as regular VS Code parts where each component owns its CSS in a media/ subfolder. Keeps mobileChatShell.css focused on shell-level phone layout styles only. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: use defined CSS theme variables for host picker dropdown Replace undefined fallback variables with proper agentsChatInput theme tokens: - background: var(--vscode-agentsChatInput-background) - foreground: var(--vscode-agentsChatInput-foreground) - border: var(--vscode-agentsChatInput-border) These variables are registered in src/vs/sessions/common/theme.ts and properly available in all themes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: use globally available CSS theme variables for host picker Replace agentsChatInput variables (only available in .agent-sessions-workbench scope) with globally available input and foreground variables since the backdrop is rendered directly on body, outside the workbench scope. - background: var(--vscode-input-background) - foreground: var(--vscode-foreground) - border: var(--vscode-input-border) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: use inline styles from theme service for host picker CSS variables aren't available in the body scope where the dropdown is rendered. Instead, fetch theme colors via IThemeService and apply them as inline styles: - Get theme colors at dropdown creation time - Set backgroundColor, borderColor, foregroundColor via style attribute - Apply hoverBackgroundColor and linkColor via event listeners - Remove all CSS variable references This ensures colors work in vscode.dev and all environments where CSS variables may not be injected. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: remove unused focusBorderColor variable The focus border styling is handled by the CSS :focus-visible rule, so the TypeScript variable is not needed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: render dropdown inside workbench container for CSS variables The dropdown was appended to document.body, which is outside the .monaco-workbench element where --vscode-* CSS custom properties are defined. This caused all theme variables to be undefined. Fix: query for the .monaco-workbench container and append the backdrop there instead. This restores CSS variable inheritance and moves all color declarations back to the CSS file where they belong. Also reverts the IThemeService inline-styles approach — colors are now purely in hostPickerDropdown.css using standard CSS variables. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: center host picker dropdown and remove status text 1. Center the dropdown horizontally on screen using left: 50% + translateX(-50%) instead of anchoring to the trigger's left edge. 2. Remove the 'connecting…' / 'disconnected' status text from dropdown items — the titlebar connection icon already conveys this info, and the status text was causing the dropdown to extend beyond screen. 3. Clean up unused AgentHostFilterConnectionStatus import and status CSS. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: include translateX(-50%) in dropdown animation keyframes The entrance/exit animations were overriding the centering transform during playback, causing the dropdown to appear right-aligned then jump to center when the animation ended. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: remove stray closing brace in mobileChatShell.css Leftover from extracting host picker CSS into its own file. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: address PR review comments 1. Fix dismiss race condition: guard the timeout callback so it only clears the dropdown if it still owns the current store, and register the timeout for disposal when the dropdown is reopened early. 2. Use correct ARIA pattern: switch from listbox/option to menu/menuitemradio which better matches the single-select interaction pattern. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Visual Studio Code - Open Source ("Code - OSS")
The Repository
This repository ("Code - OSS") is where we (Microsoft) develop the Visual Studio Code product together with the community. Not only do we work on code and issues here, we also publish our roadmap, monthly iteration plans, and our endgame plans. This source code is available to everyone under the standard MIT license.
Visual Studio Code
Visual Studio Code is a distribution of the Code - OSS repository with Microsoft-specific customizations released under a traditional Microsoft product license.
Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. It provides comprehensive code editing, navigation, and understanding support along with lightweight debugging, a rich extensibility model, and lightweight integration with existing tools.
Visual Studio Code is updated monthly with new features and bug fixes. You can download it for Windows, macOS, and Linux on Visual Studio Code's website. To get the latest releases every day, install the Insiders build.
Contributing
There are many ways in which you can participate in this project, for example:
- Submit bugs and feature requests, and help us verify as they are checked in
- Review source code changes
- Review the documentation and make pull requests for anything from typos to additional and new content
If you are interested in fixing issues and contributing directly to the code base, please see the document How to Contribute, which covers the following:
- How to build and run from source
- The development workflow, including debugging and running tests
- Coding guidelines
- Submitting pull requests
- Finding an issue to work on
- Contributing to translations
Feedback
- Ask a question on Stack Overflow
- Request a new feature
- Upvote popular feature requests
- File an issue
- Connect with the extension author community on GitHub Discussions or Slack
- Follow @code and let us know what you think!
See our wiki for a description of each of these channels and information on some other available community-driven channels.
Related Projects
Many of the core components and extensions to VS Code live in their own repositories on GitHub. For example, the node debug adapter and the mono debug adapter repositories are separate from each other. For a complete list, please visit the Related Projects page on our wiki.
Bundled Extensions
VS Code includes a set of built-in extensions located in the extensions folder, including grammars and snippets for many languages. Extensions that provide rich language support (inline suggestions, Go to Definition) for a language have the suffix language-features. For example, the json extension provides coloring for JSON and the json-language-features extension provides rich language support for JSON.
Development Container
This repository includes a Visual Studio Code Dev Containers / GitHub Codespaces development container.
-
For Dev Containers, use the Dev Containers: Clone Repository in Container Volume... command which creates a Docker volume for better disk I/O on macOS and Windows.
- If you already have VS Code and Docker installed, you can also click here to get started. This will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
-
For Codespaces, install the GitHub Codespaces extension in VS Code, and use the Codespaces: Create New Codespace command.
Docker / the Codespace should have at least 4 Cores and 6 GB of RAM (8 GB recommended) to run a full build. See the development container README for more information.
Code of Conduct
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
License
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the MIT license.