Font size is smaller in title bar for some applications

[terzag]

Using Ubuntu Mate 16.10 with Arc theme from the repos (20161005-1)

I've noticed a small bug when using the Arc theme that is a bit odd: for some reason, some specific applications have a smaller font size in their title bar, as if it was displayed at 75% (roughly) of the fonts settings.

I first thought it came from an error in the Metacity theme but changing it doesn't always fix the issue. E.g. switching to some Metacity themes like Ambiant-MATE displays the right font size while switching to others like Numix displays smaller fonts too. But using Numix Gtk + Numix Metacity themes displays the font at the right size. I assume this might have to do with a setting in the Arc Gtk theme that is inherited or overrided by some Metacity themes.

I've put a few screenshots to show the issue there: http://imgur.com/a/iKSle You can see the following apps affected:

• Mate Display properties
• Authentication dialog (when apps need to get admin rights)
• the "summary" & "applying changes" dialogs from Synaptic; note that tje main Synaptic window doesn't have the issue

I'm wondering if dialog windows in Gtk have anything special compared to main apps windows, which would point to a common element for the issue but in that case, I don't understand why the Mate Display window has the same behaviour.

It's worth mentioning that the problematic apps don't show a close button in their title bar, as in the issue I already reported with Qt apps (#575). But I'm pretty sure that Synaptic and the Mate auth dialog are not Qt apps (I'm less sure about the Display properties app but I don't think it's the case).

[kn00tcn]

those are dialogs tied to the parent window, it makes sense logically, there's a similar window type in windows OS

if certain themes are making them the same size, or if the same size comes from not specifying a font size, you can probably find out by searching 'title' or 'font-size' in the css files of the themes you're comparing

edit: what wallpaper is that?

[terzag]

The Metacity theme is not a CSS theme, it's in XML. And it's a real mess to understand.

(The wallpaper is a Hotline Miami 2 visual by "protski". His website seems to be down but he put some of the pics on Behance: https://www.behance.net/gallery/25426125/Hotline-Miami-2-Posters & https://www.behance.net/gallery/7553575/Hotline-Miami − they're a bit low res there, though, better try to get higher res versions through Google Images.)

[kn00tcn]

mate has been migrating from gtk2 to gtk3, so are you sure metacity is even in use on packages that have been getting updates? i really would think updater & mate settings will be using gtk2 or 3

it's a mess no matter which format it is, you have to dig out titles/dialogs/sizes, trial & error edit them

well.. actually i hear there are gtk inspectors that can tell you what an element is (the only sane way to even develop a theme), but i dont know the details on those

[terzag]

The WM decorator is independant of Gtk. Mate still uses Metacity (well, a fork called Marco, but it uses Metacity themes). Maybe one day, Marco will switch to CSS theming like Mutter does − or even fork Mutter rather than Metacity − but this has nothing to do with Gtk.

I have tried to check the differences between a functional theme and the one from Arc but as the structure of a Metacity theme is all but organized, it implies comparing hundreds of lines that can't really be matched between the two themes.

[kn00tcn]

oh right, the window decorator... in fact i just realized the disconnect here

when i'm in mate, i only change the gtk theme itself (forgot what it was called, go to customize), i dont change the entire theme which includes the decorator

so then, compare the decorator files of the two themes

[terzag]

That's what I tried to do, of course! But as I said, it' a complete unmanageable mess, as there's no specific structure and basically I need to compare hundreds of lines between two files at once. Heck, iIt would be faster to start over the theme by focusing on this issue than to manage to sort out the structure between both.

I had hope that the person who created the Metacity theme for Arc would be able to fix the issue, as (s)he theorically knows how the thme is organized.

[kn00tcn]

actually i never suggested to brute compare the entire file, you're only looking for title/font/size

alternatively gnome probably has some documentation that may say what selector it is

i might take a look for you eventually

[terzag]

Ok, let's take Ambiant-MATE as an example, as it doesn't have the issue. Looking for "title", there are a lot of draw ops defined with some height. The most noticable are these with calculations:

<draw_ops name="draw_title_text_normal">
  <title color="#333" x="10" y="(((height - title_height) / 2) `max` 0)+1"/>
  <title color="#333" x="10" y="(((height - title_height) / 2) `max` 0)-1"/>
  <title color="#333" x="9" y="(((height - title_height) / 2) `max` 0)"/>
  <title color="#333" x="11" y="(((height - title_height) / 2) `max` 0)"/>
  <title color="#dfdbd2" x="10" y="(((height - title_height) / 2) `max` 0)"/>
</draw_ops>

<draw_ops name="draw_title_text_unfocused">
  <title color="#333" x="10" y="(((height - title_height) / 2) `max` 0)+1"/>
  <title color="#333" x="10" y="(((height - title_height) / 2) `max` 0)-1"/>
  <title color="#333" x="9" y="(((height - title_height) / 2) `max` 0)"/>
  <title color="#333" x="11" y="(((height - title_height) / 2) `max` 0)"/>
  <title color="#807d78" x="10" y="(((height - title_height) / 2) `max` 0)"/>
</draw_ops>

First, I have to understand what they mean, if they're part of the fix, where they're used and so on. The theme defines various frames that use draw ops and I basically have to understand the whole structure of the file to sort this out. Arc theme defines differents frames with different draw ops, and so on. Both themes are structured completely differently and it's not possible to just pick a part from one to put in the other, the whole structure of both files (hundreds of lines) has to be apprehended step by step. There's no basic structure or templates on Metacity themes, it's like comparing two CSS files that have completely different class names and values.

[kn00tcn]

so i didnt even google, i barely got started searching arc's files when i spotted an obvious entry

<!-- geometries -->

<frame_geometry name="normal" title_scale="medium" rounded_top_left="1" rounded_top_right="1">
    <distance name="left_width" value="1" />
    <distance name="right_width" value="1" />
    <distance name="bottom_height" value="3" />
    <distance name="left_titlebar_edge" value="2"/>
    <distance name="right_titlebar_edge" value="2"/>
    <distance name="title_vertical_pad" value="3"/>
    <border name="title_border" left="10" right="10" top="3" bottom="3"/>
    <border name="button_border" left="3" right="3" top="0" bottom="0"/>
    <aspect_ratio name="button" value="1.0" />
</frame_geometry>

<frame_geometry name="normal_unfocused" title_scale="medium" rounded_top_left="1" rounded_top_right="1" parent="normal">
</frame_geometry>

<frame_geometry name="max" title_scale="medium" parent="normal" rounded_top_left="false" rounded_top_right="false">
    <distance name="left_width" value="0" />
    <distance name="right_width" value="0" />
    <distance name="bottom_height" value="0" />
    <distance name="left_titlebar_edge" value="0"/>
    <distance name="right_titlebar_edge" value="0"/>
    <distance name="title_vertical_pad" value="2"/> <!-- 
                            This needs to be 1 less then the
                            title_vertical_pad on normal state
                            or you'll have bigger buttons       -->
    <distance name="bottom_height" value="0" />
</frame_geometry>

<frame_geometry name="small" title_scale="small" parent="normal" hide_buttons="true" rounded_top_left="1" rounded_top_right="1">
    <distance name="title_vertical_pad" value="7"/>
    <border name="title_border" left="10" right="10" top="0" bottom="1"/>
</frame_geometry>

<frame_geometry name="small_unfocused" parent="small">
    <distance name="left_titlebar_edge" value="1"/>
    <distance name="right_titlebar_edge" value="1"/>
</frame_geometry>

<frame_geometry name="borderless" has_title="false" rounded_top_left="false" rounded_top_right="false" parent="normal" >
    <distance name="left_width" value="0" />
    <distance name="right_width" value="0" />
    <distance name="bottom_height" value="0" />
    <distance name="title_vertical_pad" value="0" />
    <border name="title_border" left="10" right="10" top="0" bottom="0" />
</frame_geometry>

<frame_geometry name="modal" title_scale="small" hide_buttons="true" rounded_top_left="1" rounded_top_right="1" parent="small">
    <distance name="title_vertical_pad" value="5"/>
</frame_geometry>

i changed modal's small to medium, played with padding, etc, seems to be the right track easily (i didnt tweak to make it identical yet)

i have the 'about mate' window open, which is a small modal one, i also see a slight difference in geany's search popup compared to the full titlebar of the window