Boxes created with the titlebar element behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it. This element can't be used to change the platform-native titlebar of normal windows; instead, it's used to create custom titlebars for chromeless windows. If the titlebar is in a panel element, dragging it will move the panel.

Elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. If you don't want this behavior, you can override it by setting allowevents="true" on the titlebar element.

The titlebar will send a command event after the move is complete.

Examples

This XUL file will create a HUD-style window that can be moved with the mouse. It will close if the mouse button is released.

<?xml version="1.0"?>
<window title="Movable HUD Window"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        width="300" height="200"
        style="background: transparent; -moz-appearance: none;">
  <titlebar flex="1" oncommand="close()"
            style="background: rgba(30, 30, 30, 0.9);
                   -moz-border-radius: 10px;
                   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
                   margin: 8px 12px 16px;"/>
</window>

It can be opened from the error console like this: open("file:///Users/markus/Sites/hudwindow.xul", "", "chrome=1, titlebar=0")

Attributes

Properties

Methods