feat: Use our own titlebar to avoid double titlebars on Linux/Windows

fixes #1805

Change-Id: I3672a85cf7d777e8744e311e2b9a5abb75aa5c02
Signed-off-by: Florent Benoit <fbenoit@redhat.com>

packages/main/src/mainWindow.ts

@@ -54,9 +54,11 @@ async function createWindow() {
     },
   };
 
+  // frameless window
+  browserWindowConstructorOptions.titleBarStyle = 'hidden';
   if (isMac()) {
-    // This property is not available on Linux.
-    browserWindowConstructorOptions.titleBarStyle = 'hiddenInset';
+    // change position of traffic light buttons
+    browserWindowConstructorOptions.trafficLightPosition = { x: 20, y: 13 };
   }
 
   const browserWindow = new BrowserWindow(browserWindowConstructorOptions);

packages/main/src/plugin/index.ts

@@ -1472,6 +1472,34 @@ export class PluginSystem {
       return app.getVersion();
     });
 
+    this.ipcHandle('window:minimize', async (): Promise<void> => {
+      const window = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
+      if (!window) {
+        return;
+      }
+      window.minimize();
+    });
+
+    this.ipcHandle('window:maximize', async (): Promise<void> => {
+      const window = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
+      if (!window) {
+        return;
+      }
+      if (window.isMaximized()) {
+        window.unmaximize();
+        return;
+      }
+      window.maximize();
+    });
+
+    this.ipcHandle('window:close', async (): Promise<void> => {
+      const window = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
+      if (!window) {
+        return;
+      }
+      window.close();
+    });
+
     const dockerDesktopInstallation = new DockerDesktopInstallation(
       apiSender,
       containerProviderRegistry,

packages/preload/src/index.ts

@@ -1303,6 +1303,16 @@ function initExposure(): void {
   contextBridge.exposeInMainWorld('getPodmanDesktopVersion', async (): Promise<string> => {
     return ipcInvoke('app:getVersion');
   });
+
+  contextBridge.exposeInMainWorld('windowMinimize', async (): Promise<void> => {
+    return ipcInvoke('window:minimize');
+  });
+  contextBridge.exposeInMainWorld('windowMaximize', async (): Promise<void> => {
+    return ipcInvoke('window:maximize');
+  });
+  contextBridge.exposeInMainWorld('windowClose', async (): Promise<void> => {
+    return ipcInvoke('window:close');
+  });
 }
 
 // expose methods

packages/renderer/src/lib/images/WindowsExitIcon.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+export let size = 16;
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  aria-hidden="true"
+  role="img"
+  viewBox="0 0 16 16"
+  version="1.1"
+  id="svg10085"
+  xmlns="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+    id="namedview10087"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:showpageshadow="2"
+    inkscape:pageopacity="0"
+    inkscape:pagecheckerboard="true"
+    inkscape:deskcolor="#d1d1d1"
+    inkscape:document-units="px"
+    showgrid="true"
+    showguides="false"
+    inkscape:zoom="58.9375"
+    inkscape:cx="8"
+    inkscape:cy="8.0169671"
+    inkscape:window-width="1920"
+    inkscape:window-height="1131"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="g18715">
+    <inkscape:grid type="xygrid" id="grid10569"></inkscape:grid>
+  </sodipodi:namedview>
+  <defs id="defs10082">
+    <inkscape:path-effect effect="spiro" id="path-effect18723" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect18719" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19377" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19381" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect21676" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380-3" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384-6" is_visible="true" lpeversion="1"></inkscape:path-effect>
+  </defs>
+  <g id="layer1">
+    <g
+      id="g18715"
+      style="fill:#000000;fill-opacity:0;stroke:#ffffff;stroke-width:1.05105;stroke-opacity:1"
+      transform="matrix(2.9969164,0,0,2.9968662,-462.37487,-519.36282)">
+      <path
+        style="fill:#000000;fill-opacity:0;stroke:#ffffff;stroke-width:0.333679;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+        d="m 155.45141,177.473 3.00313,-3.00314"
+        id="path18711"></path>
+      <path
+        style="fill:#000000;fill-opacity:0;stroke:#ffffff;stroke-width:0.333679;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+        d="m 158.45454,177.473 -3.00313,-3.00314"
+        id="path18713"></path>
+    </g>
+    <g
+      id="g8366"
+      style="fill:#000000;fill-opacity:0;stroke:#999999;stroke-width:0.992722;stroke-opacity:1"
+      transform="matrix(3.8062595,0,0,3.8082135,-589.36999,-662.11189)"></g>
+  </g>
+</svg>

packages/renderer/src/lib/images/WindowsMaxIcon.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+export let size = 16;
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  aria-hidden="true"
+  role="img"
+  viewBox="0 0 16 16"
+  version="1.1"
+  id="svg10085"
+  xmlns="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+    id="namedview10087"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:showpageshadow="2"
+    inkscape:pageopacity="0"
+    inkscape:pagecheckerboard="true"
+    inkscape:deskcolor="#d1d1d1"
+    inkscape:document-units="px"
+    showgrid="true"
+    showguides="false"
+    inkscape:zoom="58.625"
+    inkscape:cx="6.2771855"
+    inkscape:cy="8.2132196"
+    inkscape:window-width="1920"
+    inkscape:window-height="1131"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="layer1">
+    <inkscape:grid type="xygrid" id="grid10569"></inkscape:grid>
+  </sodipodi:namedview>
+  <defs id="defs10082">
+    <inkscape:path-effect effect="spiro" id="path-effect18723" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect18719" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19377" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19381" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect21676" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380-3" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384-6" is_visible="true" lpeversion="1"></inkscape:path-effect>
+  </defs>
+  <g id="layer1">
+    <rect
+      style="fill:none;stroke:#ffffff;stroke-width:0.999998;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4.4;stroke-dasharray:none;stroke-opacity:1"
+      id="rect19383"
+      width="9.000001"
+      height="9.000001"
+      x="3.4999995"
+      y="3.4999995"
+      ry="1.1388704"></rect>
+    <g
+      id="g8366"
+      style="fill:#000000;fill-opacity:0;stroke:#999999;stroke-width:0.992722;stroke-opacity:1"
+      transform="matrix(3.8062595,0,0,3.8082135,-589.36999,-662.11189)"></g>
+  </g>
+</svg>

packages/renderer/src/lib/images/WindowsMinIcon.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+export let size = 16;
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  aria-hidden="true"
+  role="img"
+  viewBox="0 0 16 16"
+  version="1.1"
+  id="svg10085"
+  xmlns="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+    id="namedview10087"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:showpageshadow="2"
+    inkscape:pageopacity="0"
+    inkscape:pagecheckerboard="true"
+    inkscape:deskcolor="#d1d1d1"
+    inkscape:document-units="px"
+    showgrid="true"
+    showguides="false"
+    inkscape:zoom="41.454135"
+    inkscape:cx="7.9847282"
+    inkscape:cy="8.2138971"
+    inkscape:window-width="1920"
+    inkscape:window-height="1131"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="layer1">
+    <inkscape:grid type="xygrid" id="grid10569"></inkscape:grid>
+  </sodipodi:namedview>
+  <defs id="defs10082">
+    <inkscape:path-effect effect="spiro" id="path-effect18723" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect18719" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19377" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19381" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect21676" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380-3" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384-6" is_visible="true" lpeversion="1"></inkscape:path-effect>
+  </defs>
+  <g id="layer1">
+    <path
+      style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+      d="M 3,7.5 H 13"
+      id="path21672"></path>
+    <g
+      id="g8366"
+      style="fill:#000000;fill-opacity:0;stroke:#999999;stroke-width:0.992722;stroke-opacity:1"
+      transform="matrix(3.8062595,0,0,3.8082135,-589.36999,-662.11189)"></g>
+  </g>
+</svg>

packages/renderer/src/lib/images/WindowsUnmaxIcon.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+export let size = 16;
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  aria-hidden="true"
+  role="img"
+  viewBox="0 0 16 16"
+  version="1.1"
+  id="svg10085"
+  xmlns="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+    id="namedview10087"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:showpageshadow="2"
+    inkscape:pageopacity="0"
+    inkscape:pagecheckerboard="true"
+    inkscape:deskcolor="#d1d1d1"
+    inkscape:document-units="px"
+    showgrid="true"
+    showguides="false"
+    inkscape:zoom="41.763494"
+    inkscape:cx="7.9974151"
+    inkscape:cy="8.0812204"
+    inkscape:window-width="1920"
+    inkscape:window-height="1131"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="g22446">
+    <inkscape:grid type="xygrid" id="grid10569"></inkscape:grid>
+  </sodipodi:namedview>
+  <defs id="defs10082">
+    <inkscape:path-effect effect="spiro" id="path-effect18723" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect18719" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19377" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect19381" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect21676" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8380-3" is_visible="true" lpeversion="1"></inkscape:path-effect>
+    <inkscape:path-effect effect="spiro" id="path-effect8384-6" is_visible="true" lpeversion="1"></inkscape:path-effect>
+  </defs>
+  <g id="layer1">
+    <g
+      id="g8366"
+      style="fill:#000000;fill-opacity:0;stroke:#999999;stroke-width:0.992722;stroke-opacity:1"
+      transform="matrix(3.8062595,0,0,3.8082135,-589.36999,-662.11189)"></g>
+    <g
+      id="g22446"
+      style="fill:#000000;fill-opacity:0;stroke:#999999;stroke-width:2.8433;stroke-opacity:1"
+      transform="matrix(1.9961952,0,0,1.961653,-148.29689,-127.64158)">
+      <rect
+        style="fill:#000000;fill-opacity:0;stroke:#ffffff;stroke-width:0.505343;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4.4;stroke-dasharray:none;stroke-opacity:1"
+        id="rect22442"
+        width="3.5022812"
+        height="3.5728502"
+        x="76.045197"
+        y="67.869919"
+        ry="0.31626302"></rect>
+      <path
+        id="path22444"
+        style="fill:#000000;fill-opacity:0;stroke:#ffffff;stroke-width:0.505343;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4.4;stroke-dasharray:none;stroke-opacity:1"
+        d="m 77.2734,66.850371 c 0,0 2.800655,0.01211 2.961632,0.0017 0.160978,-0.01045 0.303772,0.159454 0.307213,0.313009 0.0034,0.153554 0.0069,3.022729 0.0069,3.022729"
+      ></path>
+    </g>
+  </g>
+</svg>