1.1.11

Features:

• Added automatic text rephrasing via GPT models to improve clarity and fluidity.
• Added direct buttons on the banner to enable/disable rephrasing and translation.
• Integrated a language selector in the banner to easily change the target language.
• Supported the Escape key to cancel the ongoing recording.

Improvements:

• Automatically hide the banner 4 seconds after the recording is cancelled.
• Bidirectional synchronization between the options and the control banner.
• Visual redesign of the banner with modern buttons and smooth animations.
• Visual optimization of the language selector (removal of double arrows).
• Added padding to the body to prevent the banner from covering content.

Internationalization:

• Added translated messages for the new features.
• Created an event system for dynamic translation management.

Framework:

• Updated constants to include rephrasing errors.
• Added a keyboard handler for detecting the Escape key.
• Improved the text processing flow to include the rephrasing step.

Fix: Preservation of Focus and Cursor during Banner Interactions
This update fixes a significant user experience issue where focus and cursor position were lost during interactions with the banner controls (rephrasing, translation buttons, language selector).

Improvements made:

• Added a system to memorize and restore focus and text selection.
• Captured focus on mousedown before interacting with controls.
• Intelligent restoration of cursor position after the interaction.
• Improved handling of delays (300ms) to ensure DOM stabilization.
• Specific management of the language selector, including cases where the user clicks elsewhere after it is opened.
• Double restoration of focus when cancelling recording with the Escape key.
• Robust checks to avoid errors on invalid elements.

These improvements ensure a smooth text editing experience without interruption, even when interacting with the extension's controls.

1. Consolidation of Duplicated Functions:

   • The showBanner function has been consolidated in ui.js and is now used by content.js.
   • The language lists have been centralized in a new module languages.js.

2. Extraction of CSS:

   • The inline CSS in content.js has been moved to content.css.
   • Manual CSS injection in content.js has been replaced by using an external CSS file.

3. Improvement in Module Loading:

   • The file languages.js has been added to the list of files to inject in background.js.
   • The i18n.js module is now explicitly loaded in background.js.

Benefits of these changes:

1. Better Separation of Concerns:

   • Display logic is now in ui.js.
   • Language data is centralized in languages.js.
   • Styles are managed in content.css.

2. Easier Maintenance:

   • It is now simpler to modify styles because they are in a dedicated CSS file.
   • Changes to user interface functions can be made in one place.

3. Improved Performance:

   • CSS is now injected by Chrome in an optimized manner.
   • Code duplication has been reduced.

4. Consolidation of Duplicated Functions:

   • The showBanner function has been consolidated in ui.js and is now used by content.js.
   • The language lists have been centralized in a new module languages.js.

5. Extraction of CSS:

   • The inline CSS in content.js has been moved to content.css.
   • Manual CSS injection in content.js has been replaced by using an external CSS file.

6. Modularization of the initBanner Function:

   • The long initBanner function has been decomposed into several smaller, specialized functions:
     • createBannerButton: Creates a control button with an icon and text.
     • createLanguageSelector: Creates the language selector.
     • initializeLanguageSelector: Initializes the selector with the available languages.
     • setupBannerEventListeners: Sets up event handlers for the buttons.
     • Additional utility functions for handling languages.

7. Code Cleanup:

   • Removed obsolete comments.
   • Removed unnecessary skipcq markers.

8. Improved Readability:

   • Better organization of functions.
   • Clearer documentation.

These improvements have led to:

1. Reduced code duplication.
2. Improved modularity and readability.
3. Easier future maintenance.
4. Reduced code size.

---

Additional Optimizations Implemented:

1. Enhancement of the handleActiveElementInsertion Function:

   • Reduced conditional checks.
   • Utilized destructuring to extract properties from elements.
   • Implemented a better insertion strategy for contentEditable elements with fallback.

2. Optimization of the insertTextIntoInput Function:

   • Simplified validation conditions.
   • Reduced code duplication for different insertion strategies.
   • Used destructuring to extract element values.
   • Calculated the new value only once regardless of the execution path.

3. Optimization of updateBannerColorOptions:

   • Early exit if the banner is unavailable.
   • Used a direct loop instead of Object.keys().forEach().
   • Simplified change verification.

4. Major Optimization of handleStorageChanges:

   • Cached DOM selectors to avoid repeated queries.
   • Employed a lazy-loading model for DOM elements.
   • Grouped DOM manipulations within requestAnimationFrame.
   • Optimized CSS animations.
   • Implemented more robust error handling.

Benefits:

1. Better Performance:

   • Fewer repetitive DOM operations.
   • More efficient use of modern browser APIs.
   • Reduced style recalculations and reflows.

2. More Robust Code:

   • Improved error and edge-case checks.
   • Reduced risk of diverging duplicated code.
   • Enhanced error handling.

3. Easier Maintainability:

   • More modular organization.
   • Clearer separation of concerns.
   • More readable code with explicit comments.

4. Resource Savings:

   • Minimized object creation.
   • Better memory utilization.
   • Fewer garbage collection triggers.