Client-Side Decoration

Example of an application that uses Client-Side Decoration to draw its own window controls. (GtkHeaderBar widget on GNOME Files, 2014-01)

Client-Side Decoration (CSD) is the concept of allowing a graphical application software to be responsible for drawing its own window decorations, historically the responsibility of the window manager.[1]

Sometimes client-side decoration is used to refer to the applications that don't have traditional title bar, however this is a misuse of the phrase, as even applications that have basic title bar can be client side decorated.[2]

By using client-side decoration rather than traditional server-side decoration, applications are able to draw their own title bar, which allows for a wide range of possibilities to customize window decorations and add additional functionality (graphical control elements) into what otherwise would be a typical window manager bar with much empty space in the maximized windows.[3]

## Contents

* 1 Terminology
* 2 Implementations
* 2.1 Widget toolkits
* 2.1.1 GTK
* 2.1.2 UWP
* 2.1.3 macOS
* 2.1.4 Electron
* 2.1.5 Deepin Tool Kit
* 2.2 Applications
* 2.3 Display servers
* 2.3.1 Wayland
* 3 History
* 4 See also
* 5 References
* 6 External links

## Terminology

In Linux and Unix-like systems, it is called Client-Side Decoration which comes from X Window System, where a client is the application which renders a window and sends it to the X server. The alternative is called Server-Side Decoration (SSD) even though on X the decoration is drawn by the window manager, which is not actually the "server".

## Implementations

### Widget toolkits

#### GTK

GTK was the first GUI toolkit on Linux that implemented client-side decoration using the GtkHeaderBar widget.[4]

GtkHeaderBar merges the title bar, menu bar and tool bar into one unified horizontal bar in order to give more space to the application content, potentially reducing the amount of wasted space by showing empty bars. This can help to achieve a flexible UI and consistent UX across different computer form factors from desktop systems to small form factor devices by removing the traditional desktop-oriented parts from applications. These have first-class support in GNOME Shell and are widely use by GNOME applications.

#### UWP

Universal Windows Platform applications can choose to draw their own title bars.[5]

#### macOS

In macOS, AppKit applications use client-side decoration when using the NSWindow widget.[6]

#### Electron

Electron has the option to use a frame-less window (without toolbar, menu bar, tabs), however the application is responsible for drawing its own shadows.[7]

#### Deepin Tool Kit

Deepin File Manager, a Qt-based application with client-side decoration.

Deepin Tool Kit is a small modified widget toolkit based on Qt5, it is used by Deepin Desktop Environment.

### Applications

Notable applications with client-side decoration:

* Steam, uses its own widget toolkit called "VGUI"
* Firefox
* Google Chrome

### Display servers

#### Wayland

Wayland was designed to have client-side decorations (including the shadows of windows) by default, but has an optional protocol, known as xdg-decoration, which allows an application (client) to query whether the window manager supports server-side decoration and if so for a client to request it.[8] Mutter, the compositor used by GNOME Shell, under Wayland only supports client side decoration[9], whilst KWin supports both client and server side decoration.

## History

* In 2008 Adobe released Photoshop CS4 that uses client-side decorations.
* In 2012 Microsoft uses client-side decorations in their new Metro design language by adding toolbar objects like back buttons to the windows title bar.
* In 2013 GTK added support for client-side decorations in 2013 with the release of GTK 3.10.[10]

## See also

* Ribbon (computing)
* Window decoration

## References

1. ↑ "Client-side decorations, continued" (in en-US). https://blogs.gnome.org/mclasen/2014/01/13/client-side-decorations-continued/.
2. ↑ "A small note on window decorations | Florian Müllner" (in en-US). https://blogs.gnome.org/fmuellner/2015/01/30/a-small-note-on-window-decorations/.
3. ↑ "The CSD Initiative Is Pushing For Apps To Abandon Title Bars In Favor Of Header Bars - Phoronix". Phoronix. https://www.phoronix.com/scan.php?page=news_item&px=GNOME-CSD-Initiative.
4. ↑ "GtkHeaderBar: GTK+ 3 Reference Manual". https://developer.gnome.org/gtk3/stable/GtkHeaderBar.html.
5. ↑ mijacobs. "Title bar customization - Windows UWP applications" (in en-us). https://docs.microsoft.com/en-us/windows/uwp/design/shell/title-bar.
6. ↑ "NSWindow - AppKit | Apple Developer Documentation". https://developer.apple.com/documentation/appkit/nswindow.
7. ↑ "Frameless Window | Electron" (in en-US). https://electronjs.org/docs/api/frameless-window.
8. ↑ Wayland protocol development, Wayland, 2019-10-07, https://github.com/wayland-project/wayland-protocols, retrieved 2019-11-13
9. ↑ Bernard, Tobias. "Introducing the CSD Initiative – Space and Meaning". GNOME. https://blogs.gnome.org/tbernard/2018/01/26/csd-initiative/.
10. ↑ "GTK+ 3.10 released [LWN.net"]. https://lwn.net/Articles/568191/.

## External links

* Client-Side Decorations Initiative
* GtkHeaderBar: GTK3 Reference Manual

* v
* t
* e

Widgets (List of …)

Command input|

* Adjustment handle
* Button
* Context menu
* Drop-down list
* Hamburger button
* Menu
* Pie menu

Data input-output|

* Checkbox
* Color picker
* Combo box
* Cycle button
* Date picker
* Grid view
* Light switch
* List box
* List builder
* Radio button
* Scrollbar
* Search box
* Slider
* Spinner
* Text box

Informational|

* Balloon help
* Head-up display in computing
* Head-up display in video games
* Icon
* Infobar
* Label
* Loading screen
* Progress indicator
* Progress bar
* Splash screen
* Throbber
* Sidebar
* Status bar
* Toast
* Tooltip

Containers|

* Accordion
* Tree view
* Client-Side Decoration
* Disclosure widget
* Frame/Fieldset
* Menu bar
* Panel
* Popover
* Ribbon
* Tab
* Toolbar
* Window
* Window decoration
* Workspace

Navigational|

* Address bar
* Breadcrumb
* Hyperlink
* Navigation bar
* Virtual desktop

Special windows|

* Alert dialog box
* Dialog box
* File dialog
* Inspector window
* Modal window
* Palette window

Related concepts|

* File viewer
* List of graphical user interface elements
* Layout manager
* Look and feel
* Mouseover
* Widget toolkit
* WIMP

* v
* t
* e

GNOME

Core Applications|

* Boxes
* Calculator
* Character Map
* Dictionary
* Disks
* Files
* Software
* Terminal
* Videos
* Web

Extras|

| Development|

* Anjuta
* Builder
* Glade Interface Designer
* Meld
* GNOME Devhelp
* Nemiver
* Geany
* Gtranslator

|

Office|

* AbiWord
* Dia
* Evince
* Evolution
* GNOME LaTeX
* Gnumeric
* OCRFeeder

Graphics|

* Eye of GNOME
* F-Spot
* GIMP
* gThumb
* Inkscape
* Shotwell
* Simple Scan

Internet|

* Balsa
* Empathy
* Ekiga
* Geary
* GNOME Fractal
* Gobby
* Jami
* Vino
* Vinagre
* Transmission-gtk

Media|

* Banshee
* Cheese
* EasyTag
* Pitivi
* Rhythmbox
* Sound Juicer
* SoundConverter
* sushi

Games|

* GNOME Games
* Chess
* Mines
* gbrainy
* PyChess

Utilities|

* Archive Manager
* Brasero
* dconf-editor
* gedit
* gnote
* GNOME System Tools
* GParted
* Tomboy

Components|

| User interface|

| GNOME 4|

* Mutter on GSK
* GNOME Shell 2
* …

|

GNOME 3|

* Client-Side Decoration
* GDM
* Mutter
* GNOME Shell
* Tango Desktop Project
* Orca

GNOME 2|

* Metacity
* GNOME Panel
* Clearlooks

Other|

* Cinnamon
* MATE
* Diodon
* GNOME Do
* Avant Window Navigator

GNOME Base|

* GTK
* GDK
* GSK
* ATK
* Clutter
* Pango
* GLib
* GObject
* GIO
* IBus

Other|

* dconf
* Genie
* Keyring
* GNOME-DB
* GVfs
* GnomeVFS
* Librsvg
* Tracker
* Vala
* libxslt
* libxml2

freedesktop.org|

* AppStream
* D-Bus
* GStreamer
* NetworkManager
* Poppler
* Wayland
* X.Org Server
* PulseAudio
* PackageKit
* HarfBuzz
* Cairo

Community|

* GNOME Foundation
* GUADEC
* The GNOME Project
* Outreachy

People|

* Miguel de Icaza
* Luis Villa
* Havoc Pennington
* Karen Sandler

* Category
* Commons
* WikiProject

0.00

(0 votes)

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Client-Side_Decoration&oldid=122337"
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template