Skip to content
Peter J. Mello edited this page Mar 27, 2019 · 27 revisions

Easiest way: Report an issue

You see an unthemed icon in your tray? Just open an issue report and let us know which app causes problems

If you know how to code and use Github: Create a pull-request

Second step: Create the application database file

The database file has the format of a JSON file. The contents of bitcoin.json below provide a good example:

{
    // The application name
    "name": "Bitcoin", 
    // list of the paths to be checked in order to verify if the application is
    // installed
    "app_path": [ 
        "/usr/bin/bitcoin-qt"
    ],
    // the paths were the icons should be store
    "icons_path": [ 
        "{userhome}/.local/share/sni-qt/icons/bitcoin-qt/"
    ],
    // key to verify if it's a qt application (uses sni-qt to draw tray icons)
    "is_qt": true, 
    // if the application uses a script like electron, zip, binary, nwjs or pak
    "is_script": false, 
    // if the icons folder should be created automatically
    "force_create_folder": true, 
    // if there's a script to be executed in order to get the right icons path,
    // see dropbox.json
    "exec_path_script": false, 
    // if the backup of those icons should be ignored or not
    "backup_ignore": true, 
    "icons": {
        "indicator": {
          // original icon name
            "original": "a7645681bdc53a4f4e8080546ccbb93d.png", 
            // theme icon name
            "theme": "bitcoin-indicator" 
        }
    }
}

1. Normal hard coded applications

For this type of hard coded applications, the file has to contain two columns. The icon name in the hard coded path, and the symbolic icon name. The symbolic icon name does not need to have the extension. Example : `available_19.png, hangouts-available`

2. Qt applications

  • How do Qt indicators works?

    Qt applications use the /tmp folder to store the icons, and the icons are automatically removed once the application is closed. This makes changing those icons impossible as the folders have a different name whenever you restart the application. That's why we use the patched version of sni-qt, this patched version allows us to store the icons that are in /tmp in $HOME/.local/share/sni-qt/icons.

  • What should I add to the database file?

    Each application folder in /tmp has a name like sni-qt_x-y-z the y,z changes whenever you restart the application, the x is the folder name that we need to create in $HOME/.local/share/sni-qt/icons. Inside this folder /tmp/sni-qt_x-y-z/icons/hicolor/24x24/apps you will find the icons. Each icon has a name like x-w-icon_name.png the x is the same as in the folder name, the w changes whenever the application restarts and the icon_name is the icon that you should add in $HOME/.local/share/icons/x/icon_name.png

    If the database file has a different name than x, the Sni-Qt prefix should have x as a value. Otherwise, you can keep it empty.

    PS: you can only use png icons. See the bitcoin.json example

3. Electron applications

Electron-based applications often store their data on app.asar file that can be found on the installation path of the application. .asar are like Zip files, created to store modules, images and whatever an application might need in order to work correctly on all the platforms. To extract the file, you will need to install asar :

sudo npm -g install asar

After that, extract the archive file (More information can be found here)

asar extract app.asar

Once the file is extracted, the first step is to look for the tray icons used by the application by default. Once you've found the icon names, the next step will be getting the icons key from the header file. For that, you will need to get the header information from the asar file. To do so, all you have to do is using this python script

import struct
import json
from functools import reduce

filename = "app.asar"

asarfile = open(filename, 'rb')
asarfile.seek(4)

len1 = struct.unpack('I', asarfile.read(4))[0]
len2 = struct.unpack('I', asarfile.read(4))[0]
len3 = struct.unpack('I', asarfile.read(4))[0]
header_size = len3
zeros_padding = (len2-4-len3)

header = asarfile.read(header_size).decode('utf-8')

files = json.loads(header)
with open("header.json", 'w') as fp:
    json.dump(files, fp, sort_keys=True, indent=4)

The hardest part is to read the JSON file and find out the keys of each icon.

See stremio.json example

4. Special application Some applications like Spotify, Google Chrome or Chromium have icons hard coded in a zip folder or a binary file. You can fix those icons by creating a script that will handle the pack, copy, unpack part. You can take a look at Spotify script to have an idea how that works. For example : spotify.json

Last step: Create a pull request

If you don't know how to use git, you can open a new issue with the right information as mentioned in the first and the second step and we will do the rest for you.