Windows, macOS and Linux transparency #52707

sylveon · 2018-06-22T20:34:55Z

This pull request adds support for window transparency on all 3 platforms. (Arch) Linux and Windows 10 has been personally tested, but I couldn't test macOS or Windows 7 (but they should work in theory).

Here's a few screenshots:

(made with a custom version of the @be5invis's railgun theme: https://github.com/sylveon/vsc-theme-railgun)

(spent too much time thinking about "can I?" and not enough thinking about "should I?")

…for acrylic

olliecheng · 2018-06-23T02:34:44Z

I can confirm that it seems to work on macOS 10.13 (.5, build 17F77).

sylveon · 2018-06-23T03:44:05Z

Thanks.

Since windows-swca and windows-blurbehind are modules that I wrote solely for this, reviewing those is also appreciated (I'd be willing to transfer ownership to Microsoft too)

be5invis · 2018-06-23T15:35:13Z

Are text over transparent background lost LCD antialiasing?

sylveon · 2018-06-23T15:46:47Z

I haven't seen such thing happen while testing

be5invis · 2018-06-23T15:49:32Z

I know there are some concepts in MS that adopted FDS to Code, but I cannot provide you the images :(

nzec

That looks beautiful ❤️

blahblah23 · 2018-07-24T09:45:37Z

I like the GlassIt-VSC extension, but it cant achieve opaque text.
Can this PR achieve transparency without the blur effect? While leaving text opaque?

I like having videos playing in the background while coding :-)

Thanks

sylveon · 2018-07-24T11:51:28Z

Yup that should work. GlassIt-VSC changes the opacity of the whole window, but this only changes the background. You can use the "transparent" option of window.compositionAttribute for that.

olliecheng · 2018-07-25T01:27:08Z

@be5invis SWCA has no track record of breaking antialiasing. However, NSVisualEffect may cause that effect with non-Cocoa apps, but Electron is not subject to this and works with text antialiasing.

samuelmaddock · 2018-08-15T20:29:08Z

I tested this on macOS with the modified vsc-theme-railgun theme. It works, but the background transparency will revert to fully opaque after a couple window reloads. Besides that, great work on this!

DRSDavidSoft · 2018-09-07T14:12:55Z

This is looking awesome! ❤️ Hope to see it in the stable releases soon

rogeraabbccdd · 2019-08-15T13:11:20Z

here's my fix of merge conflicts.
I'm new to typescript and electron but I will try my best to keep this work in latest vscode.
rogeraabbccdd@f3eb106

NicTanghe · 2019-10-01T13:09:29Z

I am going ahead and close this PR for the reasons outlined: We currently do not accept more features that are Electron specific. We have seen to many issues lately when updating to newer Electron versions and playing the catch-up game is very painful.

No Pain No Gain

NicTanghe · 2019-10-01T13:11:53Z

Can someone give me the full instructions on how to build / install this on windows 10?
Havent build a fork yet and i have no idea how to do that.

gusbemacbe · 2019-10-01T13:24:05Z

@NicTanghe

I put the instructions for macOS and Windows users here deeply above, but you can jump to the direct link: #52707 (comment)

codic12 · 2019-10-03T02:48:31Z

Why won't this be merged?

frantic1048 · 2019-10-23T09:16:51Z

Sorry for disturbing you guys.

I made a smaller transparent patch for latest 1.39.2 version,
with several essential changes to make transparency work:

https://github.com/frantic1048/pkgbuilds/blob/master/code-transparent/transparent.diff

The directory is a ready-to-build Arch Linux package(also synced to AUR: https://aur.archlinux.org/packages/code-transparent/ ). So if you are an Arch Linux user, you can directly build it with makepkg or any other AUR helpers..

If you want to use the patch alone (without corresponding PKGBUILD for building Arch Linux package), be sure to check out the post_install message for troubleshooting after building.

Tested on Arch Linux, i3wm/compton/amdgpu, and Swaywm/intel.

It's a bit sad to see this PR was closed. And I appreciate much to guys making effort for this feature. :)

codic12 · 2019-10-24T23:12:58Z

@frantic1048 Thank you!

gusbemacbe · 2019-10-24T23:45:15Z

Hello @frantic1048

I would like to install it into /opt/ instead of /usr/. And does it work with VSCode Insiders?

I use nvm. I installed electron, gulp and yarn installed via npm from nvm. How to apply it to PKGBUILD?

frantic1048 · 2019-10-25T03:28:20Z

@gusbemacbe

I would like to install it into /opt/ instead of /usr/

If you want to do this, you may change the /usr/lib/$_pkgname lines to /opt/$_pkgname, and check if any other things are broken. Paths like /usr/share/applications/ /usr/share/metainfo/ ... are necessary to make your desktop/shell environment recognize Code well.

Or, are you just want it to co-exist with the community/code package? This is possible, by touching some path related lines, and the startup script. I made the package on top of community/code for minimal changes, as a result, it conflicts with the community/code package. However, this could be improved.

And does it work with VSCode Insiders?

I'm not sure how cutting-edge the Insiders version is. There is an aur/code-git package, which builds from the current https://github.com/microsoft/vscode master branch. You could insert the patch( transparent.diff ) into code-git, and apply the patch in its PKGBUILD.

If you mean the exact Insiders version, there is an aur/visual-studio-code-insiders package. It is a binary(compiled) package from Microsoft, I'm not sure which source it is built from. On theory, you can make the same change as my patch to the compiled code, but that could be very dirty, and VS Code may complain to you about a corrupt version all day(since compiled code was modified). If you could find where the Insider version's source, you can do the same way as in aur/code-git to apply the patch.

I use nvm. I installed electron, gulp and yarn installed via npm from nvm. How to apply it to PKGBUILD?

Hmmm, are you using Arch Linux? You do not have to install these packages via npm. There are electron gulp and yarn in the official repository. Besides, aur/code-transparent is like community/code, is already patched to use electron and other self-included dependencies like node, ripgrep from the official repository.

By the way, there is a prebuilt package for aur/code-transparent in archlinuxcn repository.

gusbemacbe · 2019-10-25T04:04:29Z

@frantic1048

I got it, but a small error, before, check the versions:

Version

node --version
v10.16.3
npm --version
6.9.0
gulp --version
CLI version: 2.2.0
Local version: 4.0.2
yarn --version
1.17.3
electron --version
v4.2.12

Where

which {electron,gulp,node,npm,yarn}
/home/gusbemacbe/node_modules/.bin/electron
/home/gusbemacbe/node_modules/.bin/gulp
/home/gusbemacbe/.nvm/versions/node/v10.16.3/bin/node
/home/gusbemacbe/.nvm/versions/node/v10.16.3/bin/npm
/home/gusbemacbe/node_modules/.bin/yarn

All packages libsecret, libx11, libxkbfile and ripgrep are installed.

> node tools/copy-driver-definition.js

../../../../../../node_modules/@types/unist/index.d.ts:31:20 - error TS2304: Cannot find name 'unknown'.

31     [key: string]: unknown;
                      ~~~~~~~


../../../../../../node_modules/@types/unist/index.d.ts:40:20 - error TS2304: Cannot find name 'unknown'.

40     [key: string]: unknown;
                      ~~~~~~~


../../../../../../node_modules/@types/unist/index.d.ts:97:12 - error TS2304: Cannot find name 'unknown'.

97     value: unknown;
              ~~~~~~~


../../../../../../node_modules/@types/vfile-message/index.d.ts:69:24 - error TS2304: Cannot find name 'unknown'.

69         [key: string]: unknown;
                          ~~~~~~~


../../../../../../node_modules/@types/vfile/index.d.ts:48:15 - error TS2304: Cannot find name 'unknown'.

48         data: unknown;
                 ~~~~~~~


npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] compile: `npm run copy-driver && npm run copy-driver-definition && tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] compile script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/gusbemacbe/.npm/_logs/2019-10-25T03_57_32_025Z-debug.log
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
==> ERROR: A failure occurred in build().
    Aborting...
zsh: exit 4     makepkg -sic
makepkg -sic  29.87s user 1.85s system 150% cpu 21.040 total

frantic1048 · 2019-10-27T09:41:07Z

@gusbemacbe

On my machine:

~> node --version
v10.16.3
~> npm --version
6.12.0
~> gulp --version
CLI version: 2.2.0
Local version: 4.0.2
~> yarn --version
1.19.1
~> electron --version
v6.0.12
~> electron4 --version
v4.2.11
~> which node npm gulp yarn electron electron4
/usr/bin/node
/usr/bin/npm
/usr/bin/gulp
/usr/bin/yarn
/usr/bin/electron
/usr/bin/electron4

You may try to avoid npm globals during building(strip npm global bin path from $PATH), or use devtools(https://wiki.archlinux.org/index.php/DeveloperWiki:Building_in_a_clean_chroot#Convenience_way) for a clean build environment.

For short, install devtools package, replace your makepkg command with single extra-x86_64-build. See extra-x86_64-build -h for detailed options.

gusbemacbe · 2019-10-27T09:50:02Z

or use devtools
For short, install devtools package, replace your makepkg command with single extra-x86_64-build. See extra-x86_64-build -h for detailed options.

Installing with these commands inside the folder code-transparent?

frantic1048 · 2019-10-28T08:20:34Z

Installing with these commands inside the folder code-transparent?

Installing(what) withe these(what) commands inside the folder code-transparent?

According to your which {electron,gulp,node,npm,yarn} result, the error may caused by incorrect npm package resolution.

Avoid using manual installed(not installed by pacman, but nvm/npm install) node/npm/...etc may help.

To avoid using manually installed packages here's two way:

(which I've mentioned in the previous post: #52707 (comment))

You may try to avoid npm globals during building(strip npm global bin path from $PATH), or use devtools(https://wiki.archlinux.org/index.php/DeveloperWiki:Building_in_a_clean_chroot#Convenience_way) for a clean build environment.

(longer version)

SOLUTION A: Ensure node/npm/...etc are resolved to(check with which command) /usr/bin/* version, typically by temporary modifying $PATH environment variable before start building with makepkg.
SOLUTION B: Use Arch Linux devtools. It provides build scripts like extra-x86_64-build, which automatically creates a clean build environment and builds package inside a clean environment for you.

Further, there is a SOLUTION C: If you just want to use the package without modifying PKGBUILD, you may grab prebuilt code-transparent package(also maintained by me) from archlinuxcn repository(which means you do not have to manually build the package by yourself).

sergei-dyshel · 2019-10-28T13:46:30Z

Did anyone try this patch on MacOS?

vegerot · 2019-11-09T18:34:07Z

I may just be an idiot, but I can't figure out how to clone this repo. At the top of page, where there'd normally be a link to @sylveon 's fork, it just says unknown repo. I can see all changes in the commits and Files Changes tabs, but don't know how to clone those :/
For any other PRs in this repo I can just clone the fork at the top of the page and merge the PRs from Master.
Apologies for the dumb question :/

sylveon · 2019-11-09T18:43:12Z

I deleted my fork. You can get a patch file to apply to your clone of this repo by going to https://github.com/microsoft/vscode/pull/52707.diff

gusbemacbe · 2019-11-09T18:44:06Z

@vegerot, since the Microsoft developer closed this pull request, the contributor deleted the branch and his repository. But you can get from @frantic1048. Just the blur is just not available in @frantic1048's repository. If you want one quick hack, just use devilspie which can make easily VSCode transparent and blurry, without affecting the text.

gusbemacbe · 2019-11-09T21:14:00Z

@sylveon

Your diff patch is no longer working for the latest commit of VSCode.

git apply -p0 52707.diff
error: a/package.json: No such file or directory
error: a/src/main.js: No such file or directory
error: a/src/vs/code/electron-main/window.ts: No such file or directory
error: a/src/vs/editor/browser/viewParts/minimap/minimap.ts: No such file or directory
error: a/src/vs/editor/common/view/minimapCharRenderer.ts: No such file or directory
error: a/src/vs/platform/windows/common/windows.ts: No such file or directory
error: a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts: No such file or directory
error: a/src/vs/workbench/browser/style.ts: No such file or directory
error: a/src/vs/workbench/common/theme.ts: No such file or directory
error: a/src/vs/workbench/contrib/relauncher/electron-browser/relauncher.contribution.ts: No such file or directory
error: a/src/vs/workbench/contrib/splash/electron-browser/partsSplash.contribution.ts: No such file or directory
error: a/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts: No such file or directory
error: a/src/vs/workbench/electron-browser/main.contribution.ts: No such file or directory
error: a/yarn.lock: No such file or directory
zsh: exit 1     git apply -p0 52707.diff

@frantic1048

I decided to install normally code-transparent via archlinuxcn, but I would like to change from Code - OSS to Visual Studio Code Transparent, and code or code-oss to code-transparent.

And where is the blur?

sylveon · 2019-11-09T21:18:52Z

That's because I already said I'm not gonna maintain it

frantic1048 · 2019-11-10T09:26:03Z

@gusbemacbe

Just the blur is just not available in @frantic1048's repository.

And where is the blur?

To clarify, on trivial Linux desktops(and even on macOS and Windows), blur is almost identical stuff to transparency. It's your compositor's response to draw a transparent/blurred window. In short, a compositor is who composite all windows' graphics into a single image and displays on your screen. Each application is drawing content on its own window. For the long story, you may want to search keywords like x11, compositor, compositing manager and even Wayland, to find out how a "window" is created.

I've pointed out checking user's compositor about transparency in code-transparent's install message.

Ensure your compositor has transparency enabled.

It's the same with blur: if your compositor supports blur and you have enabled it, you will get blurred VS Code window. Because it is your compositor's work to take you a transparent/blurred window.

For example, I'm using i3wm and Compton(the compositor mentioned above) in the screenshot. Transparent and blurred windows are all done by Compton, thus as long as I enabled transparent/blur in Compton's setting, the transparent/blurred windows come to me.

For KDE, you may want to check kwin's setting since its KDE's default compositor.

gusbemacbe · 2019-11-10T09:45:46Z

Interesting, @frantic1048

I use KDE, and soon I will try i3. I will install Compton.

You forgot of answering my question:

I decided to install normally code-transparent via archlinuxcn, but I would like to change from Code - OSS to Visual Studio Code Transparent, and code or code-oss to code-transparent.

frantic1048 · 2019-11-10T11:16:21Z

You forgot of answering my question:

but I would like to change from Code - OSS to Visual Studio Code Transparent, and code or code-oss to code-transparent.

I've no idea what to answer(where's the question ?). The source code of the package just lies here: https://aur.archlinux.org/cgit/aur.git/tree/?h=code-transparent, You can modify anything as you wish.

gusbemacbe · 2019-11-10T19:50:40Z

@frantic1048 !

I decided to uninstall from archlinuxcn and to build via chroot. I changed from code-oss to code-transparent, but unfortunately it failed:

==> Validating source files with sha512sums...
    code ... Skipped
    code.js ... FAILED
    code.sh ... Passed
    product_json.diff ... FAILED
    enable-proposed-apis.diff ... Passed
    transparent.diff ... Passed

Please check the files: code-transparent.zip

frantic1048 · 2019-11-11T02:41:06Z

@gusbemacbe If you didn't update the integrity variable after changing the source, it is intended to fail.

You may need a quick look at PKGBUILD introduction about integrity section:

PKGBUILD#Integrity: https://wiki.archlinux.org/index.php/PKGBUILD#Integrity
2016-12-11-getting_started_with_arch_linux_packaging.txt: https://archwomen.org/media/project_classroom/classlogs/2016-12-11-getting_started_with_arch_linux_packaging.txt (search for sums keyword)

And further, a fundamental understanding of PKGBUILD structure is recommended if you are going to DIY. There are lots of wiki pages and documentation about PKGBUILD/makepkg. Also, you can go #archlinux IRC and similar communities for help about PKGBUILD.

gusbemacbe · 2019-11-11T13:07:24Z

@frantic1048

It has worked now.

The app is renamed appropriately VSCode Transparent (short) and Visual Studio Code Transparent.

In spite of I being an user of KDE, I installed Compton, created a folder and a file - ~/.config/compton/compton.conf, but it did not work. Neither with KWin.

But the blur worked with devilspie:

mallgrab · 2019-11-11T14:38:58Z

@gusbemacbe You don't need compton to blur it, the default kwin compositor can do it just fine.
Using this script https://store.kde.org/p/1294604 is all you need.

gusbemacbe · 2019-11-11T19:59:28Z

@mallgrab

It does not work. Here is:

frantic1048 · 2019-11-12T03:32:04Z

@gusbemacbe

It seems the window class name is not correct.

On X11 you can find window class name by xprop and click the window you are interested in.
On Wayland it depends on compositor, e.g. on Sway there is swaymsg -t get_tree for window class name info.

punidramesh · 2020-01-18T09:56:27Z

@Otakumouse is there any chance you could share the compiled version as yarn watch run gives out Task never defined: run error ?

sylveon added 7 commits June 20, 2018 17:45

Add WIP transparency implementation

c8410a6

Move windows-swca to dev dependencies

f2a6835

Make Linux transparency functional, add macOS vibrancy

80e2134

Add Windows 10 check

7b0758a

Simplify Windows transparency check

49b2ae6

Add relauncher contributions, Windows 7 blur behind and version gate …

57dd9bd

…for acrylic

Add enumDescriptions for window.compositionAttribute

e0425aa

sylveon mentioned this pull request Jun 22, 2018

Allow for transparent / vibrant window theme #32257

Closed

sylveon added 3 commits June 23, 2018 11:18

Fix various rendering bugs

bcc6279

Merge branch 'master' of https://github.com/Microsoft/vscode

b948bb0

Use app.getPath instead of getUserDataPath

005b173

chrmarti assigned bpasero Jun 25, 2018

bpasero modified the milestones: Backlog, On Deck Jun 25, 2018

nzec approved these changes Jun 26, 2018

View reviewed changes

bpasero assigned sbatten Jun 29, 2018

egamma mentioned this pull request Jul 9, 2018

Iteration Plan for July 2018 #53850

Closed

49 tasks

Merge branch 'master' into swca

05d04d3

Add missing comma, fix build issue

759338d

github-actions bot locked and limited conversation to collaborators Mar 27, 2020

Windows, macOS and Linux transparency #52707

Windows, macOS and Linux transparency #52707

Conversation

sylveon commented Jun 22, 2018

olliecheng commented Jun 23, 2018 • edited Loading

sylveon commented Jun 23, 2018

be5invis commented Jun 23, 2018

sylveon commented Jun 23, 2018

be5invis commented Jun 23, 2018

nzec left a comment

Choose a reason for hiding this comment

blahblah23 commented Jul 24, 2018 • edited Loading

sylveon commented Jul 24, 2018

olliecheng commented Jul 25, 2018

samuelmaddock commented Aug 15, 2018 • edited Loading

DRSDavidSoft commented Sep 7, 2018

rogeraabbccdd commented Aug 15, 2019 • edited Loading

NicTanghe commented Oct 1, 2019

NicTanghe commented Oct 1, 2019

gusbemacbe commented Oct 1, 2019

codic12 commented Oct 3, 2019

frantic1048 commented Oct 23, 2019

codic12 commented Oct 24, 2019

gusbemacbe commented Oct 24, 2019 • edited Loading

frantic1048 commented Oct 25, 2019

gusbemacbe commented Oct 25, 2019

frantic1048 commented Oct 27, 2019

gusbemacbe commented Oct 27, 2019

frantic1048 commented Oct 28, 2019

sergei-dyshel commented Oct 28, 2019

vegerot commented Nov 9, 2019

sylveon commented Nov 9, 2019

gusbemacbe commented Nov 9, 2019

gusbemacbe commented Nov 9, 2019

sylveon commented Nov 9, 2019

frantic1048 commented Nov 10, 2019

gusbemacbe commented Nov 10, 2019

frantic1048 commented Nov 10, 2019

gusbemacbe commented Nov 10, 2019

frantic1048 commented Nov 11, 2019

gusbemacbe commented Nov 11, 2019

mallgrab commented Nov 11, 2019

gusbemacbe commented Nov 11, 2019

frantic1048 commented Nov 12, 2019

punidramesh commented Jan 18, 2020

olliecheng commented Jun 23, 2018 •

edited

Loading

blahblah23 commented Jul 24, 2018 •

edited

Loading

samuelmaddock commented Aug 15, 2018 •

edited

Loading

rogeraabbccdd commented Aug 15, 2019 •

edited

Loading

gusbemacbe commented Oct 24, 2019 •

edited

Loading