Replace content script notifications

[fregante]

• Fixes Isolate styles for notifications on host page #2096

For now this PR only replaces $.notify to improve the style and prepare them to be wrapped in a single shadowed container. It can already be merged, probably, and I'll build on this.

Since the module only uses inline style, the shadow DOM isn't necessary to avoid leaks. Maybe the all property avoids incorrect settings. However I don't know which sites you found issues on.

Demo

You can see the notification under the modal because I had enabled "notifyProgress" in reducePipeline

Screen.Recording.7.mov

[fregante]

I think isolating these would only take:

• add shadow DOM to avoid inheriting styles
• that's it

I doubt it uses any rem and if it does we can override them via inline styles.

I just need some sites to test this on.

[twschiller]

Let me see if I can put together a list of public-ish places we've had issues. The icon alignment issue for the old library occurred across a number of sites

• LinkedIn uses rem

[fregante]

LinkedIn:

Screen.Recording.1.mov

LinkedIn uses rem

Whether the host page uses them doesn't affect us, it's all good as long as we don't use rem.

The good part of hot-toast is that it only uses div and generated classes, so chances of conflict are slim:

Should we encounter issues, then yes, we can just wrap it in a shadow DOM in 2 lines. However it currently does not support it:

• Support for ShadowDOM timolins/react-hot-toast#139

[twschiller]

Nice! Didn't know the all: inherit trick

Initially I thought keeping in the upper right would be good for consistency with our current ones. But then I realized that our current ones have an issue where they're hidden by the sidebar

What is the z-index of these alerts? In the old code we forced it to the max: http://github.com/pixiebrix/pixiebrix-extension/blob/cbd8d906edcdde1e6b9d27b79b7ae4d31a873716/src/styles.css#L18-L18

• Remove old notify-js styles
• Ensure z-index

[twschiller]

During QA I noticed the first notification isn't show? https://www.loom.com/share/233b31fe3be1493aa2a747993be18223

• First notification not being shown

[twschiller]

See notes

[fregante]

During QA I noticed the first notification isn't show? loom.com/share/233b31fe3be1493aa2a747993be18223

Good catch! I guess that's because React’s rendering is async so calling render() and toast() in the same tick makes the toast library abort operations (because the root isn't ready yet).

I fixed this by always adding this root to the document instead of just in time.

Questions:

• Any style/duration tweaks? https://react-hot-toast.com/docs/toast#default-durations
• Bricks seem to use Notify.js’ options directly, can we replace them with a simple {duration, type} object or would that be a breaking change? Currently I'm only using the notification type (className) and discarding the rest.

[fregante]

new.style.mov

[twschiller]