microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.74k stars 28.72k forks source link

Hide editor context menu items #75930

Closed idanpa closed 4 years ago

idanpa commented 5 years ago

After installing extensions the editor's context menu may become really bloated and hard to reach. Extensions authors usually give the option the remove their menu items, but it would be nice to be able to remove the default ones.

I usually not using any of the Copy/Cut/Paste menus, and I certainly not using the Command Palette... item (when I use the command palette my hands are already on the keyboard).

(This issue is similar to #3874, but for the context menu)

vscodebot[bot] commented 5 years ago

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

vscodebot[bot] commented 4 years ago

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

ghost commented 4 years ago

Yes. There should be a way to hide items from context menu just like with status bar in 1.36.1.

ghost commented 4 years ago

9285

douira commented 2 years ago

I'm also interested in this. Some extensions add context menu entries that I don't want or are just in the way. There should be a settings option where I can disable specific menu entries manually or for entire extensions. This issue should be reopened. This is not the same as #9285 which is about adding custom context menus instead of disabling.

AlbertoFabbri93 commented 2 years ago

I think a very good starting point would be being able to disable the default entries and then later implement a general interface for all of them (built-in + contributed by extensions).

alfuken commented 2 years ago

+1 to reopening this. This kind of functionality is pretty logical to have.

Syul968 commented 2 years ago

+1 to reopening this. I want to arrange and add/remove context menu items in a way that makes sense for my workflow. And for tabs context menu items too.

Related (context menu customization request): #132752

ghost commented 2 years ago

Vivaldi browser has a pretty nice way of handling modifying of context menus and also create folders to restructure items. Like, I don't mind creating Angular bits from the context menu, but it would be fine if it was in a subfolder and not spamming 10 links in my context menu. Right now I have 34 items in the context menu and only really use 5 frequently. For me it just saves a lot of time typing things out for those that prefer that.

I'd expect something where I can create folders and separators, drag items into place and then saving it. Files and folders might be separate, perhaps even file type specific context menus. Of course resetting should be possible and adding or removing commands would be nice. But even already hiding specific items would be nice to have and make me more productive.

yiliang114 commented 1 year ago

I also have the need to hide menus, built-in menus or other extended menus, users should be able to configure ignore not to display them.

bigsnowballhehe commented 1 year ago

need this

Yuki2718 commented 1 year ago

+1 for this, over time more and more items have been added which I never use and they're annoying,

akors commented 1 year ago

Why is this issue closed, and why are "duplicates" of this issue closed? Context menu is simply too big.

I personally don't need much customization, but it should be clear if the context menu takes up more space than the screen height, something is not going well. It makes the context menu useless if I have to search for various functions.

@sbatten you closed issue #171906 as a duplicate of this one, but this one is already closed. Would you mind reopening this issue because it is clearly not solved.

fa1247 commented 1 year ago

There should be a function to hide all context menus brought by an extension, or more flexible, to disable or remove certain menus as needed, just like the software RightMenuMgr on Windows.

bigfoot31 commented 1 year ago

Please prioritize this. @rebornix @sbatten. My Context menu is basically unusable right now. The menu covers the whole page, and I still have to scroll. 😂

image
jackphilippi commented 10 months ago

+1 🥴 image

gohilurvish commented 7 months ago

While I also wants to remove Cut/Copy/Past and some other stuff from the right-click menu, the major issue was commands added by extensions.

The workaround I am using is : Delete the items added by extensions. On mac:

  1. Go to "~/.vscode/extensions" folder
  2. cd to extension and open package.json file
  3. Go to "contributes" -> "commands" and remove the entry which is not needed.
Long0x0 commented 4 weeks ago

Thanks to @be5invis we have greasemonkey/tampermonkey for vscode: vscode-custom-css.

Use it at your own risk.

Here is my script to hide some context menu items:

/*
Hide context menu items in vscode.
`Reload Custom CSS and JS` to apply changes.

Tricks:
  Help > Toggle Developer Tools, run `setTimeout(() => { debugger }, 3000)`
  in Console, open the context menu within 3 seconds, wait for the debugger
  to pause, then inspect items in Elements.
*/

(function () {
  console.log("Hello from custom_context_menu.js~");

  const selectors = [
    '^"Go to"', // start with "Go to"
    '"Change All Occurrences"', // exact match
    '"Share"',
    '"Share" + "_"', // separator after "Share"
    '"_":has( + "Share")', // separator before "Share"
    '"Command Palette..."',
    '"_":has( + "Command Palette...")',
    '"Layout Controls"',
  ];

  const css_selectors = selectors
    .join(",\n")
    .replaceAll(/([*^|])?"(.+?)"/g, '[aria-label\x241="\x242"]');
  console.log(css_selectors);

  function wait_for(root) {
    const selector = ".monaco-menu-container > .monaco-scrollable-element";
    new MutationObserver((mutations) => {
      for (let mutation of mutations) {
        for (let node of mutation.addedNodes) {
          if (node.matches?.(selector)) {
            // console.log(">>", node);
            modify(node);
          }
        }
      }
    }).observe(root, { subtree: true, childList: true });
  }

  // context menu in editor
  Element.prototype._attachShadow = Element.prototype.attachShadow;
  Element.prototype.attachShadow = function () {
    const shadow = this._attachShadow({ mode: "open" });
    wait_for(shadow);
    return shadow;
  };
  // context menu in other places
  wait_for(document);

  // get mouse position
  let mouse_y = 0;
  document.addEventListener("mouseup", (e) => {
    // bug: not working in titlebar
    if (e.button === 2) {
      mouse_y = e.clientY;
      // console.log("mouse_y", mouse_y);
    }
  });

  function modify(container) {
    if (container.matches('.titlebar-container *')) {
      // console.log("skip titlebar");
      return;
    }
    for (let item of container.querySelectorAll(".action-item")) {
      const label = item.querySelector(".action-label");
      const aria_label = label?.getAttribute("aria-label") || "_";
      item.setAttribute("aria-label", aria_label);
    }

    const menu = container.parentNode;
    const style = document.createElement("style");
    menu.appendChild(style);
    style.innerText = `
    :host > .monaco-menu-container, :not(.menubar-menu-button) > .monaco-menu-container {
      ${css_selectors},
      .visible.scrollbar.vertical, .shadow {
        display: none !important;
      }
    }
    `.replaceAll(/\s+/g, " ");

    // fix context menu position
    if (menu.matches(".monaco-submenu")) {
      return;
    }
    let menu_top = parseInt(menu.style.top);
    const menu_height = menu.clientHeight;
    // console.log("menu_top", menu_top, "menu_height", menu_height);
    const titlebar_height = 40;
    const window_height = window.innerHeight;
    if (menu_top < titlebar_height && menu_height < 90) {
      mouse_y = menu_top;
    } else {
      if (mouse_y < window_height / 2) {
        menu_top = mouse_y;
        if (menu_top + menu_height > window_height) {
          menu_top = window_height - menu_height;
        }
      } else {
        menu_top = mouse_y - menu_height;
        if (menu_top < titlebar_height) {
          menu_top = titlebar_height;
        }
      }
      menu.style.top = menu_top + "px";
    }
  }
})();