- Implemented 'onWidgetEdit' listener in 'InfoPanel' to force refresh when popout widgets change.
- Refactored 'NodeDataExtractor' to display all widgets in the inspector (matching popout behavior) and removed aggressive deduplication.
- Fixed theme update logic in 'UIManager' to correctly handle hyphenated theme names.
- Enhanced combo box editing in 'popout-viewer.html' with better selection and blur handling.
- Added 'Obsidian', 'Obsidian Dark', and 'Milk White' themes to Info Panel and PopOut viewer.
- Improved theme detection in 'StateManager' to support new themes.
- Implemented button widget support in PopOut viewer with 'button-click' event handling.
- Enhanced widget options handling in 'PopOutManager' for combo widgets.
- Updated dropdown accessibility tests.
- Updated `drawNodeImages` to render multiple images from `node.imgs[]` in a grid.
- Implemented aspect-ratio-preserving centering for each image within its grid cell.
- Added configurable gap between images in the grid.
- Added support for inline action buttons in the inspector panel.
- Implemented `InlineControlFactory.createInlineButton` to execute widget callbacks.
- Enhanced `WidgetSyncManager` to detect 'button' widgets via type or heuristics.
- Updated `UIManager` and `NodeDataExtractor` to process actionable widgets.
- Added styles for inline action buttons.
- Added `Escape` key handler to slider widget editor.
- Refactored canvas coordinate calculations in `MagnifyGlass` for better accuracy.
- 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.
- 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
- 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.
- 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
- Updated `UIManager.createPanel` to call `updateMinimizedState()` if the panel is initialized in a minimized state.
- This ensures the `aria-expanded` attribute on the minimize button correctly reflects the initial state (false) instead of defaulting to true.
- Added `aria-label` to all icon-only buttons in the Info Panel and Magnify Glass toggle.
- Implemented dynamic `aria-pressed` state updates for toggle buttons (pin, lock, persist, etc.).
- Added `aria-expanded` state for the minimize/maximize button.
- Added `aria-label` to the copy-to-clipboard button.
- Ensures better screen reader compatibility and accessibility compliance.
Removes the `forceHideInfoPanel` method and its related helper methods (`removeForceHide`, `ensureForceHideCssRule`) from `MagnifyGlass.ts`. This workaround manually manipulated the DOM to hide the info panel, bypassing the intended state management via the `InfoPanel` class which hooks into `MagnifyGlass` visibility changes.
Testing:
- Verified that `MagnifyGlass.ts` compiles without errors.
- Verified that unit tests pass.
- Verified that `InfoPanel` logic correctly handles hiding via `hookIntoMagnifyGlass`.
AEmotionStudio