From 95799c6353044f3ba28a73e195000c3586f36d21 Mon Sep 17 00:00:00 2001 From: max Date: Mon, 7 Sep 2026 18:35:01 +0200 Subject: [PATCH] Update the README for the drawn list The colour is a left border now, not a tinted icon; pinning is one toggle; row spacing and border width are settings; and file-type icons are gone, which is worth stating plainly along with the reason. Co-Authored-By: Claude Opus 5 --- README.md | 68 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index a2ae41f..eec24fc 100644 --- a/README.md +++ b/README.md @@ -7,66 +7,76 @@ It shows up as a **Tabs** view in the Explorer — drag it wherever you want it, ## What it adds over the built-in Open Editors view -- **A colour per project.** Each row's icon is tinted by the project that contains the file — the nearest - `.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`, `pyproject.toml`, `pom.xml` or - `build.gradle` above it. The colour comes from a hash of the project name, so a project keeps the same colour - across sessions and windows. +- **A colour per project**, as a border down the left of each row — the way Visual Studio marks them. The + project is the nearest `.asmdef`, `.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`, + `pyproject.toml`, `pom.xml` or `build.gradle` above the file. The colour comes from a hash of the project + name, so a project keeps the same colour across sessions and windows. - **A flat list, not a tree.** One row per open editor, no group nodes to expand. +- **Names that stay readable in a narrow strip.** The stem is ellipsized but the extension never is, so you + get `ClientDogSurgeryCompanionBeha… .cs` rather than losing the `.cs`. - **Sorting.** Open order (matching the tab bar), by project so the colours run in blocks, or by file name. - Pinned tabs stay on top. -- **The project name beside the file**, along with the directory when two files share a name. + Pinned tabs stay on top, with a rule under the pinned block. +- **Room to breathe.** Row spacing and border width are settings. -Pinning is VS Code's own — this view just exposes it per row, and pinned tabs sort first. +Pinning is VS Code's own — this view exposes it per row as a single toggle, and pinned tabs sort first. ## Usage | Action | How | | --- | --- | | Focus a tab | Click the row | -| Close | The `×` on hover, or the context menu | -| Pin / unpin | The pin icon on hover, or the context menu | -| Close others | Context menu — keeps pinned tabs | +| Close | The `×` on hover, middle-click, or `Delete` | +| Pin / unpin | The pin icon on the left of the row — one button, filled when pinned | +| Close others | Right-click → *Close Others* — keeps pinned tabs | +| Copy path, reveal in Explorer | Right-click | +| Move around | Arrow keys, `Home`, `End`, `Enter` to open | | Change sorting | The view's `…` menu | -The list follows the active editor, so whatever you switch to is selected. +The list follows the active editor, so whatever you switch to is selected. An unsaved file shows a dot, which +the close button replaces on hover. ## Settings - `verticalTabs.order` — `open` (default), `project`, or `name` - `verticalTabs.pinnedFirst` — list pinned tabs above the rest (default `true`) -- `verticalTabs.showProject` — show the project name beside the file (default `true`) -- `verticalTabs.showDirectory` — show the directory beside the file (default `true`) -- `verticalTabs.colorByProject` — tint each row's icon by project (default `true`) +- `verticalTabs.colorByProject` — colour each row's left border by project (default `true`) +- `verticalTabs.borderWidth` — width of that border in pixels (default `3`) +- `verticalTabs.rowSpacing` — pixels between rows (default `2`) +- `verticalTabs.showProject` — also show the project name as text (default `true`) +- `verticalTabs.showDirectory` — also show the directory as text (default `true`) - `verticalTabs.allGroups` — list every editor group, not just the active one (default `true`) - `verticalTabs.projectFiles` — file names or extensions that mark a project root -The eight project colours are theme colours (`verticalTabs.project1` … `project8`, plus -`verticalTabs.noProject`), so you can override any of them in `workbench.colorCustomizations`. +The twelve project colours are theme colours (`verticalTabs.project1` … `project12`, plus +`verticalTabs.noProject`), so you can pin a project to a specific colour in `workbench.colorCustomizations`. ## Known limitations - **Webview tabs cannot be focused from the list.** There is no API to activate an arbitrary tab; a file-backed tab is focused by re-opening its resource, which webviews (Settings, Keyboard Shortcuts, Markdown preview, - extension panels) do not have. They are listed, with a tooltip saying so, but clicking them does nothing. -- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so pinning a row means - opening it and then pinning. Clicking a row's pin icon therefore also switches to it. -- **No drag to reorder.** The list reflects VS Code's own tab order; it cannot rearrange it. Note that VS Code - moves a pinned tab to the front of its group, so `open` order shows pinned tabs first regardless of - `verticalTabs.pinnedFirst` — that setting only changes the `project` and `name` orders. -- **The colour replaces the file-type icon.** Each row shows a tinted dot instead of the usual `.cs`/`.json` - icon. Set `verticalTabs.colorByProject` to `false` to get file icons back and keep the project name in the - description. -- The colour is on the row's icon, not its label. Labels get the theme's own colouring (including Git status), - which an extension cannot override without also recolouring the Explorer. + extension panels) do not have. They are listed in italics, with a tooltip saying so, and clicking does + nothing rather than pretending. +- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so the pin button also + switches to that tab. +- **No drag to reorder.** The list reflects VS Code's own tab order. Note that VS Code moves a pinned tab to + the front of its group, so `open` order shows pinned tabs first regardless of `verticalTabs.pinnedFirst` — + that setting only changes the `project` and `name` orders. +- **No file-type icons.** The row shows the project border instead. Adding icons back would mean bundling an + icon set, since a webview cannot reach the active file-icon theme. +- Rows are drawn rather than native, so they do not pick up list styling from every theme the way a tree view + would, and there is no native drag-and-drop. ## Tests `npm test` launches VS Code with all other extensions disabled on a multi-project folder, opens editors, and -asserts on the resulting list — projects resolved, ordering, pinning through the commands, diff tabs reporting -their modified side, and webview tabs correctly reporting that they cannot be activated. +asserts on the resulting list — projects resolved, ordering, pinning through the real actions, diff tabs +reporting their modified side, and webview tabs correctly reporting that they cannot be activated. Point it at your own multi-project folder with `VERTICAL_TABS_TEST_FOLDER`: ```bash VERTICAL_TABS_TEST_FOLDER=/path/to/solution npm test ``` + +The rendering itself is checked in a browser harness at side-bar width, driving the same `media/tabs.js` with +stub tab data.