New addon: `flag-menu` #8561

DNin01 · 2025-09-14T21:25:37Z

Resolves #7230

Changes

Adds a new addon which adds a context menu to the green flag. It lets you toggle turbo mode, higher framerate, and mute. Now mobile users can finally use turbo mode without having to enter the editor!
Related addons have been updated to utilize their context menu items.
Also fixed an issue that prevents the displayNoneWhileDisabled API from working on addons beginning with a number.

It looks like this:

*Context menu items (other than toggle turbo mode) only appear if their respective addons are enabled.

Tests

Tested on Edge 140 with a mouse and with DevTools Device Emulation.

To do:

Use touchstart instead of contextmenu
Localize
Dynamic disable, enable, and setting changes work for all updated addons
editor-dark-mode compatibility
editor-compact compatibility

mxmou

This addon should be enabled by default - otherwise touchscreen users can't use 60fps and mute-project at all without enabling it first.

After the React 18 update, it will be possible to navigate Scratch's context menus using arrow keys. It would be nice if the addon replicated that.

mxmou · 2025-09-15T08:20:00Z

addons/60fps/addon.json

A notice explaining how to access 60 FPS mode on a touch screen would be helpful. Same with mute-project.

That addon already has so much notice text. 🤣

Maybe add this information to the description instead?

Platform-specific descriptions, which I suggested in #3930 (comment), would also be useful here.

If you want to add "touchscreenOnly": true" to notices within this PR it's fine to me.

addons-l10n/en/flag-menu.json

addons/flag-menu/context_menu.css

DNin01 · 2025-09-15T21:22:32Z

This addon should be enabled by default.

Perhaps enabled by default only for mobile versions of the extension?

That's too much work, though. I'll just make it enabled by default.

After the React 18 update, it will be possible to navigate Scratch's context menus using arrow keys. It would be nice if the addon replicated that.

Ideally, I would make the context menu an instance of a React context menu so that React can take care of this. Not sure how, though. May just have to stick with custom handlers.

We don't use React within our project, do we? (We probably should.)

DNin01 · 2025-09-15T22:00:42Z

Okay, I got all those kinks worked out!

mxmou · 2025-09-16T16:14:03Z

Ideally, I would make the context menu an instance of a React context menu so that React can take care of this. Not sure how, though. May just have to stick with custom handlers.

Writing the event handlers is probably easier, especially because we currently need to support both versions of React. That's what I did when updating the context menu API. After the React 18 update is out, we can experiment with using Scratch's context menu component.

Speaking of React 18: if you don't mind, I'll push some changes to make the addon's styling work there.

DNin01 · 2025-09-16T18:59:39Z

Speaking of React 18: if you don't mind, I'll push some changes to make the addon's styling work there.

Sure, you know more about it than I do.

DNin01 · 2025-10-07T17:02:53Z

addons/flag-menu/userscript.js

+  let greenFlag;
+
+  const contextMenuClass =
+    addon.tab.scratchClass("context-menu_context-menu") || addon.tab.scratchClass("context-menu_context-menu-content"); // React 16 || React 18


Scratch updated React to 18 with the Face Sensing update, so this can be simplified. The style of the context menu was also changed, so some things may need to be tweaked.

I mean, Scratch's new context menu has no transition for fading in/out, it just appears immediately, plus there's arrow-key navigation and the width was reduced. Every other property applies automatically.

Scratch updated React to 18 with the Face Sensing update, so this can be simplified.

Done. I've also removed the opacity transition.

The React 18 update has been released, so we no longer need to support React 16.

DNin01 · 2025-10-08T01:39:23Z

After the React 18 update, it will be possible to navigate Scratch's context menus using arrow keys. It would be nice if the addon replicated that.

I don't know if Scratch uses this anymore, but react-contextmenu is in the package.json. If we used that library...

I know how to program arrow-key navigation myself, though.

DNin01 · 2025-10-08T02:50:44Z

Still working on an implementation that skips over invisible menu items, but here's what I have now. I think it's alright.

  export default async function ({ addon, console, msg }) {
    let greenFlag;
+   let contextMenuOpen = false;

    const contextMenu = Object.assign(document.createElement("nav"), {
      role: "menu",
      className: addon.tab.scratchClass("context-menu_context-menu-content", { others: "sa-flag-context-menu" }),
    });
+   const setHighlightedItem = (menuitem) => {
+     const currentItem = contextMenu.querySelector("[data-highlighted]");
+     if (currentItem) {
+       currentItem.removeAttribute("data-highlighted");
+       currentItem.tabIndex = -1;
+     }
+     if (menuitem) {
+       menuitem.setAttribute("data-highlighted", "");
+       menuitem.tabIndex = 0;
+       menuitem.focus();
+     }
+   }
    const createItem = (id, textContent = "") => {
      const item = Object.assign(document.createElement("div"), {
        role: "menuitem",
        className: addon.tab.scratchClass("context-menu_menu-item"),
        id,
        textContent,
      });
-     item.addEventListener("mouseenter", () => item.setAttribute("data-highlighted", ""));
-     item.addEventListener("mouseleave", () => item.removeAttribute("data-highlighted"));
+     item.addEventListener("mouseenter", () => setHighlightedItem(item));
+     item.addEventListener("mouseleave", () => setHighlightedItem());
      return item;
    };
    contextMenu.append(
      createItem("sa-flag-menu-turbo", msg("turbo-on")),
      createItem("sa-flag-menu-fps"),
      createItem("sa-flag-menu-mute")
    );

    function closeContextMenu() {
+     contextMenuOpen = false;
+     setHighlightedItem();
      contextMenu.classList.remove("sa-flag-menu-open");
    }
    document.addEventListener("mousedown", (e) => {
      if (!e.target.closest("[role='menu']")) closeContextMenu();
    });
    document.addEventListener("keydown", (e) => {
-     if (e.key === "Escape") closeContextMenu();
+     if (!contextMenuOpen) return;
+     switch (e.key) {
+       case "Escape":
+       case "Tab":
+         closeContextMenu();
+       break;
+       case "Enter":
+       case " ":
+         if (contextMenu.querySelector("[data-highlighted]")) contextMenu.querySelector("[data-highlighted]").click();
+       break;
+       case "ArrowUp":
+         const previousItem = contextMenu.querySelector("[data-highlighted]")?.previousElementSibling ?? contextMenu.lastElementChild;
+         setHighlightedItem(previousItem, true);
+       break;
+       case "ArrowDown":
+         const nextItem = contextMenu.querySelector("[data-highlighted]")?.nextElementSibling ?? contextMenu.firstElementChild;
+         setHighlightedItem(nextItem, true);
+       break;
+       case "Home":
+       case "PageUp":
+         setHighlightedItem(contextMenu.firstElementChild, true);
+       break;
+       case "End":
+       case "PageDown":
+         setHighlightedItem(contextMenu.lastElementChild, true);
+       break;
+     }
    });

    contextMenu.querySelector("#sa-flag-menu-turbo").addEventListener("click", () => {
      closeContextMenu();
      greenFlag.dispatchEvent(new MouseEvent("click", { bubbles: true, shiftKey: true }));
    });
    contextMenu.querySelector("#sa-flag-menu-fps").addEventListener("click", () => {
      closeContextMenu();
      greenFlag.dispatchEvent(new MouseEvent("click", { bubbles: true, altKey: true }));
    });
    contextMenu.querySelector("#sa-flag-menu-mute").addEventListener("click", () => {
      closeContextMenu();
      greenFlag.dispatchEvent(new MouseEvent("click", { bubbles: true, ctrlKey: true }));
    });

    contextMenu.style.visibility = "hidden"; // Setting visibility here fixes a visual glitch on dynamic enable
    addon.tab.displayNoneWhileDisabled(contextMenu);
    addon.self.addEventListener("disabled", closeContextMenu);

    addon.tab.traps.vm.on("TURBO_MODE_ON", () => {
      contextMenu.querySelector("#sa-flag-menu-turbo").textContent = msg("turbo-off");
    });
    addon.tab.traps.vm.on("TURBO_MODE_OFF", () => {
      contextMenu.querySelector("#sa-flag-menu-turbo").textContent = msg("turbo-on");
    });

    while (true) {
      greenFlag = await addon.tab.waitForElement("[class^='green-flag_green-flag']", {
        markAsSeen: true,
        reduxEvents: ["scratch-gui/mode/SET_PLAYER", "fontsLoaded/SET_FONTS_LOADED", "scratch-gui/locales/SELECT_LOCALE"],
      });

      greenFlag.parentElement.appendChild(contextMenu);
      greenFlag.addEventListener("contextmenu", (e) => {
        if (addon.self.disabled) return;
        e.preventDefault();
+       contextMenuOpen = true;
        contextMenu.classList.add("sa-flag-menu-open");
        contextMenu.style.left = e.clientX + "px";
        contextMenu.style.top = e.clientY + "px";
      });
    }
  }

DNin01 and others added 2 commits September 14, 2025 14:23

New addon: flag-menu

3eba40e

Format code

bda98f9

DNin01 requested a review from WorldLanguages as a code owner September 14, 2025 21:25

DNin01 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 Related to one or multiple addons platform: mobile Related to compatibility with touch screen devices labels Sep 14, 2025

DNin01 added 2 commits September 14, 2025 19:26

Localize addon

b53a8e5

Apply color and compact styles

fd5ecfb

DNin01 requested a review from Samq64 September 15, 2025 02:51

mxmou requested changes Sep 15, 2025

View reviewed changes

DNin01 removed the request for review from Samq64 September 15, 2025 16:20

Clone Scratch classes

e59a3c9

DNin01 added 3 commits September 15, 2025 14:34

toggle mute -> mute/unmute

d41f933

Remove default mute label text

bca6f24

toggle -> turn on/off

27772c4

Enable by default

4908047

DNin01 requested a review from mxmou September 15, 2025 22:03

mxmou and others added 2 commits September 16, 2025 21:39

React 18 support

01a9fd0

Format code

355742d

DNin01 added this to the v1.45.0 milestone Oct 6, 2025

DNin01 added the scope: addon api Related to the addon.* JS APIs or other ways for addons to provide features label Oct 6, 2025

DNin01 commented Oct 7, 2025

View reviewed changes

Simplify React 18 code

edcbd2e

The React 18 update has been released, so we no longer need to support React 16.

Simplify function parameters

1ccd23f

DNin01 modified the milestones: v1.45.0, v1.46.0 Dec 5, 2025

New addon: flag-menu #8561

Are you sure you want to change the base?

New addon: flag-menu #8561

Uh oh!

Conversation

DNin01 commented Sep 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Tests

Uh oh!

mxmou left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

DNin01 commented Sep 15, 2025

Uh oh!

DNin01 commented Sep 15, 2025

Uh oh!

mxmou commented Sep 16, 2025

Uh oh!

DNin01 commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DNin01 commented Oct 8, 2025

Uh oh!

DNin01 commented Oct 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

New addon: `flag-menu` #8561

New addon: `flag-menu` #8561

DNin01 commented Sep 14, 2025 •

edited

Loading

DNin01 commented Sep 16, 2025 •

edited

Loading