1921325 - Replace new tab toast notification with moz-message-bar

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[Tim Giles [:tgiles]]

When creating the the thumbs up/down feature for stories on new tab, a custom toast component was created. This custom toast component is very similar to the moz-message-bar and should be replaced with moz-message-bar for maintainability.

https://searchfox.org/mozilla-central/rev/a2faa4127e3d08e663efb2db42c68afcb06a9b76/browser/components/newtab/content-src/components/Notifications/Notifications.jsx#51-55 is the relevant code in new tab.

Comment 1

[Mark Striemer [:mstriemer]]

I think we'll have a bit of a snag with the event that the moz-message-bar dispatches when the message bar is dismissed. Since it doesn't have an event name that React recognizes we don't have a convenient way of adding the listener using onEventName directly. There's a @lit/react package that is intended to help with this which would be a nice solution in the future. For now we can likely grab a reference to the moz-message-bar though and manually add the event listener. Looking at the code for @lit/react/createComponent may be helpful, but may be overkill for a one-off. It looks like it uses React.useLayoutEffect() to get a callback when the element is created/updated

Comment 2

[Mark Kennedy [:mark]]

Attachment: Bug 1921325 - Replace new tab toast notification with moz-message-bar r=#recomp-reviewers,#desktop-theme-reviewers

• Make moz-message-bar reusable component available to New Tab page

• Replace custom implementation with reusable moz-message-bar component

• Remove all unnecessary CSS styling of custom implementation

• Use new Fluent IDs that adhere to the structure of moz-message-bar usage

• Consolidate Thumbs up and Thumbs down logic into same component to avoid duplicating code unnecessarily

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a136034059db
Replace new tab toast notification with moz-message-bar r=reusable-components-reviewers,desktop-theme-reviewers,fluent-reviewers,home-newtab-reviewers,hjones,maxx,flod

Comment 4

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/a136034059db