Closed Bug 1673488 Opened 6 months ago Closed 3 months ago

[meta] InfoBar: backwards compatible BrowserNotification component

Categories

(Firefox :: Messaging System, enhancement, P1)

enhancement

Tracking

()

RESOLVED DUPLICATE of bug 1678749

People

(Reporter: Mardak, Unassigned)

References

(Blocks 2 open bugs)

Details

(Keywords: meta)

Attachments

(4 files)

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.

Priority: -- → P1

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

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:

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

Blocks: proton
Summary: [meta] High Priority Messaging: backwards compatible BrowserNotification component → [meta] InfoBar: backwards compatible BrowserNotification component

(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.

(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.

(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.

Depends on: 1680069

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.

Depends on: 1682676

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

Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: proton-infobars
You need to log in before you can comment on or make changes to this bug.