Custom CSS

[yougotwill]

This feature might be overkill but could be useful for users with specific needs that aren't required to be a part of the extension. My need for this is that I can't read the full commit information and I'm happy to have horizontal overflow with a scrollbar so I can read everything. Obviously not everyone would want this and I don't think that it should be part of the extension - there are various solutions to the original problem that are better.

By allowing user customization via css I can solve my quick UI issues without bothering you and if I made CSS that was useful enough I could potentially make a PR at a later stage after testing things myself in my own machine.

Example:

Before:

https://github.com/phil294/git-log--graph/assets/14887287/96af4b92-a426-4879-95e2-fb0a23ea8a6f

After:

https://github.com/phil294/git-log--graph/assets/14887287/bbb350a3-5394-44c4-ae1e-3d3af0cfc048

CSS:

.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
    width: 150vw;
    overflow-x: scroll;
}

[phil294]

Great idea. I'm all in for customization. I've also been using the Custom CSS and JS Loader for a while for similar purposes. It's unfortunate VSCode doesn't allow for this natively. Said extension needs to be reenabled after every update, that's why I dropped it at some point.

It might even be an idea to support custom JS, or exposing certain event handlers, or allowing for arbitrary HTML altogether. I think this would be possible, as webview extensions can do pretty much anything they want, including setting a CSP header. But as I can't think of any use case for this, I'd rather not do this right now. Custom JS also comes at the downside of potential security issues for when your JS is saved inside workspace settings of a shared project.

I wonder if anybody has ever created a "do anything" extension for VSCode which basically hooks up into all available APIs (status bar, icons, commands, context menus and so on) but doesn't put anything in there, just connect all APIs vscode has to offer to the web view and offer writing custom html. With such an extension, it would be possible to write e.g. #15 but not for this, but any other extension. Anyway...

if I made CSS that was useful enough I could potentially make a PR at a later stage after testing things myself in my own machine.

yup

I can't read the full commit information

Why is that though? Why does the left branch area take up so much space? For lage repos, the code for width determination is currently

width: max(min(50vw, maximum_amount_of_graph_symbols_in_a_row * 2 + 20, 210px)

so given that one branch takes up two chars (e.g. |), for a width of 700px to be reached like in your case you'd need 340 BRANCHES next to each other at some point in your git history. Is that really the case? If so, what's the performance of the extension like?

[yougotwill]

Why is that though? Why does the left branch area take up so much space? For lage repos, the code for width determination is currently

width: max(min(50vw, maximum_amount_of_graph_symbols_in_a_row * 2 + 20, 210px)

so given that one branch takes up two chars (e.g. | ), for a width of 700px to be reached like in your case you'd need 340 BRANCHES next to each other at some point in your git history. Is that really the case? If so, what's the performance of the extension like?

My day job is working on an open source project https://github.com/oxen-io/session-desktop/ and depending on the remotes I have added it ends up being quite a lot of branches since we are a fork of Signal and we are quite active as well.

At my count locally I have 257 branches currently. I also tend to like the left bar in Vs Code to be quite wide.

What is interesting is that the issue only showed up on my work machine. So i might need to debug it more. I'm on my personal now and there isn't the same issue and the commit messages are visible.

Regardless I still think custom css would be an amazing feature to this app. 🙏

[phil294]

do you have an idea how you would go about sanitizing custom user css? I can't just do <style>${config.custom_css}</style> because malicious code (for example from workspace settings of a project you clone) could then inject a { asdf: fdsa</style><script>alert('huehue')</script>; }. I tried a css parser-and-restringifyer https://www.npmjs.com/package/css but it happens even with that. I have failed to find any help on that topic so far.

[yougotwill]

Haven't tested this exact use case but I generally use https://github.com/leizongmin/js-xss for all my santization. The Section Customize CSS Filter is probably what you want.

I appreciate you being security conscious 😄

[phil294]

looked promising, but it took me half an hour to figure out why it doesn't work: This only validates style="..." attributes. Validating full CSS code is not supported by this module.

I'll keep looking for something else a bit, or ship it without validation.

[phil294]

ok went with https://github.com/eramdam/postcss-sanitize, the best I could find. Uses PostCSS, so this adds 100 kB (uncompressed) to the bundle size, but I guess the css is reasonably safe now

[phil294]

in the last two updates I have changed a few tweaks about the branch visualization width, so perhaps the initial problem of yours isn't even present anymore (?)

[yougotwill]

looked promising, but it took me half an hour to figure out why it doesn't work: This only validates style="..." attributes. Validating full CSS code is not supported by this module.

I'll keep looking for something else a bit, or ship it without validation.

Ah damn sorry about that rabbit hole. But I'm glad you came to a solution.

in the last two updates I have changed a few tweaks about the branch visualization width, so perhaps the initial problem of yours isn't even present anymore (?)

I'll check this out and get back to you