How It Works

HardPin is executing custom code that modifies the DOM of VS Code. The main parts of the solution that are listed below.

The Solution

  • Giving unique ids to all tab controls.
  • Creating extra style elements for all tab controls.
  • Registering MutationObservers for all tab controls and listening to change.
  • Using the style elements to modify the ::before element of tab controls.
  • Maintaining a list of hard pinned file names for all tab controls.
  • Positioning the hard pinned tabs with position: absolute.
  • Manipulating the margins of hard pinned tabs accordingly.

Why This Solution

I tried to implement this same feature, but differently, in to VS Code in 2019, but due to the strange way in which VS Code handles it's tabs, I never managed to get it to work properly. VS Code handles it's tabs in such a way where the index of the tab matters, which is unintuitive. The analogies below try to shed some light on the matter, but may not accurately describe the actual implementations.

Analogy of the VS Code Way

  • Create a link L0 that points to A.
  • Create a link L1 that points to B.
  • Click on L0 and get redirected to A.
  • Click on L1 and get redirected to B.
  • Rearrange the positions such that L1 comes before L0 in the DOM.
  • Click on L0 and get redirected to B. WTF?
  • Click on L1 and get redirected to A. WTF?

Analogy of the Standard Way

  • Create a link L0 that points to A.
  • Create a link L1 that points to B.
  • Click on L0 and get redirected to A.
  • Click on L1 and get redirected to B.
  • Rearrange the positions such that L1 comes before L0 in the DOM.
  • Click on L0 and get redirected to A. Logical!
  • Click on L1 and get redirected to B. Logical!

There might be a logical explanation to why VS Code works like it works, but still this makes a solution where hard pinned tabs and normal tabs would be separated in to separate parent elements difficult. I do acknowledge the fact that I might have misunderstood something about how VS Code works, but I do suspect that this complexity is the reason why a much requested and basic feature such as actually pinning tabs is missing from VS Code.

Why Not Implemented Directly in to the Source of VS Code

The reason why HardPin is not implemented in to the source code of VS Code is that the solution is somewhat ugly. Especially the part in which the created style element is used to modify the ::before element. Personally, I would probably not let this pass through quality control, but on the other hand I would also need to be presented strong arguments for why tabs should work like they currently do in VS Code. Nonetheless, HardPin is a cost effective solution to the tab pinning problem (about 200 simple lines of code) and could relatively easily be implemented in to VS Code.