How to make this for VSCode (ideas and research)

[colelawrence]

I've developed a couple small extensions for both Atom and VS Code, and I do believe that VS Code cannot be changed based solely via an extension like Atom allows.

I'd love to centralize research, here, on what is necessary to get a "Code Ribbon" editor built for the VS Code ecosystem.

As an anecdote, I use VS Code as a main driver for primarily Rust, TypeScript, and frontend web dev. My team members are heavy users of VS Code Live Share. Through my time using VSCode, I've been overall disappointed in the UX surrounding how VS Code determines where to open documents, and something like Code Ribbon feels like a great step forward.

My first idea is to essentially maintain a patchset over the VS Code similar to what VSCodium is doing to disable telemetry, which enables a Code Ribbon like rendering of the opened editors.

A first step might be to:

1. Enable scrolling over the editor container's groups, so you could essentially have something like the following image horizontally scrollable:

A second step might be to enable a zoom out css rendering, which may be relatively easy, since it might be able to leverage a few transform style rules.

[colelawrence]

Collecting some initial links and learnings:

Please feel free to correct me.

VS Code is broken down into the following sections:

The highest level is described in the code organization "Layers" documentation.

• workbench - Hosts the "Monaco" editor and provides the framework for "viewlets" like the Explorer, Status Bar, or Menu Bar, leveraging Electron to implement the VS Code desktop application.
• .content (holds all views between the sidebars and has overflow: hidden)
  • .monaco-workbench .part.editor>.content .grid-view-container (has width: 100%)
    • [Monaco]
      • split-view-container
        • split-view-view (1+)
          • editor-group-container (1) - each group has multiple "editors" (which can be shown as tabs) you can split the editor into two groups

Add Scrolling through devtools experiment (demo):

• .content add overflow-x: auto
  • .monaco-workbench .part.editor>.content .grid-view-container (add width: 400%)

[robobenklein]

Doing a VSCodium-like patchset was my first idea on how to overcome the restrictions as well, though this means the user would have to still download a separate program.

Ideally maintaining support for existing plugins is top priority, since that's what allows most people to change from their existing editor environments, so openVSX is probably the best bet there.

Sounds like it has a similar workspace layout to atom, do you know which classes handle editor alignment like in rows or columns?

I did basically the same thing when first starting out: https://github.com/utk-se/CodeRibbon/wiki/Visual-History (just changing the width of the workspace and enabling horizontal scroll)