Client-Side Decorations Initiative

This is an effort to get apps (both GNOME and third-party) to drop title bars and adopt GNOME-style client-side decorations (CSD). Client-side decorations are more space-efficient and integrate better with app window content. The goal of this initiative is not for all third-party apps to look like perfectly native GNOME apps. Instead, we're aiming for getting as many apps as possible to have the following properties:

  • No title bar
  • Native-looking close/maximize/minimize icons
  • Respect the setting for showing/hiding minimize and maximize
  • Respect the setting for buttons to be on the left/right side of the window
  • Provide native system context menu on right click

What does that look like in practice?

One great example is Chromium, which recently started supporting GNOME-style CSD. Even though it's not 100% native GTK+, it respects user settings like showing/hiding maximize and minimize and the position of the window buttons on the left or right side.

Chromium with CSD

Chromium with CSD and buttons on the left

For apps with a totally custom design language we recommend functional over visual consistency. User settings should be respected, but the exact visuals can be made to fit the style of the app rather than the native GTK+ style (though of course the icons should be recognizable to users). For example, this mockup shows what Telegram with CSD could look like.

Telegram with CSD (mockup)

How do we do this?

For every affected app we'll have to do the following things:

  1. Talk to the maintainers and convince them that this is a good idea
  2. Do the design work of adapting the layout and make mockups
  3. Figure out what is required at a technical level
  4. Actually implement the new layout and get it merged

How can I help?

If you want to help with any of the above tasks, come talk to us on #gnome-design on IRC/Matrix.

Which apps are affected?

Below is a list of some popular applications using title bars. The information regarding toolkit, difficulty to port to CSD, and status may not be accurate or up to date. Feel free to fix potential errors or missing information. If any apps you use are missing from this list, please add them.

High Priority:

App

Toolkit

Difficulty

Status

LibreOffice

VCL+GTK3

difficult

discussion, other related bugs: bug 1, bug 2

Blender

No toolkit

difficult

discussion

Firefox

GTK3

difficult

implementation in progress

GNOME Terminal

GTK3

medium

discussion

Inkscape

GTK2

difficult

not started

GIMP

GTK2

difficult

not started

Skype

Electron

easy

not started

Telegram

Qt

easy

mockup

Other affected apps:

App

Toolkit

Difficulty

Status

VLC

Qt

difficult

not started

Slack

Electron

easy

not started

Shotwell

GTK3

medium

not started

MyPaint

GTK3

medium

not started

Krita

Qt

difficult

not started

Kdenlive

Qt

difficult

not started

Atom

Electron

easy

not started

Visual Studio Code

Electron

easy

not started

Darktable

GTK3

difficult

not started

Evolution

GTK3

difficult

not started

VirtualBox

Qt

difficult

not started

Transmission

GTK3

medium

implementation in progress

Thunderbird

GTK3

difficult

probably depends on Firefox

Ardour

?

?

not started, redesign discussion

IntelliJ

?

?

not started

Signal

Electron

easy

not started

Quod Libet

GTK3

medium

mockup

MuseScore

?

?

not started

Meld

GTK3

medium

not started

GTK+ apps

Apps using GTK3 can be ported to CSD relatively easily, as they can make use of the native GNOME header bars. However, depending on the app, this might still be a lot of work, because it requires redesigning significant portions of the app. GNOME Terminal, MyPaint, and Shotwell are in this category.

MyPaint, a GTK3 app using a title bar

GTK2 apps will first need to be ported to GTK3, which is a major effort on its own. Luckily, some GTK2 apps (like GIMP and Inkscape) are already in the process of doing this. Of course, they will still need a major redesign in order to be able to use header bars.

Non-GTK+ apps

Since non-GTK3 apps can't use native GTK+ header bars, it is much harder to implement the correct behavior. We should evaluate what we can do at the toolkit level to make it easier to implement GNOME-style CSD in e.g. Electron or Qt apps.

Electron

Many Electron apps should be low-hanging fruit, because they already use CSD on macOS (e.g. Slack). This likely means very little work would be required on the application side to make this happen on GNU/Linux as well.

However, since some additional complexity is required in order to get the proper GNOME CSD behavior (respecting gsettings etc.), some of this should probably be supported by Electron directly. That would be easier for Electron app developers and make for more consistent behavior.

We should first work with upstream Electron to add GNOME-style CSD support at a platform level. Once that is in place, we can start approaching individual app developers.

Initiatives/CSD (last edited 2018-02-22 15:21:21 by TobiasBernard)