Showing custom window buttons in Linux

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

src/main/window-manager.ts

@@ -29,7 +29,7 @@ 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 { isWindows, productName } from "../common/vars";
+import { isLinux, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 
 export const enum IpcMainWindowEvents {
@@ -85,8 +85,7 @@ export class WindowManager extends Singleton {
         show: false,
         minWidth: 700,  // accommodate 800 x 600 display minimum
         minHeight: 500, // accommodate 800 x 600 display minimum
-        titleBarStyle: isWindows ? "hidden" : "hiddenInset",
+        titleBarStyle: (isWindows || isLinux) ? "hidden" : "hiddenInset",
-        autoHideMenuBar: true,
         backgroundColor: "#1e2124",
         webPreferences: {
           nodeIntegration: true,

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

@@ -1,57 +0,0 @@
-/**
- * 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 } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import { TopBar } from "../topbar";
-import { TopBarRegistry } from "../../../../extensions/registries";
-
-jest.mock("../../../../common/ipc");
-jest.mock("../../../../common/vars", () => {
-  return {
-    isLinux: true,
-    isWindows: false,
-  };
-});
-
-jest.mock("@electron/remote", () => {
-  return {
-    getCurrentWindow: () => jest.fn(),
-  };
-});
-
-describe("<Tobar/> in Linux", () => {
-  beforeEach(() => {
-    TopBarRegistry.createInstance();
-  });
-
-  afterEach(() => {
-    TopBarRegistry.resetInstance();
-  });
-
-  it("doesn't show custom title buttons used in Windows", () => {
-    const { queryByTestId } = render(<TopBar/>);
-
-    expect(queryByTestId("window-minimize")).not.toBeInTheDocument();
-    expect(queryByTestId("window-maximize")).not.toBeInTheDocument();
-    expect(queryByTestId("window-close")).not.toBeInTheDocument();
-  });
-});

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

@@ -26,13 +26,17 @@ 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 {
-    isWindows: true,
+    __esModule: true,
-    isLinux: false,
+    isWindows: null,
+    isLinux: null,
   };
 });
 
@@ -53,7 +57,7 @@ jest.mock("@electron/remote", () => {
   };
 });
 
-describe("<Tobar/> in Windows", () => {
+describe("<Tobar/> in Windows and Linux", () => {
   beforeEach(() => {
     TopBarRegistry.createInstance();
   });
@@ -62,7 +66,22 @@ describe("<Tobar/> in Windows", () => {
     TopBarRegistry.resetInstance();
   });
 
-  it("shows window controls", () => {
+  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();
@@ -72,6 +91,8 @@ describe("<Tobar/> in Windows", () => {
   });
 
   it("triggers ipc events on click", () => {
+    mockConfig.isWindows = true;
+
     const { getByTestId } = render(<TopBar/>);
 
     const menu = getByTestId("window-menu");

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

@@ -69,7 +69,7 @@
   -webkit-app-region: no-drag;
 }
 
-.winButtons {
+.windowButtons {
   display: flex;
   margin-left: 1.5rem;
   margin-right: -1.5rem;
@@ -78,6 +78,35 @@
     @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;
+    }
   }
 }
 

src/renderer/components/layout/topbar.tsx

@@ -31,7 +31,8 @@ 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 { isWindows } from "../../../common/vars";
+import { isLinux, isWindows } from "../../../common/vars";
+import { cssNames } from "../../utils";
 
 interface Props extends React.HTMLAttributes<any> {
 }
@@ -125,7 +126,7 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   return (
     <div className={styles.topBar} onDoubleClick={windowSizeToggle} ref={elem} {...rest}>
       <div className={styles.tools}>
-        {isWindows && (
+        {(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>
@@ -157,15 +158,15 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
       <div className={styles.controls}>
         {renderRegisteredItems()}
         {children}
-        {isWindows && (
+        {(isWindows || isLinux) && (
-          <div className={styles.winButtons}>
+          <div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
             <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
-              <svg width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"></rect></svg></div>
+              <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 width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
+              <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 width="12" height="12" 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>
+              <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>
         )}