Custom title controls on Windows (#4528)

* Add context menu in topbar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding windows title buttons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding win sandwitch icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Hide windows controls behind the flags

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix topbar layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using topbar as draggable area

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix sandwich icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Mark no-draggable areas

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove ipcMainOn window calls

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Explicitly hide main window menu

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix tests more

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Restore linux native view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Not removing menu in linux

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Showing custom window buttons in Linux

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove frame on linux and windows

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Move open context menu event handler to initializers

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set x, y context menu position explicitly

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/main/initializers/ipc.ts

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { BrowserWindow, dialog, IpcMainInvokeEvent } from "electron";
+import { BrowserWindow, dialog, IpcMainInvokeEvent, Menu } from "electron";
 import { clusterFrameMap } from "../../common/cluster-frames";
 import { clusterActivateHandler, clusterSetFrameIdHandler, clusterVisibilityHandler, clusterRefreshHandler, clusterDisconnectHandler, clusterKubectlApplyAllHandler, clusterKubectlDeleteAllHandler, clusterDeleteHandler, clusterSetDeletingHandler, clusterClearDeletingHandler } from "../../common/cluster-ipc";
 import type { ClusterId } from "../../common/cluster-types";
@@ -30,10 +30,11 @@ import { catalogEntityRegistry } from "../catalog";
 import { pushCatalogToRenderer } from "../catalog-pusher";
 import { ClusterManager } from "../cluster-manager";
 import { ResourceApplier } from "../resource-applier";
-import { WindowManager } from "../window-manager";
+import { IpcMainWindowEvents, WindowManager } from "../window-manager";
 import path from "path";
 import { remove } from "fs-extra";
 import { AppPaths } from "../../common/app-paths";
+import { getAppMenu } from "../menu";
 
 export function initIpcMainHandlers() {
   ipcMainHandle(clusterActivateHandler, (event, clusterId: ClusterId, force = false) => {
@@ -148,4 +149,16 @@ export function initIpcMainHandlers() {
 
     return dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), dialogOpts);
   });
+
+  ipcMainOn(IpcMainWindowEvents.OPEN_CONTEXT_MENU, async (event) => {
+    const menu = Menu.buildFromTemplate(getAppMenu(WindowManager.getInstance()));
+    const options = {
+      ...BrowserWindow.fromWebContents(event.sender),
+      // Center of the topbar menu icon
+      x: 20,
+      y: 20,
+    } as Electron.PopupOptions;
+
+    menu.popup(options);
+  });
 }

src/main/menu.ts

@@ -61,7 +61,7 @@ export function showAbout(browserWindow: BrowserWindow) {
   });
 }
 
-export function buildMenu(windowManager: WindowManager) {
+export function getAppMenu(windowManager: WindowManager) {
   function ignoreIf(check: boolean, menuItems: MenuItemConstructorOptions[]) {
     return check ? [] : menuItems;
   }
@@ -316,5 +316,10 @@ export function buildMenu(windowManager: WindowManager) {
     appMenu.delete("mac");
   }
 
-  Menu.setApplicationMenu(Menu.buildFromTemplate([...appMenu.values()]));
+  return [...appMenu.values()];
+
+}
+
+export function buildMenu(windowManager: WindowManager) {
+  Menu.setApplicationMenu(Menu.buildFromTemplate(getAppMenu(windowManager)));
 }

src/main/window-manager.ts

@@ -29,9 +29,13 @@ import { delay, iter, Singleton } from "../common/utils";
 import { ClusterFrameInfo, clusterFrameMap } from "../common/cluster-frames";
 import { IpcRendererNavigationEvents } from "../renderer/navigation/events";
 import logger from "./logger";
-import { productName } from "../common/vars";
+import { isMac, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 
+export const enum IpcMainWindowEvents {
+  OPEN_CONTEXT_MENU = "window:open-context-menu",
+}
+
 function isHideable(window: BrowserWindow | null): boolean {
   return Boolean(window && !window.isDestroyed());
 }
@@ -81,7 +85,8 @@ export class WindowManager extends Singleton {
         show: false,
         minWidth: 700,  // accommodate 800 x 600 display minimum
         minHeight: 500, // accommodate 800 x 600 display minimum
-        titleBarStyle: "hiddenInset",
+        titleBarStyle: isMac ? "hiddenInset" : "hidden",
+        frame: isMac,
         backgroundColor: "#1e2124",
         webPreferences: {
           nodeIntegration: true,

src/renderer/bootstrap.tsx

@@ -155,8 +155,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
 
   render(
     <DiContextProvider value={{ di }}>
-      {isMac && <div id="draggable-top" />}
-
       {DefaultProps(App)}
     </DiContextProvider>,
 

src/renderer/components/app.scss

@@ -97,17 +97,6 @@ html, body {
   }
 }
 
-#draggable-top {
-  @include set-draggable;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: var(--main-layout-header);
-  z-index: 1000;
-  pointer-events: none;
-}
-
 body {
   font: $font-size $font-main;
 }

src/renderer/components/layout/__tests__/topbar-win-linux.test.tsx

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { TopBar } from "../topbar";
+import { TopBarRegistry } from "../../../../extensions/registries";
+import { IpcMainWindowEvents } from "../../../../main/window-manager";
+import { broadcastMessage } from "../../../../common/ipc";
+import * as vars from "../../../../common/vars";
+
+const mockConfig = vars as { isWindows: boolean, isLinux: boolean };
+
+jest.mock("../../../../common/ipc");
+
+jest.mock("../../../../common/vars", () => {
+  return {
+    __esModule: true,
+    isWindows: null,
+    isLinux: null,
+  };
+});
+
+const mockMinimize = jest.fn();
+const mockMaximize = jest.fn();
+const mockUnmaximize = jest.fn();
+const mockClose = jest.fn();
+
+jest.mock("@electron/remote", () => {
+  return {
+    getCurrentWindow: () => ({
+      minimize: () => mockMinimize(),
+      maximize: () => mockMaximize(),
+      unmaximize: () => mockUnmaximize(),
+      close: () => mockClose(),
+      isMaximized: () => false,
+    }),
+  };
+});
+
+describe("<Tobar/> in Windows and Linux", () => {
+  beforeEach(() => {
+    TopBarRegistry.createInstance();
+  });
+
+  afterEach(() => {
+    TopBarRegistry.resetInstance();
+  });
+
+  it("shows window controls on Windows", () => {
+    mockConfig.isWindows = true;
+    mockConfig.isLinux = false;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(getByTestId("window-menu")).toBeInTheDocument();
+    expect(getByTestId("window-minimize")).toBeInTheDocument();
+    expect(getByTestId("window-maximize")).toBeInTheDocument();
+    expect(getByTestId("window-close")).toBeInTheDocument();
+  });
+
+  it("shows window controls on Linux", () => {
+    mockConfig.isWindows = false;
+    mockConfig.isLinux = true;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(getByTestId("window-menu")).toBeInTheDocument();
+    expect(getByTestId("window-minimize")).toBeInTheDocument();
+    expect(getByTestId("window-maximize")).toBeInTheDocument();
+    expect(getByTestId("window-close")).toBeInTheDocument();
+  });
+
+  it("triggers ipc events on click", () => {
+    mockConfig.isWindows = true;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    const menu = getByTestId("window-menu");
+    const minimize = getByTestId("window-minimize");
+    const maximize = getByTestId("window-maximize");
+    const close = getByTestId("window-close");
+
+    fireEvent.click(menu);
+    expect(broadcastMessage).toHaveBeenCalledWith(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+
+    fireEvent.click(minimize);
+    expect(mockMinimize).toHaveBeenCalled();
+
+    fireEvent.click(maximize);
+    expect(mockMaximize).toHaveBeenCalled();
+
+    fireEvent.click(close);
+    expect(mockClose).toHaveBeenCalled();
+  });
+});

src/renderer/components/layout/__tests__/topbar.test.tsx

@@ -25,6 +25,12 @@ import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "../topbar";
 import { TopBarRegistry } from "../../../../extensions/registries";
 
+jest.mock("../../../../common/vars", () => {
+  return {
+    isMac: true,
+  };
+});
+
 jest.mock(
   "electron",
   () => ({
@@ -65,6 +71,7 @@ jest.mock("@electron/remote", () => {
         }];
       },
     },
+    getCurrentWindow: () => jest.fn(),
   };
 });
 
@@ -134,4 +141,13 @@ describe("<TopBar/>", () => {
 
     expect(await getByTestId(testId)).toHaveTextContent(text);
   });
+
+  it("doesn't show windows title buttons", () => {
+    const { queryByTestId } = render(<TopBar/>);
+
+    expect(queryByTestId("window-menu")).not.toBeInTheDocument();
+    expect(queryByTestId("window-minimize")).not.toBeInTheDocument();
+    expect(queryByTestId("window-maximize")).not.toBeInTheDocument();
+    expect(queryByTestId("window-close")).not.toBeInTheDocument();
+  });
 });

src/renderer/components/layout/topbar.module.css

@@ -20,22 +20,44 @@
  */
 
 .topBar {
-  display: grid;
+  display: flex;
-  grid-template-columns: [title] 1fr [controls] auto;
-  grid-template-rows: var(--main-layout-header);
-  grid-template-areas: "title controls";
   background-color: var(--layoutBackground);
   z-index: 2;
   width: 100%;
   grid-area: topbar;
+  height: var(--main-layout-header);
+  justify-content: space-between;
+
+  /* Use topbar as draggable region */
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
 }
 
 :global(.is-mac) .topBar {
   padding-left: var(--hotbar-width);
 }
 
+.winMenu {
+  width: var(--hotbar-width);
+
+  > div {
+    @apply flex items-center justify-center;
+    width: 40px;
+    height: 40px;
+
+    &:hover {
+      background-color: var(--borderFaintColor);
+    }
+
+    &:active {
+      background-color: var(--borderColor);
+    }
+  }
+}
+
 .tools {
   @apply flex items-center;
+  -webkit-app-region: no-drag;
 }
 
 .controls {
@@ -44,4 +66,63 @@
   align-items: center;
   display: flex;
   height: 100%;
+  -webkit-app-region: no-drag;
+}
+
+.windowButtons {
+  display: flex;
+  margin-left: 1.5rem;
+  margin-right: -1.5rem;
+
+  > div {
+    @apply flex items-center justify-center;
+    width: 40px;
+    height: 40px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.linuxButtons {
+    > div {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      margin-right: 1.1rem;
+      color: var(--textColorAccent);
+
+      svg {
+        width: 8px;
+        height: 8px;
+      }
+    }
+
+    .close {
+      color: white;
+      background-color: #e63e02; /* Standard close button bg color on ubuntu */
+    }
+
+    .close:hover {
+      background-color: #ff5a23;
+    }
+  }
+}
+
+.minimize, .maximize {
+  &:hover {
+    background-color: var(--borderFaintColor);
+  }
+
+  &:active {
+    background-color: var(--borderColor);
+  }
+}
+
+.close {
+  &:hover {
+    color: white;
+    background-color: #ef4b4e;
+  }
 }

src/renderer/components/layout/topbar.tsx

@@ -20,16 +20,19 @@
  */
 
 import styles from "./topbar.module.css";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
 import { Icon } from "../icon";
 import { webContents, getCurrentWindow } from "@electron/remote";
 import { observable } from "mobx";
-import { ipcRendererOn } from "../../../common/ipc";
+import { broadcastMessage, ipcRendererOn } from "../../../common/ipc";
 import { watchHistoryState } from "../../remote-helpers/history-updater";
 import { isActiveRoute, navigate } from "../../navigation";
 import { catalogRoute, catalogURL } from "../../../common/routes";
+import { IpcMainWindowEvents } from "../../../main/window-manager";
+import { isLinux, isWindows } from "../../../common/vars";
+import { cssNames } from "../../utils";
 
 interface Props extends React.HTMLAttributes<any> {
 }
@@ -46,6 +49,9 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 });
 
 export const TopBar = observer(({ children, ...rest }: Props) => {
+  const elem = useRef<HTMLDivElement>();
+  const window = useMemo(() => getCurrentWindow(), []);
+
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
 
@@ -70,6 +76,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     );
   };
 
+  const openContextMenu = () => {
+    broadcastMessage(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+  };
+
   const goHome = () => {
     navigate(catalogURL());
   };
@@ -82,9 +92,20 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     webContents.getAllWebContents().find((webContent) => webContent.getType() === "window")?.goForward();
   };
 
-  const windowSizeToggle = () => {
+  const windowSizeToggle = (evt: React.MouseEvent) => {
-    const window = getCurrentWindow();
+    if (elem.current != evt.target) {
+      // Skip clicking on child elements
+      return;
+    }
 
+    toggleMaximize();
+  };
+
+  const minimizeWindow = () => {
+    window.minimize();
+  };
+
+  const toggleMaximize = () => {
     if (window.isMaximized()) {
       window.unmaximize();
     } else {
@@ -92,6 +113,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     }
   };
 
+  const closeWindow = () => {
+    window.close();
+  };
+
   useEffect(() => {
     const disposer = watchHistoryState();
 
@@ -99,8 +124,15 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   }, []);
 
   return (
-    <div className={styles.topBar} {...rest}>
+    <div className={styles.topBar} onDoubleClick={windowSizeToggle} ref={elem} {...rest}>
-      <div className={styles.tools} onDoubleClick={windowSizeToggle}>
+      <div className={styles.tools}>
+        {(isWindows || isLinux) && (
+          <div className={styles.winMenu}>
+            <div onClick={openContextMenu} data-testid="window-menu">
+              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/><path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/><path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/></svg>
+            </div>
+          </div>
+        )}
         <Icon
           data-testid="home-button"
           material="home"
@@ -126,6 +158,18 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
       <div className={styles.controls}>
         {renderRegisteredItems()}
         {children}
+        {(isWindows || isLinux) && (
+          <div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
+            <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="9"></rect></svg></div>
+            <div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
+            </div>
+            <div className={styles.close} data-testid="window-close" onClick={closeWindow}>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );