XUL

1
XUL

• XML User Interface Language

2
XUL

• Firefoxs user interface is in XUL and JavaScript
• XUL is a XML grammar to add/modify UI widgets of
  the browser.
• User actions are bound to functionality using
  JavaScript.

3
XUL Overlays

• Overlays attach other UI widgets to XUL documents
  at run time.
• XUL fragments are inserted at specific merge
  points in the master document.
• For exampleltstatusbar id"status-bar"gt
  ltstatusbarpanel id"my-panel" label"Hello,
  World"/gt lt/statusbargt
• status-bar is the merge point and my-panel is
  the new XUL fragment

4
Chrome URIs

• XUL files are loaded via chrome URIs
• chrome//ltpackage namegt/ltpartgt/ltfile.xulgt
• The chrome URI has three parts
• Package name Given by user
• Type of data Content or Skin or Locale
• Content xul and js files
• Skin images and css files
• Locale DTD and .properties files
• File name Path of the file to load

5
Chrome URIs

• Chrome URIs are written in chrome.manifest file
• Overlays/skin/stylesheets are registered in
  chrome.manifest file
• overlay chrome//browser/content/browser.xul
  chrome//sample/content/sample.xul

6
XUL file

• lt?xml version"1.0"?gt
• ltoverlay id"sample" xmlns"http//www.mozilla.org
  /keymaster/gatekeeper/there.is.only.xul"gt
• ltscript type"application/x-javascript"
  src"chrome//sample/content/test.js"/gt
• lt?xml-stylesheet href"chrome//sample/skin/test.c
  ss" type"text/css"?gt
• ltstatusbar id"status-bar"gt
• ltstatusbarpanel id"my-panel" label"Hello
  World"/gt
• lt/statusbargt