Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Windows, macOS and Linux transparency #52707

Closed
wants to merge 30 commits into from

Conversation

@sylveon
Copy link
Contributor

sylveon commented Jun 22, 2018

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?")

sylveon added 7 commits Jun 20, 2018
…for acrylic
@denosawr

This comment has been minimized.

Copy link

denosawr commented Jun 23, 2018

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

Proof

@sylveon

This comment has been minimized.

Copy link
Contributor Author

sylveon commented Jun 23, 2018

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)

sylveon added 3 commits Jun 23, 2018
@be5invis

This comment has been minimized.

Copy link
Contributor

be5invis commented Jun 23, 2018

Are text over transparent background lost LCD antialiasing?

@sylveon

This comment has been minimized.

Copy link
Contributor Author

sylveon commented Jun 23, 2018

I haven't seen such thing happen while testing

@be5invis

This comment has been minimized.

Copy link
Contributor

be5invis commented Jun 23, 2018

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

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

duttaditya18 left a comment

That looks beautiful ❤️

@egamma egamma referenced this pull request Jul 9, 2018
42 of 49 tasks complete
@blahblah23

This comment has been minimized.

Copy link

blahblah23 commented Jul 24, 2018

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

This comment has been minimized.

Copy link
Contributor Author

sylveon commented Jul 24, 2018

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.

@denosawr

This comment has been minimized.

Copy link

denosawr commented Jul 25, 2018

@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

This comment has been minimized.

Copy link

samuelmaddock commented Aug 15, 2018

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

This comment has been minimized.

Copy link

DRSDavidSoft commented Sep 7, 2018

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

@sergei-dyshel

This comment has been minimized.

Copy link

sergei-dyshel commented Aug 14, 2019

@sylveon
Do you have any plan rebasing this patch on current version of vscode? I tried to do it by myself but ran into non-trivial changes (deleted/moved files etc.)?

@sylveon

This comment has been minimized.

Copy link
Contributor Author

sylveon commented Aug 14, 2019

No

@rogeraabbccdd

This comment has been minimized.

Copy link

rogeraabbccdd commented Aug 15, 2019

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

This comment has been minimized.

Copy link

NicTanghe commented Oct 1, 2019

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

This comment has been minimized.

Copy link

NicTanghe commented Oct 1, 2019

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

This comment has been minimized.

Copy link

gusbemacbe commented Oct 1, 2019

@NicTanghe

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

@gsbhasin123

This comment has been minimized.

Copy link

gsbhasin123 commented Oct 3, 2019

Why won't this be merged?

@frantic1048

This comment has been minimized.

Copy link

frantic1048 commented Oct 23, 2019

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.

QegF


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

@gsbhasin123

This comment has been minimized.

Copy link

gsbhasin123 commented Oct 24, 2019

@frantic1048 Thank you!

@gusbemacbe

This comment has been minimized.

Copy link

gusbemacbe commented Oct 24, 2019

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

This comment has been minimized.

Copy link

frantic1048 commented Oct 25, 2019

@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

This comment has been minimized.

Copy link

gusbemacbe commented Oct 25, 2019

@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! vscode-automation@1.39.0 compile: `npm run copy-driver && npm run copy-driver-definition && tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the vscode-automation@1.39.0 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

This comment has been minimized.

Copy link

frantic1048 commented Oct 27, 2019

@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

This comment has been minimized.

Copy link

gusbemacbe commented Oct 27, 2019

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

This comment has been minimized.

Copy link

frantic1048 commented Oct 28, 2019

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

This comment has been minimized.

Copy link

sergei-dyshel commented Oct 28, 2019

Did anyone try this patch on MacOS?

@vegerot

This comment has been minimized.

Copy link

vegerot commented Nov 9, 2019

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

This comment has been minimized.

Copy link
Contributor Author

sylveon commented Nov 9, 2019

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

This comment has been minimized.

Copy link

gusbemacbe commented Nov 9, 2019

@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

This comment has been minimized.

Copy link

gusbemacbe commented Nov 9, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

sylveon commented Nov 9, 2019

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

@frantic1048

This comment has been minimized.

Copy link

frantic1048 commented Nov 10, 2019

Screenshot_20191110_162339

@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.

  1. 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

This comment has been minimized.

Copy link

gusbemacbe commented Nov 10, 2019

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

This comment has been minimized.

Copy link

frantic1048 commented Nov 10, 2019

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

This comment has been minimized.

Copy link

gusbemacbe commented Nov 10, 2019

@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

This comment has been minimized.

Copy link

frantic1048 commented Nov 11, 2019

@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:

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

This comment has been minimized.

Copy link

gusbemacbe commented Nov 11, 2019

@frantic1048

It has worked now.

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

image

image

image

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:

image

@mallgrab

This comment has been minimized.

Copy link

mallgrab commented Nov 11, 2019

@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

This comment has been minimized.

Copy link

gusbemacbe commented Nov 11, 2019

@mallgrab

It does not work. Here is:

kwin_unworking

@frantic1048

This comment has been minimized.

Copy link

frantic1048 commented Nov 12, 2019

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.