New addon: blur background #7250

Jazza-231 · 2024-03-05T03:27:36Z

Resolves community suggestion

Changes

Adds an overlay that shows when a new variable, list, or custom block is created to blur the background

Reason for changes

It looks very nice, and just makes scratch more aesthetically pleasing.

Tests

Works fine on brave.

More

It doesn't do much on light mode purely because of the bright blue background overlay. (resolved)
I current check for the modal going away using an interval loop. This isnt great, so if anyone knows the redux event (if it exists) or a better way, please feel free to reveiw this pr. (resolved)

Jazza-231 · 2024-03-05T03:28:20Z

2024-03-05.11-21-24.1.mp4

Demo of it happening.

DNin01 · 2024-03-05T16:05:06Z

I once made something like this!

The fade-in/out effect looks pretty cool.

Jazza-231 · 2024-03-05T16:07:19Z

I once made something like this!

The fade-in/out effect looks pretty cool.

Oh you did? What happened to it? I'd like to see your implementation of it

And why thankyou, got the idea for the fade from a Minecraft mod lol, I think it just looks really nice

DNin01 · 2024-03-05T16:18:29Z

I once made something like this!

The fade-in/out effect looks pretty cool.

Oh you did? What happened to it? I'd like to see your implementation of it

I never opened a pull request, but it was part of an addon I made with multiple modal enhancements. The way I did it was by adding some style rules to the modal backdrop which meant there wasn't a fade out animation for closing the modal, which is why I like your implementation.

Jazza-231 · 2024-03-05T16:21:32Z

I once made something like this!
The fade-in/out effect looks pretty cool.

Oh you did? What happened to it? I'd like to see your implementation of it

I never opened a pull request, but it was part of an addon I made with multiple modal enhancements. The way I did it was by adding some style rules to the modal backdrop which meant there wasn't a fade out animation for closing the modal, which is why I like your implementation.

I actually thought of doing it that way too but decided not to, and I am curious about what other things you had in this addon? Maybe DM me cuz this is getting a bit off topic

Joeclinton1 · 2024-03-06T01:42:02Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

Jazza-231 · 2024-03-06T03:03:50Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

cough cough resizable-comment-input cough but yes, it is small, and I know i keep bringing this up but this would work GREAT for @RedGuy12 and I's tweaks idea

BroJac5246 · 2024-03-06T03:50:53Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

cough cough resizable-comment-input cough but yes, it is small, and I know i keep bringing this up but this would work GREAT for @RedGuy12 and I's tweaks idea

Yeah I'm really thinking that needs to become a thing because I want this addon but at the same time I agree it's small

Jazza-231 · 2024-03-06T04:43:33Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

cough cough resizable-comment-input cough but yes, it is small, and I know i keep bringing this up but this would work GREAT for @RedGuy12 and I's tweaks idea

Yeah I'm really thinking that needs to become a thing because I want this addon but at the same time I agree it's small

I'm biased but I do think so too, I'm not smart enough yet to think about starting that myself but yeah, it really is a great idea

mxmou · 2024-03-06T08:47:39Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

Editor dark mode already has a setting for the color of the modal backdrop, so this could be moved there.

Jazza-231 · 2024-03-06T08:50:21Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

Editor dark mode already has a setting for the color of the modal backdrop, so this could be moved there.

Yeah I can get behind that, anyone else just drop a like on this message and I'll do that (I still stand by the tweaks idea)

Joeclinton1 · 2024-03-06T10:37:50Z

It's too small to be an addon imo. This addon should either be merged with another addon or not made at all.

Editor dark mode already has a setting for the color of the modal backdrop, so this could be moved there.

I believe there should be an addon called aesthetic-enhancements and it should contain at least like 5 different enhancements that solely improve scratch's look (subjectively), where more can be added to later. This is perhaps the same as the "tweaks" idea previously mentioned. This is not to do with dark mode so it shouldn't go there. Once this aesthetic -enhancement addon has enough mini-addons (again I think 5 is enough) it can be released.

perhaps there are other PR's / issues which were previously closed for being too small which could be put in this.

Jazza-231 · 2024-03-06T10:48:57Z

That's pretty much the idea for tweaks, in a nutshell, they are an idea for SA 2.0 which contains small changes which no one would have a problem having on. Things like bug fixes and small changes like these. I'm sure there are a LOT of addons that would work better as a tweak rather than their own addon, and it also opens the door for more tweak-sized things to be made. The idea of tweaks is that they do not interrupt functionality, and can all be enabled by default, with little to no downsides. Things like this blur, ctrl + enter to post comments, and a lot more things would suit it well.

Joeclinton1 · 2024-03-06T11:07:29Z

That's pretty much the idea for tweaks, in a nutshell, they are an idea for SA 2.0 which contains small changes which no one would have a problem having on. Things like bug fixes and small changes like these. I'm sure there are a LOT of addons that would work better as a tweak rather than their own addon, and it also opens the door for more tweak-sized things to be made. The idea of tweaks is that they do not interrupt functionality, and can all be enabled by default, with little to no downsides. Things like this blur, ctrl + enter to post comments, and a lot more things would suit it well.

instead of 1 addon called "tweaks" there should be three addons: bug-fixes, aesthetic-enhancements, ux-enhancements.

(alternatively aesthetic-tweaks, ux-tweaks), and, except for bug fixes, it shouldn't be enabled by default, because who are we to subjectively decide what experience is best for scratch users.

Jazza-231 · 2024-03-06T11:09:30Z

That's pretty much the idea for tweaks, in a nutshell, they are an idea for SA 2.0 which contains small changes which no one would have a problem having on. Things like bug fixes and small changes like these. I'm sure there are a LOT of addons that would work better as a tweak rather than their own addon, and it also opens the door for more tweak-sized things to be made. The idea of tweaks is that they do not interrupt functionality, and can all be enabled by default, with little to no downsides. Things like this blur, ctrl + enter to post comments, and a lot more things would suit it well.

instead of 1 addon called "tweaks" there should be three addons: bug-fixes, aesthetic-enhancements, ux-enhancements.

Well it's not an addon, that's the whole point, it's whole other section dedicated to them, but yes I believe that was in our plans. Idk there might be an issue somewhere for tweaks, can't remember.

Samq64 · 2024-03-06T12:57:37Z

By just using CSS on the existing overlay I was able to get a nicer fade in animation that also works on the modal itself. The problem and probably the reason you didn't do that is because there's no way to fads it out since it's removed from DOM.

DNin01 · 2024-03-06T15:23:54Z

there's no way to fads it out since it's removed from DOM.

Yeah, that's what I ran into as mentioned earlier.

But what if we made that backdrop transparent and then put our own behind it, or reuse a parent element of the modal? That should allow us to add a proper fade-out animation, and this PR already does that for the blur effect.

DNin01 · 2024-03-06T15:25:46Z

As for making a general aesthetic enhancements addon, one thing I would propose is an option to make buttons more rounded.

We should make an issue before we go off-topic here.

Jazza-231 · 2024-03-06T15:46:29Z

there's no way to fads it out since it's removed from DOM.

Yeah, that's what I ran into as mentioned earlier.

But what if we made that backdrop transparent and then put our own behind it, or reuse a parent element of the modal? That should allow us to add a proper fade-out animation, and this PR already does that for the blur effect.

Are we talking about fading that overlay out too as well as this blur? That could be cool.. someone give me the green light and I'll work on that, I should be able to just make the current overlay go bye bye, add the colour to the blur overlay. The only thing I need is... How the hell do I use custom CSS variables? I do not understand them at all lol, I've tried learning about them but I do not understand them very well, if anyone can DM me a link or an explanation please do.

Samq64 · 2024-03-06T16:00:44Z

The only thing I need is... How the hell do I use custom CSS variables?

For just using your settings in CSS: var(--addonId-settingId)
https://scratchaddons.com/docs/develop/userstyles/#accessing-addon-settings-from-css

Generating new CSS variables based on those settings is a little more complicated: https://scratchaddons.com/docs/reference/addon-manifest/#customcssvariables

Jazza-231 · 2024-03-06T16:15:55Z

The only thing I need is... How the hell do I use custom CSS variables?

For just using your settings in CSS: var(--addonId-settingId)
https://scratchaddons.com/docs/develop/userstyles/#accessing-addon-settings-from-css

Generating new CSS variables based on those settings is a little more complicated: https://scratchaddons.com/docs/reference/addon-manifest/#customcssvariables

And variables from other addons? I would use the overlay colour from the editor colours addon yeah? (And thankyou)

RedGuy12 · 2024-03-06T16:18:37Z

And variables from other addons? I would use the overlay colour from the editor colours addon yeah? (And thankyou)

Yeah, and you can just reference that normally. Iirc, var() also supports defaults in case the addon isn't enabled and the var isn't defined: var(--editor-dark-mode-settingname, #000000) where #000000 is the default (you can even next var()s in the default if you need)

Jazza-231 · 2024-03-06T16:21:45Z

And variables from other addons? I would use the overlay colour from the editor colours addon yeah? (And thankyou)

Yeah, and you can just reference that normally. Iirc, var() also supports defaults in case the addon isn't enabled and the var isn't defined: var(--editor-dark-mode-settingname, #000000) where #000000 is the default (you can even next var()s in the default if you need)

Oh I didn't realise they would be in the global scope, sweet, thanks Paul

CubesterYT · 2024-03-08T12:13:11Z

2024-03-08.16-13-41.mp4

thoughts?

@Jazza-231 There's a slight delay when opening a pop up for the blur to come, it looks very odd.

Jazza-231 · 2024-03-08T12:14:36Z

2024-03-08.16-13-41.mp4

thoughts?

@Jazza-231 There's a slight delay when opening a pop up for the blur to come, it looks very odd.

I don't believe I can do anything about this, I'm using the Redux event (edit, no I'm not??? Uhm I'll look at it)

Jazza-231 · 2024-03-08T12:20:38Z

I dont think i can do anything, the delay seems to just be caused by the transition

Waakul · 2024-03-08T12:45:33Z

I dont think i can do anything, the delay seems to just be caused by the transition
The below code kind of makes the the process faster (it doesn't use addon api tho):

export default async function ({ addon, console }) {
  const overlay = document.createElement("div");
  overlay.classList.add("sa-blur-overlay");
  document.body.insertBefore(overlay, document.body.firstChild);

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      const modalOverlayExists = document.querySelector(".ReactModal__Overlay");
      overlay.classList.toggle("blur", modalOverlayExists);
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

This doesnt use a while true loop and delay, instead it uses a mutation observer.

Jazza-231 · 2024-03-08T12:49:45Z

I dont think i can do anything, the delay seems to just be caused by the transition
The below code kind of makes the the process faster (it doesn't use addon api tho):

export default async function ({ addon, console }) {
  const overlay = document.createElement("div");
  overlay.classList.add("sa-blur-overlay");
  document.body.insertBefore(overlay, document.body.firstChild);

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      const modalOverlayExists = document.querySelector(".ReactModal__Overlay");
      overlay.classList.toggle("blur", modalOverlayExists);
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

This doesnt use a while true loop and delay, instead it uses a mutation observer.

And does this work faster?

Waakul · 2024-03-08T12:51:44Z

I dont think i can do anything, the delay seems to just be caused by the transition
The below code kind of makes the the process faster (it doesn't use addon api tho):

export default async function ({ addon, console }) {
  const overlay = document.createElement("div");
  overlay.classList.add("sa-blur-overlay");
  document.body.insertBefore(overlay, document.body.firstChild);

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      const modalOverlayExists = document.querySelector(".ReactModal__Overlay");
      overlay.classList.toggle("blur", modalOverlayExists);
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

This doesnt use a while true loop and delay, instead it uses a mutation observer.

And does this work faster?

Yes, the event is instant now. But the blur has transition effects while the popup does not which makes an illusion like it's slow. but of course faster than the current one you have.
The solution would be to both use this userscript and try to add transition effects to the popup.

Jazza-231 · 2024-03-08T12:54:42Z

I dont think i can do anything, the delay seems to just be caused by the transition
The below code kind of makes the the process faster (it doesn't use addon api tho):
export default async function ({ addon, console }) {
  const overlay = document.createElement("div");
  overlay.classList.add("sa-blur-overlay");
  document.body.insertBefore(overlay, document.body.firstChild);

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      const modalOverlayExists = document.querySelector(".ReactModal__Overlay");
      overlay.classList.toggle("blur", modalOverlayExists);
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}
This doesnt use a while true loop and delay, instead it uses a mutation observer.
And does this work faster?
Yes, the event is instant now. But the blur has transition effects while the popup does not which makes an illusion like it's slow. but of course faster than the current one you have.
The solution would be to both use this userscript and try to add transition effects to the popup.

Transition effects to the pop-up would only work for fading in, not out as the pop-up is removed from the dom

Waakul · 2024-03-08T12:58:01Z

I dont think i can do anything, the delay seems to just be caused by the transition
The below code kind of makes the the process faster (it doesn't use addon api tho):
export default async function ({ addon, console }) {
  const overlay = document.createElement("div");
  overlay.classList.add("sa-blur-overlay");
  document.body.insertBefore(overlay, document.body.firstChild);

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      const modalOverlayExists = document.querySelector(".ReactModal__Overlay");
      overlay.classList.toggle("blur", modalOverlayExists);
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}
This doesnt use a while true loop and delay, instead it uses a mutation observer.
And does this work faster?
Yes, the event is instant now. But the blur has transition effects while the popup does not which makes an illusion like it's slow. but of course faster than the current one you have.
The solution would be to both use this userscript and try to add transition effects to the popup.
Transition effects to the pop-up would only work for fading in, not out as the pop-up is removed from the dom

Adding fade-out on closing isn't a matter cause as no one is gonna notice it.

addons/background-blur/userstyle.css

addons/background-blur/addon.json

Secret-chest · 2024-03-09T07:55:03Z

Have a setting in editor dark mode, since that's where the background colour is controlled.

Jazza-231 · 2024-03-09T08:12:44Z

Have a setting in editor dark mode, since that's where the background colour is controlled.

A setting for....?

Waakul · 2024-03-09T09:25:42Z

Consider sharing a video cause it's way better now, most people dont actually clone the branch and test it.

Waakul · 2024-03-09T09:26:39Z

addons/background-blur/addon.json

+  "description": "Blurs the background when you are creating a new variable, list, or custom block.",
+  "tags": ["theme", "editor", "codeEditor"],
+  "versionAdded": "1.37.0",
+  "credits": [{ "name": "Jazza", "link": "https://scratch.mit.edu/users/greeny--231" }],


@Jazza-231 Mind crediting me for the faster method?

Suggested change

"credits": [{ "name": "Jazza", "link": "https://scratch.mit.edu/users/greeny--231" }],

"credits": [

{ "name": "Jazza", "link": "https://scratch.mit.edu/users/greeny--231" },

{ "name": "Waakul", "link": "https://scratch.mit.edu/users/Waakul" }

],

CST1229 · 2024-03-09T14:17:09Z

A setting for....?

I assume turning this addon into a setting in editor-dark-mode.

Waakul · 2024-03-09T14:18:54Z

Have a setting in editor dark mode, since that's where the background colour is controlled.

What does blur background on popup have to do with editor dark mode lmao.

CST1229 · 2024-03-09T14:35:22Z

What does blur background on popup have to do with editor dark mode lmao.

(editor-dark-mode is Editor dark mode and customizable colors, and it already has a "Show workspace dots" setting so it isn't just for customizing colors.)

Waakul · 2024-03-09T14:36:50Z

What does blur background on popup have to do with editor dark mode lmao.

(editor-dark-mode is Editor dark mode and customizable colors.)

ik?, but it has nothing to do with blurring the background on a popup

DNin01 · 2024-03-09T15:55:35Z

Have a setting in editor dark mode, since that's where the background colour is controlled.

A setting for....?

This entire addon, but as a setting in Editor dark mode and customizable colors.

Secret-chest · 2024-03-09T19:48:14Z

What does blur background on popup have to do with editor dark mode lmao.

Background colour is already there.

Waakul · 2024-03-10T09:16:23Z

@Jazza-231

Resolves community suggestion

Changes

Adds an overlay that shows when a new variable, list, or custom block is created to blur the background

Reason for changes

It looks very nice, and just makes scratch more aesthetically pleasing.

Tests

Works fine on brave.

More

It doesn't do much on light mode purely because of the bright blue background overlay. I current check for the modal going away using an interval loop. This isnt great, so if anyone knows the redux event (if it exists) or a better way, please feel free to reveiw this pr.

You are no longer using interval loops, edit it.

Jazza-231 · 2024-03-10T10:14:47Z

Background colour is already there.

So, is the general consensus that this should be moved there?

You are no longer using interval loops, edit it.

What?

Waakul · 2024-03-10T10:16:39Z

Background colour is already there.

So, is the general consensus that this should be moved there?

You are no longer using interval loops, edit it.

What?

you are no longer using interval loops, so change it in the desc of this pr (you mentioned there you are using interval loops)

WorldLanguages · 2024-03-10T21:30:35Z

This PR already contains dozens of comments. It would have been nicer to create an issue first.

Jazza-231 · 2024-03-11T02:36:31Z

This PR already contains dozens of comments. It would have been nicer to create an issue first.

I always do that don't I
Aight I swear next time if it's not discussed ill try to rememebr to make an issue

WorldLanguages · 2024-03-13T20:04:00Z

addons/background-blur/userscript.js

+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });


I'm pretty sure running a querySelector each time there's any change on the body would hurt performance, specially inside the editor.

Hence why I did not go with this method...they seemed quite adamant though and I didn't feel like arguing

Jazza-231 · 2024-03-25T01:40:48Z

Can we get an update on this? I'm ok if its put on the backburner until (I will literally never stop talking about this idea) tweaks, as it really does fit better there

init

dd9f693

Jazza-231 requested a review from WorldLanguages as a code owner March 5, 2024 03:27

Samq64 added type: enhancement New feature for the project new addon Related to new addons to this extension. `scope: addons` should still be added. scope: addon.json About the addon.json file structure labels Mar 5, 2024

DNin01 added scope: addon Related to one or multiple addons and removed scope: addon.json About the addon.json file structure labels Mar 5, 2024

Waakul reviewed Mar 8, 2024

View reviewed changes

addons/background-blur/userstyle.css Show resolved Hide resolved

Jazza-231 added 2 commits March 9, 2024 09:16

use mutation observer

9451380

fade modal content in

5fd1934

Waakul reviewed Mar 9, 2024

View reviewed changes

addons/background-blur/addon.json Outdated Show resolved Hide resolved

Waakul reviewed Mar 9, 2024

View reviewed changes

new name

0e1ceef

WorldLanguages reviewed Mar 13, 2024

View reviewed changes

New addon: blur background #7250

Are you sure you want to change the base?

New addon: blur background #7250

Conversation

Jazza-231 commented Mar 5, 2024 • edited

Changes

Reason for changes

Tests

More

Jazza-231 commented Mar 5, 2024

DNin01 commented Mar 5, 2024

Jazza-231 commented Mar 5, 2024

DNin01 commented Mar 5, 2024

Jazza-231 commented Mar 5, 2024

Joeclinton1 commented Mar 6, 2024

Jazza-231 commented Mar 6, 2024

BroJac5246 commented Mar 6, 2024

Jazza-231 commented Mar 6, 2024

mxmou commented Mar 6, 2024

Jazza-231 commented Mar 6, 2024 • edited

Joeclinton1 commented Mar 6, 2024 • edited

Jazza-231 commented Mar 6, 2024 • edited

Joeclinton1 commented Mar 6, 2024 • edited

Jazza-231 commented Mar 6, 2024

Samq64 commented Mar 6, 2024 • edited

DNin01 commented Mar 6, 2024

DNin01 commented Mar 6, 2024

Jazza-231 commented Mar 6, 2024

Samq64 commented Mar 6, 2024 • edited

Jazza-231 commented Mar 6, 2024

RedGuy12 commented Mar 6, 2024 • edited

Jazza-231 commented Mar 6, 2024

CubesterYT commented Mar 8, 2024 • edited

Jazza-231 commented Mar 8, 2024 • edited

Jazza-231 commented Mar 8, 2024 • edited

Waakul commented Mar 8, 2024 • edited

Jazza-231 commented Mar 8, 2024

Waakul commented Mar 8, 2024 • edited

Jazza-231 commented Mar 8, 2024

Waakul commented Mar 8, 2024

Secret-chest commented Mar 9, 2024

Jazza-231 commented Mar 9, 2024

Waakul commented Mar 9, 2024

Waakul Mar 9, 2024 • edited

Choose a reason for hiding this comment

CST1229 commented Mar 9, 2024

Waakul commented Mar 9, 2024

CST1229 commented Mar 9, 2024 • edited

Waakul commented Mar 9, 2024

DNin01 commented Mar 9, 2024

Secret-chest commented Mar 9, 2024

Waakul commented Mar 10, 2024 • edited

Changes

Reason for changes

Tests

More

Jazza-231 commented Mar 10, 2024

Waakul commented Mar 10, 2024 • edited

WorldLanguages commented Mar 10, 2024

Jazza-231 commented Mar 11, 2024

WorldLanguages Mar 13, 2024

Choose a reason for hiding this comment

Jazza-231 Mar 14, 2024

Choose a reason for hiding this comment

Jazza-231 commented Mar 25, 2024

Jazza-231 commented Mar 5, 2024 •

edited

Jazza-231 commented Mar 6, 2024 •

edited

Joeclinton1 commented Mar 6, 2024 •

edited

Jazza-231 commented Mar 6, 2024 •

edited

Joeclinton1 commented Mar 6, 2024 •

edited

Samq64 commented Mar 6, 2024 •

edited

Samq64 commented Mar 6, 2024 •

edited

RedGuy12 commented Mar 6, 2024 •

edited

CubesterYT commented Mar 8, 2024 •

edited

Jazza-231 commented Mar 8, 2024 •

edited

Jazza-231 commented Mar 8, 2024 •

edited

Waakul commented Mar 8, 2024 •

edited

Waakul commented Mar 8, 2024 •

edited

Waakul Mar 9, 2024 •

edited

CST1229 commented Mar 9, 2024 •

edited

Waakul commented Mar 10, 2024 •

edited

Waakul commented Mar 10, 2024 •

edited