Echo currently maintains 2 versions of the badge that users interact with:
- The initial server side rendered version (usually rendered by skins))
- A client side OOUI version that is rendered when the badge is clicked (replacing the existing version)
We've accumulated various technical debt over the years of skins having to maintain their own styles whenever the OOUI button is rendered
Proposed solution
Please progressively enhance the existing button rather than replacing it.
QA
- When clicking the button a PopupWidget should be shown pointing to the existing button
- mw.hook should be used to update the notification count
Requirement
Echo should enhance the server-rendered notification and inbox icons in Vector skin by attaching the PopupWidget to them directly, instead of replacing them with new OOUI buttons on client-side render.
BDD
Feature: Progressive enhancement of Echo notification UI Scenario: Notification button is progressively enhanced Given I am using the Vector skin When I click the Notifications button in the top right Then a PopupWidget appears pointing to the same button without replacing it Scenario: Inbox button is progressively enhanced Given I am using the Vector skin When I click the Inbox button in the top right Then a PopupWidget appears pointing to the same button without replacing it
Test Steps
Test Case 1: Notification button enhanced with PopupWidget
- Visit any page on https://en.wikipedia.beta.wmflabs.org while logged in and using the Vector skin.
- Open DevTools and inspect the notification bell element.
- Confirm that it is *not* re-rendered or replaced with a new button on page load.
- Click the notification (bell) icon.
- AC1: A PopupWidget appears anchored to the existing button.
Test Case 2: Inbox button enhanced with PopupWidget
- Stay logged in on Vector skin on any page (e.g., https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page).
- Inspect the inbox icon.
- Confirm the element is not re-rendered on click.
- Click the inbox (tray/mail) icon.
- AC2: A PopupWidget appears pointing to the original inbox button.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T343838#10868217 |
| 2 | ✅ | T343838#10868217 |
