1845150 - Use moz-message-bar instead of message-bar in notificationbox.js

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

The code in notificationbox.js handles creating info bars that are displayed at the top of web pages in the chrome when certain events occur. Currently the NotificationMessage element extends the message-bar element: https://searchfox.org/mozilla-central/source/toolkit/content/widgets/notificationbox.js#611-614

Now that moz-mesage-bar is available we should us it as the base class for NotificationMessage instead of message-bar. This will solve the issue of in-content/common-shared.css getting pulled into the chrome, which has been a side effect of the current NotificationMessage setup.

There will likely be changes that need to be made to reflect the fact that moz-message-bar has a different API from message-bar - it's more controlled and no longer based around having a single <slot>. Also notificationbox.js adds a number of classes to the message bar element. These styles currently live in message-bar.css, but we removed them from moz-message-bar.css so we may have to add a new stylesheet that gets pulled in to Notificationmessages only.

Comment 1

[Hanna Jones [:hjones]]

Attachment: Example of an infobar message

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Use moz-message-bar instead of message-bar in notificationbox.js r=#recomp-reviewers

Comment 3

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Update notificationbox usage for search engine removal notification r=#search-reviewers

Notification can be triggered locally via this snippet:

BrowserSearch.removalOfSearchEngineNotificationBox("Google", "Foogle")

Depends on D189872

Comment 4

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Update usage of notificationbox in InfoBar r=#recomp-reviewers

There are some tests you can run to see how this looks, but I've also been verifying things locally by running this snippet in the browser toolbox:

const { InfoBar } = ChromeUtils.import(
  "resource://activity-stream/lib/InfoBar.jsm"
);
const { CFRMessageProvider } = ChromeUtils.importESModule(
  "resource://activity-stream/lib/CFRMessageProvider.sys.mjs"
);
let message = (await CFRMessageProvider.getMessages()).find(
	m => m.id === "INFOBAR_ACTION_86"
);
InfoBar.showInfoBarMessage(
    BrowserWindowTracker.getTopWindow().gBrowser.selectedBrowser,
    {
      ...message,
      content: {
        priority: window.gNotificationBox.PRIORITY_WARNING_HIGH,
        ...message.content,
      },
    },
    {}
);

Depends on D194312

Comment 5

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Update notificationbox usage for captive portal notification r=#recomp-reviewers

Can be tested locally by running this code in the browser toolbox:

gBrowser.selectedBrowser.ownerGlobal.CaptivePortalWatcher._showNotification();

Depends on D194313

Comment 6

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Update notificationbox usage for crash notifications r=#recomp-reviewers

I've been testing locally with these snippets in the browser toolbox:

const { TabCrashHandler } = ChromeUtils.importESModule("resource:///modules/ContentCrashHandlers.sys.mjs");
TabCrashHandler.showSubFrameNotification(gBrowser.selectedBrowser, "foo", "bar");

const { UnsubmittedCrashHandler } = ChromeUtils.importESModule("resource:///modules/ContentCrashHandlers.sys.mjs");
UnsubmittedCrashHandler.show({ notificationId: "foo", reportIDs: [], onAction: () => {}});

Depends on D194314

Comment 7

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Update notificationbox usage for process hang notification r=#recomp-reviewers

Can be tested locally using this snippet (which I think I took from a test...):

let addonId = "test";
let policy = new WebExtensionPolicy({
    name: "Scapegoat",
    id: addonId,
    mozExtensionHostname: Services.uuid.generateUUID().number.slice(1, -1),
    baseURL: "file:///",
    allowedOrigins: new MatchPatternSet([]),
    localizeCallback() {},
});
policy.active = true;
ProcessHangMonitor.showNotification(window, { addonId, scriptBrowser: { browsingContext: { watchedByDevTools: false }} });

Depends on D194315

Comment 8

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - Update notificationbox usage for heartbeat notifications r=#recomp-reviewers

Can be tested locally with this snippet:

const { Heartbeat } = ChromeUtils.importESModule(
  "resource://normandy/lib/Heartbeat.sys.mjs"
);
new Heartbeat(window, {
    testing: true,
    flowId: "test",
    message: "This is a test message!",
    engagementButtonLabel: undefined,
    learnMoreMessage: "Learn More",
    learnMoreUrl: "https://example.org/learnmore",
});

Depends on D194316

Comment 9

[Hanna Jones [:hjones]]

Attachment: Bug 1845150 - fix .footer-button colors in high contrast mode r=#recomp-reviewers,#desktop-theme-reviewers

This is only sort of related to the rest of the patches in the stack, but when using the .footer-button class in the info-bar I realized the styles don't change in HCM, which seemed worth fixing. These styles can be seen in action in the ETP panel or in the customize mode screen.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

There are some r+ patches which didn't land and no activity in this bug for 2 weeks.
:hjones, could you have a look please?
If you still have some work to do, you can add an action "Plan Changes" in Phabricator.
For more information, please visit BugBot documentation.

Comment 11

[Henrik Skupin [:whimboo][⌚️UTC+2]]

Not sure why I was selected for needinfo. Maybe because I reviewed a tiny bit of a patch as last person? Clearing...

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7477fd1c48fa
Use moz-message-bar instead of message-bar in notificationbox.js r=webdriver-reviewers,desktop-theme-reviewers,media-playback-reviewers,reusable-components-reviewers,karlt,whimboo,tgiles,dao
https://hg.mozilla.org/integration/autoland/rev/91365291f80f
Update notificationbox usage for search engine removal notification r=search-reviewers,fluent-reviewers,Standard8,bolsson
https://hg.mozilla.org/integration/autoland/rev/a75fe63bd39f
Update usage of notificationbox in InfoBar r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/f66e8bb15e18
Update notificationbox usage for captive portal notification r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/6c405863be54
Update notificationbox usage for crash notifications r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/ba7789c89bdd
Update notificationbox usage for process hang notification r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/fdc3f1b5e5ae
Update notificationbox usage for heartbeat notifications r=reusable-components-reviewers,tgiles

Comment 13

[Cosmin Sabou [:CosminS]]

Backed out for causing dt failures on browser_screenshot_button_warning.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=fdc3f1b5e5aee8be94bfb39eeaf12434e94fe328&selectedTaskRun=LD4yKMHuTdKRVPJd-KEZKA.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=442161412&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/45416e4c25092dbc29cd07d468894e8e9689516b

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/683745289588
Use moz-message-bar instead of message-bar in notificationbox.js r=webdriver-reviewers,desktop-theme-reviewers,media-playback-reviewers,karlt,whimboo,tgiles,dao,devtools-reviewers
https://hg.mozilla.org/integration/autoland/rev/7aa4340bfd96
Update notificationbox usage for search engine removal notification r=search-reviewers,fluent-reviewers,Standard8,bolsson
https://hg.mozilla.org/integration/autoland/rev/ada948351267
Update usage of notificationbox in InfoBar r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/83190b8a08d0
Update notificationbox usage for captive portal notification r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/46cfe5fe6e6a
Update notificationbox usage for crash notifications r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/0016d7f4e556
Update notificationbox usage for process hang notification r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/a07c835a4bf7
Update notificationbox usage for heartbeat notifications r=reusable-components-reviewers,tgiles

Comment 15

[Norisz Fay [:noriszfay]]

Backed out for causing failures on browser_datachoices_notification.js

Backout link

Push with failures

Failure log

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/598874fd4b8e
Use moz-message-bar instead of message-bar in notificationbox.js r=webdriver-reviewers,desktop-theme-reviewers,media-playback-reviewers,karlt,whimboo,tgiles,dao,devtools-reviewers
https://hg.mozilla.org/integration/autoland/rev/1a3e1eda40b0
Update notificationbox usage for search engine removal notification r=search-reviewers,fluent-reviewers,Standard8,bolsson
https://hg.mozilla.org/integration/autoland/rev/9ae523de438c
Update usage of notificationbox in InfoBar r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/18b04346d36c
Update notificationbox usage for captive portal notification r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/e5876a299cdd
Update notificationbox usage for crash notifications r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/e0beffc85b9b
Update notificationbox usage for process hang notification r=reusable-components-reviewers,tgiles
https://hg.mozilla.org/integration/autoland/rev/fe54bf7adef0
Update notificationbox usage for heartbeat notifications r=reusable-components-reviewers,tgiles

Comment 17

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/598874fd4b8e
https://hg.mozilla.org/mozilla-central/rev/1a3e1eda40b0
https://hg.mozilla.org/mozilla-central/rev/9ae523de438c
https://hg.mozilla.org/mozilla-central/rev/18b04346d36c
https://hg.mozilla.org/mozilla-central/rev/e5876a299cdd
https://hg.mozilla.org/mozilla-central/rev/e0beffc85b9b
https://hg.mozilla.org/mozilla-central/rev/fe54bf7adef0