Annoucement: Customize UI is probably not going to work anymore

[knopp]

VSCode added a build step that mangles all typescript private fields so they can't be reasonably accessed by Customize UI. This greatly reduces hooks that customize-ui can intercept and methods it can call.

It might still be possible to change font size, but other layout changes are probably gone. Or at least made much more difficult.

[knopp]

This is the PR that broke Customize UI, possibly forever

microsoft/vscode#166126

It was fun while it lasted.

[isidorn]

Hi VS Code PM here 👋

More details about this change and the motivation be found here microsoft/vscode-discussions#257
We would like to better understand if the Customize UI extension will no longer be able to work.
If that is indeed the case (as I believe it is) - we are open to a UI discussion to see if we can make possible some of the most popular Custmoize UI features. We would love to learn more from this extension and identify the gaps and shortcomings in our extensibility story with the goal of making our actual API more rich.

Thanks
Isidor

[knopp]

Hi @isidorn,

thank you for stopping by!

CustomizeUI is basically a pile of hacks that works by monkey-patching javascript in browser and main processes, which is something that regular extensions can not do, and probably for a good reason :)

Still, the problem the extension is solving is quite real and a lot of people seem to find it useful.

The primary reason why I wrote the extension was to be able to customize the user interface font and spacing. This is a feature that has been requested for a long time, the issue has over 2000 likes, and sadly it doesn't seem to be addressed any time soon.

Somewhat less important is to customize the rest of user interface. Right now the activity bar and titlebar are taking significant amount of space, especially on laptop screen, being able to do something like this (tabs in title bar and horizontal activity bar) is quite nice:

(sorry for the old screenshot)

And being able to modify the javascript directly allowed me to prototype user interface changes that would have very little chance to actually land in VSCode itself. Even crazy things, like status bar on top (it's actually surprisingly practical...)

[spacepluk]

especially on laptop screen, being able to do something like this (tabs in title bar and horizontal activity bar) is quite nice

FWIW this was the main reason I was using this extension. At least on macOS the default layout wastes a good amount of vertical space.

[isidorn]

@knopp thanks for providing more details and for explaining the use case.
We would love to learn more from you about what you think were the most successful UI features your extension did? I personally like the option to show the activity bar as part of the viewlet and I think this is something we should maybe give a try in VS Code.

As for the customising Font Size in the workbench - we are aware of this highly upvoted request, however there are technical limitations that @bpasero explained in that issue. What I would like to understand better is what is the main thing your users gain with being able to configure fonts that "Zoom In" does not give them? In what part of the UI are they most impacted with not being able to configure the font size?

Pinging @daviddossett our lead designer to consider some of the learnings from your extension.

[j-f1]

For me, I largely used Customize UI to move the status bar to the top and inject custom CSS to make some personal preference tweaks to the sizing of items in the UI. I think adding support for custom CSS as a user preference would go a long way toward alleviating the pain of breaking this extension.

I also used monkey-patch (which this extension depends on, and which has also been broken by this update as far as I can tell) in one of my own extensions because custom icon themes are required to bundle any fonts that they depend on, which is not possible for San Francisco due to restrictions by Apple. (I also had to inject some custom CSS because certain icons including the dirty icon on tab titles do not seem to properly use the codicon class name system to pick up custom icon themes).

[knopp]

What I would like to understand better is what is the main thing your users gain with being able to configure fonts that "Zoom In" does not give them? In what part of the UI are they most impacted with not being able to configure the font size?

Back when I wrote customize-ui zoom-in resulted in really bad wobble effect during scrolling for both the sidebar and text editor. That seems to be improved now.

[robertpiosik]

My usage of the extension is about changing font family in the interface (SegoeUI to Google Sans). What led me to this issue is that I found my overwritten ff is no longer applied for the context menu.

[DeltaRazero]

The activity bar just takes up a lot of space and clutters the UX for me, Having it be at the top (or bottom as some people like that too) is much cleaner.

I'm also linking this issue here, where it's already being requested. microsoft/vscode#118692

At least I know I don't have to update my VSCode anymore after the current version until either a workaround is found, or the extremely slim chance this gets implemented.

[robsontenorio]

@isidorn

"Inline titlebar on macOS" is the best feature!

[pje]

@isidorn

"Inline titlebar on macOS" is the best feature!

Agreed! There's a pretty popular issue for that request in the vscode repo: microsoft/vscode#12377

[mfreeman-xtivia]

@isidorn sorry but Boooo Microsoft.

I'm a hard core dev and this extension makes VSCode usuable for me. A whole range of reasons, some already expressed here. Ability to move the activity bar to the top for extra real estate, ability to change the spacing in the sidebar, ability to the change the font of the overall UI, and on and on.

I, like others, will have to stay on 1.73 until I can't stand it any more but without the level of customization this extension provides I find VSCode personally not usable.

I guess will need to go look at what Fleet offers as an alternative.

[robsontenorio]

At this moment monkeyPatch/customize-ui is broken on VSCODE 1.74

[jipika]

What if you want to change the font of the context now

[hmijail]

FWIW, my reason to use MonkeyPatch is the Swipe-To-Navigate extension, which enables back/forward navigation methods like the 3-finger swipe in MacOS: https://github.com/seivan/swipe-to-navigate

[ekwoka]

Sad.

I used the settings from make vscode awesome to completely remove all UI elements except when I expressly wanted them. Now most of them are still hidden by other but I have this ugly gray title bar that isn't doing anything useful....

Before update:

After Update:

[huyz]

Like @hmijail I need monkey-patching to have 3-finger swipe on macOS

[IceSentry]

Personally, I used monkeypatch and customize-ui to fix both of those highly upvoted issues

Pin tab on a second row like full VS:
microsoft/vscode#98160

Make tabs vertically smaller because it's just a bunch of wasted space:
microsoft/vscode#42253

[kvndrsslr]

While I could live without most of these, it's a big downside to trade in for 5% of startup time (which might be noticable if you are still working on HDDs, but otherwise idk...)

However this one does it for me, staying on 1.73.1 until there's another alternative:

Putting some of these options into core would be very appreciated. There are power users with tiling WMs on every platform, people that choose to not want any frame can live with the implications of not being able to drag & drop windows.

[qyurila]

I cannot live anymore without a wider list row height (28px, which fits my font size -- I made every text 1px bigger). I'd stick with VSCode 1.73.1 for now.

[blackcater]

That's too sad. How about build a unofficial vscode version?

[rustemkk]

+1 to "Boooo Microsoft", you could do better!

The best thing about vscode - extensions and customization. Due to limited vscode UI customization for several years I've been using customize-ui to have the editor that I wanted. Top priority features that I use - font customization (size, font-family, lines spacing, letters spacing) in all parts of vscode (including menu) and ability to make vscode frameless (without title bar).

Sticking to 1.73.1 for now.

[kvndrsslr]

That's too sad. How about build a unofficial vscode version?

You mean https://vscodium.com ?
It exists but has it's own challenges cause the VS Code you download from Microsoft is more than the FOSS part and some extensions are only licensed to work with the official version as distributed by Microsoft.
If you can live with that you can certainly clone it and change a line in the build scripts to remove the mangling step.

[lehni]

Before customize-ui, there was vscode-titlebar-less-macos of which I am the author, and already then there were discussions with @bpasero to bring this into VSCode properly: lehni/vscode-titlebar-less-macos#34

I still believe that this should be the default VSCode style on Mac, it makes sense on any kind of 16:9 / 16:10 format screen.

Happy to be of help if I can. Until then, I will be sticking to version 1.73.1.

[sha-razeek]

I have been able to replace customzie-ui with vscode-custom-css:

• I added a vscodefont.css file with the contents:
  * { font-family: "fontname" }
• Added the setting to vscode:
  "vscode_custom_css.imports": [ "file:///Users/username/vscodefont.css" ]
• Gave my user write access to the code executable:
  sudo chown -R $(whoami) $(which code)
• Ran the extension command Enable Custom CSS and JS

And viola - my custom font is used everywhere in the application.

Thanks! I used this technique and it works for now. just added the class selector so that the editor font can be monospace and different to that of the ui.

html, body, * {
	font-family: 'SF Pro Display';
}

[class^="mtk"] {
	font-family: 'Sometype Mono' !important;
}

[giovanicascaes]

Hey guys, here are the mangled names: https://gist.github.com/giovanicascaes/5afbfdaa8e07edaa9b25acfb55a175a5

I took from the mangler class in VSCode repository inserting logs in the middle of the code and running the build process. I tried to implement a fix, no luck though. When applying Monkey Patch on a regular VSCode app copy they turn it into VSCode OSS and things get messed up.

I'm letting the name list here with the hope someone can figure out a fix, otherwise I'll try again when I have more time

[drcika]

I am looking for help for further development
https://github.com/drcika/apc-extension

who wants to test
https://github.com/drcika/apc-extension/blob/production/apc-extension-0.0.3.vsix

[silopolis]

I am looking for help for further development drcika/apc-extension

Is this a continuation of Customize UI fixing that issue?
Some README.md would greatly help :)

[drcika]

Is this a continuation of Customize UI fixing that issue

yes this is based on Customize UI
https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
https://open-vsx.org/extension/drcika/apc-extension

[mon-jai]

@drcika Seems like white space become very wield after enabling the extension.

Before:

After:

[DeltaRazero]

Hey guys, here are the mangled names: https://gist.github.com/giovanicascaes/5afbfdaa8e07edaa9b25acfb55a175a5

I took from the mangler class in VSCode repository inserting logs in the middle of the code and running the build process. I tried to implement a fix, no luck though. When applying Monkey Patch on a regular VSCode app copy they turn it into VSCode OSS and things get messed up.

I'm letting the name list here with the hope someone can figure out a fix, otherwise I'll try again when I have more time

I doubt that mapping works for the official Microsoft VSCode builds since it'll differ for each build; Microsoft needs to provide an open way to access sourcemaps. Furthermore, since each build probably has different mappings, you either have to store and bundle all stable version's sourcemaps with the extension, or download them at runtime.

[strayge]

At least some source maps available from the following paths:

https://ticino.blob.core.windows.net/sourcemaps/<hash>/core/vs/code/electron-sandbox/workbench/workbench.js.map
https://ticino.blob.core.windows.net/sourcemaps/<hash>/core/vs/workbench/workbench.desktop.main.js.map

where <hash> is commit hash from VSCode About window.

[TheFermi0n]

I am looking for help for further development https://github.com/drcika/apc-extension

who wants to test https://github.com/drcika/apc-extension/blob/production/apc-extension-0.0.3.vsix

The giga-chad. Just installed this and added this code in my settings.json

"apc.electron": {
  "titleBarStyle": "hidden"
},
"window.titleBarStyle": "native"

And guess what, it's gone

Edit: After disabling this extension, the titlebar is still gone. I don't know what you did but that nightmare is gone for me.

[drcika]

I am looking for help for further development https://github.com/drcika/apc-extension
who wants to test https://github.com/drcika/apc-extension/blob/production/apc-extension-0.0.3.vsix

The giga-chad. Just installed this and added this code in my settings.json

"apc.electron": {
  "titleBarStyle": "hidden"
},
"window.titleBarStyle": "native"

And guess what, it's gone

Edit: After disabling this extension, the titlebar is still gone. I don't know what you did but that nightmare is gone for me.

you need to run command "Disable Apc extension" i order to revert patch
vscode have some bug with calling "deactivate" when uninstalling extensions

[mon-jai]

@drcika Seems like white space become very wield after enabling the extension.

Before:

After:

@drcika Any idea how to fix this?

[mon-jai]

@drcika Is there any way to use web font or @import rule?

[drcika]

Refused to load the stylesheet 'vscode-file://test.css' because it violates the following Content Security Policy directive: "style-src 'self'
'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

when I solve that part I will add that a separate file can also be used

[mon-jai]

@drcika Thanks.

Can you add a way to write CSS by text instead of by object? Seems that it is the only way for having multiple @font-face declaration and @import statement (import statement must be at the top-level).

Also, is changes of white space intended? Is it possible to use the extension without changing white space?

[drcika]

@drcika Thanks.

Can you add a way to write CSS by text instead of by object? Seems that it is the only way for having multiple @font-face declaration and @import statement (import statement must be at the top-level).

Also, is changes of white space intended? Is it possible to use the extension without changing white space?

some part is fixed, will be in next update
style changes is required if you change size etc
after update only what you can do overwrite styles
pls continue here https://github.com/drcika/apc-extension/issues

[jpcrs]

@drcika What an amazing extension, thank you for the work!

[harttraveller]

Ha! In the newest version of vscode insiders at least, the title bar returns. Perhaps Microsoft "patched" apc-extension? It could just be that something changed and the extension no longer works, but at this point it almost feels like they see the title bar as a non-negotiable for mac users, though for the life of me I can't see why.

[drcika]

Ha! In the newest version of vscode insiders at least, the title bar returns. Perhaps Microsoft "patched" apc-extension? It could just be that something changed and the extension no longer works, but at this point it almost feels like they see the title bar as a non-negotiable for mac users, though for the life of me I can't see why.

everything seems to be fine

[harttraveller]

Huh, must be something on my end. I've got the exact same version as you...

[drcika]

Huh, must be something on my end. I've got the exact same version as you...

execute the command "Enable Apc extension"

[ekwoka]

Might be useful to add the same thing monkeypatch did and see the update and advise you to rerun the action.

[harttraveller]

execute the command "Enable Apc extension"

Man I'm dumb. That worked, thanks!

[ghost]

Hey fellow customizers,
In my opinion, I find that @drcika's Apc-extension performs more effectively on Windows machines compared to Customize UI.

This is particularly true for the inline titlebar, as there is no dedicated extension for Windows.

Take a peek at my VSCode setup ;)
Yeah, I prefer my editor to be minimal.

[drcika]

Hey fellow customizers, In my opinion, I find that @drcika's Apc-extension performs more effectively on Windows machines compared to Customize UI.

This is particularly true for the inline titlebar, as there is no dedicated extension for Windows.

Take a peek at my VSCode setup ;) Yeah, I prefer my editor to be minimal.

does not necessarily mean
if there are differences it is only reflected on startup
although they have not been upgraded for a long time

tell me how you manage without it menubar?
you can enable it for windows without "window.titleBarStyle": "custom"
I think about "apc.menubar.compact": true
in the code remove "isMacintosh"
check possible edge cases
and submit PR
I'm using a mac, so win is not my focus

[lehni]

@drcika thanks for creating APC! It works really well, and with a bit of fiddling, I was even able to get the wide activity bar look on macOS working, see:

drcika/apc-extension#52