vlc tray icon not respecting `icon_size`

[salahoued]

Describe the bug

A clear and concise description of what the bug is.

I'm not sure if this is an ironbar issue or a vlc one, but when vlc (flatpak) is launched, its tray icon is shown in ironbar too big which causes the bar height to grow big

To Reproduce Steps to reproduce the behavior:

1. open vlc
2. observe the tray icon

Expected behavior

A clear and concise description of what you expected to happen.

tray icons should respect the icon_size option in the config, or if not declared should respect the bar height

System information:

• Distro: openSUSE Tumblweed
• Compositor: Hyprland
• Ironbar version: 0.16.1

Configuration

Share your bar configuration and stylesheet as applicable:

Config

let {
  $position = "top"
  $height = 20
  $margin = {
    top = 0
    left = 0
    right = 0
  }
  
  $clock = {
    type = "clock"
    name = "time-widget"
    format = "<span font-weight='bold'>%H:%M</span>, %a %d-%m-%y"
  }

  $launcher = {
    type = "launcher"
    show_names = false
    show_icons = true
    icon_size = 16
    reversed = false
  }

  $focused = {
    name = "focused-window"
    type = "focused"
    show_icon = true
    show_title = true
    icon_size = 16
    truncate = "middle"
  }

  $sys_info = {
    type = "sys_info"

    interval.memory = 10
    interval.cpu = 1
    interval.temps = 5
    interval.networks = 3


    format = [
      "C: {cpu_percent}%"
      "R: {memory_percent}%"
      "T: {temp_c:coretemp-Package-id-0}°C"
    ]
  }

  $upower = {
    type = "upower"
    icon_size = 16
  }

  $clipboard = {
      type = "clipboard"
      icon = "icon:edit-paste"
      icon_size = 16
      max_items = 10
      truncate.mode = "end"
      truncate.length = 50
    }

  $tray = {
    type = "tray"
    icon_size = 16
  }

  $notifs = {
    type = "notifications"
    show_count = true

    icons.closed_none = "󰍥"
    icons.closed_some = "󱥂"
    icons.closed_dnd = "󱅯"
    icons.open_none = "󰍡"
    icons.open_some = "󱥁"
    icons.open_dnd = "󱅮"

  }

  $logimage = {
    type = "image"
    src = "system-shutdown"
    name = "logimage"
    size = 20
  }

  $logbutton = {
    type = "button"
    name = "logbutton"
    widgets = [$logimage]
    on_click = "!wleave"
  }

  $logout = {
    type = "custom"
    bar = [$logbutton]
  }

  $center = []
  $end = [$sys_info $notifs $clipboard $upower $tray $clock $logout ]
} in {
  monitors.eDP-1 = {
    position = $position
    height = $height
    margin = $margin
    name = "ironbar-top"
    popup_gap = 0
    icon_theme = "breeze"
    start = [
      {
        type = "workspaces"
      }
      $launcher
      $focused
    ]
    center = $center
    end = $end
  }
}

Styles


* {
  font-family: "Noto Sans Regular";
  font-size: 12px;
  border: none;
  border-radius: 0;
  padding: 0;
}

.background {
  background: transparent;
}

/* -- workspaces -- */

.workspaces {
  margin-left: 2px;
  margin-right: 5px;
}

.workspaces .item {
  background: alpha(@theme_bg_color, 0.33);
  border: 0;
  border-radius: 10px;
  color: @theme_selected_fg_color;
  padding: 2px 5px;
  margin: 4px 2px;
}

.workspaces .item.visible {
  background: transparent;
  color: @theme_bg_color;
}

/*.workspaces .item.inactive {
}*/

.workspaces .item.focused {
  background: alpha(@theme_selected_bg_color, 0.666);
  color: @theme_selected_fg_color;
}

/* -- launcher -- */

.launcher {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  margin: 1px 0;
  padding: 0;
}

.launcher .item {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.launcher .item image {
  padding: 3px 7px;
}

.launcher .item:hover {
  background-color: alpha(@theme_selected_bg_color, 0.333);
  border-bottom: 2px solid @theme_selected_bg_color;
}

.launcher .ifix examtem:not(.focused):hover {
  background-color: @theme_selected_bg_color;
}

.launcher .open {
  border-bottom: 2px solid @theme_bg_color;
}

.launcher .focused {
  border-bottom: 2px solid @theme_selected_bg_color;
}

.launcher .focused image {
  background-color: alpha(@theme_selected_bg_color, 0.333);
}

.launcher .urgent {
  border-bottom-color: alpha(red, 0.333);
}

.popup-launcher {
  padding: 0;
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
}

.popup-launcher .popup-item {
  border-bottom: 2px solid @theme_bg_color;
}

.popup-launcher .popup-item:hover {
  border-bottom: 2px solid @theme_selected_bg_color;
  background-color: alpha(@theme_selected_bg_color, 0.33);
}

/* -- focused -- */

#focused-window {
  color: @theme_selected_fg_color;
  background-color: alpha(@theme_selected_bg_color, 0.5);
  border: 1px solid @theme_selected_bg_color;
  border-radius: 5px;
  padding: 0 7px;
  margin: 1px 5px;
}

/* -- sysinfo -- */

.sysinfo {
  border: 1px solid @theme_selected_bg_color;
  border-radius: 10px;
  background: alpha(@theme_selected_bg_color, 0.5);
  padding: 0 7px;
/*   margin: 1px 5px 1px 0; */
  margin: 1px 0;
}

.sysinfo .item {
  color: @theme_selected_fg_color;

}

/* -- clipboard -- */

.clipboard {
  font-size: 1em;
  /*background: @theme_bg_color;*/
  background: transparent;
  border: 0;
  border-radius: 0 ;
  margin: 1px 0;
}

.popup-clipboard {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  padding: 5px 7px;

}

.popup-clipboard .item {
/*   padding-bottom: 0.3em; */
  border-left: 3px solid @borders;
  background: @theme_bg_color;
  padding: 5px;
}

.popup-clipboard .item .btn-remove {
  border: 1px solid @borders;
  padding: 5px;
}

.popup-clipboard .item .btn-remove:hover {
  border: 1px solid @theme_selected_bg_color;
  background: alpha( @theme_selected_bg_color, 0.333);
}

/* notifications */

.notifications button {
  font-size: 1rem;
  color: @theme_bg_color;
  margin: 1px 0 1px 5px;
  /*background: @theme_bg_color;*/
  background: transparent;
  border: 0;
  border-radius: 5px 0 0 5px;
  padding: 0 5px 0 7px;
}

.notifications .count {
  font-size: 0.6rem;
  background-color: @theme_bg_color;
  color: @theme_fg_color;
  border-radius: 100%;
  margin-right: 3px;
  margin-top: 3px;
  padding-left: 4px;
  padding-right: 4px;
/*   opacity: 0.7; */
}

/* -- Upower -- */

.upower {
/*   margin: 0 3px; */
  margin: 1px 0;
  padding: 0;
/*   background: @theme_bg_color; */
  background: transparent;
  border: 0;
  border-radius: 0;
  color: @theme_bg_color;

}

.popup-upower {
  border-radius: 5px;
}

/* -- tray -- */

.tray {
/*   margin: 0 5px; */
  margin: 1px 0;
  padding: 0 5px;
  border-radius: 0 5px 5px 0;
/*   background: @theme_bg_color; */
  background: transparent;
}

.tray .item {
  padding: 0;
  margin: 0;
}

.tray .item:hover {
  background-color: @theme_selected_bg_color;
}


/* -- Date & Time -- */

.clock {
  background: alpha(@theme_bg_color, 0.8);

  color: @theme_fg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  padding: 0 7px;
  margin: 1px 5px;
}

.popup-clock {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;

  padding: 5px 7px;
}
.popup-clock .calendar-clock {
  font-size: 1em;
  font-weight: bold;
  padding: 5px;
}

.popup-clock .calendar {
  border: 1px solid @borders;
  border-radius: 5px;

  padding: 5px;
}

.popup-clock .calendar .header {
  border-radius: 0;
}

.popup-clock .calendar:selected {
/*   background-color: alpha(@theme_selected_bg_color, 0.333); */
  border: 1px solid @theme_selected_bg_color;
  border-radius: 0;
}

/* -- Logout button -- */

#logbutton {
  background: alpha(red, 0.666);
  border: 1px solid alpha(red, 0.666);
  border-radius: 5px;
  padding: 0 4px;
  margin: 1px 2px 1px 0;
}

Additional context

Add any other context about the problem here.

Screenshots

If applicable, add screenshots to help explain your problem.

[ToxicMushroom]

I noticed the same with fcitx5

[JakeStanger]

@ToxicMushroom what package manager did you use to install it? I was suspicious of Flatpak but that might blow that out the window

[ToxicMushroom]

Pacman 1 extra/fcitx5 5.1.11-1 [0 B 17.25 MiB] [Installed] (fcitx5-im)

[JakeStanger]

Right, well it's not Flatpak then. New theory is that when the tray provides its on pixmap that's not being scaled down (properly).

[salahoued]

@JakeStanger , It may have something to do with the icon_theme used.

when using breeze or breeze-dark

when using Breeze-Dark with capital letters it falls back to the default one and it works fine the icon (vlc's) shows correctly

the same for Papirus-Dark it worked fine too

[ogios]

we can force scale it ourself. scale = icon_size / actual_height, and use image surface to redraw it or some other way.

use height/width for horizontal/vetical bar. this is an example

[JakeStanger]

@JakeStanger , It may have something to do with the icon_theme used.

Hm yeah, buggy icon themes could be a problem. It may be possible to perform a check on the size of the loaded image and scale that, as I don't think the above PR will account for icons from the theme.

[ogios]

some theme don't have the size we wanted, and the difference can be big