Start moving window/document to use layout service

Part of #195804

src/vs/workbench/contrib/terminal/browser/terminalGroup.ts

@@ -473,7 +473,7 @@ export class TerminalGroup extends Disposable implements ITerminalGroup {
 
 		// If we already have a group element, we can reparent it
 		if (!this._groupElement) {
-			this._groupElement = document.createElement('div');
+			this._groupElement = this._layoutService.container.ownerDocument.createElement('div');
 			this._groupElement.classList.add('terminal-group');
 		}
 

src/vs/workbench/contrib/terminal/browser/terminalInstance.ts

@@ -88,6 +88,7 @@ import { ISimpleSelectedSuggestion } from 'vs/workbench/services/suggest/browser
 import type { IMarker, Terminal as XTermTerminal } from 'xterm';
 import { AccessibilityCommandId } from 'vs/workbench/contrib/accessibility/common/accessibilityCommands';
 import { terminalStrings } from 'vs/workbench/contrib/terminal/common/terminalStrings';
+import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 
 const enum Constants {
 	/**
@@ -170,7 +171,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 	private _attachBarrier: AutoOpenBarrier;
 	private _icon: TerminalIcon | undefined;
 	private _messageTitleDisposable: MutableDisposable<IDisposable> = this._register(new MutableDisposable());
-	private _widgetManager: TerminalWidgetManager = new TerminalWidgetManager();
+	private _widgetManager: TerminalWidgetManager;
 	private _dndObserver: MutableDisposable<IDisposable> = this._register(new MutableDisposable());
 	private _lastLayoutDimensions: dom.Dimension | undefined;
 	private _hasHadInput: boolean;
@@ -252,7 +253,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 	get os(): OperatingSystem | undefined { return this._processManager.os; }
 	get isRemote(): boolean { return this._processManager.remoteAuthority !== undefined; }
 	get remoteAuthority(): string | undefined { return this._processManager.remoteAuthority; }
-	get hasFocus(): boolean { return this._wrapperElement.contains(document.activeElement) ?? false; }
+	get hasFocus(): boolean { return dom.isAncestorOfActiveElement(this._wrapperElement); }
 	get title(): string { return this._title; }
 	get titleSource(): TitleEventSource { return this._titleSource; }
 	get icon(): TerminalIcon | undefined { return this._getIcon(); }
@@ -355,13 +356,16 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		@IOpenerService private readonly _openerService: IOpenerService,
 		@ICommandService private readonly _commandService: ICommandService,
 		@IAudioCueService private readonly _audioCueService: IAudioCueService,
-		@IViewDescriptorService private readonly _viewDescriptorService: IViewDescriptorService
+		@IViewDescriptorService private readonly _viewDescriptorService: IViewDescriptorService,
+		@ILayoutService layoutService: ILayoutService
 	) {
 		super();
 
-		this._wrapperElement = document.createElement('div');
+		this._wrapperElement = layoutService.container.ownerDocument.createElement('div');
 		this._wrapperElement.classList.add('terminal-wrapper');
 
+		this._widgetManager = this._register(instantiationService.createInstance(TerminalWidgetManager));
+
 		this._skipTerminalCommands = [];
 		this._isExiting = false;
 		this._hadFocusOnExit = false;
@@ -997,7 +1001,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		this._register(dom.addDisposableListener(xterm.raw.element, 'mousedown', () => {
 			// We need to listen to the mouseup event on the document since the user may release
 			// the mouse button anywhere outside of _xterm.element.
-			const listener = dom.addDisposableListener(document, 'mouseup', () => {
+			const listener = dom.addDisposableListener(xterm.raw.element!.ownerDocument, 'mouseup', () => {
 				// Delay with a setTimeout to allow the mouseup to propagate through the DOM
 				// before evaluating the new selection state.
 				setTimeout(() => this._refreshSelectionContextKey(), 0);

src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts

@@ -419,10 +419,10 @@ export class TerminalTabbedView extends Disposable {
 			event.stopImmediatePropagation();
 			this._cancelContextMenu = false;
 		}));
-		this._register(dom.addDisposableListener(document, 'keydown', (event: KeyboardEvent) => {
+		this._register(dom.addDisposableListener(terminalContainer.ownerDocument, 'keydown', (event: KeyboardEvent) => {
 			terminalContainer.classList.toggle('alt-active', !!event.altKey);
 		}));
-		this._register(dom.addDisposableListener(document, 'keyup', (event: KeyboardEvent) => {
+		this._register(dom.addDisposableListener(terminalContainer.ownerDocument, 'keyup', (event: KeyboardEvent) => {
 			terminalContainer.classList.toggle('alt-active', !!event.altKey);
 		}));
 		this._register(dom.addDisposableListener(parentDomElement, 'keyup', (event: KeyboardEvent) => {
@@ -478,11 +478,11 @@ export class TerminalTabbedView extends Disposable {
 		if (this._terminalService.connectionState === TerminalConnectionState.Connecting) {
 			// If the terminal is waiting to reconnect to remote terminals, then there is no TerminalInstance yet that can
 			// be focused. So wait for connection to finish, then focus.
-			const activeElement = document.activeElement;
+			const activeElement = this._tabListElement.ownerDocument.activeElement;
 			this._register(this._terminalService.onDidChangeConnectionState(() => {
 				// Only focus the terminal if the activeElement has not changed since focus() was called
-				// TODO hack
-				if (document.activeElement === activeElement) {
+				// TODO: Hack
+				if (this._tabListElement.ownerDocument.activeElement === activeElement) {
 					this._focus();
 				}
 			}));

src/vs/workbench/contrib/terminal/browser/terminalView.ts

@@ -303,11 +303,11 @@ export class TerminalViewPane extends ViewPane {
 		if (this._terminalService.connectionState === TerminalConnectionState.Connecting) {
 			// If the terminal is waiting to reconnect to remote terminals, then there is no TerminalInstance yet that can
 			// be focused. So wait for connection to finish, then focus.
-			const activeElement = document.activeElement;
+			const activeElement = this.element.ownerDocument.activeElement;
 			this._register(this._terminalService.onDidChangeConnectionState(() => {
 				// Only focus the terminal if the activeElement has not changed since focus() was called
 				// TODO hack
-				if (document.activeElement === activeElement) {
+				if (this.element.ownerDocument.activeElement === activeElement) {
 					this._terminalGroupService.showPanel(true);
 				}
 			}));

src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts

@@ -103,13 +103,13 @@ class CellHoverTarget extends Widget implements IHoverTarget {
 
 		if (this._options.modifierDownCallback && this._options.modifierUpCallback) {
 			let down = false;
-			this._register(dom.addDisposableListener(document, 'keydown', e => {
+			this._register(dom.addDisposableListener(container.ownerDocument, 'keydown', e => {
 				if (e.ctrlKey && !down) {
 					down = true;
 					this._options.modifierDownCallback!();
 				}
 			}));
-			this._register(dom.addDisposableListener(document, 'keyup', e => {
+			this._register(dom.addDisposableListener(container.ownerDocument, 'keyup', e => {
 				if (!e.ctrlKey) {
 					down = false;
 					this._options.modifierUpCallback!();

src/vs/workbench/contrib/terminal/browser/widgets/widgetManager.ts

@@ -4,15 +4,21 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IDisposable } from 'vs/base/common/lifecycle';
+import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { ITerminalWidget } from 'vs/workbench/contrib/terminal/browser/widgets/widgets';
 
 export class TerminalWidgetManager implements IDisposable {
 	private _container: HTMLElement | undefined;
 	private _attached: Map<string, ITerminalWidget> = new Map();
 
+	constructor(
+		@ILayoutService private readonly _layoutService: ILayoutService,
+	) {
+	}
+
 	attachToElement(terminalWrapper: HTMLElement) {
 		if (!this._container) {
-			this._container = document.createElement('div');
+			this._container = this._layoutService.container.ownerDocument.createElement('div');
 			this._container.classList.add('terminal-widget-container');
 			terminalWrapper.appendChild(this._container);
 		}

src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts

@@ -134,9 +134,11 @@ export class DecorationAddon extends Disposable implements ITerminalAddon {
 	}
 
 	private _updateGutterDecorationVisibility(): void {
-		const commandDecorationElements = document.querySelectorAll(DecorationSelector.CommandDecoration);
-		for (const commandDecorationElement of commandDecorationElements) {
-			this._updateCommandDecorationVisibility(commandDecorationElement);
+		const commandDecorationElements = this._terminal?.element?.querySelectorAll(DecorationSelector.CommandDecoration);
+		if (commandDecorationElements) {
+			for (const commandDecorationElement of commandDecorationElements) {
+				this._updateCommandDecorationVisibility(commandDecorationElement);
+			}
 		}
 	}
 

src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts

@@ -179,7 +179,10 @@ export class XtermTerminal extends Disposable implements IXtermTerminal, IDetach
 	}
 
 	public get isFocused() {
-		return !!this.raw.element?.contains(document.activeElement);
+		if (!this.raw.element) {
+			return false;
+		}
+		return dom.isAncestorOfActiveElement(this.raw.element);
 	}
 
 	/**