editor: Cache getComputedStyle result in shadowCaretRangeFromPoint (#319803)

[ishaq2321]

Summary

Reduces 6 redundant getComputedStyle() calls to 1 in shadowCaretRangeFromPoint(), which runs on every mouse move over the editor viewport's shadow DOM content.

Problem

In src/vs/editor/browser/controller/mouseTarget.ts:1136-1142, each CSS font property (font-style, font-variant, font-weight, font-size, line-height, font-family) was retrieved via a separate getComputedStyle(el, null) call. Each call forces a synchronous style recalculation, making this a measurable hot-path cost multiplied across every mouse move in the editor.

Fix

Cache the getComputedStyle() result once in a local variable, then call .getPropertyValue() on the cached result. The computed CSSStyleDeclaration object is a live object, but since we only read properties (not mutating between reads), the cached reference is safe and correct.

Impact

• 6x reduction in forced style recalculations on every mouse move over editor content
• No functional change — same properties read, same output, same behavior
• Single file changed, +1 line/-0 lines net

Before/After

- const fontStyle = elWindow.getComputedStyle(el, null).getPropertyValue('font-style');
- const fontVariant = elWindow.getComputedStyle(el, null).getPropertyValue('font-variant');
- const fontWeight = elWindow.getComputedStyle(el, null).getPropertyValue('font-weight');
- const fontSize = elWindow.getComputedStyle(el, null).getPropertyValue('font-size');
- const lineHeight = elWindow.getComputedStyle(el, null).getPropertyValue('line-height');
- const fontFamily = elWindow.getComputedStyle(el, null).getPropertyValue('font-family');
+ const computedStyle = elWindow.getComputedStyle(el, null);
+ const fontStyle = computedStyle.getPropertyValue('font-style');
+ const fontVariant = computedStyle.getPropertyValue('font-variant');
+ const fontWeight = computedStyle.getPropertyValue('font-weight');
+ const fontSize = computedStyle.getPropertyValue('font-size');
+ const lineHeight = computedStyle.getPropertyValue('line-height');
+ const fontFamily = computedStyle.getPropertyValue('font-family');

This is a well-known browser perf best practice — MDN recommends caching getComputedStyle results when reading multiple properties.

Closes #319803

Co-authored-by: Muhammad Ishaq Khan muhammadishaqkhan.2321@gmail.com

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Refactors shadowCaretRangeFromPoint to avoid repeated getComputedStyle calls when building the font string.

Changes:

• Cache the CSSStyleDeclaration returned by getComputedStyle in a local computedStyle variable.
• Read multiple font-related properties from the cached style instead of re-calling getComputedStyle per property.

[alexdima]

Thank you!