Stephan Sokolow's Blog

With the work I’ve been doing on my systray icons in the last few days, it occurred to me that I should probably mention that, when given the choice, I explicitly turn off Ubuntu-style AppIndicators for applications with regular systray icons.

It’s not that I don’t like the idea. I think it’s a good one. The problem is that the year is 2012 and I’m using Linux. When I left-click an icon, I expect it to toggle application visibility, not display a context menu where I have to use another click to toggle visibility. That’s reserved for right-click.

Just because Apple took so long to accept the reality of the two-button mouse doesn’t mean my Linux desktop should punish me for not using some kind of desktop widget system to glance at things like torrent status. (Though, given how many other matter-of-personal-taste apple-isms Ubuntu has been adopting, like the global menubar and the titlebar buttons on the left-hand side, it doesn’t really surprise me that they’d blindly adopt that design quirk too.)

Now, if AppIndicators gain the ability to relegate the menu to right-click and bind a window handle to left-click, I’ll be the first person to welcome consistency between different applications’ definitions of “toggle a window that’s already shown but is on another desktop or is below other windows”. (Personally, I think it should be “If the window isn’t on this desktop and top of the stack, then raise it on this desktop.”)

Whether you call them system tray icons, systray icons, or notification icons, you have to admit that these things can easily get out of control, even on Linux. Attempts are being made to tidy them up, like appindicators and the messaging menu but, when you get right down to it, there’s always going to be a certain amount of discretion necessary on the part of the end-user.

Given that lxpanel (and, therefore, anything based on plain vanilla LXDE) doesn’t have a KDE-style “hide these icons” feature and that I couldn’t figure out how to get the messaging menu to work inside the lxpanel appindicator harness, let’s see how much we can polish up the tray.

Goals

• There should be as few tray icons as feasibly possible
• Tray icons should, as much as possible, be activity-oriented rather than tool-oriented.
• Icons must not be a distracting mish-mash of color. (Not even the transient ones)
• Icons should act effectively as indicators that applications require my attention.

Solution (Manual Version)

Step 1: Just a few activity-oriented icons

The first point takes a little bit of thought, but is mostly simple if you pick the right tools. Here’s how my load-out looks:

That’s probably the most compact I can get it for now.

Step 2: Icons shouldn’t be distracting

I’ve chosen to accomplish this by making permanent residents of the tray look like carved indentations without any color and temporary residents look like monochrome glyphs.

1. Fix the Pidgin icon’s ability to display status notifications.
2. Copy icons from Elementary into ~/.local/share/icons/elementary-mono-dark to give Dropbox’s idle icon, Pidgin’s available, idle, and away icons the look of carved indentations.
3. Do the same thing with Elementary’s icon for Tomboy Notes but put it into ~/.trinity/share/icons/ instead and mind the use of “22×22” form rather than “22” for folder names.
4. Adjust the Faenza icons for Tomboy Notes and Audacious (use the former for XPad). (And, if you use Deluge rather than Transmission, you’ll need to grab that from Faenza too)
5. Grab the Elementary Parcellite icon and, if you use JDownloader, my quick icon for that.

I’m still working on the best solution for Thunderbird, but here’s what it looks like sans Thunderbird:

Step 3: Icons should act as indicators

The final step is to make icons significantly more noticeable when they need attention. This is actually surprisingly easy for the ones which support changing their state.

For ones like Deluge which blink to get your attention, this is already done. For the rest, just mix and match so the normal icons and the attention icons are from different themes.

• Just use the elementary-mono-dark icons for non-idle Dropbox the way they’re supposed to be used. (White icons that contrast well with the black will jump out at you when you’re used to it being a carved hole in the black)
• For Pidgin, just make sure you don’t have an icon for “message needs attention” and it’ll fall through to the default app icon… which, in Elementary, is a purple speech balloon with an exclamation mark.
• If you want to remind yourself to not leave Pidgin on “do not disturb” or “invisible” grab the icons from Elementary Pidgin 2 and use them as your icons for those statuses.
• FireTray can handle showing a well-contrasting message count when you’ve got mail, so just replace the default Thunderbird icon with something that doesn’t contrast and you’re all set.

The only thing I could think of to make this better would be if Audacious supported showing play/pause/stop icons for its tray icon. Don’t you agree?

Solution (5-minute Version)

Pop over to GitHub (link is to a specific revision) and grab these directories from my profile repo:

• home/.local/share/icons
• home/.trinity/share/icons
• home/.local/share/images (optional)

Icons that look like they’re carved into their substrate are all the rage these days, but if you’re not an artist, making them can be tricky and the Elementary them Lubuntu uses by default doesn’t have a large selection ready to be patched into Elementary Dark to get that effect.

In this tutorial, I’m going to show you how quickly and easily adjust PNG-format toolbar and panel icons from Faenza (another popular, GPLed icon theme) to fit in alongside Elementary’s panel icons. (Good for quickly replacing tray icons from niche applications with less distracting ones.)

Note: This technique leaves the Faenza icons translucent, so they’ll only match the Elementary icons on the one background you tested them on. If I can ever find the time, I’ll figure out how to solve that problem and update this guide.

Step 1: Faenza icons are too dark

Simply open up the PNG in GIMP and set the layer opacity to 50%. That should match the general icon brightness (at least against the default Lubuntu panel background) but the icon will now feel flat and the edges won’t be as sharp as in Elementary.

Step 2: Sharpen the lines

Using the “Select By Color” tool (and, if necessary, the manual rectangle select), shift-click to add colors and ctrl-click to remove them until you’ve selected only the white outlines of your icon.

Copy the selected pixels, create a new transparent layer above the existing one, and paste them onto it. Set this layer’s opacity to between 5% and 20%. 10% is often correct but you may want to load the icon into the panel to check.

Step 3: Un-flatten the icon

Using the Magic Wand and shift-click, select just the dark inside of the icon. Then create a new transparent layer above the existing two.

Now, select the gradient tool and make sure you’ve got a black-to-white gradient (black foreground color, white background color, and the “FG to BG (RGB)” gradient).

With the new layer and the inside of the icon still selected, you want to  draw a straight, vertical gradient from about 5 pixels above the canvas to about 5 pixels below it. Set this last layer to about 10% opacity and you’re done.

Can you tell which of these are original Elementary Icons and which are modified Faenza ones?

Symptoms

On these Lubuntu Linux versions (and possibly others), the Pidgin tray icon never changes to show your status or notify you of unread messages.

• Lubuntu 11.10 (Oneiric Ocelot)
• Lubuntu 11.04 (Natty Narwhal)
• Lubuntu 10.10 (Maverick Meerkat)

Reason

Pidgin uses its own names for status icons (eg. status/22/pidgin-tray-busy.svg) rather than the standard ones (eg. panel/22/user-busy-panel.svg) and doesn’t fall back to its default ones if they are missing… it just uses the application icon for any ones it can’t find.

The default Lubuntu icon theme (lubuntu) is a very minor tweak on the elementary-mono-dark theme and neither elementary nor elementary-mono-dark provide symlinks to offer the filenames Pidgin expects.

Solution

To make the tray icon show status, symlink the standard panel icons to the names Pidgin expects. There seems to be no standard panel status icon for “message waiting”, but since the Pidgin application icon in elementary is a purple speech balloon with an exclamation mark in it, the fallback works perfectly.

I’ve written a little script to automate the process. Run it to fix your lubuntu, elementary and elementary Dark themes. To fix other themes, just edit the two lines near the bottom which tell it where the themes are.

If you want to track the progress of getting this issue fixed upstream, I’ve filed a bug.

UPDATE: The icon theme bug got WONTFIX’d over it being an application-specific thing. Here’s the pidgin bug I filed.

I’ve made sure both bugs reference each other and now I want to try to distance myself from the issue. However, if you happen to read this months later and there doesn’t seem to be any progress made, please give them a polite nudge via the proper channels to let them know people care about it.

Having used Fat-Free Framework 2.x for a little while now, I’m still generally quite happy with it… aside from one thing.

The built-in templating engine’s syntax doesn’t offer many advantages over raw PHP, it’s more verbose in certain common cases, and, as Fabien Potencier wrote when he took over maintainership for Twig, template languages have evolved a lot since PHP began its life as one in 1995. …so I decided to use Twig.

Why Twig?

It does help that I also work in Django sometimes but it’s not as big a factor as you might think. The main reason is that Twig is both the fastest, lightest templating engine I know (benchmark) and also one of the most featureful. Both good reasons to use FatFree and Twig together.

Here are a few of the reasons I switched:

• Fully extensible
• Auto-escaping for cleaner, safer code and less stressful coding.
• Let’s me choose my preferred mix of template inheritance and template includes.
• Supports macros for tidying up repeated code snippets like form fields.
• Has clever constructs like for/else to clean up common cases like “List results or display a ‘no results’ message”
• Syntax is easier for me to read and write in data-heavy templates with many nullable fields.
• Generally more amenable to the kinds of factoring-out of duplicated boilerplate that I want to do.

Setup Instructions

Unsurprisingly, I couldn’t get integration with F3::get() as concisely as in F3 templates, but I did pretty well, all things considered.

The simplest way I’ve found to set this up is to add something along these lines to the top of your index.php:

require_once __DIR__ . '/lib/Twig/Autoloader.php';
Twig_Autoloader::register();

$twig_loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($twig_loader, array(
    'cache' => __DIR__ . '/twig_cache',
    'auto_reload' => true,
));

$twig->addFilter('f3', new Twig_Filter_Function('F3::get'));
$twig->addGlobal('is_ajax', Web::isajax());

This will set up the following:

Template Location

Templates will be stored in a folder named templates so they don’t conflict with any templates you continue to use with the default F3 templates. (Assuming you’re still using the default ui folder you probably kept from the sample code)

Template Caching

Twig templates will be cached in a folder named twig_cache to avoid conflicts and the cache will be automatically regenerated when the templates change

F3::get()

The f3 filter gives you 'foo'|f3 as a slightly inelegant but not overly verbose equivalent to @foo in templates. Things like 'result'|f3.title will work as desired.

Also, if you’re only using F3::get to expose things to the templates, you can use Twig globals, which let you use {{ foo }} instead of {{ @foo }}. The syntax for doing so is as follows:

$twig->addGlobal('foo', $foo);

is_ajax

This global allows you to do the switching between full templating and minimal responses for AJAX requests entirely in the templates using this snippet of code (source):

{% extends is_ajax ? "base_ajax.html" : "base.html" %}

Rendering

global $twig;
echo $twig->render('page.html', array('bar' => $bar));

Important: Compatibility Fix

The one caveat is that there’s a little incompatibility between the current versions of Twig and Axon. When using {% if my_hydrated_axon.my_null_valued_field %}, you’ll get

Undefined method Axon->my_null_valued_field()

The problem is:

1. Twig’s dot operator uses isset() to determine whether a property exists, then fails over to assuming you wanted a method call with no arguments.
2. Axon.__isset() uses isset() on its internal array of fields.
3. isset() on an array returns false if the field exists but has a value of NULL.
4. Even with strict_variables set to false, current Twig has a bug that makes it error out rather than producing an empty value when accessing axon properties.

You have two options. First, you can use my_hydrated_axon.cast.my_null_valued_field everywhere (Axon.cast() returns an ordinary associative array, which doesn’t have this problem) or you can make a small patch to  FatFree’s lib/db.php and change this…

function __isset($field) {
 return isset($this->fields[$field]) || isset($this->adhoc[$field]);
}

…to this…

function __isset($field) {
 return (is_array($this->fields) && array_key_exists($field, $this->fields)) ||
  (is_array($this->adhoc) && array_key_exists($field, $this->adhoc));
}

The only caveat with this approach is that, in your PHP code, if (!$axon->property) won’t work properly.

I just discovered Desura’s Linux client and, given the opportunity to have a DRM-free package repository system for my Humble Bundle games, I jumped at the chance.

Of course, I still wanted to keep all my games together in one launcher menu, so I went looking for a way to give the manually installed things like Super Meat Boy proper icons. Luckily, Desura turned out to have a pretty simple approach to specifying icons. Just a couple of columns in an ordinary SQLite database.

Here’s a little Python script I wrote which, in theory, should let you set/change the icon on ANY game in your Linux Desura library. I’ve only tested it on local ones though.