- Refactor `showWebGLError` to use `document.createElement` instead of `innerHTML`
- Replace inline `onclick` handler with `addEventListener` for CSP compliance
- Add unit test to verify XSS prevention and button functionality
- Add role="button", tabindex="0", and aria-expanded to section headers
- Implement keyboard navigation (Enter/Space) for expanding/collapsing sections
- Generate unique IDs for aria-controls to link headers and content bodies
- Ensure proper accessibility attributes for sidebar inspector panel
This change improves keyboard navigation and screen reader support for the
sidebar settings and inspector panels.
- Moves invariant calculations (DPR, scaling, pivot points) out of the widget loop in `renderHtmlOverlays`.
- Reduces redundant property accesses and arithmetic operations per frame.
- Improves performance for workflows with many visible nodes.
- Added '*' hotkey to focus the currently inspected node
- Added 'ArrowLeft' and 'ArrowRight' hotkeys to navigate nodes by execution order
- Updated README.md and CHANGELOG.md with the new hotkeys and navigation features
- Added full keyboard support (Arrows, Enter, Esc) for all dropdown types
- Implemented global '*' hotkey to center canvas on currently inspected node
- Improved event handling to reliably intercept keys before ComfyUI canvas
- Fixed memory leaks in dropdown event listeners
- Allow precise value input by removing automatic step rounding in sync manager
- Standardize stepper button increment to 1 for finer control
- Ensure dropdowns close when clicking the canvas
Ensures `htmlOverlayContainer` is cleared when exiting `renderHtmlOverlays` early (e.g. no nodes or zero scale), preventing stale content from persisting.
- Replaced `innerHTML` with `textContent` for dynamic titles in `SidebarSettings.ts` to prevent potential XSS.
- Maintained `innerHTML` usage only for trusted static SVG icons.
- Added defense-in-depth against future changes that might introduce user-controlled titles.
Refactors `renderHtmlOverlays` to eliminate layout thrashing by separating DOM read operations (getBoundingClientRect, getComputedStyle) from DOM write operations.
- Creates a `RenderTask` interface to store read data.
- Implements a Read Phase to collect measurements and cull nodes.
- Implements a Write Phase to batch DOM updates using a DocumentFragment.
- Preserves video tracking logic to ensure animation loop continuity.
- Reduces browser reflows from O(n) to O(1) per frame.
- Replaced native select elements with a viewport-aware 'CustomDropdown' for better reliability and positioning.
- Added 'High Contrast Text' mode for improved legibility in inputs and values.
- Implemented parameter value deduplication in 'NodeDataExtractor' to reduce panel clutter.
- Expanded Google Font selection with 10+ new styles.
- Switched UI dimensions to relative units (em) for consistent scaling.
- Fixed layout 'bouncing' in sticky mode by removing hover transforms.
- Added a copy-to-clipboard button for 'Category' and 'Path' node details in the Inspector panel.
- Enhanced dropdown interaction stability by using 'mousedown' capture phase and broad event propagation prevention in 'InlineControlFactory'.
- Updated 'build' script to ensure CSS files are correctly synchronized from 'css/' to 'web/'.
- Standardized copy icon and styling, including a subtle checkmark feedback on success.
- Fixed an issue where the Inspector panel would 'bounce' due to hover transforms while in sticky mode.
- Improved dropdown closure logic to handle clicks both outside and within the panel content area.
- Optimized 'persist-active' mode to use viewport-based height limits and proper flex scrolling.
- Enhanced event propagation handling in 'InlineControlFactory' for better dropdown stability.
- Standardized panel font sizes and updated inline dropdowns to match the green theme.
- Added theme-specific CSS overrides for Light and GitHub themes in widget editors.
- Simplified copy-to-clipboard UI feedback.
- Changed accent color to #a0d468 for select inputs.
- Updated background colors, borders, and box-shadows to align with the green-themed info panel.
- Refined the custom dropdown arrow color to match the new accent.
- Standardized font-family and spacing for a more consistent look.
- Added 'InlineControlFactory' to create inline toggle switches and combo boxes for supported widget types, replacing the click-to-edit modal for these types.
- Added 'DragValueController' to enable adjusting numeric values by dragging on the value display.
- Updated 'UIManager' to integrate these new controls, manage their lifecycle, and properly clean them up.
- Enhanced 'WidgetEditorFactory' to handle Enter key for confirming edits.
- Removed the copy button from string values to reduce clutter.
- Updated 'index.ts' to export the new components.
- Removed 'popout' scaling and transform animations from '.focus-node-btn' hover/active states for a more stable, subtle UI feel.
- Reduced box-shadow intensity on focus buttons to align with the flatter design.
- Removed icon scaling on hover for focus buttons.
- Added 'appearance: textfield' to number inputs to standardize rendering across browsers.
- Minor whitespace cleanup in toggle slider CSS.
- Implemented a continuous animation loop in 'MagnifyGlass' that activates automatically when video widgets are detected, ensuring smooth playback for standard videos and VHS previews.
- Added robust validation to 'StateManager' for loading settings, including bounds checking for dimensions/opacity and format verification for colors and enums.
- Updated widget detection logic to correctly identify and handle 'videopreview' and 'audiopreview' widgets.
- Ensured animation loops are properly stopped when the glass is hidden or destroyed to preserve resources.
- Moves `litegraphCanvas.getBoundingClientRect()` call outside the widget loop in `renderHtmlOverlays`.
- Reuses the `dpr` calculated at the top level.
- Adds regression test `tests/unit/MagnifyGlassRenderOptim.test.ts`.
Improves rendering performance by reducing forced reflows during magnification.
Add validation for all InfoPanel settings loaded in StateManager to prevent
injection of invalid values (e.g. out-of-bounds numbers, invalid colors).
This mitigates risks of degraded stability or potential injection via
manipulated settings storage.
- Add validateNumber, validateColor, validateStringOption helpers
- Update StateManager.loadSettings to validate all keys
- Add unit tests for validation logic
- Export form creation helpers for testing
- Add unique ID generation for sliders, selects, and color pickers
- Associate labels with inputs using `htmlFor`
- Add unit tests to verify accessibility attributes
- Pass event object to handleToggle from keydown listener
- Ensure stopPropagation() is called for keyboard events
- Maintain consistency between mouse and keyboard interaction behavior
Æmotion Studio