Added a preference to toggle the visibility of menu bar in preview windows (#2199)

* By default, the menu bar is now hidden in previews (like in exported games)

newIDE/app/src/Export/LocalExporters/LocalPreviewLauncher/index.js

@@ -38,6 +38,7 @@ type State = {|
     title: string,
     backgroundColor: string,
   },
+  hideMenuBar: boolean,
 |};
 
 export default class LocalPreviewLauncher extends React.Component<
@@ -56,6 +57,7 @@ export default class LocalPreviewLauncher extends React.Component<
     devToolsOpen: false,
     previewBrowserWindowConfig: null,
     hotReloadsCount: 0,
+    hideMenuBar: true,
   };
   _networkPreviewSubscriptionChecker: ?SubscriptionChecker = null;
   _hotReloadSubscriptionChecker: ?SubscriptionChecker = null;
@@ -70,6 +72,7 @@ export default class LocalPreviewLauncher extends React.Component<
 
     const win = new BrowserWindow(this.state.previewBrowserWindowConfig);
     win.loadURL(`file://${this.state.previewGamePath}/index.html`);
+    win.setMenuBarVisibility(this.state.hideMenuBar);
     win.webContents.on('devtools-opened', () => {
       this.setState({ devToolsOpen: true });
     });
@@ -97,6 +100,7 @@ export default class LocalPreviewLauncher extends React.Component<
           },
         },
         previewGamePath: gamePath,
+        hideMenuBar: !options.getIsMenuBarHiddenInPreview(),
       },
       () => {
         if (!options.networkPreview) {

newIDE/app/src/Export/PreviewLauncher.flow.js

@@ -8,6 +8,7 @@ export type PreviewOptions = {|
   networkPreview: boolean,
   hotReload: boolean,
   projectDataOnlyExport: boolean,
+  getIsMenuBarHiddenInPreview: () => boolean,
 |};
 
 /** The functions that PreviewLauncher must expose on their class */

newIDE/app/src/MainFrame/Preferences/PreferencesContext.js

@@ -175,6 +175,7 @@ export type PreferencesValues = {|
   hasProjectOpened: boolean,
   userShortcutMap: ShortcutMap,
   newObjectDialogDefaultTab: 'asset-store' | 'new-object',
+  isMenuBarHiddenInPreview: boolean,
 |};
 
 /**
@@ -223,6 +224,8 @@ export type Preferences = {|
   setShortcutForCommand: (commandName: CommandName, shortcut: string) => void,
   getNewObjectDialogDefaultTab: () => 'asset-store' | 'new-object',
   setNewObjectDialogDefaultTab: ('asset-store' | 'new-object') => void,
+  getIsMenuBarHiddenInPreview: () => boolean,
+  setIsMenuBarHiddenInPreview: (enabled: boolean) => void,
 |};
 
 export const initialPreferences = {
@@ -252,6 +255,7 @@ export const initialPreferences = {
     hasProjectOpened: false,
     userShortcutMap: {},
     newObjectDialogDefaultTab: electron ? 'new-object' : 'asset-store',
+    isMenuBarHiddenInPreview: true,
   },
   setLanguage: () => {},
   setThemeName: () => {},
@@ -290,6 +294,8 @@ export const initialPreferences = {
   setShortcutForCommand: (commandName: CommandName, shortcut: string) => {},
   getNewObjectDialogDefaultTab: () => 'asset-store',
   setNewObjectDialogDefaultTab: () => {},
+  getIsMenuBarHiddenInPreview: () => true,
+  setIsMenuBarHiddenInPreview: () => {},
 };
 
 const PreferencesContext = React.createContext<Preferences>(initialPreferences);

newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js

@@ -45,6 +45,7 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
     setAutoOpenMostRecentProject,
     resetShortcutsToDefault,
     setShortcutForCommand,
+    setIsMenuBarHiddenInPreview,
   } = React.useContext(PreferencesContext);
 
   return (
@@ -246,6 +247,14 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
               }
             />
           </Line>
+          <Line>
+            <Toggle
+              onToggle={(e, check) => setIsMenuBarHiddenInPreview(check)}
+              toggled={values.isMenuBarHiddenInPreview}
+              labelPosition="right"
+              label={<Trans>Hide the menu bar in the preview window</Trans>}
+            />
+          </Line>
           {Window.isDev() && (
             <Line>
               <Toggle

newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js

@@ -71,6 +71,8 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     resetShortcutsToDefault: this._resetShortcutsToDefault.bind(this),
     getNewObjectDialogDefaultTab: this._getNewObjectDialogDefaultTab.bind(this),
     setNewObjectDialogDefaultTab: this._setNewObjectDialogDefaultTab.bind(this),
+    getIsMenuBarHiddenInPreview: this._getIsMenuBarHiddenInPreview.bind(this),
+    setIsMenuBarHiddenInPreview: this._setIsMenuBarHiddenInPreview.bind(this),
   };
 
   componentDidMount() {
@@ -487,6 +489,22 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     );
   }
 
+  _getIsMenuBarHiddenInPreview() {
+    return this.state.values.isMenuBarHiddenInPreview;
+  }
+
+  _setIsMenuBarHiddenInPreview(enabled: boolean) {
+    this.setState(
+      state => ({
+        values: {
+          ...state.values,
+          isMenuBarHiddenInPreview: enabled,
+        },
+      }),
+      () => this._persistValuesToLocalStorage(this.state)
+    );
+  }
+
   render() {
     return (
       <PreferencesContext.Provider value={this.state}>

newIDE/app/src/MainFrame/index.js

@@ -1184,6 +1184,8 @@ const MainFrame = (props: Props) => {
             networkPreview: !!networkPreview,
             hotReload: !!hotReload,
             projectDataOnlyExport: !!projectDataOnlyExport,
+            getIsMenuBarHiddenInPreview:
+              preferences.getIsMenuBarHiddenInPreview,
           })
         )
         .catch(error => {
@@ -1202,6 +1204,7 @@ const MainFrame = (props: Props) => {
       eventsFunctionsExtensionsState,
       previewState,
       state.editorTabs,
+      preferences.getIsMenuBarHiddenInPreview,
     ]
   );