1619731 - Reorganize App Menu items

Status: RESOLVED FIXED

(Thunderbird :: Mail Window Front End, enhancement)

Description

[Alessandro Castellani [:aleca]]

I'd like to propose a little bit of reordering of the App Menu items to make them more discoverable and intuitive to use.

The majority of the issues are in the 4th group, which lists:

• Activity Manager
• Message Filters >
• Add-ons >
• Preferences >

And the issues are:

• We need to click twice access both addons and preferences.
• Account settings is inside Preferences submenu.
• Some layout controls to show/hide panels are scrambled inside the Preferences submenu and in the Layout sub-sub menu.

I propose the current reorganization:

• Activity Manager
• Account Settings
• Add-ons >
• Preferences
• Customize >

With this reorganization we will have easier access to Account Settings and Preferences, only one click away.
We can add another voice called Customize > which opens a submenu where we can organize all the layout options and toolbar customization items.
Also, the Customize item will keep a sense of familiarity with the Firefox App Menu.

I don't remember if we discussed this already, but I'd propose to remove the submenu of Add-ons to simplify the navigation and let the users control the add-ons settings from within the add-ons tab.

Comment 1

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2020-03-03 16.41.04.png

I reorganized a little bit further the items to be more consistent with the context group they're in.
Most noticeably, I move Message Filters in the group above, and Activity Manager in the Tools submenu.

Comment 2

[Alessandro Castellani [:aleca]]

Attachment: 1619731-app-menu.diff

Comment 3

[Paul Morris [:pmorris]]

Thanks for working on this! There is definitely room for improvement in the way things are arranged in the app menu, and these changes look really sensible to me.

Previously I think there was a reason for "add-ons" item not to just be a link to the addons tab. I think you couldn't access an add-on's preferences from the add-ons tab (and we couldn't modify it because m-c), so we had to provide links to them in the app menu. But I think that was only for legacy add-ons which is no longer a concern. A quick check shows that you can indeed access an addon's prefs from the addon tab now, so I think we can just have a simple "add-ons" item that opens that tab.

One consideration is that currently the app menu and the main menu bar are roughly coordinated, so it may make sense in some cases to also move things in the main menu bar to match the moves in the app menu. I haven't looked closely at this though. It may make sense to have less of a correspondence, and also this may not apply as much for this first panel you see in the app menu which has things from various places in the menu bar menus.

One thought, in the customize sub-panel, consider having "Toolbars" and "Layout" as non-clickable headings to correspond with the menu bar's view > toolbars and view > layout. (A heading like the "Add-on Preferences" heading currently on the "Add-ons" panel.)

Comment 4

[Richard Marti (:Paenglab)]

Comment on attachment 9130656 [details] [diff] [review]
1619731-app-menu.diff

Review of attachment 9130656 [details] [diff] [review]:
-----------------------------------------------------------------

The reorganisation looks good.
ui-r- because you only implemented style changes for Linux.
And in "Customize" the Menu-, Mail- and the Folder Pane toolbar are missing. You need to adapt https://searchfox.org/comm-central/source/mail/components/customizableui/content/panelUI.js#410.

And yes, the Add-ons submenu is probably no more needed with the deprecation of the old extensions. Best is to ask Geoff to be sure.

::: mail/themes/shared/mail/tabmail.css
@@ +33,5 @@
>    /* override margin and padding from tabbox.css */
>    margin: 0 !important;
>    margin-inline-end: 1px !important;
>    padding: 0 !important;
> +  list-style-image: url("chrome://global/skin/icons/performance.svg");

Why this change? Now all tabs without a special icon get this one.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: accountManager.svg

I asked you last week what icon we could use for the account manager and pointed me to the FX icon repository. What do you think about this icon? It's a bit abstract but Account settings isn't a easy thing to visualize.

Comment 6

[Alessandro Castellani [:aleca]]

(In reply to Richard Marti (:Paenglab) from comment #4)

The reorganisation looks good.
ui-r- because you only implemented style changes for Linux.
And in "Customize" the Menu-, Mail- and the Folder Pane toolbar are missing.
You need to adapt
https://searchfox.org/comm-central/source/mail/components/customizableui/
content/panelUI.js#410.

Ouch, I totally missed that, thanks.

• list-style-image: url("chrome://global/skin/icons/performance.svg");
  Why this change? Now all tabs without a special icon get this one.

Wrong change, I just saw that this edit affects all the tabs.

(In reply to Richard Marti (:Paenglab) from comment #5)

Created attachment 9130734 [details]
accountManager.svg

I asked you last week what icon we could use for the account manager and pointed me to the FX icon repository. What do you think about this icon? It's a bit abstract but Account settings isn't a easy thing to visualize.

Yes, I think that looks good. I'll use this in the menu.

Comment 7

[Alessandro Castellani [:aleca]]

(In reply to Paul Morris [:pmorris] from comment #3)

Previously I think there was a reason for "add-ons" item not to just be a link to the addons tab. I think you couldn't access an add-on's preferences from the add-ons tab (and we couldn't modify it because m-c), so we had to provide links to them in the app menu. But I think that was only for legacy add-ons which is no longer a concern. A quick check shows that you can indeed access an addon's prefs from the addon tab now, so I think we can just have a simple "add-ons" item that opens that tab.

Awesome, that's good to know.
I'll ping Geoff for a review just to be sure this is OK.

One consideration is that currently the app menu and the main menu bar are roughly coordinated, so it may make sense in some cases to also move things in the main menu bar to match the moves in the app menu. I haven't looked closely at this though. It may make sense to have less of a correspondence, and also this may not apply as much for this first panel you see in the app menu which has things from various places in the menu bar menus.

I think it's okay to not be matching 100% the main menu bar considering we already have some drastic changes in terms of links like Preferences, Add-ons, Account Settings, Message Filters, etc.
We can consider reorganizing that menu in a follow up bug if we get complaints, or we see some issues in keeping these differences.

One thought, in the customize sub-panel, consider having "Toolbars" and "Layout" as non-clickable headings to correspond with the menu bar's view > toolbars and view > layout. (A heading like the "Add-on Preferences" heading currently on the "Add-ons" panel.)

Mh, I don't know about that.
Sub-headings inside that menu look pretty weird, and I don't see us using them anywhere else other the Add-ons panel, which I'm gonna remove.
I think it's better to keep those extra options inside sub-panels.

Comment 8

[Alessandro Castellani [:aleca]]

Attachment: 1619731-app-menu.diff

Patch updated.
Richard, I went with the Left Sidebar icon as the Top Sites icon looked very heavy and out of balance with the others.
https://design.firefox.com/icons/viewer/#sidebar%20left

Comment 9

[Magnus Melin [:mkmelin]]

I think Account Settings and Preferences should be next to each other, since they are closely related.

Comment 10

[Richard Marti (:Paenglab)]

Comment on attachment 9130907 [details] [diff] [review]
1619731-app-menu.diff

Review of attachment 9130907 [details] [diff] [review]:
-----------------------------------------------------------------

Yes,  Account Settings and Preferences should be next to each other.

::: mail/themes/linux/mail/primaryToolbar.css
@@ +274,5 @@
> +  list-style-image: url("chrome://messenger/skin/icons/file-item.svg");
> +}
> +
> +#appmenu_accountmgr {
> +  list-style-image: url("chrome://messenger/skin/icons/sidebar-left.svg");

You forgot to add this to Mac and Windows.

Maybe it's time for a shared primaryToolbar.css

Comment 11

[Alessandro Castellani [:aleca]]

Attachment: 1619731-app-menu.diff

Third time the charm.
I also launched a try-run to see if I broke any related test.
https://treeherder.mozilla.org/#/jobs?repo=try-comm-central&revision=4abfb97f201e44d2eff039897600c705d2f8fa5d

Comment 12

[Richard Marti (:Paenglab)]

Comment on attachment 9131199 [details] [diff] [review]
1619731-app-menu.diff

Thanks!

Comment 13

[Magnus Melin [:mkmelin]]

Comment on attachment 9131199 [details] [diff] [review]
1619731-app-menu.diff

Review of attachment 9131199 [details] [diff] [review]:
-----------------------------------------------------------------

::: mail/components/customizableui/content/panelUI.inc.xhtml
@@ +65,5 @@
>                         class="subviewbutton subviewbutton-nav subviewbutton-iconic"
>                         label="&findMenu.label;"
>                         closemenu="none"
>                         oncommand="PanelUI.showSubView('appMenu-findView', this)"/>
> +        <toolbarbutton id="appmenu_filters"

I think Filters are a bit out of place here. 
Maybe that should also be under Tools, but it's a shame that's so many clicks to access for running manually.
Or maybe above account settings

@@ -420,5 @@
> -               value="&addonPrefs.label;"
> -#endif
> -               class="subview-subheader"/>
> -        <!-- This message is shown when there are no addon items to show. -->
> -        <toolbarbutton label="&addonNoPrefs.label;"

should remove this menu from the normal menu too and related entities + code

::: mail/locales/en-US/chrome/communicator/utilityOverlay.dtd
@@ +20,5 @@
>  <!ENTITY preferencesCmd2.label "Options">
>  <!ENTITY preferencesCmd2.accesskey "O">
>  <!ENTITY preferencesCmdUnix.label       "Preferences">
>  <!ENTITY preferencesCmdUnix.accesskey     "n">
> +<!ENTITY customizeCmd.label       "Customize">

This should have ellipsis

(and I would not try to align... )

Comment 14

[Alessandro Castellani [:aleca]]

Maybe that should also be under Tools, but it's a shame that's so many clicks to access for running manually.

Yeah, under Tools makes more sense.
Since we have the vertical space, I can add the Message Filters items directly inside the Tools panel, without the necessity of another subpanel.
1 click away and in a logical place.

Comment 15

[Alessandro Castellani [:aleca]]

Attachment: 1619731-app-menu.diff

I think this looks very good and the organization is way more intuitive than what we currently have.

Comment 16

[Magnus Melin [:mkmelin]]

Comment on attachment 9131281 [details] [diff] [review]
1619731-app-menu.diff

Review of attachment 9131281 [details] [diff] [review]:
-----------------------------------------------------------------

I would move the two junk mail control entries up under the filter items, as these are kind of related.

::: mail/locales/en-US/chrome/communicator/utilityOverlay.dtd
@@ +20,5 @@
>  <!ENTITY preferencesCmd2.label "Options">
>  <!ENTITY preferencesCmd2.accesskey "O">
>  <!ENTITY preferencesCmdUnix.label       "Preferences">
>  <!ENTITY preferencesCmdUnix.accesskey     "n">
> +<!ENTITY customizeCmd.label "Customize…">

I may have looked too much at Firefox. Since we do the submenu (and they don't) we should not have the ellipsis. It's not very nice when that's showing in the header of the submenu.

Comment 17

[Alessandro Castellani [:aleca]]

(In reply to Magnus Melin [:mkmelin] from comment #16)

I may have looked too much at Firefox. Since we do the submenu (and they
don't) we should not have the ellipsis. It's not very nice when that's
showing in the header of the submenu.

True, it looks very odd.

Comment 18

[Alessandro Castellani [:aleca]]

Attachment: 1619731-app-menu.diff

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/2b796fcf4c59
Reorganize App Menu items. r=mkmelin