Performant Bracket Pair Colorization

[hediet]

Before with some extension (~10.000ms):

After:

(<1 ms, more than 10k times faster)

More ToDos: #130767

"editor.bracketPairColorization.enabled": true will enable this new feature!

[Tyriar]

So this is getting built in instead of being in an extension? Have we thought about using dynamic imports for optional features like this so the bundle size doesn't keep growing?

[hediet]

So this is getting built in instead of being in an extension?

Yes, see discussion here.

Properly exposing tokens to the extension host is a very hard problem - basically, the tokens would need to be recomputed by the extension host.
Synchronizing color information back to the editor is also very hard, as a single change can cause all following brackets to change their position & their color.

This implemenation in the editor core solves both problems by efficiently reusing the existing token information and synchronously providing the decorations when the view requests them.

Have we thought about using dynamic imports for optional features like this so the bundle size doesn't keep growing?

That is a nice idea!
However, this implementation could potentially also drive the existing bracket pair matching, which could increase accuracy:

(In this case, I would rather match the two outer parentheses, as [...] should limit the scope of the inner ()

[KMFSousa]

This looks related to issue: #96899

[hediet]

@rebornix I think this is ready for review. The last details took me quite a while.

I will iterate on the performance. I had it at 50ms for checker.ts, but now it is 160ms again after I made it more correct and supported nested languages.

I think the most important points for the review are:

• editor.bracketPairColorization.enabled defaults to false. It should be easy to verify that in this case, the new code does nothing - so when bracket pair colorization is turned off, there is absolutely no performance hit and everything should work as usual.
• This feature only changes very little existing code, so it does not add a lot of debt
• I suggest to review each commit individually.
• You don't need to check the feature itself for correctness, I will iterate on it.

Also, I will add more tests.

Thanks!

[bpasero]

Maybe move utilities that are editor agnostic into base with some tests? I.e. we have map.ts.

[miguelsolorio]

In terms of color, here are the ones I would use:

For dark, I'd keep the existing colors you have, and for light I'd use the following colors:

• #9a6d03
• #C433BF
• #0879BF

And here are the color contrast ratios for each item on their respective backgrounds:

[hediet]

Thanks for the colors @misolori! However, now even I have troubles distinguishing the colors of the light theme.

The colors for the dark theme have a better relative contrast:

[hediet]

👍 Only P0 is to add a limit for super large files.

Limit is 50k lines with an average of 100 characters per line, so that it just accepts checker.ts.
Maybe the limit is to high and needs to be tweaked later.

[KROSF]

There are some problems with closing jsx tags

same problem with html

[IllusionMH]

@KROSF It's better to create separate issue as this is PR that already merged.
Looks like / is not colored and therefore whole ligature doesn't get color. Try to set "editor.fontLigatures": false

[sanket-bhalerao]

is showHorizontalScopeLine is going to be a part of this?

[IllusionMH]

@sanket-bhalerao better to discuss it in #131001

[dtinth]

How to change colors

Up to 6 colors can be specified, according to the code in this PR.

  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#896c74",
    "editorBracketHighlight.foreground2": "#6c8289",
    "editorBracketHighlight.foreground3": "#736c89",
    "editorBracketHighlight.foreground4": "#74896c",
    "editorBracketHighlight.foreground5": "#896c82",
    "editorBracketHighlight.foreground6": "#89736c"
  }

[carlosmgilp]

How to change colors

Up to 6 colors can be specified, according to the code in this PR.

{
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#896c74",
    "editorBracketHighlight.foreground2": "#6c8289",
    "editorBracketHighlight.foreground3": "#736c89",
    "editorBracketHighlight.foreground4": "#74896c",
    "editorBracketHighlight.foreground5": "#896c82",
    "editorBracketHighlight.foreground6": "#89736c"
  }
}

Hello how are you.
I'm trying to customize the colors and it doesn't work for me.
Try this way and it doesn't work.
You could explain well how to do it.
Copy paste the example and it doesn't work either.
I have vscode 1.60.0 installed
Thanks.

[gjsjohnmurray]

I'm trying to customize the colors and it doesn't work for me.

@carlosmgilp did you try the instructions at https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme ?

[carlosmgilp]

I'm trying to customize the colors and it doesn't work for me.

@carlosmgilp did you try the instructions at https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme ?

Hello, how are you? Thank you for your answer.
Excuse my English, I only speak Spanish.
Well, I'm trying to do it like that, but if you look, when writing it doesn't show me the option of "editorBracketHighlight.foregroundn"
I don't know if I'm doing something wrong.

These are the errors it shows me.

Thanks.

[miguelsolorio]

@carlosmgilp you need to remove the extra brackets on line 96 & 105:

[carlosmgilp]

@carlosmgilp you need to remove the extra brackets on line 96 & 105:

Hello brother, how are you? Thank you so much for your help and everyone's.
It works great now.
Thank you.

[carlosmgilp]

Is there a way to activate the colored line between each bracket.
Beforehand thank you very much.

[carlosmgilp]

Hello how are you.
I wanted to make an inquiry.
Because when I have part of my code commented, the parentheses are still shown in color.
Is that a bug or I have to configure something else.
I am using AutoLISP as code.

[hediet]

See #132249.

[carlosmgilp]

Hi @hediet thanks for your help.
I will publish it in the other post.
Thank you.