How to add toggle menu to 'view/title' with VSCode extension?

Question

How to add toggle menu to 'view/title' with VSCode extension?

Like "✓ Open Editors".

I'd really appreciate it if you could show me the sample code or an example.

I want to change 'Minify' to '✓ Minify'!

Answer 1

We have no control of the space in front of the menu item. And we can't use theme icons in the command title. The icon of a command is used when the menu entry is used in the group navigation and may another.

Simulate a checkmark with a Unicode character.

Create 2 menu entries, one with and one without the checkmark and use a when with a context variable to show one of the menu entries.

    "activationEvents": [
        "onCommand:myext.minify",
        "onCommand:myext.restore"
    ],
    "contributes": {
        "commands": [
          {
            "command": "myext.minify",
            "title": "  Minify"
          },
          {
            "command": "myext.restore",
            "title": "✓ Minify"
          }
        ],
        "menus": {
          "view/title": [
            {
              "command": "myext.minify",
              "when": "view == krews && !myext:isMinified"
            },
            {
              "command": "myext.restore",
              "when": "view == krews && myext:isMinified"
            }
          ]
        }
    }

Set a context variable with the state of the checkmark.

    const setMinifyContext = (isMinified) => {
      vscode.commands.executeCommand('setContext', 'myext:isMinified', isMinified);
    };
    context.subscriptions.push(
      vscode.commands.registerCommand('myext.minify', () => {
        setMinifyContext(true);
      })
    );
    context.subscriptions.push(
      vscode.commands.registerCommand('myext.restore', () => {
        setMinifyContext(false);
      })
    );
    setMinifyContext(false);