Move "hide menu bar" feature to the Title bar dropdown

Author: pol-rivero

app/src/lib/app-state.ts

@@ -374,12 +374,6 @@ export interface IAppState {
    */
   readonly hideWindowOnQuit: boolean
 
-  /**
-   * Whether or not the menu bar should be hidden until the user presses Alt.
-   * Only applicable on Linux.
-   */
-  readonly autoHideMenuBar: boolean
-
   /**
    * Whether or not the app should use spell check on commit summary and description
    */

app/src/lib/main-process-config.ts

@@ -7,13 +7,11 @@ import { TitleBarStyle } from '../ui/lib/title-bar-style'
 export type MainProcessConfig = {
   titleBarStyle: TitleBarStyle
   hideWindowOnQuit: boolean
-  autoHideMenuBar: boolean
 }
 
 const DEFAULT_CONFIG: MainProcessConfig = {
   titleBarStyle: 'native',
   hideWindowOnQuit: false,
-  autoHideMenuBar: false,
 }
 
 let cachedMainProcessConfig: MainProcessConfig | null = null
@@ -34,7 +32,8 @@ export function readMainProcessConfig(): MainProcessConfig {
 
     if (
       storedMainProcessConfig.titleBarStyle === 'native' ||
-      storedMainProcessConfig.titleBarStyle === 'custom'
+      storedMainProcessConfig.titleBarStyle === 'custom' ||
+      storedMainProcessConfig.titleBarStyle === 'native-without-menu-bar'
     ) {
       cachedMainProcessConfig = storedMainProcessConfig
     }

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

@@ -705,7 +705,6 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private readonly lastSidebarWorktreeRefreshAt = new Map<string, number>()
   private showCompareTab: boolean = showCompareTabDefault
   private hideWindowOnQuit: boolean = __DARWIN__
-  private autoHideMenuBar: boolean = false
 
   private useWindowsOpenSSH: boolean = false
 
@@ -1318,7 +1317,6 @@ export class AppStore extends TypedBaseStore<IAppState> {
       currentOnboardingTutorialStep: this.currentOnboardingTutorialStep,
       repositoryIndicatorsEnabled: this.repositoryIndicatorsEnabled,
       hideWindowOnQuit: this.hideWindowOnQuit,
-      autoHideMenuBar: this.autoHideMenuBar,
       commitSpellcheckEnabled: this.commitSpellcheckEnabled,
       showCommitAuthorInfo: this.showCommitAuthorInfo,
       currentDragElement: this.currentDragElement,
@@ -2759,7 +2757,6 @@ export class AppStore extends TypedBaseStore<IAppState> {
     const mainProcessConfig = await getMainProcessConfig()
     this.titleBarStyle = mainProcessConfig.titleBarStyle
     this.hideWindowOnQuit = mainProcessConfig.hideWindowOnQuit
-    this.autoHideMenuBar = mainProcessConfig.autoHideMenuBar
 
     this.lastThankYou = getObject<ILastThankYou>(lastThankYouKey)
 
@@ -8432,15 +8429,6 @@ export class AppStore extends TypedBaseStore<IAppState> {
     return updateMainProcessConfig({ hideWindowOnQuit })
   }
 
-  public _setAutoHideMenuBar(autoHideMenuBar: boolean) {
-    if (this.autoHideMenuBar === autoHideMenuBar) {
-      return
-    }
-    this.autoHideMenuBar = autoHideMenuBar
-    this.emitUpdate()
-    return updateMainProcessConfig({ autoHideMenuBar })
-  }
-
   public async _resolveCurrentEditor() {
     const match = await findEditorOrDefault(this.selectedExternalEditor)
     const resolvedExternalEditor = match != null ? match.editor : null

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

@@ -79,11 +79,13 @@ export class AppWindow {
     } else if (__WIN32__) {
       windowOptions.frame = false
     } else if (__LINUX__) {
-      if (readMainProcessConfig().titleBarStyle === 'custom') {
+      const config = readMainProcessConfig()
+      if (config.titleBarStyle === 'custom') {
         windowOptions.frame = false
       }
       windowOptions.icon = join(__dirname, 'static', 'logos', '512x512.png')
-      windowOptions.autoHideMenuBar = readMainProcessConfig().autoHideMenuBar
+      windowOptions.autoHideMenuBar =
+        config.titleBarStyle === 'native-without-menu-bar'
 
       // relax restriction here for users trying to run app at a small
       // resolution and any other side-effects of dropping this restriction are

app/src/ui/app.tsx

@@ -1745,7 +1745,6 @@ export class App extends React.Component<IAppProps, IAppState> {
             showCompareTab={this.state.showCompareTab}
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             hideWindowOnQuit={this.state.hideWindowOnQuit}
-            autoHideMenuBar={this.state.autoHideMenuBar}
             onEditGlobalGitConfig={this.editGlobalGitConfig}
             underlineLinks={this.state.underlineLinks}
             showDiffCheckMarks={this.state.showDiffCheckMarks}

app/src/ui/dispatcher/dispatcher.ts

@@ -3011,10 +3011,6 @@ export class Dispatcher {
     this.appStore._setHideWindowOnQuit(hideWindowOnQuit)
   }
 
-  public setAutoHideMenuBar(autoHideMenuBar: boolean) {
-    this.appStore._setAutoHideMenuBar(autoHideMenuBar)
-  }
-
   public setCommitSpellcheckEnabled(commitSpellcheckEnabled: boolean) {
     this.appStore._setCommitSpellcheckEnabled(commitSpellcheckEnabled)
   }

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

@@ -14,4 +14,4 @@
  *  - macOS uses the native title bar
  *  - Windows uses the custom title bar
  */
-export type TitleBarStyle = 'native' | 'custom'
+export type TitleBarStyle = 'native' | 'custom' | 'native-without-menu-bar'

app/src/ui/preferences/advanced.tsx

@@ -11,13 +11,11 @@ interface IAdvancedPreferencesProps {
   readonly useExternalCredentialHelper: boolean
   readonly repositoryIndicatorsEnabled: boolean
   readonly hideWindowOnQuit: boolean
-  readonly autoHideMenuBar: boolean
   readonly onUseWindowsOpenSSHChanged: (checked: boolean) => void
   readonly onOptOutofReportingChanged: (checked: boolean) => void
   readonly onUseExternalCredentialHelperChanged: (checked: boolean) => void
   readonly onRepositoryIndicatorsEnabledChanged: (enabled: boolean) => void
   readonly onHideWindowOnQuitChanged: (enabled: boolean) => void
-  readonly onAutoHideMenuBarChanged: (enabled: boolean) => void
 }
 
 interface IAdvancedPreferencesState {
@@ -84,12 +82,6 @@ export class Advanced extends React.Component<
     this.props.onHideWindowOnQuitChanged(event.currentTarget.checked)
   }
 
-  private onAutoHideMenuBarChanged = (
-    event: React.FormEvent<HTMLInputElement>
-  ) => {
-    this.props.onAutoHideMenuBarChanged(event.currentTarget.checked)
-  }
-
   private reportDesktopUsageLabel() {
     return (
       <span>
@@ -101,7 +93,7 @@ export class Advanced extends React.Component<
 
   public render() {
     return (
-      <DialogContent className="advanced-tab">
+      <DialogContent>
         {!__DARWIN__ && this.renderAppSettings()}
         <div className="advanced-section">
           <h2>Background updates</h2>
@@ -209,25 +201,6 @@ export class Advanced extends React.Component<
             background. Use Ctrl+Q to completely quit the app.
           </p>
         </div>
-        {!__DARWIN__ && (
-          <div style={{ marginTop: 'var(--spacing)' }}>
-            <Checkbox
-              label="Auto-hide menu bar"
-              value={
-                this.props.autoHideMenuBar
-                  ? CheckboxValue.On
-                  : CheckboxValue.Off
-              }
-              onChange={this.onAutoHideMenuBarChanged}
-            />
-            <div className="git-settings-description">
-              <p>
-                Hide the menu bar and show it temporarily when Alt is pressed.
-                Takes effect after restarting the app.
-              </p>
-            </div>
-          </div>
-        )}
       </div>
     )
   }

app/src/ui/preferences/appearance.tsx

@@ -92,6 +92,8 @@ function getTitleBarStyleDescription(titleBarStyle: TitleBarStyle): string {
       return 'Uses the menu system provided by GitHub Desktop, hiding the default chrome provided by your window manager.'
     case 'native':
       return 'Uses the menu system and chrome provided by your window manager.'
+    case 'native-without-menu-bar':
+      return 'Uses the native window chrome, but hides the menu bar. Press Alt to show it temporarily. Takes effect after restarting the app.'
   }
 }
 
@@ -343,6 +345,9 @@ export class Appearance extends React.Component<
         >
           <option value="native">Native</option>
           <option value="custom">Custom</option>
+          <option value="native-without-menu-bar">
+            Native without menu bar
+          </option>
         </Select>
 
         <div className="git-settings-description">

app/src/ui/preferences/preferences.tsx

@@ -131,7 +131,6 @@ interface IPreferencesProps {
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
   readonly branchSortOrder: BranchSortOrder
   readonly hideWindowOnQuit: boolean
-  readonly autoHideMenuBar: boolean
   readonly onEditGlobalGitConfig: () => void
   readonly underlineLinks: boolean
   readonly showDiffCheckMarks: boolean
@@ -194,7 +193,6 @@ interface IPreferencesState {
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
   readonly branchSortOrder: BranchSortOrder
   readonly hideWindowOnQuit: boolean
-  readonly autoHideMenuBar: boolean
 
   readonly initiallySelectedTheme: ApplicationTheme
   readonly initiallySelectedTabSize: number
@@ -285,7 +283,6 @@ export class Preferences extends React.Component<
       showBranchNameInRepoList: this.props.showBranchNameInRepoList,
       branchSortOrder: this.props.branchSortOrder,
       hideWindowOnQuit: this.props.hideWindowOnQuit,
-      autoHideMenuBar: this.props.autoHideMenuBar,
       initiallySelectedTheme: this.props.selectedTheme,
       initiallySelectedTabSize: this.props.selectedTabSize,
       initiallySelectedDiffFontSize: this.props.selectedDiffFontSize,
@@ -784,7 +781,6 @@ export class Preferences extends React.Component<
             useExternalCredentialHelper={this.state.useExternalCredentialHelper}
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             hideWindowOnQuit={this.state.hideWindowOnQuit}
-            autoHideMenuBar={this.state.autoHideMenuBar}
             onUseWindowsOpenSSHChanged={this.onUseWindowsOpenSSHChanged}
             onOptOutofReportingChanged={this.onOptOutofReportingChanged}
             onUseExternalCredentialHelperChanged={
@@ -794,7 +790,6 @@ export class Preferences extends React.Component<
               this.onRepositoryIndicatorsEnabledChanged
             }
             onHideWindowOnQuitChanged={this.onHideWindowOnQuitChanged}
-            onAutoHideMenuBarChanged={this.onAutoHideMenuBarChanged}
           />
         )
         break
@@ -834,10 +829,6 @@ export class Preferences extends React.Component<
     this.setState({ hideWindowOnQuit })
   }
 
-  private onAutoHideMenuBarChanged = (autoHideMenuBar: boolean) => {
-    this.setState({ autoHideMenuBar })
-  }
-
   private onLockFileDeleted = () => {
     this.setState({ existingLockFilePath: undefined })
   }
@@ -1185,10 +1176,6 @@ export class Preferences extends React.Component<
         dispatcher.setHideWindowOnQuit(this.state.hideWindowOnQuit)
       }
 
-      if (this.state.autoHideMenuBar !== this.props.autoHideMenuBar) {
-        dispatcher.setAutoHideMenuBar(this.state.autoHideMenuBar)
-      }
-
       if (this.state.hooksPreferencesDirty) {
         if (this.state.enableGitHookEnv !== undefined) {
           setHooksEnvEnabled(this.state.enableGitHookEnv)