Improved Script Inspector Attribute Parsing UX #1361
Merged
Conversation
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
…w error container for invalid script attributes in the inspector, enhanced error logging in the script parsing process, and updated the code editor integration to handle metadata. (#1361)
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the user experience when parsing invalid script attributes by providing detailed error feedback and navigation capabilities. Instead of showing simple error messages, the system now displays specific attribute errors with tooltips explaining the issues and allows users to click on errors to open the code editor with highlighted error markers.
- Improved error serialization to include precise line/column information and error details
- Enhanced UI to display individual attribute errors with tooltips and click-to-navigate functionality
- Added Monaco editor integration to highlight error markers at specific locations
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/workers/esm-script.worker.ts | Added error serialization function and improved error data structure |
| src/editor/toolbar/toolbar-code-editor.ts | Extended code editor picker to accept metadata for error markers |
| src/editor/inspector/assets/script.ts | Enhanced script inspector UI to display detailed attribute errors with tooltips |
| src/editor/assets/handle-script-parse.ts | Improved error logging to handle both error objects and strings |
| src/code-editor/monaco/integration.ts | Added Monaco editor marker support for highlighting errors |
| sass/editor/_editor-asset-script-inspector.scss | Added CSS styling for the new error display components |
…tegorize errors in the ESM script worker.
… and default name fallback for SerializableParsingError.
* Introduced new color variables for status indicators and updated styles for error and warning messages in the script asset inspector. * Refactored the script attribute display logic to handle inline error and warning messages more effectively, allowing for better user interaction with clickable error links. * Updated tooltip functionality to provide detailed information about script attributes, including warnings and errors, enhancing the overall user experience in the editor. * Improved error logging in the console for better debugging and user guidance.
…anvas/editor into feat-enhanced-script-parse
Contributor
Author
|
Updated layout
|
… and package-lock.json
…anvas/editor into feat-enhanced-script-parse
marklundin
changed the title
kpal81xd
requested changes
Aug 11, 2025
Contributor
kpal81xd
left a comment
kpal81xd
left a comment
There was a problem hiding this comment.
Left a few comments but looks good
…pector - Renamed parameter in _displayScriptAttributes method for clarity. - Removed unused variable assignment and debug logging for cleaner code. - Updated link method to directly pass script data to _displayScriptAttributes.
…ation - Added postMessage call in CodeEditor to signal 'start' event. - Introduced message event listener in toolbar-code-editor to trigger asset selection when 'start' message is received.
- Updated postMessage to use the opener's origin for security. - Refactored message event listener in toolbar-code-editor to remove itself after handling the 'start' message.
- Enhanced the display of script errors with clickable labels for better user interaction. - Updated SCSS styles for error labels to ensure consistent hover effects. - Removed redundant code and improved clarity in error message handling.
kpal81xd
approved these changes
Aug 12, 2025
Merged
marklundin
added a commit
that referenced
this pull request
Aug 13, 2025
* Improved Script Inspector Attribute Parsing UX (#1361) * Implement script asset error handling and UI improvements. Added a new error container for invalid script attributes in the inspector, enhanced error logging in the script parsing process, and updated the code editor integration to handle metadata. (#1361) * updated types * Enhance SerializableParsingError type by adding 'type' property to categorize errors in the ESM script worker. * Update error handling in ESM script worker to include 'type' property and default name fallback for SerializableParsingError. * updates * reverting the integration model markers * reverting model marker data in editor * Enhance script asset inspector with improved error handling and styling * Introduced new color variables for status indicators and updated styles for error and warning messages in the script asset inspector. * Refactored the script attribute display logic to handle inline error and warning messages more effectively, allowing for better user interaction with clickable error links. * Updated tooltip functionality to provide detailed information about script attributes, including warnings and errors, enhancing the overall user experience in the editor. * Improved error logging in the console for better debugging and user guidance. * Add icons for warning and error indicators in script asset inspector * linting * remove console open * linting * Update @playcanvas/attribute-parser to version 1.10.1 in package.json and package-lock.json * refactor: streamline script attribute display logic in ScriptAssetInspector - Renamed parameter in _displayScriptAttributes method for clarity. - Removed unused variable assignment and debug logging for cleaner code. - Updated link method to directly pass script data to _displayScriptAttributes. * remove redundant error messages. These are now in editor console * feat: implement message-based communication for code editor initialization - Added postMessage call in CodeEditor to signal 'start' event. - Introduced message event listener in toolbar-code-editor to trigger asset selection when 'start' message is received. * fix: enhance message handling for code editor initialization - Updated postMessage to use the opener's origin for security. - Refactored message event listener in toolbar-code-editor to remove itself after handling the 'start' message. * fix: remove redundant status error call in console event handler * refactor: improve error handling and styling in ScriptAssetInspector - Enhanced the display of script errors with clickable labels for better user interaction. - Updated SCSS styles for error labels to ensure consistent hover effects. - Removed redundant code and improved clarity in error message handling. * reverting the asset inspector changes. Separate PR * Improved Code Editor Attribute Quick Fix (#1375) * Refactor JSDoc handling in attribute autofill logic * Introduced JSDocUtils class for managing JSDoc operations, including analysis, creation, and cleaning of JSDoc blocks. * Enhanced modifyJSDocAttribute function to handle adding and removing JSDoc attributes more effectively. * Updated code lens provider to support new JSDoc actions for attributes, including adding slider functionality. * Improved error handling in the ESM script worker by clarifying error property names in documentation. * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: Copilot <[email protected]> * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: Copilot <[email protected]> * Fix model markers issues * Fix regex in JSDocUtils.cleanSingleLineJSDoc to correctly handle attribute tags without redundant replacements. * Remove commented-out code in attribute autofill commands for cleaner implementation. * Clean up comments in attribute autofill logic for improved readability. * Refactor comments in attribute autofill to enhance clarity and remove unnecessary lines. * Enhance attribute autofill logic by caching last-known lenses to prevent flicker during analysis. Introduce a no-op command for inactive lenses and update the handling of active/inactive lenses based on model attributes. * Refactor attribute autofill implementation to use TypeScript types for improved type safety and clarity. Update function signatures and interfaces, and streamline the handling of JSDoc attributes. * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: KPal <[email protected]> * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: KPal <[email protected]> * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: KPal <[email protected]> * Refactor JSDoc utility methods in attribute-autofill.ts to use TypeScript types for parameters and return values. Simplify JSDoc analysis logic and update related function calls to improve clarity and maintainability. * Refactor JSDoc utility methods in attribute-autofill.ts to explicitly define return types for improved type safety and clarity. * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: KPal <[email protected]> * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: KPal <[email protected]> * Update src/code-editor/monaco/intellisense/attribute-autofill.ts Co-authored-by: KPal <[email protected]> --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: KPal <[email protected]> * Improved Component Inspector Attribute Parsing UX (#1385) * Enhance tooltips and attribute warnings in inspector * Added optional warnings section to tooltips for better user feedback. * Implemented warning styling for attributes in the inspector to highlight potential issues. * Update src/editor/inspector/components/script.ts Co-authored-by: Copilot <[email protected]> * fix: update postMessage to use window.opener.origin * refactor: enhance validation error handling in Script Inspector - Introduced a new error container for displaying validation issues related to script attributes. - Improved the logic for clearing and rendering validation issues, ensuring a more user-friendly experience. - Updated the ESM script worker to filter out invalid attributes more effectively. - Enhanced error logging in the console for better debugging and user guidance. * style: update warning styling in Script Asset Inspector - Refactored the warning label styles to enhance visibility. - Introduced a new color for the .pcui-label class to align with the warning status. - Removed unused icon styling for a cleaner codebase. * refactor: clean up type assertions and improve code readability - Removed unnecessary type assertions in attribute autofill and script inspector components for better type safety. - Simplified condition checks for warnings in tooltips to leverage optional chaining. - Enhanced clarity by directly accessing properties without casting to 'any'. * refactor: streamline tooltip handling in AttributesInspector - Removed the warnings section from the tooltipRefItem function and integrated it directly into the AttributesInspector. - Enhanced tooltip item creation to conditionally append warnings if provided, improving code organization and readability. * refactor: update type definitions and improve error handling - Changed the interface 'Fix' to a type definition for better clarity in attribute autofill. - Simplified the handling of potential undefined values in the ScriptInspector by using optional chaining and nullish coalescing. - Enhanced the SerializableParsingError type to include a 'code' property and refined the structure for improved error handling in the ESM script worker. --------- Co-authored-by: Copilot <[email protected]> * linting fixes * linting --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: KPal <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 PR improves the UX when parsing invalid attributes.
script-parse.mp4
Any failed attributes are listed along with the reason (via tooltip). Clicking on failed attributes opens the relevant script in the code editor, selects the correct line/column and sets error markers highlighting the reason for failure.
Attributes with malformed metadata like
@rangeor@precisionwill show a warning, but the metadata will be ignored