This PR fixes #139281

This PR also fixes microsoft/monaco-editor#2347 and microsoft/monaco-editor#531

When a rendered ViewLine contains foreign elements or is uses a non-monospaced font, VSCode uses a helper (RangeUtil.readHorizontalRanges) to calculate the pixel widths and offsets. This in turn uses Element#getClientRects and Range#getClientRects to retrieve the raw sizes as reported by the browser. If the editor element, or any of its parents are scaled using css transforms, the calculated sizes are incorrect.

This tiny patch calculates the scale of the view-lines in the DomReadingContext, and adjusts the resulting ranges in _createHorizontalRangesFromClientRects. It is only checking the offsetWidth of the viewLines element once, in the same step that it previously called getBoundingClientRect() on this element. It will not result in any additional layouts or reflows.

We ran into this issue at Scrimba.com (using monaco) when trying to animate the size of the editor when it transitions in. Decorations and selections have incorrect sizes and positions. This is also easy to test on the monaco playgrounds by simply scaling the whole document body document.body.style.transform = 'scale(0.75)' and then selecting code in any of the examples (only lines with variable length text or foreign elements).

Steps to Reproduce / test:

1. Go to vscode.dev
2. Create a simple css file with the content body { color: red; }
3. Scale the document document.body.style.transform = "scale(0.75)"
4. Select the code and/or move caret around to see wrong positions and sizes

Do the same in locally built vscode.dev to see that things are now rendered correctly.