Add setting to hide menu bar (#1551)

* Add setting to hide menu bar

Add a setting in the themes section to hide the menu bar.
The menu bar is not needed in everyday use and might not fit in with
signals dark theme. The hidden menu bar can still be shown by pressing
alt.
autoHideMenuBar is added to windowConfig and saved and restored on
startup to prevent flickering.

* Trigger events only when related setting changes

Set the event to trigger on instanciation of the view.
Notification settings no longer reapply the theme or menu bar settings.

* Save window state when closing the window

When not moving or resizing the window, no BrowserWindow config would be
created and saved.

_locales/en/messages.json

@@ -812,6 +812,10 @@
       "message": "Android (dark)",
       "description": "Label text for dark Android theme"
     },
+    "hideMenuBar": {
+      "message": "Hide menu bar",
+      "description": "Label text for menu bar visibility setting"
+    },
     "newContact": {
       "message": "Click to create new contact",
       "description": ""

background.html

@@ -583,6 +583,11 @@
           <label for='theme-setting-ios'>iOS</label>
         </div>
       </div>
+      <br />
+      <div class='menu-bar-setting'>
+        <input type='checkbox' name='hide-menu-bar' id='hide-menu-bar'/>
+        <label for='hide-menu-bar'>{{ hideMenuBar }}</label>
+      </div>
       <hr>
       <div class='notification-settings'>
         <h3>{{ notifications }}</h3>

js/views/app_view.js

@@ -8,12 +8,14 @@
           this.inboxView = null;
           this.installView = null;
           this.applyTheme();
+          this.applyHideMenu();
         },
         events: {
             'click .openInstaller': 'openInstaller',
             'click .openStandalone': 'openStandalone',
             'openInbox': 'openInbox',
-            'change-theme': 'applyTheme'
+            'change-theme': 'applyTheme',
+            'change-hide-menu': 'applyHideMenu',
         },
         applyTheme: function() {
             var theme = storage.get('theme-setting') || 'android';
@@ -22,6 +24,11 @@
                     .removeClass('android')
                     .addClass(theme);
         },
+        applyHideMenu: function() {
+            var hideMenuBar = storage.get('hide-menu-bar', false);
+            window.setAutoHideMenuBar(hideMenuBar);
+            window.setMenuBarVisibility(!hideMenuBar);
+        },
         openView: function(view) {
           this.el.innerHTML = "";
           this.el.append(view.el);

js/views/settings_view.js

@@ -9,6 +9,7 @@
         initialize: function(options) {
             this.name = options.name;
             this.defaultValue = options.defaultValue;
+            this.event = options.event;
             this.populate();
         },
         events: {
@@ -18,6 +19,9 @@
             var value = e.target.checked;
             storage.put(this.name, value);
             console.log(this.name, 'changed to', value);
+            if (this.event) {
+                this.$el.trigger(this.event);
+            }
         },
         populate: function() {
             var value = storage.get(this.name, this.defaultValue);
@@ -28,6 +32,7 @@
         initialize: function(options) {
             this.name = options.name;
             this.defaultValue = options.defaultValue;
+            this.event = options.event;
             this.populate();
         },
         events: {
@@ -37,7 +42,9 @@
             var value = this.$(e.target).val();
             storage.put(this.name, value);
             console.log(this.name, 'changed to', value);
-            this.$el.trigger('change-theme');
+            if (this.event) {
+                this.$el.trigger(this.event);
+            }
         },
         populate: function() {
             var value = storage.get(this.name, this.defaultValue);
@@ -57,13 +64,20 @@
             new RadioButtonGroupView({
                 el: this.$('.theme-settings'),
                 defaultValue: 'android',
-                name: 'theme-setting'
+                name: 'theme-setting',
+                event: 'change-theme'
             });
             new CheckboxView({
                 el: this.$('.audio-notification-setting'),
                 defaultValue: false,
                 name: 'audio-notification'
             });
+            new CheckboxView({
+                el: this.$('.menu-bar-setting'),
+                defaultValue: false,
+                name: 'hide-menu-bar',
+                event: 'change-hide-menu'
+            });
             if (textsecure.storage.user.getDeviceId() != '1') {
                 var syncView = new SyncView().render();
                 this.$('.content').append(syncView.el);
@@ -84,6 +98,7 @@
               nameOnly: i18n('nameOnly'),
               audioNotificationDescription: i18n('audioNotificationDescription'),
               themeAndroidDark: i18n('themeAndroidDark'),
+              hideMenuBar: i18n('hideMenuBar'),
             };
         }
     });

main.js

@@ -58,6 +58,7 @@ function createWindow () {
     height: 610,
     minWidth: 700,
     minHeight: 360,
+    autoHideMenuBar: false,
     webPreferences: {
       nodeIntegration: false,
       //sandbox: true,
@@ -81,6 +82,7 @@ function createWindow () {
     // so if we need to recreate the window, we have the most recent settings
     windowConfig = {
       maximized: mainWindow.isMaximized(),
+      autoHideMenuBar: mainWindow.isMenuBarAutoHide(),
       width: size[0],
       height: size[1],
       x: position[0],
@@ -99,6 +101,7 @@ function createWindow () {
 
   mainWindow.on('resize', captureAndSaveWindowStats);
   mainWindow.on('move', captureAndSaveWindowStats);
+  mainWindow.on('close', captureAndSaveWindowStats);
 
   mainWindow.on('focus', function() {
     mainWindow.flashFrame(false);
@@ -260,3 +263,11 @@ ipc.on('restart', function(event) {
   app.relaunch();
   app.quit();
 });
+
+ipc.on("set-auto-hide-menu-bar", function(event, autoHide) {
+  mainWindow.setAutoHideMenuBar(autoHide);
+});
+
+ipc.on("set-menu-bar-visibility", function(event, visibility) {
+  mainWindow.setMenuBarVisibility(visibility);
+});

preload.js

@@ -21,6 +21,12 @@
     console.log('show window');
     ipc.send('show-window');
   };
+  window.setAutoHideMenuBar = function(autoHide) {
+    ipc.send('set-auto-hide-menu-bar', autoHide);
+  };
+  window.setMenuBarVisibility = function(visibility) {
+    ipc.send('set-menu-bar-visibility', visibility);
+  };
   window.restart = function() {
     console.log('restart');
     ipc.send('restart');