Component select mode#57
Merged
Merged
Conversation
Introduces a select mode feature with a new SelectModeInjector, enabling element selection, box model visualization, and computed style inspection in sandboxed components. Updates the webview and extension to support select mode toggling, message passing, and opening source files with selection highlighting in the editor.
Introduces ComputedStyleValues to capture actual pixel values from the browser after CSS calculations (e.g., clamp, calc, rem). Updates the style inspector panel to prioritize these resolved values for display, and extends the orchestrator to fetch and include them in ElementStyleInfo. This improves accuracy and fidelity in the Design tab by showing the true rendered values.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces two major enhancements: (1) support for "select mode" in the Roopik canvas and sandbox components, and (2) the ability to fetch and display actual browser-computed CSS values for inspected elements. These changes enhance both the developer experience and the accuracy of the design tools by allowing users to select elements for editing or inspection and to see their resolved CSS properties.
Select Mode Improvements:
Added support for "select mode" across the canvas and sandbox components, including new
isSelectModeprops, message handling for selection events, and communication of select mode state to sandboxes. This enables users to select elements in the UI, open source files at precise locations, and toggle selection state from the UI or keyboard. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]Added a new
SelectModeInjectorto the injector pipeline, ensuring select mode functionality is available in the browser sandbox environment. [1] [2] [3]Enhanced the file opening logic in the canvas panel to support both cursor positioning and selection highlighting, allowing precise navigation and selection in the source code editor. [1] [2] [3] [4]
Computed CSS Styles Support:
Introduced the
ComputedStyleValuesinterface and added acomputedStylesproperty toElementStyleInfo, enabling storage of fully resolved CSS values (e.g., pixel values, computed colors, etc.) fetched from the browser. [1] [2]Implemented logic in
StyleSourceOrchestratorto fetch computed CSS values from the browser via CDP and include them in the style inspection results, providing more accurate and user-friendly style information in the design tab. [1] [2] [3] [4]