Flickering when changing

[MalcolmMielle]

I'm the author of a similar extension and some of my users have pointed to this extension :).

I tried it and I like it, it's great! One thing that I have observed is that mine doesn't flicker, and with yours it does on my machine. I'm not sure what I did that fixed, but if you feel like looking into the code and integrating it into colormate, that would be great! Your code, as far as I can see, works better on large projects, so I would love to switch to yours if the flicker is resolved :)

[Sawtaytoes]

Thank you so much!

This was my first TypeScript project, and it was an uphill battle to figure it out. I actually wrote this as a personal requirement to use VS Code over Sublime Text where I had a similar (now broken) version of a similar plugin.

I'm not sure what you mean by flicker. Can you explain in more detail?

Do you mean flicker because is it's recalculating colors on the fly and only once per code window.

[MalcolmMielle]

Are we the same person apart from the fact I'm coming from Kdevelop :P?

Do you mean flicker because is it's recalculating colors on the fly and only once per code window.

I think so! When I press Ctrl+S, for a brief instant, all the color reset before it becomes colorful again. My repo doesn't do that, so there might be some logic there for it. I think I have added a special buffer for it, but it was a while back and I don't remember.

[Sawtaytoes]

I pushed up an update (3.3.1).

It might not fix the flickering, but it did fix a couple other issues:

• Memory overflow causing imports to stop highlighting.
• Multiple editor windows weren't updating together.
• There wasn't a smooth debounce, so colors would flash more often than you wanted.

I completely refactored eventing logic, but I have yet to get back into the colorizing code. It gets pretty complex because I have to load TextMate-style configs for semantic colors not provided by VSCode.

[Sawtaytoes]

Ok, in large files, I see the flickering now. No, it's not gone.

It's related to the fact that I'm re-coloring everything only after removing the old colors. There's probably an optimization I could do to leave the old colors, add new ones, and remove the old ones after.

[torotil]

• There wasn't a smooth debounce, so colors would flash more often than you wanted.

For me the colors are still flashing for every keystroke I make.

[Sawtaytoes]

I have a 100ms debounce that started since v3.3.0 since I posted that I update.

I'll have to make it configurable. I based it off my own typing speed, and what I expected to see.

[torotil]

I’m pretty sure I’m doing more than 10 keystrokes per second. For me it almost looks like no debouncing is happening. I have double-checked that I’m on v3.3.3. When I downgrade to v3.2 I get a bit less flickering.

[Sawtaytoes]

Hmm... Before, it would debounce at 200ms, but it didn't group them, and the debounce didn't even care about other event calls (unless it was a singleton 🤷‍♂️). It just waited 200ms and then executed the colorize call.

v3.3 has debouncing per editor window for all update events, and they now happen at 100ms.

[torotil]

Screencast_20231121_094557.webm

Here is a video of what I am observing. The file has a few hundred lines but is otherwise not complicated.

What I see is:

• Even though I’m typing fast it flickers multiple times.
• Even after I stop typing several more flickers occur.

I think what happens is that even though I’m fast there might be pauses that are longer than 100ms. The problem is then that the redraw is triggered, but additional redraws might be triggered while the one is happening. So they seem to queue up. Also the editor starts to lag. My keystrokes are delayed leading to more pauses of >100ms and more redraws queuing up.

[Sawtaytoes]

v3.3.4 has the fix you're wanting.

Problem

I was removing all colors and then colorizing again.

Source: https://github.com/Sawtaytoes/vscode-colormate/blob/v3.3.3/src/colorize.ts#L406-L408

Solution

Remove previous colors only after coloring. This prevents the flashing that occurs in already-colored text editors.

Source: https://github.com/Sawtaytoes/vscode-colormate/blob/v3.3.4/src/colorize.ts#L459-L466

This also fixes some bad code where mutations were occurring in the removal function. Not sure why I wrote it that way 🤷‍♂️.

[Sawtaytoes]

Screencast_20231121_094557.webm
Here is a video of what I am observing. The file has a few hundred lines but is otherwise not complicated.

What I see is:

• Even though I’m typing fast it flickers multiple times.
• Even after I stop typing several more flickers occur.

I think what happens is that even though I’m fast there might be pauses that are longer than 100ms. The problem is then that the redraw is triggered, but additional redraws might be triggered while the one is happening. So they seem to queue up. Also the editor starts to lag. My keystrokes are delayed leading to more pauses of >100ms and more redraws queuing up.

Ah, I didn't see your video until now.

v3.3.4 should fix the extra flashing issue, but it looks like that's not the case. The removal still happens sometimes while typing in some cases.

I'm wondering if the token scopes are changing while you type, and that's why it's doing the flashy thing. If the token scopes were removed and then re-added, it would first remove all colors, then re-add them.

[Sawtaytoes]

I put a breakpoint when the color-removal function gets called and this is what I saw:

1. Before typing:
   
2. After typing [2], it colors the whole variable, but the original text decoration takes precedence which is why we do a removal:
   
3. What it looks like after the removal runs:
   

In this contrived example, it's working correctly.

[Sawtaytoes]

I was right. Part of the flashiness is from the 100ms debounce. The other flashiness comes from the fact that, by typing some characters, all scopes will temporarily disappear and reappear.

I had trouble capturing this because it happens so quickly, but as you can see here, when I press 4, it breaks the code which breaks the scopes:

This is what it should look like:

Raising the debounce to 250ms mitigates most of these issues because it gives VSCode time to figure out "oh, that's a function arg" and get the updates scopes in before it has time to remove all colors.

---

Any suggestions on how to fix this other than modifying the debounce would be greatly appreciated!

TextMate grammars are correct even when VSCode's scopes are not.

Solution 1

We could add TextMate grammar highlights on top of VSCode scope highlights, but that poses an issue. For some reason, the WASM runner for TextMate grammars crashes after some time of VSCode being open. I think it's related to too many instances of it running at the same time.

I have put in one caching solution so far, but all that does is temporarily mitigate it. Eventually, it'll run out of memory again and be completely broken after that. I have yet to figure out a solution for that issue, but if I did, we could instead rely on TextMate grammars and wouldn't have the flashiness.

Solution 2

I'm wondering if there's another way to check if VSCode is still processing scopes and halt the colorization until it's done figuring them out.

Since it's removing scopes when we go to colorize, that's why we see flashiness happening.