fix: add an option to use the Windows title bar (#912)

Co-authored-by: Brendan Forster <github@brendanforster.com>

Author: mon-jai

app/src/lib/app-state.ts

@@ -32,6 +32,7 @@ import { WindowState } from './window-state'
 import { Shell } from './shells'
 
 import { ApplicableTheme, ApplicationTheme } from '../ui/lib/application-theme'
+import { TitleBarStyle } from '../ui/lib/title-bar-style'
 import { IAccountRepositories } from './stores/api-repositories-store'
 import { ManualConflictResolution } from '../models/manual-conflict-resolution'
 import { Banner } from '../models/banner'
@@ -286,6 +287,9 @@ export interface IAppState {
   /** The selected tab size preference */
   readonly selectedTabSize: number
 
+  /** The selected title bar style for the application */
+  readonly titleBarStyle: TitleBarStyle
+
   /**
    * A map keyed on a user account (GitHub.com or GitHub Enterprise)
    * containing an object with repositories that the authenticated

app/src/lib/get-title-bar-config.ts

@@ -0,0 +1,48 @@
+import { writeFile } from 'fs/promises'
+import { existsSync, readFileSync } from 'fs'
+import { join } from 'path'
+import { app } from 'electron'
+import { TitleBarStyle } from '../ui/lib/title-bar-style'
+
+export type TitleBarConfig = {
+  titleBarStyle: TitleBarStyle
+}
+
+let cachedTitleBarConfig: TitleBarConfig | null = null
+
+// The function has to be synchronous,
+// since we need its return value to create electron BrowserWindow
+export function readTitleBarConfigFileSync(): TitleBarConfig {
+  if (cachedTitleBarConfig) {
+    return cachedTitleBarConfig
+  }
+
+  const titleBarConfigPath = getTitleBarConfigPath()
+
+  if (existsSync(titleBarConfigPath)) {
+    const storedTitleBarConfig = JSON.parse(
+      readFileSync(titleBarConfigPath, 'utf8')
+    )
+
+    if (
+      storedTitleBarConfig.titleBarStyle === 'native' ||
+      storedTitleBarConfig.titleBarStyle === 'custom'
+    ) {
+      cachedTitleBarConfig = storedTitleBarConfig
+    }
+  }
+
+  // Cache the default value if the config file is not found, or if it contains an invalid value.
+  if (cachedTitleBarConfig == null) {
+    cachedTitleBarConfig = { titleBarStyle: 'native' }
+  }
+
+  return cachedTitleBarConfig
+}
+
+export function saveTitleBarConfigFile(config: TitleBarConfig) {
+  return writeFile(getTitleBarConfigPath(), JSON.stringify(config), 'utf8')
+}
+
+const getTitleBarConfigPath = () =>
+  join(app.getPath('userData'), '.title-bar-config')

app/src/lib/ipc-shared.ts

@@ -13,6 +13,7 @@ import { Architecture } from './get-architecture'
 import { EndpointToken } from './endpoint-token'
 import { PathType } from '../ui/lib/app-proxy'
 import { ThemeSource } from '../ui/lib/theme-source'
+import { TitleBarStyle } from '../ui/lib/title-bar-style'
 import { DesktopNotificationPermission } from 'desktop-notifications/dist/notification-permission'
 import { NotificationCallback } from 'desktop-notifications/dist/notification-callback'
 import { DesktopAliveEvent } from './stores/alive-store'
@@ -66,6 +67,7 @@ export type RequestChannels = {
   blur: () => void
   'update-accounts': (accounts: ReadonlyArray<EndpointToken>) => void
   'quit-and-install-updates': () => void
+  'restart-app': () => void
   'quit-app': () => void
   'minimize-window': () => void
   'maximize-window': () => void
@@ -124,6 +126,8 @@ export type RequestResponseChannels = {
   'should-use-dark-colors': () => Promise<boolean>
   'save-guid': (guid: string) => Promise<void>
   'get-guid': () => Promise<string>
+  'save-title-bar-style': (titleBarStyle: TitleBarStyle) => Promise<void>
+  'get-title-bar-style': () => Promise<TitleBarStyle>
   'show-notification': (
     title: string,
     body: string,

app/src/lib/stores/app-store.ts

@@ -80,6 +80,7 @@ import {
   getPersistedThemeName,
   setPersistedTheme,
 } from '../../ui/lib/application-theme'
+import { TitleBarStyle } from '../../ui/lib/title-bar-style'
 import {
   getAppMenu,
   getCurrentWindowState,
@@ -91,6 +92,8 @@ import {
   sendWillQuitEvenIfUpdatingSync,
   quitApp,
   sendCancelQuittingSync,
+  saveTitleBarStyle,
+  getTitleBarStyle,
 } from '../../ui/main-process-proxy'
 import {
   API,
@@ -547,6 +550,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private selectedTheme = ApplicationTheme.System
   private currentTheme: ApplicableTheme = ApplicationTheme.Light
   private selectedTabSize = tabSizeDefault
+  private titleBarStyle: TitleBarStyle = 'native'
 
   private useWindowsOpenSSH: boolean = false
 
@@ -1053,6 +1057,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       selectedTheme: this.selectedTheme,
       currentTheme: this.currentTheme,
       selectedTabSize: this.selectedTabSize,
+      titleBarStyle: this.titleBarStyle,
       apiRepositories: this.apiRepositoriesStore.getState(),
       useWindowsOpenSSH: this.useWindowsOpenSSH,
       showCommitLengthWarning: this.showCommitLengthWarning,
@@ -2252,6 +2257,8 @@ export class AppStore extends TypedBaseStore<IAppState> {
       this.emitUpdate()
     })
 
+    this.titleBarStyle = await getTitleBarStyle()
+
     this.lastThankYou = getObject<ILastThankYou>(lastThankYouKey)
 
     this.useCustomEditor =
@@ -6600,6 +6607,14 @@ export class AppStore extends TypedBaseStore<IAppState> {
     return Promise.resolve()
   }
 
+  /*
+   * Set the title bar style for the application
+   */
+  public _setTitleBarStyle(titleBarStyle: TitleBarStyle) {
+    this.titleBarStyle = titleBarStyle
+    return saveTitleBarStyle(titleBarStyle)
+  }
+
   public async _resolveCurrentEditor() {
     const match = await findEditorOrDefault(this.selectedExternalEditor)
     const resolvedExternalEditor = match != null ? match.editor : null

app/src/main-process/app-window.ts

@@ -14,6 +14,7 @@ import {
   getWindowState,
   registerWindowStateChangedEvents,
 } from '../lib/window-state'
+import { readTitleBarConfigFileSync } from '../lib/get-title-bar-config'
 import { MenuEvent } from './menu'
 import { URLActionType } from '../lib/parse-app-url'
 import { ILaunchStats } from '../lib/stats'
@@ -77,6 +78,9 @@ export class AppWindow {
     } else if (__WIN32__) {
       windowOptions.frame = false
     } else if (__LINUX__) {
+      if (readTitleBarConfigFileSync().titleBarStyle === 'custom') {
+        windowOptions.frame = false
+      }
       windowOptions.icon = join(__dirname, 'static', 'logos', '512x512.png')
 
       // relax restriction here for users trying to run app at a small

app/src/main-process/main.ts

@@ -44,6 +44,10 @@ import {
 } from '../lib/get-architecture'
 import { buildSpellCheckMenu } from './menu/build-spell-check-menu'
 import { getMainGUID, saveGUIDFile } from '../lib/get-main-guid'
+import {
+  readTitleBarConfigFileSync,
+  saveTitleBarConfigFile,
+} from '../lib/get-title-bar-config'
 import {
   getNotificationsPermission,
   requestNotificationsPermission,
@@ -509,6 +513,11 @@ app.on('ready', () => {
     mainWindow?.quitAndInstallUpdate()
   )
 
+  ipcMain.on('restart-app', () => {
+    app.relaunch()
+    app.exit()
+  })
+
   ipcMain.on('quit-app', () => app.quit())
 
   ipcMain.on('minimize-window', () => mainWindow?.minimizeWindow())
@@ -697,6 +706,16 @@ app.on('ready', () => {
 
   ipcMain.handle('save-guid', (_, guid) => saveGUIDFile(guid))
 
+  ipcMain.handle(
+    'get-title-bar-style',
+    async () => readTitleBarConfigFileSync().titleBarStyle
+  )
+
+  ipcMain.handle(
+    'save-title-bar-style',
+    async (_, titleBarStyle) => await saveTitleBarConfigFile({ titleBarStyle })
+  )
+
   ipcMain.handle('show-notification', async (_, title, body, userInfo) =>
     showNotification(title, body, userInfo)
   )

app/src/models/popup.ts

@@ -96,6 +96,7 @@ export enum PopupType {
   UnknownAuthors = 'UnknownAuthors',
   ConfirmRepoRulesBypass = 'ConfirmRepoRulesBypass',
   TestIcons = 'TestIcons',
+  ConfirmRestart = 'ConfirmRestart',
 }
 
 interface IBasePopup {
@@ -430,5 +431,6 @@ export type PopupDetail =
   | {
       type: PopupType.TestIcons
     }
+  | { type: PopupType.ConfirmRestart }
 
 export type Popup = IBasePopup & PopupDetail

app/src/ui/app.tsx

@@ -71,6 +71,7 @@ import { Welcome } from './welcome'
 import { AppMenuBar } from './app-menu'
 import { UpdateAvailable, renderBanner } from './banners'
 import { Preferences } from './preferences'
+import { ConfirmRestart } from './preferences/confirm-restart'
 import { RepositorySettings } from './repository-settings'
 import { AppError } from './app-error'
 import { MissingRepository } from './missing-repository'
@@ -1496,8 +1497,8 @@ export class App extends React.Component<IAppProps, IAppState> {
    * on Windows.
    */
   private renderAppMenuBar() {
-    // We only render the app menu bar on Windows
-    if (!__WIN32__) {
+    // We do not render the app menu bar on macOS
+    if (__DARWIN__) {
       return null
     }
 
@@ -1548,22 +1549,22 @@ export class App extends React.Component<IAppProps, IAppState> {
       this.state.currentFoldout &&
       this.state.currentFoldout.type === FoldoutType.AppMenu
 
-    // As Linux still uses the classic Electron menu, we are opting out of the
-    // custom menu that is shown as part of the title bar below
-    if (__LINUX__) {
+    // We do not render the app menu bar on Linux when the user has selected
+    // the "native" menu option
+    if (__LINUX__ && this.state.titleBarStyle === 'native') {
       return null
     }
 
     // When we're in full-screen mode on Windows we only need to render
     // the title bar when the menu bar is active. On other platforms we
     // never render the title bar while in full-screen mode.
     if (inFullScreen) {
-      if (!__WIN32__ || !menuBarActive) {
+      if (__DARWIN__ || !menuBarActive) {
         return null
       }
     }
 
-    const showAppIcon = __WIN32__ && !this.state.showWelcomeFlow
+    const showAppIcon = !__DARWIN__ && !this.state.showWelcomeFlow
     const inWelcomeFlow = this.state.showWelcomeFlow
     const inNoRepositoriesView = this.inNoRepositoriesViewState()
 
@@ -1762,6 +1763,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             customEditor={this.state.customEditor}
             useCustomShell={this.state.useCustomShell}
             customShell={this.state.customShell}
+            titleBarStyle={this.state.titleBarStyle}
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             onOpenFileInExternalEditor={this.openFileInExternalEditor}
             underlineLinks={this.state.underlineLinks}
@@ -2682,6 +2684,9 @@ export class App extends React.Component<IAppProps, IAppState> {
           />
         )
       }
+      case PopupType.ConfirmRestart: {
+        return <ConfirmRestart onDismissed={onPopupDismissedFn} />
+      }
       default:
         return assertNever(popup, `Unknown popup type: ${popup}`)
     }

app/src/ui/dispatcher/dispatcher.ts

@@ -87,6 +87,7 @@ import { TipState, IValidBranch } from '../../models/tip'
 import { Banner, BannerType } from '../../models/banner'
 
 import { ApplicationTheme } from '../lib/application-theme'
+import { TitleBarStyle } from '../lib/title-bar-style'
 import { installCLI } from '../lib/install-cli'
 import {
   executeMenuItem,
@@ -2465,6 +2466,19 @@ export class Dispatcher {
   public setSelectedTabSize(tabSize: number) {
     return this.appStore._setSelectedTabSize(tabSize)
   }
+  /*
+   * Set the title bar style for the application
+   */
+  public async setTitleBarStyle(titleBarStyle: TitleBarStyle) {
+    const existingState = this.appStore.getState()
+    const { titleBarStyle: existingTitleBarStyle } = existingState
+
+    await this.appStore._setTitleBarStyle(titleBarStyle)
+
+    if (titleBarStyle !== existingTitleBarStyle) {
+      this.showPopup({ type: PopupType.ConfirmRestart })
+    }
+  }
 
   /**
    * Increments either the `repoWithIndicatorClicked` or

app/src/ui/lib/title-bar-style.ts

@@ -0,0 +1,17 @@
+/**
+ * This string enum represents the supported modes for rendering the title bar
+ * in the app.
+ *
+ *  - 'native' - Use the default window style and chrome supported by the window
+ *               manager
+ *
+ *  - 'custom' - Hide the default window style and chrome and display the menu
+ *               provided by GitHub Desktop
+ *
+ * This is only available on the Linux build. For other operating systems this
+ * is not configurable:
+ *
+ *  - macOS uses the native title bar
+ *  - Windows uses the custom title bar
+ */
+export type TitleBarStyle = 'native' | 'custom'