Enhanced UI

[watson0x90]

Enhanced Output Panel for Fermion: UI/UX Improvements

This PR introduces a comprehensive set of improvements to Fermion's output panel, focusing on usability, flexibility, and searchability. The enhancements make the debugging experience more intuitive and efficient without changing any core functionality.

Features Added

Disabled CTRL-R and F5

• I'm constantly hitting the CTRL-R instead of CTRL-T to reload scripts and lose my work in the Monaco editor.

Improved Text Search

• Implemented a regex-based search functionality that efficiently highlights all matching instances in the output panel
• Added a clear button (X) that automatically appears when text is entered in the search box
• Fixed highlighting alignment issues for perfect match visualization
• Added match counter to show the number of matches found
• NEW: Added navigation buttons to quickly move between matches (up/down arrows)
• NEW: Current match is highlighted in a distinct color (#FFD300 by default)
• NEW: Added keyboard shortcuts (Ctrl+F to focus search, Enter/Shift+Enter to navigate matches, Esc to clear)

Output Appearance Customization

• Added font size adjustment buttons to increase/decrease text size
• Implemented a color settings panel allowing customization of:
  • Background color
  • Text color
  • Highlight color
  • Current match highlight color
• Settings are preserved across sessions via localStorage
• Monaco Editor settings (theme, word wrap) are now also saved between sessions

Layout Flexibility

• Added a layout toggle button to switch between vertical and horizontal split views
• Layouts automatically adapt to available screen space with proper resizing behavior
• Layout preference is saved between sessions

Quality of Life Features

• One-click copy button to copy the entire output to the clipboard
• Responsive design that works well on various screen sizes
• Notification system for user feedback (showing successful copy, search results, etc.)
• Added clear button to quickly clear the output panel
• Added save button to export the output to a file
• Frida output now captures CTRL-F to search through the Frida output
• Frida output captures ESC button to clear the searchbox in the Frida output
• Frida output captures ALT+C to clear the Frida output

Technical Implementation

• Used CSS Grid and Flexbox for responsive layouts
• Implemented a mutex-based approach to handle large volumes of log data without UI freezing
• Added proper event handling for cross-platform keyboard shortcuts
• Improved scroll synchronization between the text area and highlight overlay
• CSS variables for theme customization
• Animation effect for current match highlighting to improve visibility

These enhancements significantly improve the debugging workflow when working with Frida scripts, making it easier to find, analyze, and interact with output data while maintaining the application's original lightweight feel.

Screenshots

New UI

Search feature

Save Frida Output

Frida Horizontal Layout

Frida change font size (+/-)

Change Fermion Output Colors