Mac: ネイティブの三色ボタン（最小化・最大化・閉じるボタン）を使うように変更 (VOICEVOX#621)

* use native traffic light on mac

* update Vuex.spec.ts for test

* make disable dark mode for macOS

* fix quote

* trivial change

* artifact_name -> macos_artifact_name

* hard-coding mac app name

* ダークモード無効化をアプリ側で対応

* npm run fmt

* Mac の場合だけライトモード固定にするように変更

* Macでlightモード指定している理由をコメントに記載

src/background.ts

@@ -5,7 +5,15 @@ import dotenv from "dotenv";
 import treeKill from "tree-kill";
 import Store from "electron-store";
 
-import { app, protocol, BrowserWindow, dialog, Menu, shell } from "electron";
+import {
+  app,
+  protocol,
+  BrowserWindow,
+  dialog,
+  Menu,
+  shell,
+  nativeTheme,
+} from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";
 
@@ -441,6 +449,8 @@ async function createWindow() {
     width: 800,
     height: 600,
     frame: false,
+    titleBarStyle: "hidden",
+    trafficLightPosition: { x: 6, y: 4 },
     minWidth: 320,
     show: false,
     webPreferences: {
@@ -461,8 +471,17 @@ async function createWindow() {
   }
   if (isDevelopment) win.webContents.openDevTools();
 
+  // Macではdarkモードかつウィンドウが非アクティブのときに閉じるボタンなどが見えなくなるので、lightモードに固定
+  if (isMac) nativeTheme.themeSource = "light";
+
   win.on("maximize", () => win.webContents.send("DETECT_MAXIMIZED"));
   win.on("unmaximize", () => win.webContents.send("DETECT_UNMAXIMIZED"));
+  win.on("enter-full-screen", () =>
+    win.webContents.send("DETECT_ENTER_FULLSCREEN")
+  );
+  win.on("leave-full-screen", () =>
+    win.webContents.send("DETECT_LEAVE_FULLSCREEN")
+  );
   win.on("always-on-top-changed", () => {
     win.webContents.send(
       win.isAlwaysOnTop() ? "DETECT_PINNED" : "DETECT_UNPINNED"

src/components/MenuBar.vue

@@ -1,6 +1,9 @@
 <template>
   <q-bar class="bg-background q-pa-none relative-position">
-    <min-max-close-buttons v-if="$q.platform.is.mac" />
+    <div
+      v-if="$q.platform.is.mac && !isFullscreen"
+      class="mac-traffic-light-space"
+    ></div>
     <img v-else src="icon.png" class="window-logo" alt="application logo" />
     <menu-button
       v-for="(root, index) of menudata"
@@ -30,7 +33,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, ComputedRef, watch } from "vue";
 import { useStore } from "@/store";
-import MinMaxCloseButtons from "@/components/MinMaxCloseButtons.vue";
 import MenuButton from "@/components/MenuButton.vue";
 import TitleBarButtons from "@/components/TitleBarButtons.vue";
 import { useQuasar } from "quasar";
@@ -75,7 +77,6 @@ export default defineComponent({
   name: "MenuBar",
 
   components: {
-    MinMaxCloseButtons,
     MenuButton,
     TitleBarButtons,
   },
@@ -91,6 +92,7 @@ export default defineComponent({
     const menubarLocked = computed(() => store.getters.MENUBAR_LOCKED);
     const projectName = computed(() => store.getters.PROJECT_NAME);
     const isEdited = computed(() => store.getters.IS_EDITED);
+    const isFullscreen = computed(() => store.getters.IS_FULLSCREEN);
 
     const createNewProject = async () => {
       if (!uiLocked.value) {
@@ -359,6 +361,7 @@ export default defineComponent({
       menubarLocked,
       projectName,
       isEdited,
+      isFullscreen,
       subMenuOpenFlags,
       reassignSubMenuOpen,
       menudata,
@@ -398,4 +401,8 @@ export default defineComponent({
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.mac-traffic-light-space {
+  margin-right: 70px;
+}
 </style>

src/plugins/ipcMessageReceiverPlugin.ts

@@ -34,6 +34,14 @@ export const ipcMessageReceiver: Plugin = {
       options.store.dispatch("DETECT_UNPINNED");
     });
 
+    window.electron.onReceivedIPCMsg("DETECT_ENTER_FULLSCREEN", () =>
+      options.store.dispatch("DETECT_ENTER_FULLSCREEN")
+    );
+
+    window.electron.onReceivedIPCMsg("DETECT_LEAVE_FULLSCREEN", () =>
+      options.store.dispatch("DETECT_LEAVE_FULLSCREEN")
+    );
+
     window.electron.onReceivedIPCMsg("CHECK_EDITED_AND_NOT_SAVE", () => {
       options.store.dispatch("CHECK_EDITED_AND_NOT_SAVE");
     });

src/store/type.ts

@@ -764,6 +764,7 @@ export type UiStoreState = {
   isAcceptRetrieveTelemetryDialogOpen: boolean;
   isMaximized: boolean;
   isPinned: boolean;
+  isFullscreen: boolean;
 };
 
 type UiStoreTypes = {
@@ -870,6 +871,20 @@ type UiStoreTypes = {
     action(): void;
   };
 
+  DETECT_ENTER_FULLSCREEN: {
+    mutation: undefined;
+    action(): void;
+  };
+
+  DETECT_LEAVE_FULLSCREEN: {
+    mutation: undefined;
+    action(): void;
+  };
+
+  IS_FULLSCREEN: {
+    getter: boolean;
+  };
+
   CHECK_EDITED_AND_NOT_SAVE: {
     action(): Promise<void>;
   };

src/store/ui.ts

@@ -38,6 +38,7 @@ export const uiStoreState: UiStoreState = {
   isAcceptRetrieveTelemetryDialogOpen: false,
   isMaximized: false,
   isPinned: false,
+  isFullscreen: false,
 };
 
 export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
@@ -52,6 +53,9 @@ export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
       SHOULD_SHOW_PANES(_, getters) {
         return getters.ACTIVE_AUDIO_KEY != undefined;
       },
+      IS_FULLSCREEN(state) {
+        return state.isFullscreen;
+      },
     },
 
     mutations: {
@@ -118,6 +122,12 @@ export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
       DETECT_UNPINNED(state) {
         state.isPinned = false;
       },
+      DETECT_ENTER_FULLSCREEN(state) {
+        state.isFullscreen = true;
+      },
+      DETECT_LEAVE_FULLSCREEN(state) {
+        state.isFullscreen = false;
+      },
     },
 
     actions: {
@@ -266,6 +276,12 @@ export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
       async DETECT_UNPINNED({ commit }) {
         commit("DETECT_UNPINNED");
       },
+      async DETECT_ENTER_FULLSCREEN({ commit }) {
+        commit("DETECT_ENTER_FULLSCREEN");
+      },
+      async DETECT_LEAVE_FULLSCREEN({ commit }) {
+        commit("DETECT_LEAVE_FULLSCREEN");
+      },
       async CHECK_EDITED_AND_NOT_SAVE({ getters }) {
         if (getters.IS_EDITED) {
           const result: number = await window.electron.showInfoDialog({

src/type/ipc.d.ts

@@ -254,6 +254,16 @@ type IpcSOData = {
     return: void;
   };
 
+  DETECT_ENTER_FULLSCREEN: {
+    args: [];
+    return: void;
+  };
+
+  DETECT_LEAVE_FULLSCREEN: {
+    args: [];
+    return: void;
+  };
+
   CHECK_EDITED_AND_NOT_SAVE: {
     args: [];
     return: void;

tests/unit/store/Vuex.spec.ts

@@ -52,6 +52,7 @@ describe("store/vuex.js test", () => {
           availableThemes: [],
         },
         isPinned: false,
+        isFullscreen: false,
         presetItems: {},
         presetKeys: [],
         hotkeySettings: [],