Skip to content

Add linked hover effect between popup header and extension button#1105

Open
CamilleGuillory wants to merge 3 commits into
tprouvot:releaseCandidatefrom
CamilleGuillory:feat/popup-header-clickable
Open

Add linked hover effect between popup header and extension button#1105
CamilleGuillory wants to merge 3 commits into
tprouvot:releaseCandidatefrom
CamilleGuillory:feat/popup-header-clickable

Conversation

@CamilleGuillory
Copy link
Copy Markdown
Contributor

@CamilleGuillory CamilleGuillory commented Feb 9, 2026

Describe your changes

This PR introduces synchronized hover states between the action button and the popup header using bidirectional communication. This ensures a consistent UI/UX when interacting with linked components.

Key Enhancements

CSS & Styling

  • Added .insext-btn-linked-hover class for synchronized hover states.
  • Applied visual brightness filters to the popup for enhanced feedback.

Communication Layer

  • Implemented postMessage logic to allow the button and popup header to communicate hover states bidirectionally.

Interactivity

  • Added event listeners to both the button and popup header to trigger cross-component highlights.
  • Updated the popup header to be clickable, allowing users to close the popup directly.

Issue ticket number and link

Checklist before requesting a review

  • I have read and understand the Contributions section
  • Target branch is releaseCandidate and not master
  • I have performed a self-review of my code
  • I ran the unit tests and my PR does not break any tests
  • I documented the changes I've made on the CHANGES.md and followed actual conventions
  • I added a new section on how-to.md (optional)

- Added `.insext-btn-linked-hover` class to button CSS for synchronized hover states
- Implemented bidirectional hover communication between button and popup header via postMessage
- Added hover event listeners to button that notify popup of hover state
- Added hover event listeners to popup header that notify button of hover state
- Made popup header clickable to close popup
- Applied visual hover effects (brightness filters) to popup
@CamilleGuillory CamilleGuillory force-pushed the feat/popup-header-clickable branch from 1578cce to edc7601 Compare February 10, 2026 21:39
…pup-header-clickable

# Conflicts:
#	CHANGES.md
#	addon/popup.css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant