1690662 - Add a section at the top of the Proton AppMenu for things like update banners

Status: RESOLVED FIXED

(Firefox :: Menus, task, P1)

Description

[Mike Conley (:mconley) (:⚙️)]

A more crystalized description of what's required here is forthcoming in an upcoming comment.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

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:

1. 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 appMenuProton-addon-banners and appMenuProton-update-banner.
2. Manually check to see if this function is smart enough to choose the appMenuProton-update-banner when browser.proton.appmenu.enabled is 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!
3. Update this chunk of code to return the appMenuProton-addon-banners if PanelUI.protonAppMenuEnabled is true. I think that'll get us the add-on notifications working, but that needs to be tested.
4. 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 true.
5. Do styling work for the Firefox Update banner. In particular:
   1. The background colour of the update banner should be rgba(209,255,238,1);
   2. The banner should have a border radius of 4px.
   3. The banner should have internal padding of 8px.
   4. 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.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

I'm going to take a run at this today.

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Attachment: Bug 1690662 - Port the add-on and browser update banners to the Proton AppMenu. r?ewright!

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/51f787a8d546
Port the add-on and browser update banners to the Proton AppMenu. r=ewright

Comment 5

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/51f787a8d546