Monaco-editor: automaticLayout broken on master?

[orta]

Repro:

• Working: Drag the sidebar left of right on 3.7.5
• Not Working: 3.8.3

3.7.5 is from about a month ago, 3.8.3 is from yesterday.

They both have the same outer code for the playground, but refer to different Monaco-editors and Monaco TypeScripts. I'll know I can move off automaticLayout by telling the editor when the sidebar changes, but I'll leave it this way for a few days so there's a a working repro.

[alexdima]

It is possible that https://github.com/microsoft/vscode/pull/90111 has broken things. On master the editor now tries to use a MutationObserver to decide if it should rescan the container dom node.

Do you have a pointer to the outer code?

[orta]

The code is a little complex because there's a few moving parts...

• This is the playground page which grabs monaco, then creates for a typescript-sandbox
• The sandbox creates and sets up a monaco instance with these settings
• The editor's containing div is then edited via it's CSS directly inside the playground's JS

Monaco lives in a #monaco-editor-embed which is a child of #playground-container (because it also has the toolbar of the same width) - so changes in width are applied 2 divs up, and then the toolbar and monaco would be resized to fit using CSS block's usual "fill the whole thing horizontally"

[alexdima]

Aha! I believe this is due to the usage of calc here -- https://github.com/microsoft/TypeScript-Website/blob/0babe4b37d3d82485138d908065798926acbd018/packages/playground/src/index.ts#L212-L213

So the height of the container can change without any properties being changed... The MutationObserver listens to properties getting changed.

[orta]

Nice sleuthing, I'm open to this issue being closed - I'm not really sure what else you could do from Monaco's side for something like this other than have an optional fallback to the old mode

[alexdima]

Well, I think we're using the wrong concept. I just found https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

[nrayburn-tech]

Resize Observer is the best way to do it, but lacks Safari support and I think at the time Monaco was still supporting IE, which also doesn’t support Resize Observer.
Maybe we should implement Resize Observer and then use the interval timer as a fallback for Safari?

[rcjsuen]

See #1884 for another issue that seems to be related to automaticLayout.

[nrayburn-tech]

I’ll try to get a PR submitted this weekend to work as described above.

[aeremin]

Any chance for a new bugfix release including the fix above?
AFAIU version in master branch of this repo still has this problem (but maybe I don't understand how microsoft/vscode and microsoft/monaco-editor relation works).