Writing Beautiful UI with XUL

Jump to Comments

Designing a UI that looks like the panel above is really easy on Firefox (even for an artistically-challenged person like me). All of you need to get started is either a simple online XUL editor or XUL Explorer (which is awesome for testing XUL UI). If you want to test the UI right way on Firefox, you can get a simple extension with just a overlay.xul here

First, add the main element which will be a panel. Panels are new in Firefox 3. They are like popups in that they can be overlayed on top of anything within the window. But they are also much cooler than popups because they can have any kind of content in them possibly even an iframe.

And within that panel, let’s put a simple textbox.

<vbox>
<panel id=”log-panel” width=”300″>
<textbox id=”log-textbox”  value=”" />
</panel>
</vbox>

In order open the popup, we add a new item to the menu. Alternatively, you could just add a simple button that runs the same JS code,

<menupopup id=”menu_ToolsPopup”>
<menuitem id=”skeleton-menuitem” oncommand=”document.getElementById(‘log-      panel’).openPopup( document.getElementById(‘content’))” label=”Log” />
</menupopup>

So, here’s what my panel looks like right now. Very gray and exceedingly dull.

Let’s make it a bit more interesting. Styling XUL elements is also just like HTML elements. First, we need to add CSS document to our extension. Again, this is not very simple in the extension world. In your extension folder, append this to your chrome.manifest:

style    chrome://browser/content/browser.xul chrome://test/skin/test.css

Create a new folder called “skin” in your chrome folder. Add a file called test.css where we will have all our css.

#log-panel {
border: 2px solid black;
background-color: black;
}

Now, trying opening the panel again. Somehow, it doesn’t seem to work.

It still looks the same because some XUL elements have a CSS property called -moz-appearance. Add this to #logpanel’s style settings.

-moz-appearance: none;

and now, look at it.

Textboxes are boring. So, let’s add some classic Latinesque Lorem Ipsum

<label id=”log-text”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dolor velit, iaculis eget, porttitor non, congue eget, sapien. Pellentesque ut tortor. Integer facilisis nisi eu enim. Quisque sit amet augue in nisi luctus tristique. Vivamus commodo, odio nec egestas convallis, risus sapien auctor massa, vitae volutpat tellus justo nec risus. Cras sit amet nisi. Aliquam porttitor pellentesque ipsum. Donec est urna, scelerisque tristique, vulputate quis, cursus non, risus. Aenean nec risus non dolor tempus euismod. Vestibulum a augue. Mauris quam arcu, tincidunt vel, mattis ut, aliquam non, sapien. In quis mauris. Morbi ac lorem. Etiam aliquam, massa sed dignissim posuere, lorem tellus dapibus augue, vestibulum commodo felis dolor non ligula. Nullam iaculis imperdiet est. </label>

and some css.

#log-textbox {
font-family: georgia,arial,sans-serif;
font-size: 20px;
}

#log-text{
padding: 3px;
color:white;
border: 8px solid black;
font-family: georgia,arial,sans-serif;
font-size: 10px;
}

Looks great doesn’t it? We can make it look even better by adding transparency and rounded corners. On the web, the normal way to add rounded corners is to create images using a generator and then, add some twenty-odd lines of CSS. But on Firefox, this is easy because the browser has a built-in CSS property for this purpose. So, we just need 1 line of code to get rounded corners. Add this bit of CSS to #log-panel and the textbox:

-moz-border-radius: 1em;
-moz-opacity: 0.7;

Now, look at the final result compared with original panel.

Although extension development normally involves a lot of configuration (chrome.manifest, install.rdf, etc.), designing UI and writing CSS for XUL apps is actually really simple. Simpler than even designing webpages.  You only have to test for a single browser. And that browser, Firefox, offers a lot of handy CSS properties.

5 Comments

Filed under Programming

Tags: beauty, Firefox, UI, xul