Bug 1690662 Comment 1 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

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](https://searchfox.org/mozilla-central/rev/d537e47349944c0fbd0100bd52c30e493e748c2e/browser/base/content/browser.xhtml#742-752), 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](https://searchfox.org/mozilla-central/rev/d537e47349944c0fbd0100bd52c30e493e748c2e/browser/components/customizableui/content/panelUI.js#905-920) 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](https://searchfox.org/mozilla-central/rev/d537e47349944c0fbd0100bd52c30e493e748c2e/browser/components/customizableui/content/panelUI.js#847-856) 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.
  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](https://searchfox.org/mozilla-central/rev/d537e47349944c0fbd0100bd52c30e493e748c2e/browser/base/content/browser.xhtml#742-752), 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](https://searchfox.org/mozilla-central/rev/d537e47349944c0fbd0100bd52c30e493e748c2e/browser/components/customizableui/content/panelUI.js#905-920) 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](https://searchfox.org/mozilla-central/rev/d537e47349944c0fbd0100bd52c30e493e748c2e/browser/components/customizableui/content/panelUI.js#847-856) 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.

Back to Bug 1690662 Comment 1