There are two kinds of banners at the top of the AppMenu: Add-on update banners (an add-on needs new permissions, an add-on was sideloaded), and Firefox update notifications.
The good news is that it appears as if the code that powers the population of those banners has been nicely decoupled from the code that's responsible for actually doing the DOM manipulation for adding them! This means that panelUI.js appears to be mainly responsible for handling the DOM manipulations, which is great because panelUI.js can differentiate between the Proton AppMenu main view and the original main view.
So here's how I think we can break this work down:
- Add two new items at the top of the Proton AppMenu, as the first child of the
panel-subview-body. Those two items should resemble these items, but I think we should give them unique Proton-specific IDs, like
- Manually check to see if this function is smart enough to choose the
true. I think it will be, since it looks like it's querySelector'ing into the main view for the
.panel-banner-item class - so as long as the
appMenuProton-update-banner has that class, I think we're good - but we should test that. If so, I think we're probably home free on the structural work for the Firefox update banner!
- Update this chunk of code to return the
PanelUI.protonAppMenuEnabled is true. I think that'll get us the add-on notifications working, but that needs to be tested.
- Find any pre-existing automated tests that exercise those update banners, and see if they work if the
browser.tabs.proton.appmenu pref is set to
- Do styling work for the Firefox Update banner. In particular:
- The background colour of the update banner should be
- The banner should have a border radius of 4px.
- The banner should have internal padding of 8px.
- The banner should have 8px of margin space between itself and the left/right panel edges or other items above or below.
I don't have styling data for the add-on banners yet, but this should be enough to get us started.