ENA-83: Ability to Zoom In and Zoom Out responsively

[dmalan]

Expected Behavior

In the browser version of Scratch, it's possible to Zoom In and Zoom Out responsively, as via command-plus and command-minus on a Mac, whereby the entire UI resizes (not just the code area).

We use such when teaching on a projector (zooming in 150% typically), so as to make UI elements more visible, particularly for students farther back.

Actual Behavior

As best I can tell on the desktop version, there might not be a similar feature, unless it's another set of keyboard shortcuts?

By contrast, Electron apps like VS Code desktop do to resize with command-{plus,minus}, per https://github.com/microsoft/vscode/blob/main/src/vs/platform/window/electron-sandbox/window.ts. And a manual workaround (e.g., for a teacher in class) seems to be executing document.body.style.zoom = '150%' in Electron's dev tools

Steps to Reproduce

1. Install https://scratch.mit.edu/download for macOS.
2. Launch Scratch desktop app.
3. Try to zoom in/out with command-{plus,minus}.

System Details

macOS 12.5.1, Scratch desktop 3.29.1.

Screenshots

Browser version, zoomed in

Desktop version, not zoomed in

Thank you!

CC @rongxin-liu @carterzenke

[cwillisf]

We should definitely implement a way to adjust the overall zoom! Not only is it helpful for presenting to a room, as you suggested, but it can also be an accessibility feature for an individual.

Here's a workaround for people who are comfortable with the browser console, though it's a poor substitute for the proper feature. Note that this works only in the Mac or Windows app, not on the web or Android / Chrome OS versions. (We also need to implement zoom in the Android app!)

First, open the browser console with Ctrl+Shift+i on Windows, or Cmd+Opt+i on Mac. Then, type this in the console:

const {webFrame} = require('electron');
webFrame.setZoomLevel(1);
webFrame.setZoomFactor(1.3);

You can use setZoomLevel to change the zoom in browser-defined increments, where 0 means "normal" zoom, or setZoomFactor to set the zoom level exactly, where 1 means 100% zoom.

More information is available here: https://zeke.github.io/electron.atom.io/docs/api/web-frame/

[cwillisf]

Somewhat related to LLK/scratch-android#58

[domluther]

We should definitely implement a way to adjust the overall zoom! Not only is it helpful for presenting to a room, as you suggested, but it can also be an accessibility feature for an individual.

Here's a workaround for people who are comfortable with the browser console, though it's a poor substitute for the proper feature. Note that this works only in the Mac or Windows app, not on the web or Android / Chrome OS versions. (We also need to implement zoom in the Android app!)

First, open the browser console with Ctrl+Shift+i on Windows, or Cmd+Opt+i on Mac. Then, type this in the console:

const {webFrame} = require('electron');
webFrame.setZoomLevel(1);
webFrame.setZoomFactor(1.3);

You can use setZoomLevel to change the zoom in browser-defined increments, where 0 means "normal" zoom, or setZoomFactor to set the zoom level exactly, where 1 means 100% zoom.

More information is available here: https://zeke.github.io/electron.atom.io/docs/api/web-frame/

Given that code works just fine (but is very fiddly to do), could this please be added to a feature? As mentioned, I can change the visibility of the code but it means the blocks themselves can be very hard for students to see.