From d3d077618fe442024773be9935ff4f4f3d4498f9 Mon Sep 17 00:00:00 2001
From: vince-fugnitto <vincent.fugnitto@ericsson.com>
Date: Tue, 22 Mar 2022 13:25:01 -0400
Subject: [PATCH] monaco: adjust where the monaco menu appears

The commit adjusts the monaco menu (quick-input) to appear after the
main-menu and not overlay it.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>
---
 .../src/browser/monaco-quick-input-service.ts | 21 +++++++++----------
 packages/monaco/src/browser/style/index.css   |  6 ++++++
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts
index ea621daa17a0c..c347f94b603f8 100644
--- a/packages/monaco/src/browser/monaco-quick-input-service.ts
+++ b/packages/monaco/src/browser/monaco-quick-input-service.ts
@@ -15,11 +15,12 @@
 // *****************************************************************************
 
 import {
+    ApplicationShell,
     InputBox, InputOptions, KeybindingRegistry, PickOptions,
     QuickInputButton, QuickInputHideReason, QuickInputService, QuickPick, QuickPickItem,
     QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator
 } from '@theia/core/lib/browser';
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
     IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInput, IQuickInputButton,
     IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, IQuickPickItemButtonEvent, IQuickPickSeparator, QuickPickInput
@@ -61,6 +62,9 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     controller: QuickInputController;
     quickAccess: IQuickAccessController;
 
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
     @inject(VSCodeContextKeyService)
     protected readonly contextKeyService: VSCodeContextKeyService;
 
@@ -71,7 +75,8 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     get onShow(): monaco.IEvent<void> { return this.controller.onShow; }
     get onHide(): monaco.IEvent<void> { return this.controller.onHide; }
 
-    constructor() {
+    @postConstruct()
+    protected init(): void {
         this.initContainer();
         this.initController();
         this.quickAccess = new QuickAccessController(this, StandaloneServices.get(IInstantiationService));
@@ -149,15 +154,9 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     }
 
     private initContainer(): void {
-        const overlayWidgets = document.createElement('div');
-        overlayWidgets.classList.add('quick-input-overlay');
-        document.body.appendChild(overlayWidgets);
-        const container = this.container = document.createElement('quick-input-container');
-        container.style.position = 'absolute';
-        container.style.top = '0px';
-        container.style.right = '50%';
-        container.style.zIndex = '1000000';
-        overlayWidgets.appendChild(container);
+        const container = this.container = document.createElement('div');
+        container.id = 'quick-input-container';
+        this.shell.mainPanel.node.appendChild(this.container);
     }
 
     private initController(): void {
diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css
index 99489d6240fc4..5784aa7af18a8 100644
--- a/packages/monaco/src/browser/style/index.css
+++ b/packages/monaco/src/browser/style/index.css
@@ -4,6 +4,12 @@
   font-size: inherit !important;
 }
 
+#quick-input-container {
+  position: fixed;
+  right: 50%;
+  z-index: 1000000;
+}
+
 /*
  * set z-index to 0, so tabs are not above overlay widgets
  */