Cinnamon menus have a new look
by collinss 33

The Cinnamon menus recently received a major overhaul. The old ones were inherited when Cinnamon was first forked from gnome shell, so this has been a long time coming.

The first thing you will probably notice is the absence of the arrow and the resultant gap. These worked well for applets, but looked out of place anywhere else (such as desklet context menus). Instead, the menu now opens right next to the panel, applet, desklet, or whatever else you’re opening it from.

menu2

menu

Thanks to Joseph, the animations were also improved, and now look more similar to that of the GTK menus. You can see the animations in action in this video:

The removal of the arrow also allows theme developers to use the full range of CSS properties, hopefully leading to even better themes!

Finally, removing the arrows allowed us to greatly simplify the menu drawing code. This not only makes it easier to maintain, it has also been know to improve performance and responsiveness on some machines.

Note to theme developers and users of third party themes

The bad news is that the arrow was implemented in such a way that we had to break themes when we removed them. The good news is that we were able to do it in a way that doesn’t leave the background invisible, so older themes will not be completely useless. However, doing so required us to switch the style class from “popup-menu” to “menu”. Basically, this means that older themes will still work, but won’t look good until support is added for the new style class. This change also allows themes to maintain support for older versions of Cinnamon, while still supporting the new menus.

33 thoughts on “Cinnamon menus have a new look

  1. Reply daiyi Nov 15,2016 14:57

    So happy to see convergence towards full modern CSS! :D

    Will there be theme docs any time soon, or a public repo somewhere I’m not aware of? I’d love to passively contribute to docs as I work on theme development.

  2. Reply rik Nov 15,2016 15:05

    I am hoping that in the future there will be ways to adjust the Cinnamon Menu layout and icon sizes. For example I think it would be nice to have larger icons in a “grid” (maybe 3 columns / 32 or 48 px at most so that the full application names still have enough space to show beneath).

    Anyway, some more flexibility on sizing would be greatly welcomed by many I think!

  3. Reply Anand Nov 16,2016 06:55

    Looks really neat. Can you clarify if this is for Cinnamon 3.2? I suppose so just confirming.

    • Reply clem Nov 16,2016 09:43

      Yes, it is.

      • Reply Anand Nov 16,2016 13:36

        Cool :) How will it look on vertical panels? Side of the Menu sharing the border with the vertical panel (much similar to bottom side sharing with horizontal panel)

        • Reply JosephM Nov 18,2016 19:15

          The short video shows how it looks with vertical panels. The menus stay within the “work area” when opened. Meaning they don’t overlap the panels regardless of layout.

  4. Reply rik Nov 16,2016 10:08

    One more comment regarding the current menus is that it is hard at first glance for a user to understand that the “middle” column is categories and the right column is “apps”. They think of it as a 2 column listing of apps. Of course once they use it they understand, but it would be nice if the categories were differentiated a bit from the apps. I think Gnomenu gets it right: https://extensions.gnome.org/extension/608/gnomenu/

    • Reply Mary Nov 17,2016 17:23

      Great points rik, I too find it a bit confusing at first glance. There needs to be a clear visual hierarchy and difference between categories and application launchers. I think for instance making the currently selected category background stretch the full width of the left column, and having a small arrow pointing to the right, would go a long way. A vertical line as a divider would probably help, too.

  5. Reply Anja Nov 16,2016 18:59

    have problems with menus now, can someone help me with the old numix theme? have problems with the menu borders (right click menu too) they are way too big :(

    greets Anja

  6. Reply zagortenay333 Nov 16,2016 20:16

    What do you mean by being able to use the full range of CSS?

    Did you expand the number of css properties? :)

    • Reply JosephM Nov 18,2016 19:12

      The menus no longer use the special “boxpointer” properties. They are now just themed with regular css instead like everything else.

      • Reply zagortenay333 Nov 18,2016 23:25

        Oh, but theme devs didn’t need to use the boxpointer if they didn’t want to.

        Why did you remove it? Ugly code?

        • Reply JosephM Nov 20,2016 20:54

          A few reasons. One was design. We talked about doing this awhile back and just never got around to it. Many themes already removed them and people wanted to be able to remove the gaps you would get between the menu and the monitor edge. The code for placing the menus and the pointers was fairly complicated and it broke with the addition of vertical panels. That was the push to finally just ditch them instead of spending time trying to fix something we didn’t really want to keep anyway.

  7. Reply Andre Nov 16,2016 22:55

    There is nothing new about that look for the main menu pop-up – Ubuntu 11 years ago re-visited.

    While appearance is a matter of individual taste, I personally prefer the arrow and gap. To make this user configurable would be impossible so it becomes a take-it-or-leave-it situation.

    We have already lost the easy option to change the update manager’s icons from its preferences.

    Is Mint’s focus changing from user to developer?

    • Reply collinss Nov 18,2016 21:36

      Hi Andre, Mint’s focus has always been (at least as long as I’ve been using it) and continues to be making a usable desktop that works for as many people as possible. Removing or changing something is always a tough call, and a change as significant as this would never have happened without some really good reasons and a lot of discussion. In this case there are substantial benefits to the end user beyond mere cosmetics.

      And yes, this does benefit those of us who contribute to Cinnamon as we don’t have to spend as much time or effort maintaining this part of the code, but that just means more time we can spend on new features and fixing bugs.

  8. Reply Brahim aka Zorbz Nov 17,2016 04:54

    What about the netspeed applet and the onscreen keyboard (Ubuntu’s onboard has issues on Linux Mint Cinnamon)! Will we get one by default? A full-featured onscreen keyboard is a must especially for other languages such as Arabic.

  9. Reply Steen Brølling Nov 17,2016 16:41

    Hi

    Since updating to cinnamon 3.2 one of my four CPUs are constantly running on 100%, and I can see it’s the cinnamon-screen process that triggers this behavior.

    Before the upgrade my CPUs were always on 0-10% when nothing really triggered them, so something has changed since then.

    I’m running LMDE2, and I think it’s the best distro I’ve ever used (out of a whole lot), so thank you for making this :)

  10. Reply Mary Nov 17,2016 17:19

    This seems like a good move and at least judging by the video looks slick. Couple of thoughts I have regarding the main application menu:

    If I have VLC running a video, and I press the menu “Start” button, the video freezes while the menu loads into place, like a short stuttering effect. Is this the expected behaviour? Granted, my computer isn’t very new and fancy, but I wouldn’t expect this to happen. Small niggle, but could perhaps be improved, as polish does matter.

    Another thing is that the scrollbar of the list of applications in the menu (best illustrated by viewing All Applications) seems to be misaligned with its mouseover area. If I try to click and grab the very right of the scrollbar, I can’t, but I can click outside of it to the left and grab it. A few pixels of misalignment somewhere in the code? This is on themes Linux Mint and Mint-Y-Dark if that matters. Also, at the bottom of the area that scrolls, there are often graphical artifacts of half rendered icons and such, which can be confusing because it sometimes appears there are more items left in the list, even when I’m at the bottom of the list. If you can reproduce these issues it would be great if you could have a look at them.

    This is all on Mint 18 with Cinnamon 3.0.7, which I by the way make great use of, so thank you so much!

  11. Reply Nick Nov 17,2016 20:54

    I really hope it improves performance.
    The current menu causes a frame drop every time it appears, very noticeable if you have a youtube video in the background.

    • Reply lestcape Nov 21,2016 22:33

      Nick this is not a problem of the menu itself and there are not an easy solution to this problem, as it’s related with the conception of the desktop (just there are one thread to do all things), so a simultaneus processing will affecting other tasks.

  12. Reply navyguns Nov 18,2016 15:53

    In the Mate desktop, when an application name is typed in the search field, if the application is not installed, it helpfully suggests installing said application from the repository or searching the web for it. Can this functionality be added to the Cinnamon menu?

  13. Reply Marshal Kilgore Nov 19,2016 04:44

    I used to make the “arrow” invisible by patching my favorite themes, so the change is fine with me. >;-)

    But a small thing still bugs me about the main menu: Entries in the “applications” column are placed visibly lower than their “categories” counterparts.

    The reason is that the entry “All Applications” has no icon attached and thus takes up less height, which shows clearly when highlighted.

    Keep up the great work!

  14. Reply Brahim aka Zorba Nov 19,2016 17:17

    what about the window list with application grouping?,

  15. Reply Hong Rae Kim Nov 20,2016 14:06

    What editor do you use in Development?

  16. Reply mark Nov 21,2016 02:09

    Too many panels.

  17. Reply Mel Dec 4,2016 16:29

    Referring to @Andre’s comment

    ((beginning of copy-paste))

    There is nothing new about that look for the main menu pop-up – Ubuntu 11 years ago re-visited.

    While appearance is a matter of individual taste, I personally prefer the arrow and gap. To make this user configurable would be impossible so it becomes a take-it-or-leave-it situation.

    We have already lost the easy option to change the update manager’s icons from its preferences.

    Is Mint’s focus changing from user to developer?

    ((end of copy-paste)):

    As much as I understand (at-least, based on what @Andre said) why it would be impossible for the “arrows” (for lack of a better way of calling them) to come back, and/or to at-least/at-the-very-least configure whether or not you want them to show, I really will miss them (and for that reason will-not be updating to Cinnamon 3.2).

    I really like that they show what the heck I was clicking on (they basically say/show “hey, you clicked on this, and this context-menu appeared/showed-up”). And for big menus (like the Battery icon on my taskbar (aka. “Panel”) for my laptop, or the Sound icon on the taskbar, or the WiFi icon on the taskbar (for my laptop), or the icon-that-looks-like-an-Internal-Hard-Disk-Drive (which appears when you plug in a USB-flash-drive or a USB external hard-drive)),

    they (ie. the arrows) show which of all those icons you clicked on [which then caused the big menu to appear]; without the arrows, the big-menu just appears next-to all those icons and you have no “visual signal” indicating to you the computer-user which one was the icon-on-the-taskbar that you had clicked on which then caused that big menu to appear.

    • Reply JosephM Dec 4,2016 20:14

      That’s not entirely true. Applets now support a :checked style class so they will be highlighted when a menu is open. It gives you the visual indication you want. It was added late and I’m not sure updated versions of our themes are in the Mint 18.1 beta yet. Other themes will need to add support for it.

      As for the update manager icons. This was changed due to a lot of requests to allow these to be changed by a users icon theme. It’s also the standard way of handling icons in gtk applications.

  18. Reply Özgür Dec 26,2016 10:20

    I like too the arrow. Actually.. The arrow is the reason why i use cinnamon, of course and the bar too.. I’m not a big fun the user-friendly things.. I think it’s time to go i3wm in spite of a desktop environment. I know window manager and desktop environment are different things. I guess it’s time to develop my own apps for i3wm. The Cinnamon family.. Take care of yourself and i wish you will be more success what you are doing..

Leave a Reply