Bug 468203

Created attachment 157895 [details]
correct window buttons

Weird, I saw that in an earlier version of the work before it was merged, but it had been fixed by the time I approved it. Fushan, would you mind investigating?

What screen scale are you using?

(In reply to Fushan Wen from comment #3)
> What screen scale are you using?

1080p; 100% scalling.

Are you using Wayland?

(In reply to Fushan Wen from comment #5)
> Are you using Wayland?

X11

Same issue here with breeze-gtk 5.27.4 on Wayland, GTK CSD window buttons are big and blurry.

I can only reproduce on Wayland. This seems also related to the font settings

Unable to reproduce on X11

(In reply to Fushan Wen from comment #9)
> Unable to reproduce on X11

I can reproduce this issue on clean up to date F38 install with Chromium theme set to GTK.

Created attachment 157924 [details]
chromium f38

I can't reproduce with Tilix on X11.

Git commit bfe2ce620d395c943bb13a646295948b5bffbcc3 by Fushan Wen.
Committed on 07/04/2023 at 14:10.
Pushed by fusionfuture into branch 'master'.

gtk3: restore old icon size for titlebutton

`background-size` results in different sizes on X11 and Wayland.
FIXED-IN: 5.27.5

M  +3    -3    src/gtk3/widgets/_window_decorations.scss

https://invent.kde.org/plasma/breeze-gtk/commit/bfe2ce620d395c943bb13a646295948b5bffbcc3

Git commit c5e757a198321208c6b1e99313652577c263ecc0 by Fushan Wen.
Committed on 07/04/2023 at 14:12.
Pushed by fusionfuture into branch 'Plasma/5.27'.

gtk3: restore old icon size for titlebutton

`background-size` results in different sizes on X11 and Wayland.
FIXED-IN: 5.27.5


(cherry picked from commit bfe2ce620d395c943bb13a646295948b5bffbcc3)

M  +3    -3    src/gtk3/widgets/_window_decorations.scss

https://invent.kde.org/plasma/breeze-gtk/commit/c5e757a198321208c6b1e99313652577c263ecc0

Git commit e9384150d8e41dd9c869f5f502e02c70a5c6f002 by Fushan Wen.
Committed on 07/04/2023 at 16:33.
Pushed by fusionfuture into branch 'Plasma/5.27'.

kcm: notify changes in kcmfonts when global scale changes

Otherwise kde-gtk-config will use the old font DPI value.

M  +2    -2    kcm/kcm.cpp

https://invent.kde.org/plasma/kscreen/commit/e9384150d8e41dd9c869f5f502e02c70a5c6f002

Git commit 52eb9d01b94eeece64044c5159d965eec7f39079 by Fushan Wen.
Committed on 07/04/2023 at 16:30.
Pushed by fusionfuture into branch 'Plasma/5.27'.

kded: don't update text scale on kdeglobals change events

setTextScale() will be called in onKCMFontsSettingsChange

M  +1    -1    kded/gtkconfig.cpp

https://invent.kde.org/plasma/kde-gtk-config/commit/52eb9d01b94eeece64044c5159d965eec7f39079

A possibly relevant merge request was started @ https://invent.kde.org/plasma/kscreen/-/merge_requests/201

Git commit 533e397b2dc331d475db0b2c22c085dea70e93d7 by Fushan Wen.
Committed on 07/04/2023 at 16:37.
Pushed by fusionfuture into branch 'master'.

kded: don't update text scale on kdeglobals change events

setTextScale() will be called in onKCMFontsSettingsChange


(cherry picked from commit 52eb9d01b94eeece64044c5159d965eec7f39079)

M  +1    -1    kded/gtkconfig.cpp

https://invent.kde.org/plasma/kde-gtk-config/commit/533e397b2dc331d475db0b2c22c085dea70e93d7

Git commit f9f88c5336063ba853190f790a5c8347afa49afb by Fushan Wen.
Committed on 07/04/2023 at 16:36.
Pushed by fusionfuture into branch 'master'.

kcm: notify changes in kcmfonts when global scale changes

Otherwise kde-gtk-config will use the old font DPI value.


(cherry picked from commit e9384150d8e41dd9c869f5f502e02c70a5c6f002)

M  +2    -2    kcm/kcm.cpp

https://invent.kde.org/plasma/kscreen/commit/f9f88c5336063ba853190f790a5c8347afa49afb

I can reproduce this issue on X11 as well on 100% scaling. Both Firefox and Pamac show this issue, except on Firefox it actually looks blurry whereas in Pamac (which I believe is a native GTK app) does proper scaling. Does screen size matter in this case for reproducibility? I have a 4k screen.

Arch Linux
Plasma 5.27.4
Frameworks 5.104.0
Qt 5.15.8
Nvidia 3090 w/ 530.41.03 drivers

For anyone interested, I think this is still a bug in GTK3(Wayland only) and GTK4. See `gtk_css_image_surface_draw` for example, image_width and image_height are hardcoded values (For GTK3 it's 18 on Wayland, 50 on X11), which means when the size of a background image exceeds 18x18 on Wayland, it will be blurry.


```
static void
gtk_css_image_surface_draw (GtkCssImage *image,
                            cairo_t     *cr,
                            double       width,
                            double       height)
{
  GtkCssImageSurface *surface = GTK_CSS_IMAGE_SURFACE (image);
  int image_width, image_height;

  image_width = cairo_image_surface_get_width (surface->surface);
  image_height = cairo_image_surface_get_height (surface->surface);

  if (image_width == 0 || image_height == 0 || width <= 0 || height <= 0)
    return;

  /* Update cache image if size is different */
  if (surface->cache == NULL   ||
      ABS (width - surface->width) > 0.001 ||
      ABS (height - surface->height) > 0.001)
    {
      double xscale, yscale;
      cairo_t *cache;

      /* We need the device scale (HiDPI mode) to calculate the proper size in
       * pixels for the image surface and set the cache device scale
       */
      cairo_surface_get_device_scale (cairo_get_target (cr), &xscale, &yscale);

      /* Save original size to preserve precision */
      surface->width = width;
      surface->height = height;

      /* Destroy old cache if any */
      g_clear_pointer (&surface->cache, cairo_surface_destroy);

      /* Image big enough to contain scaled image with subpixel precision */
      surface->cache = cairo_surface_create_similar_image (surface->surface,
                                                           CAIRO_FORMAT_ARGB32,
                                                           ceil (width*xscale),
                                                           ceil (height*yscale));
      cairo_surface_set_device_scale (surface->cache, xscale, yscale);
      cache = cairo_create (surface->cache);
      cairo_rectangle (cache, 0, 0, width, height);
      cairo_scale (cache, width / image_width, height / image_height);
      cairo_set_source_surface (cache, surface->surface, 0, 0);
      cairo_fill (cache);

      cairo_destroy (cache);
    }

  cairo_rectangle (cr, 0, 0, width, height);
  cairo_set_source_surface (cr, surface->cache ? surface->cache : surface->surface, 0, 0);
  cairo_fill (cr);
}
```

A possibly relevant merge request was started @ https://invent.kde.org/plasma/breeze-gtk/-/merge_requests/81

Git commit a0bdf9e161b57943c5438e81a251a39792d6747c by Fushan Wen.
Committed on 08/04/2023 at 09:01.
Pushed by fusionfuture into branch 'master'.

assets: resize viewports of titlebutton SVGs

GTK reads SVG to pixmap and creates a cairo surface for an image, and
the size of an image surface used by cairo depends
on the size of SVG viewport but not the size from `background-size`
property. When drawing background images, GTK will scale the pixmap by
width in `background-size` / viewport width, so when the viewport is
smaller than `background-size`, the background image will look blurry.

By making the viewports larger, titlebuttons in GTK
apps (especially in GTK3 Wayland and GTK4) will look much sharper.

M  +13   -3    src/assets/breeze-close-active-symbolic.svg
M  +20   -4    src/assets/breeze-close-hover-symbolic.svg
M  +13   -3    src/assets/breeze-close-symbolic.svg
M  +13   -3    src/assets/breeze-maximize-active-symbolic.svg
M  +12   -3    src/assets/breeze-maximize-hover-symbolic.svg
M  +18   -3    src/assets/breeze-maximize-symbolic.svg
M  +13   -3    src/assets/breeze-maximized-active-symbolic.svg
M  +12   -3    src/assets/breeze-maximized-hover-symbolic.svg
M  +18   -3    src/assets/breeze-maximized-symbolic.svg
M  +13   -3    src/assets/breeze-minimize-active-symbolic.svg
M  +12   -3    src/assets/breeze-minimize-hover-symbolic.svg
M  +18   -3    src/assets/breeze-minimize-symbolic.svg

https://invent.kde.org/plasma/breeze-gtk/commit/a0bdf9e161b57943c5438e81a251a39792d6747c

Git commit 56216f86f3e15231a303b3abad70c46ed14535ad by Fushan Wen.
Committed on 10/04/2023 at 16:52.
Pushed by fusionfuture into branch 'Plasma/5.27'.

assets: resize viewports of titlebutton SVGs

GTK reads SVG to pixmap and creates a cairo surface for an image, and
the size of an image surface used by cairo depends
on the size of SVG viewport but not the size from `background-size`
property. When drawing background images, GTK will scale the pixmap by
width in `background-size` / viewport width, so when the viewport is
smaller than `background-size`, the background image will look blurry.

By making the viewports larger, titlebuttons in GTK
apps (especially in GTK3 Wayland and GTK4) will look much sharper.


(cherry picked from commit a0bdf9e161b57943c5438e81a251a39792d6747c)

M  +13   -3    src/assets/breeze-close-active-symbolic.svg
M  +20   -4    src/assets/breeze-close-hover-symbolic.svg
M  +13   -3    src/assets/breeze-close-symbolic.svg
M  +13   -3    src/assets/breeze-maximize-active-symbolic.svg
M  +12   -3    src/assets/breeze-maximize-hover-symbolic.svg
M  +18   -3    src/assets/breeze-maximize-symbolic.svg
M  +13   -3    src/assets/breeze-maximized-active-symbolic.svg
M  +12   -3    src/assets/breeze-maximized-hover-symbolic.svg
M  +18   -3    src/assets/breeze-maximized-symbolic.svg
M  +13   -3    src/assets/breeze-minimize-active-symbolic.svg
M  +12   -3    src/assets/breeze-minimize-hover-symbolic.svg
M  +18   -3    src/assets/breeze-minimize-symbolic.svg

https://invent.kde.org/plasma/breeze-gtk/commit/56216f86f3e15231a303b3abad70c46ed14535ad

Not fully fixed: the spacing between the buttons is still huge.

Not related to this bugreport, please open a new one.

Git commit 177ba74a2d9ca7d6d64c55c1975cb545e68cfac2 by Fushan Wen.
Committed on 13/04/2023 at 01:10.
Pushed by fusionfuture into branch 'Plasma/5.27'.

🍒gtk3/titlebutton: reduce right margin of {max/minimize} button

(cherry picked from commit 14f810c5ab5a17daa31b77acb28d302a8edc60d1)

M  +10   -0    src/gtk3/widgets/_window_decorations.scss

https://invent.kde.org/plasma/breeze-gtk/commit/177ba74a2d9ca7d6d64c55c1975cb545e68cfac2

After nth thought, it's not worth a new bugreport as the fix is quite small.

I have applied all of the supposedly commits that should've fixed the issue, but the buttons on Firefox for example are still messed up - blurry and the minimize and maximize buttons are cut off at the right.