Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#3388 closed defect (fixed)

The toolbar height with the gtk3 theme is smaller than in the gtk2 theme

Reported by: godiard Owned by: godiard
Priority: Unspecified by Maintainer Milestone:
Component: Sugar Version: Unspecified
Severity: Major Keywords:
Cc: manuq, erikos Distribution/OS: OLPC
Bug Status: Unconfirmed

Description

Testing in os5 with the latest rpms. See images attached

Attachments (11)

compare.png (51.5 KB) - added by godiard 7 years ago.
Left is terminal with gtk2 theme, right is Read with gtk3 theme
Captura pantalla de _Blindsight_.png (448.4 KB) - added by godiard 7 years ago.
Captura pantalla de _Actividad Terminal__1.png (123.7 KB) - added by godiard 7 years ago.
CAPT-padding-100-7.png (182.4 KB) - added by godiard 7 years ago.
Screenshot of Read (gtk3 activity) with the patch aplied in the theme
test-92-gtk2.png (6.9 KB) - added by manuq 7 years ago.
This shows that in 92 px the height is right
test-92-gtk3.png (9.2 KB) - added by manuq 7 years ago.
This shows that in 92 px the height is right
0002-Make-the-main-toolbar-the-right-size-SL-3388.patch (2.7 KB) - added by manuq 7 years ago.
Proposed patch
toolbar-css-gtk2-xo.png (19.9 KB) - added by manuq 7 years ago.
Image of the GTK2 toolbar for reference
toolbar-css-gtk3-xo.png (19.5 KB) - added by manuq 7 years ago.
Image of the GTK3 toolbar with the proposed patch applied
0002-Make-the-main-toolbar-the-right-size-SL-3388.2.patch (2.2 KB) - added by manuq 7 years ago.
Improved patch
toolbar_comparison.gif (19.4 KB) - added by manuq 7 years ago.
This is a comparison of the current state of gtk3 (Browse) vs. gtk2 (Terminal).

Download all attachments as: .zip

Change History (23)

Changed 7 years ago by godiard

Left is terminal with gtk2 theme, right is Read with gtk3 theme

Changed 7 years ago by godiard

comment:1 Changed 7 years ago by erikos

  • Distribution/OS changed from Unspecified to OLPC
  • Milestone changed from Unspecified by Release Team to 0.96
  • Severity changed from Unspecified to Major

comment:2 Changed 7 years ago by godiard

  • Summary changed from The toolbar height with the gtk3 theme is small than in the gtk2 theme to The toolbar height with the gtk3 theme is smaller than in the gtk2 theme

comment:3 Changed 7 years ago by godiard

  • Owner changed from erikos to godiard
  • Status changed from new to assigned

comment:4 Changed 7 years ago by godiard

  • Cc manuq erikos added

After doing many test I have found than changing:

diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index 4323e6e..f9b01da 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -20,7 +20,7 @@ if scaling == "100":
     icon_base = 11
     bullet_size = 9.5
     font_height = 24
-    default_padding = 6
+    default_padding = 7
     toolbutton_padding = 9
 else: # About 72% of the XO size, adjusted so that eg. toolbuttons work
     xo = False

solve this ticket and #3407 !

Can anybody confirm?

Changed 7 years ago by godiard

Screenshot of Read (gtk3 activity) with the patch aplied in the theme

Changed 7 years ago by manuq

This shows that in 92 px the height is right

Changed 7 years ago by manuq

This shows that in 92 px the height is right

comment:5 Changed 7 years ago by godiard

Before trying this change, I have tried adding padding to the toolbar. It's possible solve the the toolbar size applying a padding of 3, but the problem is with the lines we use when the subpalette is down; the left, top and right sides of the button are separated of the lines drawn in the subtoolbar.

I couldn't find why the value of 7 is ok, when in the old (gtk2) theme 6 was the value selected. I found many differences, the button had a property inner-border, but apparently is set to 0. In the old theme there are also "fake" definitions as:

    # We fake the default border in the theme
    GtkButton::default-border = { 0, 0, 0, 0 }
    GtkButton::default-outside-border = { 0, 0, 0, 0 }
    GtkButton::image-spacing = $subcell_size

or

style "toolbutton"
{
    xthickness = 0
    ythickness = 0
    GtkButton::inner-border = { $toolbutton_padding,
                                $toolbutton_padding,
                                $toolbutton_padding,
                                $toolbutton_padding }
    GtkWidget::focus-padding = 0

    ...

    engine "sugar" {
        max_radius = 5.0
        fake_padding = $default_padding
    }
}

Another confussing issue is we have a variable toolbutton_padding but is only used to:

BrowseNotebook.notebook tab .button {
    border-radius: $(toolbutton_padding)px;
}

.toolbar GtkToolButton .button,
SugarPaletteWindowWidget SugarRadioToolButton *,
SugarPaletteWindowWidget GtkToolButton .button{
    background-color: transparent;
    border-radius: $(toolbutton_padding)px;
    padding: $(default_padding)px;
}

SugarPaletteWindowWidget SugarRadioToolButton *:active {
    background-color: @button_grey;
    border-radius: $(toolbutton_padding)px;
}

.toolbar GtkToolButton .button:active {
    background-color: @button_grey;
    border-radius: $(toolbutton_padding)px;
}

then should be better rename it to "border_radius"

In the same way, "default_padding" is used in:

.notebook {
    background-color: @selection_grey;
    padding: 0px;
    -GtkNotebook-tab-overlap: -2;
    -GtkNotebook-tab-curvature: $default_padding;
}

.toolbar GtkToolButton .button,
SugarPaletteWindowWidget SugarRadioToolButton *,
SugarPaletteWindowWidget GtkToolButton .button{
    background-color: transparent;
    border-radius: $(toolbutton_padding)px;
    padding: $(default_padding)px;
}

may be we should rename it.

But anyway all this does not explain why the value has not changed in the 75 theme. A rounding issue maybe?

Changed 7 years ago by manuq

Proposed patch

Changed 7 years ago by manuq

Image of the GTK2 toolbar for reference

Changed 7 years ago by manuq

Image of the GTK3 toolbar with the proposed patch applied

Changed 7 years ago by manuq

Improved patch

comment:6 Changed 7 years ago by manuq

The last patch gets the correct toolbar height too, without changing the toolbutton_padding variables, and setting the same -GtkWidget-focus-padding and -GtkWidget-focus-line-width as the gtk2 theme.

comment:7 Changed 7 years ago by manuq

The problem with the second patch is that several widgets get a sorrounding line for the active state.

comment:8 Changed 7 years ago by erikos

Great work, and excellent explanation in the commit message, please go ahead.

Changed 7 years ago by manuq

This is a comparison of the current state of gtk3 (Browse) vs. gtk2 (Terminal).

comment:9 Changed 7 years ago by manuq

As the comparison above shows we are almost there, the secondary toolbar has 1px vertical border compared to the gtk2 one.

comment:10 Changed 7 years ago by manuq

  • Milestone changed from 0.96 to 0.98
  • Resolution set to fixed
  • Status changed from assigned to closed

Pushed in ba44df1b and 8645e437 . The secondary toolbar 1px mistery should be fixed later in #4019 .

comment:11 Changed 6 years ago by dnarvaez

  • Component changed from sugar-toolkit-gtk3 to Sugar

comment:12 Changed 6 years ago by dnarvaez

  • Milestone 0.98 deleted

Milestone 0.98 deleted

Note: See TracTickets for help on using tickets.