diff --git a/Fermion/pages/index.html b/Fermion/pages/index.html index f3e3d52..8a87419 100644 --- a/Fermion/pages/index.html +++ b/Fermion/pages/index.html @@ -1,177 +1,326 @@ - - - - - - - -
-
-
-
-
-
-
- -
-
-
- - +
+
- -
-
-
-
-
-
-
-
+
+
+
+
+
+ +
+
+
+ +
+ + +
+ + + + +
+
+ + +
-
+
+
+
+
+
+ + + +
+
+ × +

Color Settings

+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ + +
+
-
-
-
+ + + @@ -182,103 +331,104 @@

Frida Tools

+ diff --git a/Fermion/pages/proc.html b/Fermion/pages/proc.html index 94a6be8..e411748 100644 --- a/Fermion/pages/proc.html +++ b/Fermion/pages/proc.html @@ -192,6 +192,10 @@
+
+ + +
@@ -332,6 +336,10 @@ function(th, td, tablesort) { return parseInt(td.text()); }); + + // Initialize search functionality after table is populated + setupProcessSearch(); + }).catch((err) => { $("#ProcSet").remove(); var node = document.createElement("p"); @@ -375,7 +383,50 @@ document.getElementById("CloseDevice").onclick = function () { window.close(); } + + // Process search functionality + function setupProcessSearch() { + const searchInput = document.getElementById('procSearch'); + const clearButton = document.getElementById('clearSearch'); + + // Function to filter the table rows based on search input + function filterTable() { + const filter = searchInput.value.toLowerCase(); + const table = document.getElementById('ProcSet'); + const rows = table.getElementsByTagName('tr'); + + // Skip the header row (index 0) + for (let i = 1; i < rows.length; i++) { + const pidCell = rows[i].cells[2]; // PID column + const nameCell = rows[i].cells[4]; // Process name column + + if (pidCell && nameCell) { + const pidText = pidCell.textContent || pidCell.innerText; + const nameText = nameCell.textContent || nameCell.innerText; + + // Show row if PID or process name contains the search string + if (pidText.includes(filter) || nameText.toLowerCase().includes(filter)) { + rows[i].style.display = ''; + } else { + rows[i].style.display = 'none'; + } + } + } + } + + // Add event listeners + searchInput.addEventListener('keyup', filterTable); + + // Clear search and reset table + clearButton.addEventListener('click', function() { + searchInput.value = ''; + filterTable(); + searchInput.focus(); + }); + } + + - \ No newline at end of file + diff --git a/Fermion/src/custom.css b/Fermion/src/custom.css index 1042db2..e899eff 100644 --- a/Fermion/src/custom.css +++ b/Fermion/src/custom.css @@ -1,43 +1,464 @@ .gutter { - background-color: #8a8a8a; - background-repeat: no-repeat; - background-position: calc(50% - 7rem); + background-color: #8a8a8a; + background-repeat: no-repeat; + background-position: calc(50% - 7rem); } .gutter.gutter-vertical { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); - cursor: row-resize; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); + cursor: row-resize; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: col-resize; } .MonacoEditorRow { - height: calc(65vh - 76px); + height: calc(65vh - 76px); } textarea { - border: none; - overflow: auto; - outline: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - resize: none !important; + border: none; + overflow: auto; + outline: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + resize: none !important; } textarea#FridaOut { - height:100%; - width: calc(100vw - 12rem); - overflow:visible; - border: 1px solid transparent; - color: #ffffff; - font-family: monospace; - font-size: 0.8em; - line-height: 1.7em; - background-color: #423636; -} - -textarea#FridaOut::-moz-selection { color: white; background: rgb(194, 194, 194); } -textarea#FridaOut::selection { color: white; background: rgb(194, 194, 194); } - -.ui.toggle.checkbox input:checked ~ label:before { - background-color: #424d5c !important; -} \ No newline at end of file + width: 100%; + /* Take full width of container */ + height: 100%; + overflow: visible; + border: 1px solid transparent; + color: #ffffff; + font-family: monospace; + font-size: 0.8em; + line-height: 1.7em; + background-color: #423636; + padding: 8px; + box-sizing: border-box; +} + +textarea#FridaOut::-moz-selection { + color: white; + background: rgb(194, 194, 194); +} + +textarea#FridaOut::selection { + color: white; + background: rgb(194, 194, 194); +} + +.ui.toggle.checkbox input:checked~label:before { + background-color: #424d5c !important; +} + +/* Fix for toolbar spacing and overflow issues */ +.frida-toolbar { + display: flex; + background-color: #2d2d2d; + padding: 5px 10px; + border-bottom: 1px solid #555; + align-items: center; + justify-content: flex-start; + flex-wrap: nowrap; + gap: 8px; + width: 100%; + /* Take full width of parent container */ + box-sizing: border-box; + max-width: 100%; + /* Prevent overflow */ + overflow: hidden; +} + +/* Group non-search controls to keep them together */ +.toolbar-controls { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + /* Don't allow these controls to shrink */ +} + +/* Make search container responsive */ +/* Updated search container to better handle the clear button */ +.search-container { + display: flex; + margin-left: auto; + max-width: 220px; + /* Increased to accommodate navigation buttons */ + min-width: 80px; + width: auto; + flex: 0 1 auto; + gap: 2px; + align-items: center; +} + +/* Search navigation buttons container */ +.search-nav-buttons { + display: none; + /* Hidden by default, shown when search has results */ + align-items: center; + margin-right: 5px; +} + +/* Hide clear button by default */ +#clear-search { + display: none; +} + +/* Show clear button only when there's text in the search box */ +#regex-search:not(:placeholder-shown)~#clear-search { + display: flex; +} + +.search-container input { + flex: 1; + background-color: #3a3a3a; + border: 1px solid #555; + border-radius: 4px; + color: #fff; + padding: 5px; + font-size: 12px; + min-width: 0; + /* Allow input to shrink below min-content */ + width: 100%; + text-overflow: ellipsis; + /* Show ellipsis for overflow text */ +} + +/* Make the search button more compact if needed */ +.search-container .toolbar-button { + padding: 3px; + flex-shrink: 0; +} + +/* Make toolbar buttons more compact */ +.toolbar-button { + background: none; + border: none; + cursor: pointer; + color: #ccc; + padding: 4px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +.toolbar-button:hover { + background-color: #3a3a3a; +} + +/* Make font-controls more compact */ +.font-controls { + display: flex; + margin: 0; + gap: 2px; +} + +/* Updates for split panels */ +#split-1 { + display: flex; + flex-direction: column; + width: 100%; + min-width: 0; + /* Allow the split panel to shrink */ + overflow: hidden; +} + +/* Ensure the textarea container takes full available width */ +.textarea-container { + flex: 1; + position: relative; + overflow: hidden; + width: 100%; +} + +/* Handle container width for split views properly */ +.container.px-4.mx-auto { + width: 100%; + max-width: 100%; + padding-left: 0; + padding-right: 0; + margin-left: 0; + overflow: hidden; +} + +/* Ensure the split component takes proper width */ +.split { + width: 100% !important; + max-width: 100%; + min-width: 0; + overflow: hidden; +} + +/* Adjust the split component for horizontal orientation */ +.split.horizontal { + display: flex; + flex-direction: row; + height: 100%; +} + +.split.horizontal>#split-0, +.split.horizontal>#split-1 { + height: 100% !important; + min-height: 100%; + /* Ensure minimum height */ +} + +.gutter.gutter-horizontal { + width: 8px !important; + min-width: 8px !important; + cursor: col-resize; +} + +@media (max-width: 800px) { + .gutter-horizontal { + cursor: col-resize; + min-width: 8px !important; + } +} + +/* Responsive adjustments for Monaco editor container */ +#split-0 { + min-width: 0; + max-width: 100%; +} + +#split-0 #container { + width: 100% !important; + height: 100% !important; +} + +#container { + height: 100%; + width: 100% !important; + /* Override inline styles */ + max-width: 100%; + min-width: 0; + overflow: visible; +} + +/* Updated highlight overlay styling */ +.highlight-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + color: transparent; + overflow: auto; + font-family: monospace; + font-size: 0.8em; + line-height: 1.7em; + padding: 8px; + box-sizing: border-box; + border: 1px solid transparent; + z-index: 5; + white-space: pre-wrap !important; + /* Critical for proper alignment */ +} + +/* Improved highlight match styling */ +.highlight-match { + background-color: var(--highlight-bg, #ffff00); + color: var(--highlight-text, #000000) !important; + padding: 0; + border-radius: 2px; + display: inline; + position: relative; + white-space: pre-wrap !important; + /* Critical for proper alignment */ +} + +/* Style for current match highlighting */ +.highlight-match[data-match-index].current-match { + background-color: var(--current-match-bg, #FFD300) !important; + color: var(--current-match-text, #000000) !important; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); + animation: pulse-highlight 1s ease-out 1; +} + +/* Animation for current match to make it more visible */ +@keyframes pulse-highlight { + 0% { + box-shadow: 0 0 0 0 rgba(var(--current-match-bg-rgb, 255, 211, 0), 0.5); + } + + 70% { + box-shadow: 0 0 0 3px rgba(var(--current-match-bg-rgb, 255, 211, 0), 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(var(--current-match-bg-rgb, 255, 211, 0), 0); + } +} + +.highlight-match[data-match-index].current-match { + animation: pulse-highlight 1s ease-out 1; +} + +/* Color Modal */ +.color-modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.5); +} + +.color-modal-content { + background-color: #2d2d2d; + margin: 15% auto; + padding: 20px; + border: 1px solid #555; + width: 400px; + border-radius: 8px; + color: #ccc; +} + +.close-modal { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close-modal:hover, +.close-modal:focus { + color: #fff; + text-decoration: none; +} + +.color-setting { + margin: 15px 0; +} + +.color-input-group { + display: flex; + align-items: center; + margin-top: 5px; +} + +.color-input-group input[type="color"] { + width: 40px; + height: 25px; + background-color: transparent; + border: none; + margin-right: 10px; +} + +.color-input-group input[type="text"] { + flex: 1; + background-color: #3a3a3a; + border: 1px solid #555; + border-radius: 4px; + color: #fff; + padding: 5px 10px; + font-size: 12px; +} + +.modal-buttons { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +.modal-buttons button { + margin-left: 10px; + padding: 6px 12px; + background-color: #424d5c; + border: none; + border-radius: 4px; + color: #fff; + cursor: pointer; +} + +.modal-buttons button:hover { + background-color: #536580; +} + +/* Match indicator styling */ +.match-indicator { + position: absolute; + bottom: 10px; + right: 10px; + background-color: #424d5c; + color: #fff; + padding: 5px 10px; + border-radius: 4px; + font-size: 12px; + z-index: 10; + pointer-events: none; + opacity: 0.95; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +/* Notification styling */ +.notification { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #424d5c; + color: #fff; + padding: 8px 16px; + border-radius: 4px; + z-index: 1000; + font-size: 12px; + opacity: 0.9; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + animation: fadeInOut 3s ease-in-out; +} + +@keyframes fadeInOut { + 0% { + opacity: 0; + } + + 10% { + opacity: 0.9; + } + + 80% { + opacity: 0.9; + } + + 100% { + opacity: 0; + } +} + +/* Responsive adjustments */ +@media (max-width: 800px) { + .search-container { + max-width: 180px; + /* Smaller on small screens */ + } + + .search-nav-buttons { + margin-right: 2px; + } + + .match-indicator { + font-size: 10px; + padding: 3px 6px; + } +} + +:root { + --highlight-bg: #ffff00; + --highlight-text: #000000; + --current-match-bg: #FFD300; + --current-match-text: #000000; +} diff --git a/Fermion/src/renderer.js b/Fermion/src/renderer.js index 6c51fc0..f74dd3d 100644 --- a/Fermion/src/renderer.js +++ b/Fermion/src/renderer.js @@ -24,6 +24,23 @@ let logMutex = new MutexPromise('48011b2b9a930ee19e26320e5adbffa2e309663c'); let RunningLog = []; var deviceId = 'local'; +// Enhanced Frida Output variables +let currentFontSize = 0.8; // em units +let isVertical = true; +let searchRegex = null; +let bgColor = '#423636'; +let textColor = '#ffffff'; +let highlightColor = '#ffff00'; +let highlightTextColor = '#000000'; +let originalSplit = null; + +// Add these new search-related variables +let matchPositions = []; +let currentMatchIndex = -1; +let totalMatches = 0; +let currentMatchColor = '#FFD300'; +let currentMatchTextColor = '#000000'; + // Instrument ////////////////////////////////////////////////// @@ -565,6 +582,11 @@ function appendFridaLog(data) { } FridaOut.scrollTop = FridaOut.scrollHeight; + + // If search is active, update highlights + if (searchRegex) { + performSearch(); + } } function ChangeLogExclusive(mutex, locktype, data) { @@ -706,7 +728,7 @@ document.getElementById("FermionOpen").onclick = function () { currentFilePath = result.filePaths[0]; }); } - }).catch(err =>{ + }).catch(err => { appendFridaLog("[!] Error opening file: " + err) }) } @@ -731,7 +753,7 @@ document.getElementById("FermionSave").onclick = function () { currentFilePath = result.filePath; }); } - }).catch(err =>{ + }).catch(err => { appendFridaLog("[!] Error saving file: " + err) }) } @@ -758,10 +780,10 @@ document.getElementById("getDeviceDetail").onclick = function () { if (result.hasOwnProperty("name")) { appendFridaLog(" |_ Host Name : " + result.name + "\n"); } - }).catch(err =>{ + }).catch(err => { appendFridaLog("[!] Failed to enumerate device properties: " + err + "\n"); }); - }).catch(err =>{ + }).catch(err => { appendFridaLog("[!] Failed to acquire device context: " + err + "\n"); }); } @@ -833,4 +855,1202 @@ document.addEventListener("keydown", function (e) { // Trigger script reload document.getElementById("FridaReload").click(); } -}, false); \ No newline at end of file +}, false); + +document.getElementById('clear-output').title = "Clear output (Alt+C)"; +// Add keyboard shortcut for clearing output panel +document.addEventListener("keydown", function (e) { + // Clear Output with Alt+C + if (e.altKey && e.keyCode == 67) { + e.preventDefault(); + clearOutputArea(); + } +}, false); + +////////////////////////////////////////////////// +// Frida Output Enhancement Functions +////////////////////////////////////////////////// + +// Store DOM references +const fridaOut = document.getElementById('FridaOut'); +const copyButton = document.getElementById('copy-output'); +const decreaseFontButton = document.getElementById('decrease-font'); +const increaseFontButton = document.getElementById('increase-font'); +const regexSearch = document.getElementById('regex-search'); +const searchButton = document.getElementById('search-button'); +const toggleLayoutButton = document.getElementById('toggle-layout'); +const colorSettingsButton = document.getElementById('color-settings'); +const colorModal = document.getElementById('color-modal'); +const closeModalBtn = document.querySelector('.close-modal'); +const applyColorsButton = document.getElementById('apply-colors'); +const resetColorsButton = document.getElementById('reset-colors'); +const bgColorPicker = document.getElementById('background-color'); +const bgColorHex = document.getElementById('background-color-hex'); +const textColorPicker = document.getElementById('text-color'); +const textColorHex = document.getElementById('text-color-hex'); +const highlightColorPicker = document.getElementById('highlight-color'); +const highlightColorHex = document.getElementById('highlight-color-hex'); +const highlightOverlay = document.getElementById('highlight-overlay'); +const currentMatchColorPicker = document.getElementById('current-match-color'); +const currentMatchColorHex = document.getElementById('current-match-color-hex'); +const clearOutputButton = document.getElementById('clear-output'); +const saveOutputButton = document.getElementById('save-output'); + + +// Initialize features when DOM is loaded +document.addEventListener('DOMContentLoaded', function () { + // Make sure window.split is available before storing it + setTimeout(() => { + if (window.split) { + originalSplit = window.split; + } + }, 500); + + // Load saved settings from localStorage + loadSettings(); + + // Add event listeners + addEventListeners(); + + // Initialize the layout button icon + initLayoutButton(); + + // Initial UI adjustment + setTimeout(adjustUIForSidebar, 100); + + // Initialize Monaco editor with custom theme + setTimeout(addMonacoSettingsListeners, 1500); + + // Initialize search functionality with new features + setTimeout(() => { + initSearchFunctionality(); + addSearchNavButtons(); + addSearchKeyboardShortcuts(); + addSearchStyles(); + }, 500); +}); + +// Add event listeners to UI elements +function addEventListeners() { + // Copy button functionality + copyButton.addEventListener('click', copyOutputToClipboard); + + // Font size controls + decreaseFontButton.addEventListener('click', decreaseFontSize); + increaseFontButton.addEventListener('click', increaseFontSize); + + // Search functionality + searchButton.addEventListener('click', performSearch); + regexSearch.addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + if (searchRegex) { + navigateToNextMatch(); + } else { + performSearch(); + } + } + }); + + regexSearch.addEventListener('input', function () { + if (this.value.trim() === '') { + clearSearch(); + } + }); + + // Layout toggle + toggleLayoutButton.addEventListener('click', toggleLayout); + + // Color settings + colorSettingsButton.addEventListener('click', function () { + colorModal.style.display = 'block'; + }); + + closeModalBtn.addEventListener('click', function () { + colorModal.style.display = 'none'; + }); + + clearOutputButton.addEventListener('click', clearOutputArea); + + saveOutputButton.addEventListener('click', saveOutputArea); + + + window.addEventListener('click', function (event) { + if (event.target === colorModal) { + colorModal.style.display = 'none'; + } + }); + + currentMatchColorPicker.addEventListener('input', function () { + currentMatchColorHex.value = this.value; + }); + + currentMatchColorHex.addEventListener('input', function () { + if (/^#[0-9A-F]{6}$/i.test(this.value)) { + currentMatchColorPicker.value = this.value; + } + }); + + // Link color pickers with hex inputs + bgColorPicker.addEventListener('input', function () { + bgColorHex.value = this.value; + }); + + bgColorHex.addEventListener('input', function () { + if (/^#[0-9A-F]{6}$/i.test(this.value)) { + bgColorPicker.value = this.value; + } + }); + + textColorPicker.addEventListener('input', function () { + textColorHex.value = this.value; + }); + + textColorHex.addEventListener('input', function () { + if (/^#[0-9A-F]{6}$/i.test(this.value)) { + textColorPicker.value = this.value; + } + }); + + highlightColorPicker.addEventListener('input', function () { + highlightColorHex.value = this.value; + }); + + highlightColorHex.addEventListener('input', function () { + if (/^#[0-9A-F]{6}$/i.test(this.value)) { + highlightColorPicker.value = this.value; + } + }); + + + // Apply and reset buttons + applyColorsButton.addEventListener('click', applyColors); + resetColorsButton.addEventListener('click', resetColors); + + // Sync scrolling between textarea and highlight overlay + fridaOut.addEventListener('scroll', function () { + highlightOverlay.scrollTop = fridaOut.scrollTop; + highlightOverlay.scrollLeft = fridaOut.scrollLeft; + }); + + // Handle textarea input and content changes for highlighting + fridaOut.addEventListener('input', function () { + // If search is active, update highlights + if (searchRegex) { + performSearch(); + } + }); + + // Monitor textarea size changes to adjust highlight overlay + new ResizeObserver(() => { + if (searchRegex) { + performSearch(); + } + }).observe(fridaOut); + + // Add event listeners for sidebar state changes and window resize + window.addEventListener('resize', adjustUIForSidebar); + + // Add a listener for possible sidebar toggle events + document.addEventListener('click', function (event) { + // Check if click might be related to sidebar toggle + if (event.target.closest('nav') || event.target.closest('.navbar-menu')) { + // Wait a moment for DOM to update + setTimeout(adjustUIForSidebar, 100); + } + }); +} + +// Function to add navigation buttons to the toolbar +function addSearchNavButtons() { + // First check if buttons already exist + if (document.getElementById('prev-match') || document.getElementById('next-match')) { + return; + } + + const searchContainer = document.querySelector('.search-container'); + + // Create navigation buttons + const navContainer = document.createElement('div'); + navContainer.className = 'search-nav-buttons'; + navContainer.style.display = 'none'; // Hidden by default + + const prevButton = document.createElement('button'); + prevButton.id = 'prev-match'; + prevButton.className = 'toolbar-button'; + prevButton.title = 'Previous match (Shift+Enter)'; + prevButton.innerHTML = ``; + + const nextButton = document.createElement('button'); + nextButton.id = 'next-match'; + nextButton.className = 'toolbar-button'; + nextButton.title = 'Next match (Enter)'; + nextButton.innerHTML = ``; + + navContainer.appendChild(prevButton); + navContainer.appendChild(nextButton); + + // Insert before the search button + const searchButton = document.getElementById('search-button'); + searchContainer.insertBefore(navContainer, searchButton); + + // Add event listeners + prevButton.addEventListener('click', navigateToPreviousMatch); + nextButton.addEventListener('click', navigateToNextMatch); +} + +// Function to navigate to the previous match +function navigateToPreviousMatch() { + if (matchPositions.length === 0) return; + + currentMatchIndex = (currentMatchIndex <= 0) ? matchPositions.length - 1 : currentMatchIndex - 1; + highlightCurrentMatch(); + scrollToCurrentMatch(); + updateMatchCounter(); +} + +// Function to navigate to the next match +function navigateToNextMatch() { + if (matchPositions.length === 0) return; + + currentMatchIndex = (currentMatchIndex >= matchPositions.length - 1) ? 0 : currentMatchIndex + 1; + highlightCurrentMatch(); + scrollToCurrentMatch(); + updateMatchCounter(); +} + +// Function to scroll the textarea to show the current match +function scrollToCurrentMatch() { + if (currentMatchIndex < 0 || matchPositions.length === 0) return; + + const fridaOut = document.getElementById('FridaOut'); + const match = matchPositions[currentMatchIndex]; + + // Calculate position in the textarea + const textBeforeMatch = fridaOut.value.substring(0, match.start); + const lines = textBeforeMatch.split('\n'); + + // Create a temporary element to measure text dimensions + const temp = document.createElement('div'); + temp.style.position = 'absolute'; + temp.style.visibility = 'hidden'; + temp.style.whiteSpace = 'pre'; + temp.style.font = window.getComputedStyle(fridaOut).font; + document.body.appendChild(temp); + + // Calculate the line height + temp.textContent = 'M'; + const lineHeight = temp.offsetHeight; + + // Calculate approximate scroll position + const lineNumber = lines.length - 1; + const approximateScrollTop = lineNumber * lineHeight; + + // Remove the temporary element + document.body.removeChild(temp); + + // Scroll to position, with some offset to center it in the view + const viewportHeight = fridaOut.clientHeight; + fridaOut.scrollTop = approximateScrollTop - (viewportHeight / 2) + lineHeight; +} + +// Function to update the UI counter showing current match position +function updateMatchCounter() { + // Update or create the match counter + let counter = document.querySelector('.match-indicator'); + + if (!counter) { + counter = document.createElement('div'); + counter.className = 'match-indicator'; + document.querySelector('.textarea-container').appendChild(counter); + } + + if (matchPositions.length > 0) { + counter.textContent = `${currentMatchIndex + 1} of ${matchPositions.length} matches`; + counter.style.display = 'block'; + + // Show navigation buttons + const navButtons = document.querySelector('.search-nav-buttons'); + if (navButtons) { + navButtons.style.display = 'flex'; + } + } else { + counter.style.display = 'none'; + + // Hide navigation buttons + const navButtons = document.querySelector('.search-nav-buttons'); + if (navButtons) { + navButtons.style.display = 'none'; + } + } +} + +// Copy output to clipboard +function copyOutputToClipboard() { + fridaOut.select(); + document.execCommand('copy'); + window.getSelection().removeAllRanges(); + + showNotification('Copied to clipboard!'); +} + +// Show notification +function showNotification(message) { + // Remove any existing notifications + const existingNotification = document.querySelector('.notification'); + if (existingNotification) { + existingNotification.remove(); + } + + // Create notification element + const notification = document.createElement('div'); + notification.className = 'notification'; + notification.textContent = message; + document.body.appendChild(notification); + + // Remove after 2 seconds + setTimeout(() => { + if (notification.parentNode) { + notification.parentNode.removeChild(notification); + } + }, 2000); +} + +// Decrease font size +function decreaseFontSize() { + if (currentFontSize > 0.5) { + currentFontSize -= 0.1; + currentFontSize = Math.round(currentFontSize * 10) / 10; // Round to 1 decimal place + fridaOut.style.fontSize = currentFontSize + 'em'; + highlightOverlay.style.fontSize = currentFontSize + 'em'; + saveSettings(); + + // Reapply search highlighting if active + if (searchRegex) { + performSearch(); + } + } +} + +// Increase font size +function increaseFontSize() { + if (currentFontSize < 2.0) { + currentFontSize += 0.1; + currentFontSize = Math.round(currentFontSize * 10) / 10; // Round to 1 decimal place + fridaOut.style.fontSize = currentFontSize + 'em'; + highlightOverlay.style.fontSize = currentFontSize + 'em'; + saveSettings(); + + // Reapply search highlighting if active + if (searchRegex) { + performSearch(); + } + } +} + +// Improved synchronization function for textarea and overlay +function syncOverlayDimensions() { + if (!highlightOverlay || !fridaOut) return; + + // Get computed dimensions from the textarea + const computedStyle = window.getComputedStyle(fridaOut); + + // Apply exact dimensions and properties to the overlay + highlightOverlay.style.width = computedStyle.width; + highlightOverlay.style.height = computedStyle.height; + highlightOverlay.style.padding = computedStyle.padding; + highlightOverlay.style.boxSizing = computedStyle.boxSizing; + highlightOverlay.style.fontFamily = computedStyle.fontFamily; + highlightOverlay.style.fontSize = computedStyle.fontSize; + highlightOverlay.style.lineHeight = computedStyle.lineHeight; + highlightOverlay.style.letterSpacing = computedStyle.letterSpacing; + highlightOverlay.style.wordSpacing = computedStyle.wordSpacing; + highlightOverlay.style.textAlign = computedStyle.textAlign; + highlightOverlay.style.whiteSpace = 'pre-wrap'; // This matches textarea behavior + + // Sync scroll position + highlightOverlay.scrollTop = fridaOut.scrollTop; + highlightOverlay.scrollLeft = fridaOut.scrollLeft; +} + +// Updated CSS to apply to the highlight overlay +function updateOverlayStyles() { + const style = document.createElement('style'); + style.textContent = ` + .highlight-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + color: transparent; + overflow: auto; + font-family: monospace; + font-size: 0.8em; + line-height: 1.7em; + padding: 8px; + box-sizing: border-box; + border: 1px solid transparent; + z-index: 5; + white-space: pre-wrap; /* Match textarea behavior */ + } + + .highlight-match { + background-color: var(--highlight-bg, #ffff00); + color: var(--highlight-text, #000000) !important; + padding: 0; + border-radius: 2px; + display: inline; + } + `; + document.head.appendChild(style); +} + +// Enhanced function to adjust UI based on sidebar state +function adjustUIForSidebar() { + // Get the actual width of the container + const containerWidth = document.getElementById('split-1').offsetWidth; + + // Adjust search container width based on available space + const searchContainer = document.querySelector('.search-container'); + if (searchContainer) { + // Make search container narrower if space is limited + if (containerWidth < 300) { + searchContainer.style.maxWidth = '100px'; + searchContainer.style.minWidth = '60px'; + } else { + searchContainer.style.maxWidth = '220px'; // Updated to accommodate navigation buttons + searchContainer.style.minWidth = '80px'; + } + } + + // Update overlay dimensions after sidebar changes + syncOverlayDimensions(); + + // If search is active, reapply highlights + if (searchRegex) { + performSearch(); + } +} + +// Initialize the search-related functionality +function initSearchFunctionality() { + // Update overlay styles + updateOverlayStyles(); + + // Set clear button event + document.getElementById('clear-search').addEventListener('click', clearSearch); + + // Handle input changes for search box + document.getElementById('regex-search').addEventListener('input', function () { + if (this.value.trim() === '') { + clearSearch(); + } + }); + + // Handle search button clicks + document.getElementById('search-button').addEventListener('click', performSearch); + + // Handle Enter key in search box + document.getElementById('regex-search').addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + if (searchRegex) { + navigateToNextMatch(); + } else { + performSearch(); + } + } + }); + + // Sync scrolling between textarea and highlight overlay + document.getElementById('FridaOut').addEventListener('scroll', function () { + document.getElementById('highlight-overlay').scrollTop = this.scrollTop; + document.getElementById('highlight-overlay').scrollLeft = this.scrollLeft; + }); +} + +// Add keyboard shortcuts for search +function addSearchKeyboardShortcuts() { + // Global Ctrl+F to focus search box + document.addEventListener('keydown', function (e) { + // Check if this is Ctrl+F (or Cmd+F on Mac) + if ((e.ctrlKey || e.metaKey) && e.key === 'f') { + // Don't intercept if user is typing in Monaco editor (it has its own search) + const activeElement = document.activeElement; + const isInMonacoEditor = activeElement && + (activeElement.closest('.monaco-editor') || + document.querySelector('.monaco-editor').contains(activeElement)); + + if (!isInMonacoEditor) { + e.preventDefault(); + // Focus the search box + const searchInput = document.getElementById('regex-search'); + searchInput.focus(); + searchInput.select(); + } + } + }); + + // Search box keyboard navigation + const searchInput = document.getElementById('regex-search'); + searchInput.addEventListener('keydown', function (e) { + if (e.key === 'Enter') { + // Shift+Enter to go to previous match + if (e.shiftKey) { + e.preventDefault(); + navigateToPreviousMatch(); + } + // Enter to go to next match + else { + e.preventDefault(); + // If we have an active search, navigate to next match + if (searchRegex) { + navigateToNextMatch(); + } + // Otherwise, perform search + else { + performSearch(); + } + } + } + // Escape to clear search + else if (e.key === 'Escape') { + e.preventDefault(); + clearSearch(); + } + }); + + // Textarea Esc key to clear search + document.getElementById('FridaOut').addEventListener('keydown', function (e) { + if (e.key === 'Escape' && searchRegex) { + e.preventDefault(); + clearSearch(); + } + }); +} + +// Add search styles +function addSearchStyles() { + const styleEl = document.createElement('style'); + styleEl.textContent = ` + .highlight-match.current-match { + background-color: var(--current-match-bg, ${currentMatchColor}) !important; + color: var(--current-match-text, ${currentMatchTextColor}) !important; + } + + .search-nav-buttons { + display: flex; + align-items: center; + margin-right: 5px; + } + `; + document.head.appendChild(styleEl); + + // Set initial CSS variables + document.documentElement.style.setProperty('--current-match-bg', currentMatchColor); + document.documentElement.style.setProperty('--current-match-text', currentMatchTextColor); +} + +// Perform search +function performSearch() { + const searchTerm = document.getElementById('regex-search').value.trim(); + + if (searchTerm === '') { + searchRegex = null; + clearSearch(); + return; + } + + try { + // Create a new regex object + searchRegex = new RegExp(searchTerm, 'gi'); + highlightMatches(); + } catch (error) { + showNotification('Invalid regular expression: ' + error.message); + searchRegex = null; + clearHighlights(); + } +} + +// Function to clear the search +function clearSearch() { + const searchInput = document.getElementById('regex-search'); + searchInput.value = ''; + searchRegex = null; + matchPositions = []; + currentMatchIndex = -1; + totalMatches = 0; + clearHighlights(); + + // Hide match indicator + const matchIndicator = document.querySelector('.match-indicator'); + if (matchIndicator) { + matchIndicator.style.display = 'none'; + } + + // Hide navigation buttons + const navButtons = document.querySelector('.search-nav-buttons'); + if (navButtons) { + navButtons.style.display = 'none'; + } +} + +// Clear highlights +function clearHighlights() { + highlightOverlay.innerHTML = ''; + + // Remove match indicator if present + const matchIndicator = document.querySelector('.match-indicator'); + if (matchIndicator) { + matchIndicator.parentNode.removeChild(matchIndicator); + } +} + +// Enhanced highlight function +function highlightMatches() { + if (!searchRegex) return; + + // Clear previous highlights + highlightOverlay.innerHTML = ''; + + // Get the current text + const content = fridaOut.value; + if (!content) return; + + // Reset match tracking + matchPositions = []; + totalMatches = 0; + + // Ensure overlay dimensions match textarea exactly + syncOverlayDimensions(); + + // Create a fresh regex for the actual processing + const processRegex = new RegExp(searchRegex.source, 'gi'); + + // Transform content to HTML with highlights + let htmlContent = ''; + let lastIndex = 0; + let match; + + while ((match = processRegex.exec(content)) !== null) { + // Add text before the match + htmlContent += content.substring(lastIndex, match.index); + + // Store match position + matchPositions.push({ + start: match.index, + end: processRegex.lastIndex, + text: match[0] + }); + + // Add the highlighted match with a data attribute for the match index + htmlContent += `${match[0]}`; + + lastIndex = processRegex.lastIndex; + totalMatches++; + + // Prevent infinite loops for zero-length matches + if (match.index === processRegex.lastIndex) { + processRegex.lastIndex++; + } + } + + // Add remaining text after the last match + if (lastIndex < content.length) { + htmlContent += content.substring(lastIndex); + } + + // Replace newlines with
tags for proper display + htmlContent = htmlContent.replace(/\n/g, '
'); + + // Set the HTML content + highlightOverlay.innerHTML = htmlContent; + + // If we have matches, set the current match to the first one + if (matchPositions.length > 0) { + // Default to first match if we don't have a current match index + if (currentMatchIndex < 0 || currentMatchIndex >= matchPositions.length) { + currentMatchIndex = 0; + } + + // Highlight the current match + highlightCurrentMatch(); + + // Show match counter + updateMatchCounter(); + + // Scroll to the current match + scrollToCurrentMatch(); + } else { + // No matches found + currentMatchIndex = -1; + showNotification('No matches found'); + + // Hide navigation buttons + const navButtons = document.querySelector('.search-nav-buttons'); + if (navButtons) { + navButtons.style.display = 'none'; + } + } +} + +// Function to highlight the current match +function highlightCurrentMatch() { + // Remove any existing current-match classes + const allMatches = highlightOverlay.querySelectorAll('.highlight-match'); + allMatches.forEach(match => { + match.style.backgroundColor = highlightColor; + match.style.color = highlightTextColor; + }); + + // Apply current match highlighting + if (currentMatchIndex >= 0 && currentMatchIndex < matchPositions.length) { + const currentMatch = highlightOverlay.querySelector(`.highlight-match[data-match-index="${currentMatchIndex}"]`); + if (currentMatch) { + currentMatch.style.backgroundColor = currentMatchColor; + currentMatch.style.color = currentMatchTextColor; + } + } +} + +const verticalIcon = ` + + +`; + +const horizontalIcon = ` + + +`; + +// Toggle layout direction +function toggleLayout() { + // Toggle the layout state + isVertical = !isVertical; + + // Ensure split instance exists + if (typeof window.split !== 'undefined') { + // Get elements we'll need to manipulate + const split0 = document.getElementById('split-0'); + const split1 = document.getElementById('split-1'); + const container = document.getElementById('container'); + const fridaOutContainer = document.querySelector('.textarea-container'); + const splitContainer = document.querySelector('.split'); + + // Force visibility of the output area during transition + fridaOut.style.display = 'block'; + + // Destroy existing split + window.split.destroy(); + + // Remove all inline styles that might interfere + split0.removeAttribute('style'); + split1.removeAttribute('style'); + + // Apply basic required styles + split0.style.overflow = 'hidden'; + split1.style.overflow = 'hidden'; + container.style.width = '100%'; + container.style.height = '100%'; + + // Update container classes + if (isVertical) { + splitContainer.classList.remove('horizontal'); + } else { + splitContainer.classList.add('horizontal'); + } + + // Create new split with a delay to ensure DOM updates + setTimeout(() => { + window.split = Split(['#split-0', '#split-1'], { + direction: isVertical ? 'vertical' : 'horizontal', + sizes: isVertical ? [63, 37] : [50, 50], + minSize: 100, + gutterSize: 8, + onDragEnd: function () { + window.dispatchEvent(new Event('resize')); + if (MonacoCodeEditor) { + MonacoCodeEditor.layout(); + } + } + }); + + // Force output container to take full width/height + fridaOutContainer.style.width = '100%'; + fridaOutContainer.style.height = '100%'; + fridaOut.style.width = '100%'; + fridaOut.style.height = '100%'; + + // Force Monaco editor layout update + if (MonacoCodeEditor) { + MonacoCodeEditor.layout(); + } + + // Update layout button icon + updateLayoutButtonIcon(); + + // Sync overlay dimensions + syncOverlayDimensions(); + }, 50); + + // Save settings + saveSettings(); + } +} + +// Function to update the layout button icon based on current state +function updateLayoutButtonIcon() { + const toggleButton = document.getElementById('toggle-layout'); + + // Note: We've swapped the logic here - show what layout we're CURRENTLY in + // (not what we'll switch to next) + toggleButton.innerHTML = isVertical ? verticalIcon : horizontalIcon; + toggleButton.title = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout"; +} + +function initLayoutButton() { + // Set the initial icon based on the current layout + updateLayoutButtonIcon(); +} + +// Apply colors +function applyColors() { + bgColor = bgColorPicker.value; + textColor = textColorPicker.value; + highlightColor = highlightColorPicker.value; + highlightTextColor = getContrastColor(highlightColor); + currentMatchColor = currentMatchColorPicker.value; + currentMatchTextColor = getContrastColor(currentMatchColor); + + // Apply colors to textarea + fridaOut.style.backgroundColor = bgColor; + fridaOut.style.color = textColor; + + // Set CSS variables for highlight colors + document.documentElement.style.setProperty('--highlight-bg', highlightColor); + document.documentElement.style.setProperty('--highlight-text', highlightTextColor); + document.documentElement.style.setProperty('--current-match-bg', currentMatchColor); + document.documentElement.style.setProperty('--current-match-text', currentMatchTextColor); + + // Close modal + colorModal.style.display = 'none'; + + // Save settings + saveSettings(); + + // Reapply highlighting if active + if (searchRegex) { + performSearch(); + } +} + +// Reset colors to defaults +function resetColors() { + // Default colors + bgColor = '#423636'; + textColor = '#ffffff'; + highlightColor = '#ffff00'; + highlightTextColor = '#000000'; + currentMatchColor = '#FFD300'; + currentMatchTextColor = '#000000'; + + // Update color pickers and hex inputs + bgColorPicker.value = bgColor; + bgColorHex.value = bgColor; + textColorPicker.value = textColor; + textColorHex.value = textColor; + highlightColorPicker.value = highlightColor; + highlightColorHex.value = highlightColor; + currentMatchColorPicker.value = currentMatchColor; + currentMatchColorHex.value = currentMatchColor; + + // Apply colors + fridaOut.style.backgroundColor = bgColor; + fridaOut.style.color = textColor; + + // Set CSS variables + document.documentElement.style.setProperty('--highlight-bg', highlightColor); + document.documentElement.style.setProperty('--highlight-text', highlightTextColor); + document.documentElement.style.setProperty('--current-match-bg', currentMatchColor); + document.documentElement.style.setProperty('--current-match-text', currentMatchTextColor); + + // Close modal + colorModal.style.display = 'none'; + + // Save settings + saveSettings(); + + // Reapply highlighting if active + if (searchRegex) { + performSearch(); + } +} + +// Get contrast color (black or white) based on background color +function getContrastColor(hexColor) { + // Convert hex to RGB + const r = parseInt(hexColor.substr(1, 2), 16); + const g = parseInt(hexColor.substr(3, 2), 16); + const b = parseInt(hexColor.substr(5, 2), 16); + + // Calculate luminance - standard formula for perceived brightness + const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; + + // Return black for light colors, white for dark + return luminance > 0.5 ? '#000000' : '#ffffff'; +} + +// Save settings to localStorage +function saveSettings() { + // Get the current Monaco theme + const themeSelect = document.getElementById("MonacoThemeSelect"); + const currentTheme = themeSelect ? themeSelect.value : "Kuroir"; // Default if not found + + // Get the current wrap state + const wrapToggle = document.getElementById("FermionMonacoWrap"); + const isWrapEnabled = wrapToggle && wrapToggle.children[0] ? + wrapToggle.children[0].checked : false; + + const settings = { + fontSize: currentFontSize, + bgColor: bgColor, + textColor: textColor, + highlightColor: highlightColor, + currentMatchColor: currentMatchColor, + isVertical: isVertical, + // Add Monaco Editor settings + monacoTheme: currentTheme, + monacoWrap: isWrapEnabled + }; + + localStorage.setItem('fermion_output_settings', JSON.stringify(settings)); +} + +// Function to clear the output area +function clearOutputArea() { + // Get the textarea + const fridaOut = document.getElementById('FridaOut'); + + // Clear the textarea content + fridaOut.value = ''; + + // Clear highlights if search is active + clearHighlights(); + + // Reset search-related variables + searchRegex = null; + matchPositions = []; + currentMatchIndex = -1; + totalMatches = 0; + + // Hide match indicator + const matchIndicator = document.querySelector('.match-indicator'); + if (matchIndicator) { + matchIndicator.style.display = 'none'; + } + + // Hide navigation buttons + const navButtons = document.querySelector('.search-nav-buttons'); + if (navButtons) { + navButtons.style.display = 'none'; + } + + // Show notification + showNotification('Output cleared'); +} + + +// Function to save the output area content to a file +function saveOutputArea() { + // Get the content from the textarea + const fridaOut = document.getElementById('FridaOut'); + const content = fridaOut.value; + + // If content is empty, show notification and return + if (!content.trim()) { + showNotification('Nothing to save'); + return; + } + + // Show save dialog + dialog.showSaveDialog( + { + title: "Save Frida Output", + defaultPath: "frida-output.txt", + filters: [ + { name: 'Text Files', extensions: ['txt'] }, + { name: 'Log Files', extensions: ['log'] }, + { name: 'All Files', extensions: ['*'] } + ] + } + ).then(result => { + if (result.filePath) { + // Write the content to the file + fs.writeFile(result.filePath, content, (err) => { + if (err) { + appendFridaLog("[!] Error saving output: " + err.message); + return; + } else { + showNotification('Output saved successfully'); + appendFridaLog("[+] Output saved.."); + appendFridaLog(" |-> Path: " + result.filePath); + } + }); + } + }).catch(err => { + appendFridaLog("[!] Error saving output: " + err); + }); +} + +// Load settings from localStorage +function loadSettings() { + const savedSettings = localStorage.getItem('fermion_output_settings'); + if (savedSettings) { + try { + const settings = JSON.parse(savedSettings); + + // Apply font size + if (settings.fontSize && !isNaN(settings.fontSize)) { + currentFontSize = settings.fontSize; + fridaOut.style.fontSize = currentFontSize + 'em'; + highlightOverlay.style.fontSize = currentFontSize + 'em'; + } + + // Apply colors + if (settings.bgColor) { + bgColor = settings.bgColor; + bgColorPicker.value = bgColor; + bgColorHex.value = bgColor; + fridaOut.style.backgroundColor = bgColor; + } + + if (settings.textColor) { + textColor = settings.textColor; + textColorPicker.value = textColor; + textColorHex.value = textColor; + fridaOut.style.color = textColor; + } + + if (settings.highlightColor) { + highlightColor = settings.highlightColor; + highlightColorPicker.value = highlightColor; + highlightColorHex.value = highlightColor; + highlightTextColor = getContrastColor(highlightColor); + } + + if (settings.currentMatchColor) { + currentMatchColor = settings.currentMatchColor; + currentMatchColorPicker.value = currentMatchColor; + currentMatchColorHex.value = currentMatchColor; + currentMatchTextColor = getContrastColor(currentMatchColor); + } + + // Set CSS variables + document.documentElement.style.setProperty('--highlight-bg', highlightColor); + document.documentElement.style.setProperty('--highlight-text', highlightTextColor); + document.documentElement.style.setProperty('--current-match-bg', currentMatchColor); + document.documentElement.style.setProperty('--current-match-text', currentMatchTextColor); + + // Apply layout direction + if (settings.hasOwnProperty('isVertical')) { + isVertical = settings.isVertical; + + // If not vertical, toggle the layout after a short delay + if (!isVertical && typeof window.split !== 'undefined') { + setTimeout(function () { + toggleLayout(); + }, 500); + } + } + + // Apply Monaco Editor theme + if (settings.monacoTheme) { + // Wait for Monaco editor to be fully initialized + setTimeout(function () { + const themeSelect = document.getElementById("MonacoThemeSelect"); + if (themeSelect) { + // Set the dropdown value + themeSelect.value = settings.monacoTheme; + // Apply the theme + setMonacoTheme(); + } + }, 1000); // Allow time for Monaco to initialize + } + + // Apply Monaco Editor wrap setting + if (settings.hasOwnProperty('monacoWrap')) { + setTimeout(function () { + const wrapToggle = document.getElementById("FermionMonacoWrap"); + if (wrapToggle && wrapToggle.children[0]) { + // Set the checkbox state + wrapToggle.children[0].checked = settings.monacoWrap; + + // Apply the wrap setting to Monaco + if (MonacoCodeEditor) { + MonacoCodeEditor.updateOptions({ + wordWrap: settings.monacoWrap ? "on" : "off" + }); + } + } + }, 1000); // Allow time for Monaco to initialize + } + } catch (error) { + console.error('Error loading settings:', error); + } + } +} + +// Initialize on load +window.addEventListener('load', function () { + // Make sure highlighting overlay has the correct initial font size + highlightOverlay.style.fontSize = currentFontSize + 'em'; + + // Add the color modal to the document body if it's not already there + if (!document.getElementById('color-modal')) { + const modalHTML = document.getElementById('color-modal'); + document.body.appendChild(modalHTML); + } +}); + +// Prevent default actions for F5 and Ctrl+R +// This is to prevent the default refresh behavior of the browser +document.addEventListener("keydown", function (e) { + // Prevent F5 key + if (e.key === 'F5' || e.keyCode === 116) { + e.preventDefault(); + // For Debug purposes + //appendFridaLog('[i] Refresh prevented (F5)'); + return false; + } + + // Prevent Ctrl+R + if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && (e.key === 'r' || e.keyCode === 82)) { + e.preventDefault(); + // For Debug purposes + //appendFridaLog('[i] Refresh prevented (Ctrl+R)'); + return false; + } +}, false); + +// Add event listeners to save settings when Monaco editor settings change +function addMonacoSettingsListeners() { + // Theme change listener + const themeSelect = document.getElementById("MonacoThemeSelect"); + if (themeSelect) { + themeSelect.addEventListener('change', function () { + // The setMonacoTheme function is already called by the onchange attribute, + // so we just need to save the settings + setTimeout(saveSettings, 100); + }); + } + + // Wrap toggle listener - add this only if the existing onclick doesn't save settings + const wrapToggle = document.getElementById("FermionMonacoWrap"); + if (wrapToggle) { + wrapToggle.addEventListener('click', function () { + // The existing onclick handler toggles the wrap state, + // we just need to save the settings afterward + setTimeout(saveSettings, 100); + }); + } +}