Real World Mozilla Adding Chrome to FirstXpcom Lab

Dive into Mozilla > Dive into Mozilla Day 5 > Adding Chrome to FirstXpcom Lab

IN PROGRESS...

Introduction

Previously we created an XPCOM component called FirstXpcom, tested it in the JavaScript Shell, and wrote xpcshell unit tests. However, we haven't really done anything with it yet. Ideally we'd like to add our component to the browser and create some UI in order to allow the user to access its functionality.

We'll work in stages to create a simple UI for accessing FirstXpcom, first as a separate chrome extension, before integrating it with the build system.

firefoxOverlay.xul

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://firstxpcomchrome/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://firstxpcomchrome/locale/firstxpcomchrome.dtd">
<overlay id="firstxpcomchrome-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="overlay.js"/>
  <stringbundleset id="stringbundleset">
    <stringbundle id="firstxpcomchrome-strings" src="chrome://firstxpcomchrome/locale/firstxpcomchrome.properties"/>
  </stringbundleset>

  <menupopup id="menu_ToolsPopup">
    <menuitem id="firstxpcomchrome-hello" label="&firstxpcomchrome.label;" 
              oncommand="firstxpcomchrome.onMenuItemCommand(event);"/>
  </menupopup>
</overlay>

overlay.js

var firstxpcomchrome = {
  total: 0,
  firstxpcom: null,
  
  onLoad: function(e) {
    // initialization code
    this.initialized = true;
    this.strings = document.getElementById("firstxpcomchrome-strings");
    this.firstxpcom = Components.classes["@senecac.on.ca/firstxpcom;1"]
	              .createInstance(Components.interfaces.IFirstXpcom);
    this.firstxpcom.name = "First XPCOM";
  },
  
  showDialog: function() {
    var params = {inn: {name:this.firstxpcom.name}, out: null};
    window.openDialog("chrome://firstxpcomchrome/content/firstxpcomdialog.xul", "",
                      "chrome, dialog, modal, resizable=yes", params).focus();
    return params.out
  },
  
  onMenuItemCommand: function(e) {
    result = this.showDialog();
	
    // see if user clicked Cancel or OK
    if (!result)
      return;
	
    this.total = this.firstxpcom.add(this.total, result.value);
    this.firstxpcom.name = result.name;
	
    // Use the Alerts Service to display the results to the user.
    var alertsService = Components.classes["@mozilla.org/alerts-service;1"]
                              .getService(Components.interfaces.nsIAlertsService);
    alertsService.showAlertNotification(null, this.firstxpcom.name, this.total, 
                                        false, "", null);
  },
};
window.addEventListener("load", function(e) { firstxpcomchrome.onLoad(e); }, false);

firstxpcomdialog.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<dialog
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="firstXpcomDialog"
  title="FirstXpcom Dialog"
  buttons="accept,cancel"
  buttonlabelaccept="OK"
  buttonlabelcancel="Cancel" 
  ondialogaccept="return onOK();"
  onload="onLoad();">

  <script>
    function onLoad() {
      // Get the values passed in via params.inn
      document.getElementById("name").value = window.arguments[0].inn.name;
      document.getElementById("increase").focus();
    }

    function onOK() {
      // These variables aren't strictly necessary, but are included for 
      // improved readability.  They hold the textbox values.
      var nameValue = document.getElementById("name").value
      var increaseValue = document.getElementById("increase").value

      // Package-up the two "return" values so they can be accessed via params.out
      window.arguments[0].out = {name:nameValue, value:increaseValue};

       return true;	
    }
  </script>

  <grid>
    <columns><column/><column/></columns>
    <rows>
      <row align="center"><label value="Name:"/><textbox id="name"/></row>
      <row align="center"><label value="Increase Value By:"/><textbox id="increase"/></row>
    </rows>
  </grid>
</dialog>

chrome.manifest

content	firstxpcomchrome	content/
locale	firstxpcomchrome	en-US	locale/en-US/
skin	firstxpcomchrome	classic/1.0	skin/
overlay	chrome://browser/content/browser.xul chrome://firstxpcomchrome/content/firefoxOverlay.xul

Resources

• Extensions on MDC
• Extension Development on Mozillazine
• XUL Event Propagation