Hide menu bar on Windows

[mgove131]

I confirm (by marking "x" in the [ ] below):

• This is not a troubleshooting question. Troubleshooting questions go here: http://www.mattermost.org/troubleshoot/.
• This doesn't reproduce on web browsers (such as in Chrome). If it does, issue reports go to the Mattermost Server repository.
• I have read contributing guidelines.

---

Summary
This application needs a "Hide menu bar" setting to allow a more streamlined interface. Competent users will understand that using the 'Alt' key will show the menu bar again.

Steps to reproduce

• Operating System: Windows 10
• Mattermost Desktop App version: 3.6.0
• Mattermost Server version: 3.6.0 (3.6.2)
• Clear steps to reproduce the issue:
  -- File > Settings...
  -- There is no "Hide menu bar" setting

Expected behavior

• File > Settings...
• There is a "Hide menu bar" setting

Observed behavior

• File > Settings...
• There is no "Hide menu bar" setting

Relevant error messages and/or screenshots

Possible fixes
Add a "Hide menu bar" setting for users to allow them to have a more streamlined UI. Intelligent users are able to handle this option without any issues. The UI shouldn't be impaired to avoid issues with inept users.

[jasonblais]

@mgove131 @haboustak This was causing issues where users who had previously hidden the menu bar were unable to perform the actions as they didn't remember where the menu bar was located.

This particularly caused confusion during early user experience.

We're considering a design where the menu bar would be placed at the top left corner of the screen similar to attached.

Would that work?

[mgove131]

@jasonblais Thank you for looking into this! Yes, I think something like that would be great. The main issue is that the menu bar always at the top often stands out and isn't needed most of the time. Having a button to click that is integrated in the UI should be an adequate solution.

[jasonblais]

Glad to hear! I've added a Needs Design label for this issue so the UI can be finalized.

/cc @yuya-oc

[haboustak]

The implementation you had in v3.5.0 is consistent with the native platform use of menus. In general, that's my preference. I'd imagine the menu on macOS isn't as annoying as on Windows. This hamburger menu design will be redundant with the menubar at the top of the screen.

There are probably only a handful of things that are important to the majority of users in the menu. The Settings option comes to mind. I'd consider pulling it out to the top-level using a gear icon. That would then give confused users access to unhide the menu on platforms that support it.

[yuya-oc]

Yeah, I feel a new design is not necessary for macOS. The separated menu bar at top of screen is the common interface in mac apps. Additional menu button might be redundant.

On the other hands, on Linux, the position of menu bar is strongly depending on desktop environments. Recent Unity or GNOME use separated menu bar as well, but there are environments which use a traditional menu bar. So it seems a little hard to determine what is consistent.

[mgove131]

I disagree with the idea that the tool bar always needs to be shown, even to be consistent with other OS applications. The interface is much cleaner without it there, and this worked fine in v3.5.0. At least put a 'hide/show menu bar' option in the hamburger menu if you aren't going to add a new menu bar button.

Again, it's unfair to punish competent users because some users are unable to understand how a feature works.

[yuya-oc]

To be sure.

On macOS, apps can't control whether the menu bar appears. It's one of system preferences.
And "Hide menu bar" have never existed in Mac version of this app due to this reason.

[haboustak]

Making Settings available via icon on the main screen is useful on all platforms and should help users who can't figure out how to unhide the menu. They'd click settings, and they'd find the option.

I'd restore the hide menu option on Linux, so it can be used with window managers that don't have a shared menu bar. Your documentation can outline that hiding the menu requires platform support for hiding it.

[jasonblais]

@haboustak @mgove131 Completely understand where you're coming from.

We were getting lots of users being confused how to get to the Settings page (some were even blocked from using the app as they had accidentally entered the wrong URL) as they had auto-hidden the menu bar.

So as a temporary solution, we removed the setting, which was only available on Windows and Linux. We realize this isn't ideal and isn't our long-term plan.

What we're thinking of (and please do share feedback on this) is the hamburger menu design which would replace the menu bar, not be an addition to it.

So it would be roughly as follows:

• hide the menu bar (always and permanently, to all users)
• add the hamburger icon in place of where the Mattermost icon is currently in the window title, for easy access but without hindering the experience for users who don't need it.

I think this could work for all OS systems, although I'm less familiar with macOS and Linux.

[mgove131]

@jasonblais It also makes sense to want to improve the feature for everyone. If it was problematic for some users, it is reasonable to fix it. The only frustration for me is that it was implemented by removing the feature without a replacement. It was something I used and it was already implemented. But that frustration is mitigated since you are planning to re-implement it.

For me, the solution your are proposing makes sense. It would work for my use case and I think it wouldn't be confusing for other users. My main concern is getting the option back, even something like an option in a config file would be adequate for what I personally need. However, cleanly integrating the options into the UI is a good solution.

Thanks!

[jasonblais]

@mgove131 @haboustak

Wondering if you'd have examples of other apps that let you hide the menu bar and how this is accomplished (e.g. through a config option, app setting, integrating in the UI, etc.).

I'm just currently researching other apps to find which pattern might work the best for this project. All help is much appreciated.

[mgove131]

For me, the old method worked fine. If I needed the menu, pressing Alt brings it back. And while it is hidden, it is not a distraction in the interface. If it is problematic for some users, the option should be hidden in a sub-menu or config file.

I don't have examples from other programs. I do think the screenshot shown earlier is a good, clean solution. My problem is that as is, the menu bar does not feel integrated in the UI and it is distracting.

I believe this was also mentioned, the majority of the options are not needed most of the time. Which is another reason it is nice to have the menu bar hidden.

[jasonblais]

Here's the proposed design (sorry, the screenshots are a bit blurry).

Note the darkened background behind the hamburger menu on the right screenshot, which should occur whenever you hover over the menu with a mouse.

Lastly, the menu bar shouldn't appear until you actually click on it.

PS: I'm not sure if the black colour for the hamburger menu bar is too dark, but we can try it out first. If it is, we can consider using a grey colour that we use for the plus icon in server tab list (see below for sample)

[mthornba]

We're currently using Slack at my job but are considering switching to Mattermost. The menu bar in the native Slack app on Linux behaves how I think Mattermost v3.5.0 behaved - there is toggle in the menu bar Window > Always Show Menu Bar. When the menu bar is toggled off it can be shown by hitting alt.

The hambuger option above does look nicer than the current menu bar although, depending on your window manager, may take up an entire row of space across the width of the app. I run AwesomeWM with no window decorations so there is no title bar to incorporate the button into. I'd rather have that vertical space used by content of the app rather than an empty row containing either a menu or a single button to open a menu.

[jasonblais]

@yuya-oc FYI I've moved this to 3.9 since there's a higher priorities in the 3.8 milestone.

[drmoose]

For others like me who want the menu bar hidden badly enough to find this ticket, but don't want to downgrade to 3.5.0 and lose spell check, the commit that removed ability to hide the menu bar is this one and the way to hack the menu bar away on 3.7.1 is here:

1. Become root (sudo su - or whatever)

2. Install the asar archive tool with npm install -g asar.

3. cd to wherever mattermost is installed (the dpkg on Ubuntu puts it at /opt/Mattermost)

4. cd resources

5. asar extract app.asar app will create a folder called app.

6. Using your favorite editor, find this event handler in the newly-extracted app/main_bundle.js and add the following lines:

     newWindow.setAutoHideMenuBar(true); 
     newWindow.setMenuBarVisibility(false);

7. Re-create app.asar with asar pack app app.asar

There may be lazier/easier fixes, but not being familiar at all with Electron this is the workaround I've found.

[cassidyjames]

Keep in mind how this will act on Linux; on those systems, Electron apps are drawn with a standard titlebar, and integrating with that titlebar is not something I've seen any Electron apps do. Instead, every Electron app that hides the menubar just does the standard autohide behavior like in Atom, VS Code, Slack, etc. and toggles visibility with the Alt key.

[mmcintyre123]

I personally do not want the alt key bound to toggle the menu bar, as I use the alt tab shortcut often, and sometimes the menu bar dialogue gets stuck open while I'm using other apps forcing me to go back to slack and press esc. It would be nice to have the option to simply show or hide the menu bar (i.e. keep present or hide), and even better to assign our own key binding to display it if the hide option is used.

[ghost]

I'm a competent user and all I want is the native Windows titlebar because Slacks custom drawn one does not work.

[stimata-debug]

thank you drmoose, it is unfortunate there are some people that think having the menu bar font use as much vertical space as two channels or three message lines is acceptable.

[ghost]

Yes, thank you drmoose. I also feel that it is very unfortunate that people have opinions that differ than my own.

[slith76]

I personally do not want the alt key bound to toggle the menu bar, ...

In Atom, the "Alt" key is only active if you have selected it once in the menu. So it would not speak against it.

[amyblais]

Moving this to Jira: https://mattermost.atlassian.net/browse/MM-14073