Tuesday, March 24, 2009

Ubiquity's UI Design

At the root folder where Ubiquity Extension is installed, there is a chrome manifest file named chrome.manifest. The content of it looks like this:

resource ubiquity ./
content ubiquity chrome/content/
skin ubiquity skin chrome/skin/
overlay chrome://browser/content/browser.xul chrome://ubiquity/content/browser.xul

Line 4 (in red) registers an overlay for chrome://browser/content/browser.xul location, allowing you to modify Firefox's main window UI from your overlay XUL file (i.e., chrome://ubiquity/content/browser.xul).

The content of Ubiquity's overlay file looks like this:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://ubiquity/skin/browser.css" type="text/css"?>

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<script type="application/javascript;version=1.7"
src="chrome://ubiquity/content/ubiquity.js"/>
<script type="application/javascript;version=1.7"
src="chrome://ubiquity/content/popupmenu.js"/>
<script type="application/javascript;version=1.7"
src="chrome://ubiquity/content/browser.js"/>
<popupset id="mainPopupSet">
<panel id="transparent-msg-panel" class="msgPanel" hidden="true">
<div id="cmd-panel" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<div id="cmd-frame">
<div id="cmd-entry-container">
<input id="cmd-entry"/>
</div>
<iframe id="cmd-preview"
src="chrome://ubiquity/content/preview.html"></iframe>
</div>
</div>
</panel>
</popupset>
<popup id="contentAreaContextMenu">
<menuseparator id="ubiquity-separator"/>
<menu id="ubiquity-menu" label="Ubiquity">
<menupopup id="ubiquity-menupopup">
</menupopup>
</menu>
</popup>
</overlay>


It specifies two major UI's (i.e., "Context Popup Menu UI" and "Command Entry UI") managed by Ubiquity UI Manager as shown in the diagram below:

These two UI's are used to support two Ubiquity command input modes:
  1. Command entry mode
  2. Context menu mode
Command entry mode can be entered via hot keys (i.e., "CTRL + SPACE" on Windows and it's changeable from Ubiquity Command Management Page) while context menu mode can be entered via right-mouse click.

The UI of command entry mode consists of:
  • cmd-entry which is an input field
  • cmd-preview (an "iframe") which contains ubiquity-preview (a "div") which in turn is composed of
    • suggestions (a "div")
    • preview-pane (a "div")
    • help (a "div")

The layout of it is shown below:
Note that the look-and-feel of this command panel is determined by the skin you apply to. To modify its skin, you can go to "about:ubiquity" > "Your Skins" to edit or change it. However, there is a known bug on Windows (Mac OS X is o.k.) to prevent it from being changed dynamically now.

It's easy to create a Ubiquity command by yourself if you know JavaScript. Using Ubiquity command editor, you can start creating a new command using the following template:

/* This is a template command. */
CmdUtils.CreateCommand({
name: "example",
icon: "http://example.com/example.png",
homepage: "http://example.com/",
author: {name: "Your Name", email: "you@example.com"},
license: "GPL",
description: "A short description of your command",
help: "How to use your command",
takes: {"input": /.*/},
preview: function(pblock, input) {
pblock.innerHTML = "Your input is " + input.text + ".";
},
execute: function(input) {
displayMessage("You selected: " + input.text);
}
});

Notice that argument pblock passed to the preview function is the "preview-pane" as described above. You can create any HTML snippet to be placed in there. It can be an image (see figure below), detailed list, or anything you like.

No comments: