Skip to content

xdg-decoration: add notch_server_side decorations

Emma MB requested to merge testsnake/wayland-protocols:main into main

This request allows for 'notched' server side decorations. Allowing for nice looking CSD style implementations, without sacrificing consistency between windows. In theory this should be completely backwards compatible, hence the interface version bump without the protocol version bump.

Rationale

This is largely based on #219

So fancy client side decorations look really nice, until they aren't consistent. Even generally high quality CSD implementations like in Firefox can look a little off.

Firefox VS Native decorations on Plasma 6. The firefox buttons have a different spacing

Note the different button spacing

My idea around this is similar to how android appears to handle screen cutouts. In the android developer settings, there's a 'display cutout' option, which adds various fake notches to the screen. As a result, the various elements of the OS are moved around to account for them via what I can only assume is some sort of bounding box for the location of the cutout.

Android screenshot with centre holepunch cameraAndroid screenshot with top right corner notchAndroid screenshot with top left camera holepunchAndroid screenshot with top and bottom centre notchAndroid screenshot with tall centre notch

(Notches were added in post because android doesn't show them in screenshots)

This can work the same for decorations. The compositor gives a client the side, alignment, and size of its "notch" bounding boxes, which should be treated as a no-go-zone for UI elements, and the client draws its UI accordingly. Then, the compositor draws on top of the window.

These "notches" have 8 anchor points, and their own individual width/height. This gives both sides a large amount of control in terms of how they want to handle things.

Window with 8 red boxes. 4 in each corner, 4 in the centre of each side.

Some examples of how a client can handle different "notches". The elements are moved around based on the size and position of the "notch" bounding boxes. In theory any sort of setup could be implemented, including vertical and bottom title bars.

Buttons on the right side of the title bar.

Example with right hand side buttons. All elements are shown.

Buttons on the left side of the title bar.

Example with left hand side buttons. All Elements are shown.

Unusually large buttons on the right of the title bar

This requires the client to increase its title bar size and minimize the search bar into an icon.

Example with unusually big buttons. The search bar is turned into a search button due to lack of space.

Buttons on both sides of the title bar.

Example with buttons on both sides

Buttons on the bottom left of the window.

The bar at the bottom increased its size to fit the buttons.

Example with buttons on the bottom. All elements are shown.

Buttons on the right side of the title bar, a title in the center, and an icon on the left.

This causes most of the elements to be placed into menus due to lack of space.

Example with an icon on the left, title text in the middle, and buttons on the right. Multiple menus are put into submenus due to lack of space.

CC @emersion

Requirements for merging

  • Review
  • Implementations
  • ACKs from members
Edited by Emma MB

Merge request reports