1673488 - [meta] InfoBar: backwards compatible BrowserNotification component

Status: RESOLVED DUPLICATE of bug 1678749

(Firefox :: Messaging System, enhancement, P1)

Description

[Ed Lee :Mardak]

Some BrowserNotification are high priority, e.g., those using gHighPriorityNotificationBox, and currently rendered at the top of content, which can be confusing or questions if they're content spoofing a message. We would like to move them to chrome area to be more trusted.

Comment 1

[Ed Lee :Mardak]

Attachment: quick mockup prototype default browser

Showing the idea of moving the "line of death" below the notification and making it feel more part of the chrome area

Comment 2

[Ed Lee :Mardak]

Attachment: quick mockup prototype popup blocked

Comment 3

[Tim Nguyen :ntim]

I agree the current one does look scary as it is.

It would be really nice to not end up with multiple notification components though, so it would really be preferable to:

• redesign the notificationbox component: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/notification.css
• moving gHighPriorityNotificationBox into #navigator-toolbox here: https://searchfox.org/mozilla-central/rev/277ab3925eae21b419167a34624ec0ab518d0c94/browser/base/content/browser.js#376-382

That should be enough to make the change you're proposing. Two things though:

• Multiple notifications can stack on top of each other, how would this look like in this case?
• Not every notification on top of the UI uses gHighPriorityNotificationBox, tabbrowser has a different one for some reason: https://searchfox.org/mozilla-central/source/browser/base/content/tabbrowser.js#776-785 . Could be worth just keeping only one, unless there are reasons to show 2 at once on top of the UI?

Comment 4

[Ed Lee :Mardak]

Attachment: prototype multiple infobars

(In reply to Tim Nguyen :ntim from comment #3)

It would be really nice to not end up with multiple notification components though

Yeah, thanks for the links. The plan is to reuse the existing components and adjust the styling in a way that's compatible with experiments. Because this touches both "chrome" and "content" areas, we'll likely need to set some :root[attr] to differently select which styles to apply potentially on a per-notification basis without actually changing the dom structure.

• Multiple notifications can stack on top of each other, how would this look like in this case?

Yeah some details we'll want to work through with UX. I've attached a screenshot of a naive unchanged behavior with prototype bar styling.

• Not every notification on top of the UI uses gHighPriorityNotificationBox, tabbrowser has a different one for some reason

The latter is to support per-tab notifications that automatically hide when switching to a different tab. The current idea is to maintain the existing dom structure and visually move the #navigator-toolbox { border-bottom: var(--chrome-content-separator-color) … line to .browserStack { border-top: … hopefully avoiding more involved changes that would require maintaining which tabs should show which notifications.

Comment 5

[Tim Nguyen :ntim]

(In reply to Ed Lee :Mardak from comment #4)

Created attachment 9190370 [details]
prototype multiple infobars

(In reply to Tim Nguyen :ntim from comment #3)

It would be really nice to not end up with multiple notification components though

Yeah, thanks for the links. The plan is to reuse the existing components and adjust the styling in a way that's compatible with experiments. Because this touches both "chrome" and "content" areas, we'll likely need to set some :root[attr] to differently select which styles to apply potentially on a per-notification basis without actually changing the dom structure.

WFM, not sure how the bottom notifications (e.g. crash reports) are going to look like btw.

• Multiple notifications can stack on top of each other, how would this look like in this case?

Yeah some details we'll want to work through with UX. I've attached a screenshot of a naive unchanged behavior with prototype bar styling.

Note that right now, we stack one behind the other, so only one is displayed at the time in the same notification-box, part of the details include that the notification box has the height of the largest notification no matter which one is shown. Bug 1596184 has some edge cases you can test with.

FWIW, the specific case you're showing are two different notification boxes I think (the global one for the default browser notification, the per-tab one for the popups), so that's not affected by what I mentioned.

Comment 6

[Ed Lee :Mardak]

(In reply to Ed Lee :Mardak from comment #4)

we'll likely need to set some :root[attr] to differently select which styles to apply

Looks like we have one from bug 1680069. Although we may need to additionally css select depending on how experiments will be run.

Comment 7

[Ed Lee :Mardak]

Attachment: prototype extending background image and color across toolbars and infobar

Currently the lightweight theme background image is only applied to the tab bar I believe and the toolbars use background-color: var(--toolbar-bgcolor); Potentially the image could be extended down even to the infobar, but maybe that should be a separate decision.

Comment 8

[Ed Lee :Mardak]

Looks like there's an official proton meta bug 1678749, so duping.