refactor: use existing functions and panels map

[marissahuysentruyt]

Description

Refactor ExtensionManager for Better Maintainability

Simplified panel management logic by leveraging existing helper methods and removing redundant code. This refactor makes the code more maintainable and aligns all methods with the "always reinitialize" design principle.

Changes

🧹 Removed Dead Code

• Removed unused isToggling and lastToggleTime properties from constructor
• Removed manual debouncing logic (not needed for extension icon toggles)

(Note: removing the debounce logic was supposed to have happened in #2, but I must have rebased incorrectly)

♻️ Refactored togglePanel()

• Simplified from 30+ lines to 14 lines
• Now properly delegates to openPanel() and closePanel() instead of duplicating logic
• Consistent behavior: always reinitializes panels for clean state as noted in the code comments
• Fixed: Previously had inconsistent conditional reinitialization

🔧 Fixed cleanupOrphanedPanels()

• Still queries the DOM with document.querySelectorAll('.cv-panel') (because orphaned panels would not be in the panel Map)
• Added call in initialize() to clean up orphaned panels on extension reload

🔧 Fixed closeAllPanels()

• Now uses cleanupOrphanedPanels() instead of duplicate cleanup code

✨ Added Panel Initialization

• Welcome panel now initialized in constructor for consistency

Benefits (according to Cursor 🤖)

• Simpler, more readable code
• Single source of truth for panel open/close logic
• Proper cleanup of orphaned panels from extension reloads
• Consistent with existing "always reinitialize" design pattern

---

Testing Instructions

Pull down the branch.

Build the Carbon Visualizer extension

npm install
npm run build

Chromium-based Browsers (Chrome, Edge, Brave, etc.)

1. Load the extension:

   • Open chrome://extensions/
   • Enable "Developer mode" (toggle in top-right)
   • Click "Load unpacked"
   • Select build/chrome/ directory

2. Test toggle functionality:

   • Navigate to any webpage
   • Launch the extension → Click the extension icon → Welcome panel should open
   • Click icon again → Panel should close with animation
   • Click icon again → Panel should reopen (freshly initialized)
   • You should see the #carbon-visualizer-welcome-panel element be added and removed from the DOM upon inspecting your test page.

Screen.Recording.2025-10-21.at.2.07.17.PM.mov

3. Test extension reload (orphaned panel cleanup):

   • Open the welcome panel
   • With panel still open, go back to chrome://extensions/
   • Click the reload button (↻) for Carbon Visualizer
   • Navigate back to your test page (the old welcome panel will probably still be open)
   • Click extension icon → New panel should open cleanly (no duplicates or ghost panels)

4. Check console:

   • Right-click on page → Inspect → Console tab
   • Look for cleanup logs during extension initialization
   • No errors should appear during toggle operations

Firefox

1. Load the extension:

   • Open about:debugging#/runtime/this-firefox
   • Click "Load Temporary Add-on"
   • Navigate to build/firefox/ and select manifest.json

2. Test toggle functionality:

   • Navigate to any webpage
   • Launch the extension → Click the extension icon → Welcome panel should open
   • Click icon again → Panel should close with animation
   • Click icon again → Panel should reopen (freshly initialized)
   • You should see the #carbon-visualizer-welcome-panel element be added and removed from the DOM upon inspecting your test page.

3. Test extension reload (orphaned panel cleanup):

   • Open the welcome panel
   • With panel still open, go back to about:debugging#/runtime/this-firefox
   • Click "Reload" button for Carbon Visualizer extension
   • Navigate back to your test page (the old welcome panel will probably still be open)
   • Click extension icon → New panel should open cleanly (no duplicates or ghost panels)

4. Check console:

   • Right-click on page → Inspect Element → Console tab
   • Look for cleanup logs during extension initialization
   • No errors should appear during toggle operations

Expected Behavior (Both Browsers)

• ✅ Panel toggles smoothly open/closed
• ✅ No duplicate panels appear on screen
• ✅ After extension reload, old panels are cleaned up automatically
• ✅ Panel state is fresh each time it opens
• ✅ No console errors during any operations
• ✅ Exit animations complete before DOM removal