Mate 18.04 - Indicator Applet Complete 1.20.0 - Icons resize issue

[mircea]

I use Ubuntu Mate on several PC and updating to Mate 18.04 bring me an annoying permanent issue.
Just to note, I prefer to use Menu Bar, Font, and an desktop element size small, to not waste space used for displaying main apps content.

Par example I use on all PC even one with 4K display size on menu bar between 17 and 20 pixels, but on all of this PC the Indicator Applet Complete will not display correctly.

• it has an padding effect of 2-3pixel on both border edges, witch other icons like Clock with Weather, Menu Button, Display Config,… does not have this issue
• too large spacing between icons, witch on display like 1366x768 and 17pixel panel wide look like wasted space and bulky
• no icon resize or space resize no matter how wide is the menu bar.

I just hope someone will fix at list partial this menu applet issue in current desktop with an update, as it impact all my PC’s.

I consider the menu bar as the main important thing on desktop and showing cut-ed icons, and large spaced give a feeling of a beta released Desktop.
This issue is so annoying that make me sign in on this forum in a hope that someone will fix it soon, or give me a solution to manual fix it. (I am not a programmer but some config in files I can do).

Mate desktop is grate, is improving day by day, but I see is focusing more on new features than solving main desktop issues, and I mean panel and panel configuration profiles witch even on this 18.04 release fells more like a beta stuff. Another issue is changing panel configuration through mate tweak does not work correctly, it is impacted by previous selection, and the impact it persist after reboot, so loading a custom made configuration need switching between different profiles until it load correctly and not showing par example extra icons, doubled ones.

[mircea]

As no response from yesterday, try to investigate more, I found a solution.
So happy day with my 18.04 Mate Desktop upgrade.

Create file and add following lines solve those two main issues.

~/.config/gtk-3.0/gtk.css

.mate-panel-menu-bar menuitem {
padding: 0 0px;
}

Suggestion form “zezic” on https://github.com/mate-desktop/mate-indicator-applet/issues/19 witch I customize according for my need, to 0 and 0 px.

[mdooley]

Thanks for your investigations @mircea. I added the gtk.css file into my .config/gtk-3.0/ directory, logged out and back in and my panel shows the difference.

[mircea]

On mine was worse, with cut-ed icons, as I use lower than 20px on bar wideness.

[radax05]

I've set
padding: 4px 0px;
in ~/.config/gtk-3.0/gtk.css. This way only the horizontal space between the mate-indicator-applet icons is smaller, the vertical spacing of the menu items (when you click on a mate-indicator-applet icon) looks normal.

[gabdub]

If someone uses the global menu and want to affect ONLY the indicators (and not the global menu) and since both use the same CSS class, you can set gtk.css as follows:

#fast-user-switch-menubar menuitem {
 padding-left:1px;
 padding-right:1px;
}

Note that the IDs and classes can be obtained using GtkInspector:

[mdooley]

@gabdub Every time I glance at my system tray (Traditional layout) I’m glad that you posted your comment on using gtkinspector to reveal how to control the spacing between the indicator applets. Thank you.

[Apollonius]

That’s what I have been looking for man, thanks a lot…
The only sad thing is that global menu doesn’t work with VirtualBox, crashes and halts all the time…

[mdooley]

Could you be more specific on how you used GtkInspector to obtain this information? I’ve installed libgtk-3-dev but get no action trying to open an indicator for inspection. Thanks gabdub.

Edit: Dang, I should’ve rebooted before asking this question. Thank you once again @gabdub for bothering to enter this information in the forum so that a lot of us can find our way in the new GTK. And for that matter, in the older gtk’s too.

[gabdub]

Sure.

The official information is here:
https://wiki.gnome.org/Projects/GTK%2B/Inspector

This is what I did:

1. Install libgtk-3-dev:
   sudo apt install libgtk-3-dev

2. Enable gtk debugging:
   gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

3. Reboot to apply

4. Click on the status bar to show one of its menu. While the menu is open, press Ctrl+shift+I or Ctrl+Shift+D to show the inspector.

5. Some confirmation is shown before opening Gtk Inspector

6. Click the “Objects” tab and choose “CSS Nodes” to show all the available properties that the control has. For example click on “PanelApplet”.

7. Click on the CSS tab and type some CSS code to see the changes on the fly!

   #fast-user-switch-menubar {
   background-color:red;
   }

8. Save the CSS changes in ~/.config/gtk-3.0/gtk.css to make them permanent

9. enjoy!

see also:
https://developer.gnome.org/gtk3/stable/chap-css-overview.html

[Philippe]

The solution is a very useful tip thanks !

[gabdub]

Edit: Dang, I should’ve rebooted before asking this question. Thank you once again @gabdub for bothering to enter this information in the forum so that a lot of us can find our way in the new GTK. And for that matter, in the older gtk’s too.

I’m glad it helps!

[igsmo]

OMG, thank you so much for this!

[trongthanh]

I just want to add that if anyone is using Global Menu applet (Cupertino layout), the CSS trick will also reduce the spacing between global menu items to zero. To reverse the effect of .mate-panel-menu-bar menuitem , add the selector .-vala-panel-appmenu-private > menuitem like below:

.mate-panel-menu-bar menuitem {
    padding: 2px 0px;
}

.-vala-panel-appmenu-private > menuitem {
    padding: 2px 6px; /* vertical then horizontal paddings */
}

[Utsuro]

Thanks for the tip.
That huge space between icons was annoying.

[Philippe]

Since 19.10, we will no more use this tip, as the space between icons in panel is reduced More info in Blog, section Mate panel, Indicators. Just tested in beta preview of 20.04 and it's perfect.