Shell: Fix search menu zoom (microsoft#1582)

- Clamp zoom between 0.25 to 5, which is the limit for
electron/chromium.
- Fix clipping of the search menu after zoom.
- Fix search menu position on changing divider position.
- Disable scrolling of the chat view (if divider becomes too small)

Author: curtisman

ts/packages/shell/src/main/electronSearchMenuUI.ts

@@ -132,14 +132,6 @@ export function initializeSearchMenuUI(shellWindow: ShellWindow) {
         }
         const view = await searchMenuViewP;
         debug(`search-menu-size: ${id} ${JSON.stringify(size)}`);
-        const bounds = view.getBounds();
-        const zoomFactor = view.webContents.getZoomFactor();
-        const bottom = bounds.y + bounds.height;
-        view.setBounds({
-            x: bounds.x,
-            y: bottom - size.height * zoomFactor,
-            width: size.width * zoomFactor,
-            height: size.height * zoomFactor,
-        });
+        shellWindow.updateOverlayWebContentsView(view, size);
     });
 }

ts/packages/shell/src/main/shellWindow.ts

@@ -64,6 +64,11 @@ function setupResizeHandler(mainWindow: BrowserWindow, handler: () => void) {
 }
 
 type BottomAlignedPosition = { left: number; bottom: number };
+type OverlayData = BottomAlignedPosition & {
+    width: number;
+    height: number;
+};
+
 export class ShellWindow {
     public static getInstance(): ShellWindow | undefined {
         return this.instance;
@@ -74,7 +79,7 @@ export class ShellWindow {
     public readonly chatView: WebContentsView;
     private readonly overlayWebContentsViews: Map<
         WebContentsView,
-        BottomAlignedPosition
+        OverlayData
     > = new Map();
 
     private verticalLayout: boolean;
@@ -106,34 +111,67 @@ export class ShellWindow {
         return activeBrowserView.webContentsView;
     }
 
+    private updateOverlayWebContentsViewBounds() {
+        for (const [view, data] of this.overlayWebContentsViews.entries()) {
+            this.setOverlayWebContentsViewBounds(view, data);
+        }
+    }
+
     private setOverlayWebContentsViewBounds(
         view: WebContentsView,
-        position: BottomAlignedPosition,
+        data: OverlayData,
     ) {
         const chatBounds = this.chatView.getBounds();
-        const current = view.getBounds();
         const zoomFactor = this.chatView.webContents.zoomFactor;
-        const left = chatBounds.x + position.left * zoomFactor;
-        const bottom = chatBounds.y + position.bottom * zoomFactor;
-
+        const left = chatBounds.x + data.left * zoomFactor;
+        const bottom =
+            chatBounds.y + chatBounds.height - data.bottom * zoomFactor;
+        const width = data.width * zoomFactor;
+        const height = data.height * zoomFactor;
         const newBounds = {
             x: left,
-            y: bottom - current.height,
-            width: current.width,
-            height: current.height,
+            y: bottom - height,
+            width,
+            height,
         };
-        view.webContents.setZoomFactor(zoomFactor);
         view.setBounds(newBounds);
+        view.webContents.setZoomFactor(zoomFactor);
     }
 
     public updateOverlayWebContentsView(
         view: WebContentsView,
-        position?: BottomAlignedPosition,
+        update?: Partial<OverlayData>,
     ) {
-        if (position) {
-            this.overlayWebContentsViews.set(view, position);
-            this.mainWindow.contentView.addChildView(view);
-            this.setOverlayWebContentsViewBounds(view, position);
+        if (update) {
+            let data = this.overlayWebContentsViews.get(view);
+            if (data === undefined) {
+                this.mainWindow.contentView.addChildView(view);
+                const bounds = view.getBounds();
+                data = {
+                    left: 0,
+                    bottom: 0,
+                    width: bounds.width,
+                    height: bounds.height,
+                };
+
+                this.overlayWebContentsViews.set(view, data);
+            }
+
+            if (update.left) {
+                data.left = update.left;
+            }
+            if (update.bottom) {
+                data.bottom = update.bottom;
+            }
+
+            if (update.width) {
+                data.width = update.width;
+            }
+            if (update.height) {
+                data.height = update.height;
+            }
+
+            this.setOverlayWebContentsViewBounds(view, data);
         } else {
             this.overlayWebContentsViews.delete(view);
             this.mainWindow.contentView.removeChildView(view);
@@ -212,6 +250,7 @@ export class ShellWindow {
 
         const chatView = createChatView(state);
         this.setupZoomHandlers(chatView.webContents, (zoomFactor) => {
+            this.updateOverlayWebContentsViewBounds();
             this.updateZoomInTitle(zoomFactor);
         });
 
@@ -600,9 +639,7 @@ export class ShellWindow {
         debugShellWindow(`Chat view bounds: ${JSON.stringify(chatViewBounds)}`);
         this.chatView.setBounds(chatViewBounds);
 
-        for (const [view, position] of this.overlayWebContentsViews.entries()) {
-            this.setOverlayWebContentsViewBounds(view, position);
-        }
+        this.updateOverlayWebContentsViewBounds();
 
         const dividerLayout = {
             verticalLayout,
@@ -1041,10 +1078,10 @@ export class ShellWindow {
         onZoomChanged?: (zoomFactor: number) => void,
     ) {
         // limit zoom factor to reasonable numbers
-        if (zoomFactor < 0.1) {
-            zoomFactor = 0.1;
-        } else if (zoomFactor > 10) {
-            zoomFactor = 10;
+        if (zoomFactor < 0.25) {
+            zoomFactor = 0.25;
+        } else if (zoomFactor > 5) {
+            zoomFactor = 5;
         }
 
         webContents.zoomFactor = zoomFactor;

ts/packages/shell/src/renderer/assets/styles.less

@@ -11,6 +11,7 @@ body {
   height: 100%;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
+  overflow: hidden;
 }
 
 .dark-mode {
@@ -22,7 +23,6 @@ body {
 
   .chat-container {
     background-color: #222;
-
     .scroll_enabled {
       background-color: #222;
     }
@@ -195,6 +195,8 @@ body {
   display: flex;
   flex-direction: column;
   height: 100%;
+  bottom: 0px;
+  position: absolute;
   background-color: @chat-bg;
 }
 

ts/packages/shell/src/renderer/src/chatView.ts

@@ -147,12 +147,6 @@ export class ChatView {
         });
         this.inputContainer = this.chatInput.getInputContainer();
 
-        // Track zoom changes to adjust search menu position
-        const resizeObserver = new ResizeObserver(() => {
-            this.partialCompletion?.update(false);
-        });
-        resizeObserver.observe(this.inputContainer);
-
         this.topDiv.appendChild(this.messageDiv);
 
         // Add the input div at the bottom so it's always visible

ts/packages/shell/src/renderer/src/partial.ts

@@ -180,6 +180,9 @@ export class PartialCompletion {
 
         const position = this.getSearchMenuPosition(prefix);
         if (position !== undefined) {
+            debug(
+                `Partial completion update: '${prefix}' @ ${JSON.stringify(position)}`,
+            );
             this.searchMenu.updatePrefix(prefix, position);
         } else {
             this.searchMenu.hide();
@@ -312,7 +315,7 @@ export class PartialCompletion {
         }
 
         const { top } = this.container.getBoundingClientRect();
-        return { left: x, bottom: top };
+        return { left: x, bottom: window.innerHeight - top };
     }
 
     private cancelCompletionMenu() {

ts/packages/shell/src/renderer/src/searchMenuUI/localSearchMenuUI.ts

@@ -88,9 +88,8 @@ export class LocalSearchMenuUI implements SearchMenuUI {
     }
 
     private setPosition(position: SearchMenuPosition) {
-        const height = document.documentElement.offsetHeight;
         this.searchContainer.style.left = `${position.left}px`;
-        this.searchContainer.style.bottom = `${height - position.bottom}px`;
+        this.searchContainer.style.bottom = `${position.bottom}px`;
     }
 
     public adjustSelection(deltaY: number) {

ts/packages/shell/src/renderer/src/searchMenuView.ts

@@ -22,7 +22,7 @@ ipcRenderer.on("search-menu-update", (_event, data) => {
     searchMenuUI.update(data);
 
     const elm = document.body.children[0] as HTMLElement;
-    // 2px border all around.
+    // 2px outline all around.
     ipcRenderer.send("search-menu-size", {
         width: elm.offsetWidth + 4,
         height: elm.offsetHeight + 4,
@@ -32,6 +32,7 @@ ipcRenderer.on("search-menu-update", (_event, data) => {
 ipcRenderer.on("search-menu-close", () => {
     debug("search-menu-close");
     searchMenuUI?.close();
+    searchMenuUI = undefined;
 });
 
 ipcRenderer.on("search-menu-adjust-selection", (_, deltaY) => {

ts/packages/shell/src/renderer/src/templateEditor.ts

@@ -481,7 +481,7 @@ class FieldScalar extends FieldBase {
             return undefined;
         }
         const rect = this.editUI.div.getBoundingClientRect();
-        return { left: rect.left, bottom: rect.top };
+        return { left: rect.left, bottom: window.innerHeight - rect.top };
     }
 
     private createSearchMenu(