Metacity Labs – …for the adult in you

Come calm content serene and sweet

Most themes place the icon of the current application somewhere on the titlebar. Some operating systems (notably OS X) allow you to drag this icon as if it was the very file which is being viewed in that window.

This behaviour has been suggested for Metacity in the past. One of the two main problems with implementing it is that we have no way to identify the document being viewed in a window; we only barely have a way to identify the application.

In a blog post last week, Michal Hruby suggests a new window property to indicate the URI of a window’s current document. This spilled out onto wm-spec-list this morning. (“NEW” in the title is a typo for “NET”.)

Such a property is a matter for the toolkit to set, rather than the window manager. But if it was available, it would make the lives of window managers a little easier: not only would it make the window icon dragging possible, but it would also allow window matching by document or even document type, as well as by application.

Photo © Glamhag, cc-by-nc-sa.

Specifying button widths in CSS

The height of a button in a CSS theme is determined by the height of the titlebar, which in turn is determined in most cases by the height of the titlebar font, but occasionally explicitly. The height of buttons cannot be set explicitly.

For the width of the button, however, there are two common cases:

The artist wants it to be a specified number of pixels, millimetres, ems, etc.
Much more often, the artist wants it to be a specified multiple of the button’s height, often 1:1.

There has been some controversy about how we should represent this in CSS:

In the first draft of the themes specification, the width and height properties could be set on a button, but were only used to calculate the ratio. Explicit widths could be set using max-width and min-width. Screwtape called this abuse of the semantics “a bit cruel”.
We could honour width directly for absolute values, but then there comes the question of how to handle ratios. If you set the width to a percentage, we could use that, but traditionally that has meant a percentage of the width of the enclosing element, not of the height. We could make an exception in this case, of course.
The universal solution of width: -cowbell-button-ratio(0.25), or whatever, which is ugly.
Or alternatively allow width to be set directly for absolute widths, and as an alternative have -cowbell-width-ratio: 0.25.
Invent a new unit! width: 0.25ht. This idea should probably be avoided.

Your chronicler is stumped as to the solution which would be clearest to theme artists. Gentle reader, do you have a suggestion?

Tabs

In the comments to a previous post, we were asked about implementing tabs in the window manager. Calum pointed out that the HIG recommends against applications adding their own document-level tabs on the grounds that this is a job for the window manager. Yet the window manager has never risen to the challenge, and very many applications do in fact implement document-level tabs.

Implementing this will fall into three parts:

there must be a way of identifying groups of windows which may be tabbed together (we might, for example, use WM_CLASS);
there must be a display listing all tabs in the window border below the title (in a first revision, this could perhaps be done using the system menu);
there must be a mechanism for unmapping all but the selected window, and, when appropriate, for reconfiguring the unmapped windows to match the mapped window (that is, when the mapped window is resized or moved).

There have been some volunteers willing to do the work in the past, but no word yet of working code. It should be a large piece of work, but not a monumentally huge one. Again, if anyone wants to help now, abundant assistance is available; this may be something the maintainers could work on, but not until the bug queue has been reduced a little more.

Photo © emdot, cc-by-nc-nd.

Snap

There has been some discussion on the last post about implementing functionality similar to Microsoft’s “Aero Snap”. Your chronicler has never used Windows 7, but the idea is demonstrated in this video. It appears to mean that:

when a window is dragged to the left or right of the screen, it is vertically maximised, and resized horizontally to half the screen width;
when a window is dragged to the top of the screen, it is maximised;
there are hints elsewhere that dragging to a corner minimises, but this is unconfirmed at present.

There are apparently several people who would like this implemented on the free desktop.

One option is to do it with an external tool. This is the route taken by this tutorial by gotsanity. It’s a simple matter of monitoring the root window for configure events; the link goes to a program which will demonstrate the general principle. Making that program into a daemon which will solve this problem is only a matter of adding code to detect a window crossing screen borders, and some kind of payload for when one does.

The advantages of this approach are:

that it will work with any window manager, and
that we have previously said that almost anything which can be implemented externally should be, to preserve the lightweight nature of Metacity.

The disadvantages, however, are:

the need to keep a separate daemon running; this is a good deal more of a long-term problem than launching one-shot processes on a keystroke,
the difficulty in adding the grey box that tells you you’re about to trigger the effect (though this is certainly not impossible with such a method), and
the change in the moment of triggering from after you release the button to during; this is a side-effect of the modern ability to drag a window itself rather than a wireframe. It would be hard to solve in any way that didn’t feel like a hack. strokinder points out why this is problematic.

The ability could also be implemented within the window manager itself. The advantages and disadvantages of this plan are mirror images of those of the other plan. It may, however, be worth the added complexity. Additionally, the loss of the portability inherent in using an external script may not matter: if this was implemented in Metacity itself, it would presumably be fairly easy to carry it over to Mutter, since in this area the systems differ little. Porting to Compiz may be more of a difficulty.

If anyone with a little programming experience would like to volunteer to work on this, abundant help can be provided; otherwise we will see about dealing with it when the bug queue is reduced a little. Please follow GNOME bug 607694, where this issue is being discussed.

Photo © Darwin Bell, cc-by.

Future directions of Cowbell

Future directions. Here’s where Cowbell is going next:

The existing functionality is going to be moved into a library called libcowbell. Very little will be changed at this point from what we already have. (But there will be some extra tests.)
A release of the metacity-cowbell branch will be made that can use libcowbell.
A release of real Metacity will be made that can use either libcowbell or conventional themes.
Development of libcowbell can continue. (I expect pseudoclasses to be among the first things added.)

More more cowbell. Iain has pointed out an existing GNOME-based project called cowbell. I hope the fact that this project will be libcowbell will be enough to avoid confusion.

Feedback on feedback. Screwtape has reviewed the existing cowbell documentation in a web page here. Here is my feedback on the feedback:

§3: I did start out by showing the structure as pseudo-XML, but people commented as if the window borders were the result of rendering that XML (as if it were XUL, or something similar), so I think it may be misleading.
§3: I dithered over using the ID or a class for this sort of thing for quite a while. In the end I went with a class because we use classes for buttons (since they may repeat) and it seemed as well to use the same design for areas, and because you may have more than one content area visible at once, even if they are on separate windows. But I may have been wrong, and I invite opposing opinions.
§3: buttongroup: I really like this idea. But AFAIK libccss doesn’t yet support last-child etc (see next…)
§3.1: I want our CSS support to be up to level 3 wherever possible. However, we are constrained partly by what libccss is currently capable of. Of course we can patch libccss too! Backgrounds and Borders is largely supported by libccss, though.
§3.2: Unpainted areas are transparent (though if the frame is opaque, you’ll just see the frame through them).
§3.3: font-size is important; what should the interaction be between the font size set in Metacity gconf and the font size in the theme? Just use the theme font size for scaling as in v2?
§3.3: button heights: I think I didn’t explain myself properly here. You can (should) set height and width on buttons. But these only serve to establish an aspect ratio. The height is always calculated from the titlebar height at present. Perhaps this is overly confusing.
§3.5: :focus pseudoclass: perhaps this should be set on all elements in a focused window. Or perhaps just the frame and we can use the descendant selector.
§3.5: :disabled — hadn’t thought of this, good idea. TMTOWTDI.
§3.5: I’m not sure libccss supports :not() (but maybe it does!) If so, yes, we should use it. It’s far better to work the way people expect us to work.
§3.7: I hope we support SVG too. It would be extra nice if it could be styled with the same CSS somehow.
§3.8: I really want mm and em as well as px. I’m not certain libccss knows how to do this, but I will check.
§4: Nobody’s really tried to put Dublin Core data in CSS before, and I’m probably not doing it the best way. I worry that including a required custom XML file will be slipping back into using custom formats, though. Maybe we should use an @rule. Or specially-formatted comments. Or maybe we should give up on the whole required metadata idea.
§4: I like the idea of specifying alternative stylesheets, though metadata in the stylesheets themselves could also do this.
§6.1: yes, we really need a default stylesheet. I’m not sure what should go into it. I will think about this and include it in the first libcowbell release.
§6.2: okay, we’ll avoid data: URLs.
§6.2: let’s implement the single file doctrine by allowing any file in ~/.themes/ThemeName/cowbell/ThemeName.tar to be treated as if it was in ~/.themes/ThemeName/cowbell/. I think we can get that in the first libcowbell release too.
§6.5: I really like Firebug. Are you thinking we could use Firebug itself, or just copy its UI?
§6.11: Maybe we could also modify hue/saturation/value directly in the URL thus: url(‘file:fred.png?hue=#f00’)?
§6.13: I was thinking of themes which, say, repeat a pattern an integral number of times on the otherwise empty part of the titlebar, scaled to fit; this wouldn’t be possible using border-images, but would work fine with filler. On the other hand, perhaps this is overkill.

Feedback from everyone reading this, on the above and on the original document, is very welcome.

Maybe we need to take over a little piece of live.gnome.org to hash all this out. Or maybe we need a mailing list. I’ll wikify all this tonight and then post about it here.

Photo © Honza Soukup, cc-by.

Apologia for CSS

This blog is not about to become devoted to the single topic of experimental CSS theming, but some interesting points were raised in the discussion yesterday, which spilled over to Slashdot. We should have emphasised the experimental nature of the CSS subsystem in its name: perhaps “CSS On Window Borders Experimental Layout Language”.

Why? Some people have asked why anyone should be interested in CSS theming, given the existence of a stable and mature theme description format. The answer is that there are perhaps a couple of hundred people in the world who understand the Metacity theme format, and its complexity presents a significant barrier to entry for anyone else attempting to learn it. By contrast, millions upon millions of people have a basic understanding of CSS.

Efficiency. Some have pointed out that using CSS may cause great increase in memory footprint or execution time. Both of these are of primary importance to us. Furthermore, we know just how fast every theme renders using the standard engine. We are not prepared to introduce a new theme engine unless it is at least as efficient as the old one.

Mismatch. Some complain that the lists we gave of things we would need to ignore and things which would need to be added proved that there was a mismatch between CSS and what was needed. This is based on a misunderstanding of CSS as a language to style HTML. In fact CSS is a general-purpose styling language, and there are only a few places where it does not quite meet our needs. Even in those places the design is flexible enough to accommodate us.

The balance of power. Ray asked whether the structure of the window should be under theme control, as well as the styling. Some ask how we decide what is under the control of the CSS. We always need to find a balance between giving power to themes and giving power to users. Some things should be under theme control and some under user control, but it’s not trivial to decide which. Here are some examples:

Justification of the text on the titlebar. Currently this is entirely under theme control; the user can’t change it. Some people would like this to change.
The arrangement of buttons on the titlebar: which are on the left, which are on the right, and which aren’t shown at all. This is currently entirely under user control; the theme can’t change it. (This means that themes which attempt to look like OS X have to ask you to reorder your buttons so that close is on the left, since they can’t do it themselves.)
The font on the titlebar. Currently this is entirely under user control; the theme can’t change it. This among other things is something we’d need to reexamine with a CSS theming engine.

(“Under user control” means set in GConf and, generally, modifiable in the control panel. Some of these options cannot be set in the control panel at present, but that’s a separate problem.)

It may be true that windows should have a more flexible structure, and the ability to have the titlebar elsewhere is certainly something that’s been asked for from time to time. But assuming we should add such abilities, should the decision to use them be made by the theme, or should it be something selectable by the user in the control panel? These are deep questions.

Co-operation with GTK CSS theming. Yes: a good idea. Whatever they’re doing, we should probably try to share in it.

Complexity. Some have said that CSS is a complex system, and that anything implementing it will therefore also be complex and difficult to implement. This is an unwarranted assumption. Take a look at the table of contents of the CSS specification and see how little of it actually applies to a fully-functional system for description of window borders:

Syntax and basic data types; Selectors; Assigning property values, Cascading, and Inheritance; Media types: all handled for us already by libcroco.
Box model: we would need to implement this. Not terribly complex because we have a simple and unchangeable layout model.
Visual formatting model; Visual effects: these are complex, and we can ignore them entirely, since our layout needs are simple and unchangeable.
Generated content, automatic numbering, and lists: we would need to implement basic generated content (the easy part); we have no content to be numbered, and no lists.
Paged media: does not apply to us.
Colors and Backgrounds: the most complex part which we would need to implement.
Fonts; Text: partially applies to us (since some of it isn’t theme-controlled); mostly involves passing things into Pango.
Tables: doesn’t apply to us; we have no tables.
User interface: this is about setting cursors and things, and doesn’t apply to us.

Finally, we should probably reiterate that:

this is still an experiment, and not an official direction which Metacity is taking;
even if it ever happens, there’s certainly no decision to use WebKit.

Photo © johninbkk, cc-by.

More CSS thoughts

The recent discussion about CSS themes looks as though it may become one of the most interesting new ideas in theming in recent years. Here are some further thoughts on what may evolve from this.

An alternative. There is no general way, and few special ways, to convert expression-based v1 and v2 themes to the hypothetical box-based CSS themes. Therefore this would need to be an alternative theming system, without any upgrade path leading to it.

Document structure. CSS exists to style documents. In our case the document is purely notional rather than existing somewhere as a file, so we have great leeway in its representation. As I mentioned earlier, there are multiple ways in which we can use the ideas of element name, ID, and class to represent what we want to do. The guiding principle is not what would be easiest to implement but what would cause least astonishment to new theme authors. After some thought, I think such a layout might look like this:

<frame class=”maximized”>
<area class=”titlebar”>
<button class=”menu”/> <!– possibly others –>
<title/>
<button class=”minimize”/>
<button class=”maximize”/>
<button class=”close”/> <!– possibly others –>
</area>
<area class=”content“/>
</frame>

Feel free to disagree and to come up with alternatives.
There are no attributes on any element. Attempts to select on attributes will fail. The class is written as an attribute only for notational convenience: hence the italics.
Class is used instead of identifier because it’s not impossible that some implementation of this scheme will wish to have multiple buttons with the same function on a frame.

CSS3. Almost everything we already have can be represented in CSS level 2, and there is no immediate need for level 3. The sticking point mentioned earlier was the window icon being part of the title in Atlanta. However, this can be implemented in CSS2 as follows:

title:before { content: url("metacity:icon"); }

where metacity:icon is a magic URL which returns the current application icon. (But it might be wise not to use the name “Metacity” in this format, in case other window managers might like to use it; that goes for vendor-specific extensions, too. Maybe we should use -wm-.) That said, I am salivating over the possibilities of the new round attribute to background-repeat.

However, there is one piece of level 3 we absolutely need: we will need to allow border-radius at least on the frame, if not on the subsidiary elements.

Implementation. A format is independent of implementations, of course, but we need at least one implementation in order to test things. There have been a few possible implementations suggested:

webkit. This would work and reuse a lot of code, but I’m a little wary of embedding a web browser into the window manager.
nbtk. This seems to be missing a lot of what we need at present.
libccss. This has more of what we need, but still there’s a lot left open to us to implement, and a lot of what it implements we don’t need. It also doesn’t allow us to define new colours, which we need, and appears not to implement sibling selectors, which we will probably also need.
Using libcroco for parsing and cascading and building the rest ourselves. This is slightly more work than using nbtk or libccss, but may be necessary because of the particularly specialised nature of what we are doing here.

Justification. One of the things people seem very keen on is how the window title is justified. In the box model, the correct way to do this is with the auto keyword on the padding or margins of the title, and not using a text-justify declaration (since the title only has one line of text which fits snugly in its own content box). However, since people are bound to try to use text-justify anyway, perhaps we should allow them to do so, and merely interpret it as another way of setting the padding.

Things we need to implement: The whole box model; several kinds of border pattern; basic generated content for the title; various kinds of text styling for the title; ability to use pseudoclasses to prelight and press buttons.

Things we should ignore: Padding on the frame. Height and width set on the frame, or the content box. Perhaps: Any theme without proper metadata. If we’re doing things the same way as in v2, the font-family, font-weight, and font-style set for the title. (Or should we allow themes to specify a font?) Should we give a warning if a theme attempts to use anything we don’t support?

Photo © Jonathan W, cc-by-nc-nd.

Further thoughts on extending the window menu

The previous post about extending the window menu caused a great deal of discussion. It would seem that our readers would be interested in an implementation. Thomas is considering working on this after the window matching experiments are more stable.

Now, we can imagine that any package might want to add menu options when it was installed, and delete them when it was removed. Let us not concern ourselves for the moment with how a menu option and its effects are represented, other than assuming that it may be represented by an ASCII string. Rather, let us consider the ways in which a newly-installed application may wish to add menu options. We are concerned with two kinds of menu option:

∀: these appear on every window menu, for as long as the application is installed. It need not be running. For example, Take screencast should be available when Istanbul is installed and removed when Istanbul is removed.
∃: these appear only on the menus of windows created by the application itself. For example, Play should appear on Rhythmbox‘s window menu, but not on other applications’ menus, even if Rhythmbox is running. (Otherwise, how would a user tell the difference between Rhythmbox’s Play and the Play of Totem?)

Users should have the option of disabling any ∀ options which are currently installed; the full set of ∀ options would be available in some kind of settings dialogue where a decision could be made about which options belonged on the list. It should be noted that Minimize, Maximize, Close, etc., are the ∀ of the window manager itself.

So, where should these settings be stored?

In X properties on windows: The ∀ options would be stored as properties on the root window, and the ∃ options as properties on the windows involved. This would be the simplest to implement, but who has the responsibility to set the property on the root window, and where does the data come from?
In GConf: This would only work for ∀ options. It’s presumably a better plan than keeping them on the root window, though, and we could still use X properties for the ∃ options.
In /usr/share/applications/*.desktop: This is the way which would integrate best with package management, but would cause rather a performance hit as all the .desktop files would need to be scanned when the WM started up, and then there would need to be some kind of particularly clever window matching to work out which .desktop file corresponded to which windows for ∃.

Some kind of hybrid approach may be best: we could keep the ∀ menu options in .desktop files, and have a utility program that was run when any package was added or removed, to update GConf with the values. Or perhaps this updating could be done in the control centre, when the user chose which subset of ∀ options they wanted. Then we could keep ∃ options as properties on the windows, and rely on the toolkits to update them (perhaps even by parsing the application’s .desktop file).

Copper: an experiment with CSS

Further to our previous discussion of CSS, Thomas spent a few hours on sketching out a possible design for a CSS-based theme format, and on representing Daniel Borgmann‘s Human theme using it. This is an experiment, all very blue-sky and unofficial, and is quite likely never to lead anywhere.

The first question to resolve is how the interplay of element names, classes, and identifiers applies to us. For example, when styling the close button, is it:

a button with id=”close”, or
a box with class=”button” and id=”close”, or
a close with no class or id attributes?

For simplicity, we went with the last option. We represent the decorations of a window frame using a set of unique element names arranged into a particular hierarchy. Almost every element is a simple box; the exception is title which is textual.

We use libccss to parse the theme and also to apply certain of the box styles; this means that this experiment is drawn using Cairo. (It would have been possible but more complicated to use nbtk for styling, which would have meant this experiment used Clutter. This is more probably what a final working result would be like. An attempt was made to use nbtk but some of the more complicated styling options appeared to be currently unsupported.)

libccss supported background images and reasonably complex border drawing. There were two things we needed which it did not (yet) support, so we had to kludge those in:

text styling, for the title; we only bothered to implement justification. Our approach here is to use a simple text label for the title and to style it, rather than using explicit vector graphics as in v2. Effects like Human‘s shadowing would be implemented by something like CSS3’s text-shadow. More complicated arrangements like Atlanta‘s centred icons would be impossible.
the complete CSS box model; only borders were supported. We made a half-hearted attempt to support margin, and did not even touch padding. However, in so doing, we made…

A useful discovery: In doing this it became clear that there are two possible ways for a file format to describe vector graphics. Either the position of everything can be represented using arithmetic expressions, which is how the current Metacity theme format works, or it can use a hierarchical box model, as HTML and CSS do. One of our stated aims for v3 is ease of editing, and the box model appears to be a better fit for humans to understand in a drag-and-drop editor (as seen, for example, in Inkscape). Therefore, if we do not adopt SVG or CSS for v3, it may be worthwhile to look into box-based layout models even in a custom format.

Here’s one draft of the CSS for Human, and the results of processing it with this hacky and experimental code are shown on the right (with the real thing around it for comparison). Example of CSS-based approximation to the Human theme

Problems and challenges:

New properties. We are certainly going to need to invent properties which are unheard of in real CSS. (For example, corners will need to indicate the degree of rounding.) These properties should probably be marked in some way. Mozilla marks its new properties with a leading -moz; perhaps we should do something similar.
Dublin Core metadata. This could be implemented using custom properties on the toplevel “theme” element, representing the author, licence, and so on.
Named colours (especially those which refer to the GTK theme). libccss does not allow new colour names to be defined; perhaps we should ask for this. On the other hand, it does allow new callback functions to be created, so that you can write color: gtk("bg-selected") or something. This allows us to get the same effect at least within the CSS. However…
Pixmaps. This system is well-suited to defining pixmap themes, which are at least fast, easy to understand, and simple to manipulate. However, they are generally discouraged because they scale badly and don’t recolour well when the GTK colours change. There are two possible workarounds:
- Introduce custom properties to scale and colourise the pixmaps as appropriate. v2 is already capable of pixmap colourisation (it’s used quite heavily in Crux, since that is a pixmap theme, but rarely elsewhere).
- Use SVG images instead. This immediately brings up the problem of how to style these images: we could of course use this very CSS to style them, but then our custom callback functions to get GTK colours would still need to be honoured somehow.

Conclusions:

CSS has possibilities as a window border format: it is a standard and well-understood format and there are plenty of tools around to edit and parse it. However, it is certainly not as powerful as v2 and probably cannot be. That may not be a problem, as we said before.
As somebody mentioned earlier, research is needed to discover which features of v2 are commonly used, and therefore necessary in any possible v3. We need to make a big collection of themes and score each feature with how heavily it is used.
Box-based layout is simpler for humans to edit (and perhaps to understand in general) than expression-based layout.

The window menu

The window menu is the menu you see when you click the menu button (which usually has the window icon on it), or right-click the titlebar. An identical menu appears when you right-click an application’s entry in the task switcher on the panel, although this menu is owned by libwnck rather than Metacity and is manually synchonised. The contents of both menus are currently fixed. Let’s treat them as the same menu.

The menu currently has around a dozen options. What is the optimum length for this menu?

These are the current contents. Which of these should not be in the menu by default?

Minimise
Maximise
Move
Resize
Always on top (checkbox)
On every workspace / On only this workspace (radio buttons) ★
Move to workspace above, to the right, below, to the left (four separate options, only the applicable ones being visible) ★
Move to another workspace (leading to a submenu) ★
Close

Some say that the workspace options (★) are overkill. They are by far the most complicated options in the menu, and they take up a large amount of space even for people who do use workspaces. Perhaps that’s not everyone; if workspaces are something that only advanced users are aware of, maybe these options ought to be enabled separately.

There are other things we could put on the window menu, if it doesn’t get too crowded. What extra options would you like to see there?

Take a screenshot of this window
Share this window with another user using VNC
Screencast this window and upload it somewhere using Istanbul
Anything you can bind a keystroke to. (Nargery: This would be kept as a hint on the root window, encoded either as a keybinding name (e.g. “toggle_shaded“) or as a representation of an EWMH command.)
Similarly, application-specific options, given in a hint on the window itself: so your music player could have play, pause, and so on when you clicked its entry in the task switcher; consider how this could move towards replacing permanent notification applets, evolving into being part of notifisation in Metacity 2, and how useful it might be in gnome-shell.
By analogy with right-clicking on the desktop allowing you to set the wallpaper, perhaps “Edit window borders“, which would take you to a dialogue which let you reorder the buttons, modify which user-chosen options were in the window menu, pick a window border theme, and perhaps even do some light theme editing.
…your ideas here…