Real World Mozilla Adding Chrome to FirstXpcom Lab

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

IN PROGRESS...

Introduction

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