Runaway size increase in system tray (because margin, padding, border no accounted for)

[weskerfoot]

Describe the bug
I believe I'm having issues related to #350
When I start anything that tries to use the system tray (as far as I can tell that's the main thing), then I get an issue where my taffybar starts scaling out of control.

E.g. this is what it looks like at first

Then when I try opening, e.g. synergy this happens

I believe synergy tries to use the system tray, although I'm not sure if it's set up to use both SNI and XEmbed.

That's the only thing I can narrow down as potentially being a problem.

If I start synergy before starting taffybar, e.g.

Then it doesn't try to place anything in the tray obviously, and I don't get the scaling issue.

For nm-applet, the issue only shows up if I have xembedsniproxy running, otherwise it just does nothing. The issue also shows up with zoom if anyone else uses that.

To Reproduce

• Start taffybar
• Start anything that tries to make use of the system tray like synergy or nm-applet

Expected behavior
If xembedsniproxy isn't running then I would expect it to not do anything, and if it is running I would expect it to show an icon in the system tray and not blow up like it currently is.

Version information
Taffybar version: Built from source with afbe492
Installation method: Cabal, cabal-install version 2.2.0.0
Gtk version: 3.22.30-1
GHC version: 8.4.3

my taffybar.css

@define-color transparent rgba(0.0, 0.0, 0.0, 0.0);
@define-color white #FFFFFF;
@define-color black #000000;
@define-color taffy-blue #0c7cd5;

@define-color active-window-color @white;
@define-color urgent-window-color @taffy-blue;
@define-color font-color @white;
@define-color menu-background-color @black;
@define-color menu-font-color @black;

/* Top level styling */

.taffy-window * {
	font-family: "Noto Sans", sans-serif;
	font-size: 11pt;
	color: @font-color;
	background-color: black;
  padding: 1px;
}

.taffy-box {
	border-radius: 10px;
	background-color: rgba(0.0, 0.0, 0.0, 0.3);
}

.inner-pad {
	padding-bottom: 1px;
	padding-top: 1px;
	padding-left: 1px;
	padding-right: 1px;
}

.contents {
	padding-bottom: 1px;
	padding-top: 1px;
	padding-right: 1px;
	padding-left: 1px;
	transition: background-color .5s;
	border-radius: 5px;
}

/* Workspaces styling */

.workspace-label {
	padding-right: 3px;
	padding-left: 2px;
	font-size: 10pt;
}

.active .contents {
	background-color: rgba(0.0, 0.0, 0.0, 0.5);
}

.visible .contents {
	background-color: rgba(0.0, 0.0, 0.0, 0.2);
}

.window-icon-container {
	transition: opacity .5s, box-shadow .5s;
	opacity: 1;
}

/* This gives space for the box-shadow (they look like underlines) that follow.
   This will actually affect all widgets, (not just the workspace icons), but
   that is what we want since we want the icons to look the same. */
.auto-size-image, .sni-tray {
	padding-top: 1px;
	padding-bottom: 1px;
}

.window-icon-container.active {
	box-shadow: inset 0 -3px @white;
}

.window-icon-container.urgent {
	box-shadow: inset 0 -3px @urgent-window-color;
}

.window-icon-container.inactive .window-icon {
  padding: 0px;
}

.window-icon-container.minimized .window-icon {
	opacity: .3;
}

.window-icon {
	opacity: 1;
	transition: opacity .5s;
}

/* Button styling */

button {
	background-color: @transparent;
	border-width: 0px;
	border-radius: 0px;
}

button:checked, button:hover .Contents:hover {
	box-shadow: inset 0 -3px @taffy-blue;
}

/* Menu styling */

/* The ".taffy-window" prefixed selectors are needed because if they aren't present,
   the top level .Taffybar selector takes precedence */
.taffy-window menuitem *,  menuitem * {
	color: @white;
}

.taffy-window menuitem, menuitem {
	background-color: @menu-background-color;
}

.taffy-window menuitem:hover, menuitem:hover {
	background-color: @taffy-blue;
}

.taffy-window menuitem:hover > label, menuitem:hover > label {
	color: @white;
}

My taffybar.hs

-- -*- mode:haskell -*-
module Main where

import System.Taffybar
import System.Taffybar.Hooks
import System.Taffybar.Information.CPU
import System.Taffybar.Information.Memory
import System.Taffybar.SimpleConfig
import System.Taffybar.Widget
import System.Taffybar.Widget.Generic.PollingGraph
import System.Taffybar.Widget.Generic.PollingLabel
import System.Taffybar.Widget.Util
import System.Taffybar.Widget.Workspaces

transparent = (0.0, 0.0, 0.0, 0.0)
yellow1 = (0.9453125, 0.63671875, 0.2109375, 1.0)
yellow2 = (0.9921875, 0.796875, 0.32421875, 1.0)
green1 = (0, 1, 0, 1)
green2 = (1, 0, 1, 0.5)
taffyBlue = (0.129, 0.588, 0.953, 1)

myGraphConfig =
  defaultGraphConfig
  { graphPadding = 0
  , graphBorderWidth = 0
  , graphWidth = 75
  , graphBackgroundColor = transparent
  }

netCfg = myGraphConfig
  { graphDataColors = [yellow1, yellow2]
  , graphLabel = Just "net"
  }

memCfg = myGraphConfig
  { graphDataColors = [taffyBlue]
  , graphLabel = Just "mem"
  }

cpuCfg = myGraphConfig
  { graphDataColors = [green1, green2]
  , graphLabel = Just "cpu"
  }

memCallback :: IO [Double]
memCallback = do
  mi <- parseMeminfo
  return [memoryUsedRatio mi]

cpuCallback = do
  (_, systemLoad, totalLoad) <- cpuLoad
  return [totalLoad, systemLoad]

main = do
  let myWorkspacesConfig =
        defaultWorkspacesConfig
        { minIcons = 1
        , widgetGap = 0
        , showWorkspaceFn = hideEmpty
        }
      workspaces = workspacesNew myWorkspacesConfig
      cpu = pollingGraphNew cpuCfg 0.5 cpuCallback
      mem = pollingGraphNew memCfg 1 memCallback
      net = networkGraphNew netCfg Nothing
      clock = textClockNew Nothing "%a %b %_d %r" 1
      layout = layoutNew defaultLayoutConfig
      windows = windowsNew defaultWindowsConfig
          -- See https://github.com/taffybar/gtk-sni-tray#statusnotifierwatcher
          -- for a better way to set up the sni tray
      tray = sniTrayThatStartsWatcherEvenThoughThisIsABadWayToDoIt
      myConfig = defaultSimpleTaffyConfig
        { startWidgets =
            workspaces : map (>>= buildContentsBox) [ layout, windows ]
        , endWidgets = map (>>= buildContentsBox)
          [clock
          , tray
          , cpu
          , mem
          , net
          , mpris2New
          ]
        , barPosition = Top
        , barPadding = 0
        , barHeight = 32
        , widgetSpacing = 0
        }
  dyreTaffybar $ withLogServer $ withToggleServer $
               toTaffyConfig myConfig

[colonelpanic8]

For nm-applet, the issue only shows up if I have xembedsniproxy running, otherwise it just does nothing. The issue also shows up with zoom if anyone else uses that.

2 things:

This makes it sound like synergy appears whether or not xembedsniproxy running -- Is that correct?

If you install the proper version of nm-applet, you can get it to use appindicator/sni instead of xembed. I would advise that you take that approach for that particular applet.

When I start anything that tries to use the system tray (as far as I can tell that's the main thing), then I get an issue where my taffybar starts scaling out of control

Does it immediately grow to that size, or does it sort of perpetually grow in size?

[weskerfoot]

Correct, synergy seems to put something in the tray regardless of whether xembedsniproxy is running (maybe it supports both protocols?)

I will try fixing nm-applet as well to use SNI.

It immediately starts growing fairly quickly (it got to the size in my screenshot a couple seconds after I started synergy)

[colonelpanic8]

@weskerfoot Hmm. interesting. I think I know what is happening.

Can you try removing the

padding: 1px;
line from taffybar.css?

That unconditionally adds padding to everything. Are you sure that is what you want to do?

Anyway the autosizing algorithm used in gtk-sni-tray is a little bit less sophisticated than the one used in the rest of taffybar, and it doesn't actually take padding, margin and border in to account.

[weskerfoot]

@IvanMalison Yep, that fixes it! Any idea why that was happening? I'm not sure why I decided to add padding to that class, I was just messing around with the CSS trying to get it to play nice with my XMonad settings.

[colonelpanic8]

@weskerfoot Yeah. As I explained above:

That unconditionally adds padding to everything. Are you sure that is what you want to do?

Clarification: because you are using the .taffy-window * { you are basically saying add 1px padding to every widget that is going to be displayed. I doubt that is what you want.

The reason it has to do with the tray is:

Anyway the autosizing algorithm used in gtk-sni-tray is a little bit less sophisticated than the one used in the rest of taffybar, and it doesn't actually take padding, margin and border in to account.

[colonelpanic8]

Basically, all that needs to be done to fix this is to share the AutoSizeImage code from taffybar with gtk-sni-tray

[colonelpanic8]

Hmmm I just encountered this today and even when I disabled the tray I still seemed to have the issue. AutoSizeImage is a pretty brittle piece of code, really wish we could have something better there.

[colonelpanic8]

It turns out that the issue I encountered was different see #471.