Obiettivi

• Conoscere le caratteristica della community di sviluppo legata al progetto Mozilla e gli strumenti e modalità di collaborazione utilizzate
• Conoscere le fonti di Documentazioni ufficiali e i libri pubblicati sull’argomento
• Conoscere l’architettura e le componenti principali dell’application framework Mozilla
• Conoscere la struttura/componenti di una semplice estensione/applicazione basata sul framework Mozilla
• Conoscere le base del linguaggio di markup XUL
• Conoscere gli strumenti di sviluppo utilizzabili sulla piattaforma Mozilla

Who’s Mozilla? (1/2)

Mozilla è stato il nome in codice usato internamente a Netscape del progetto di sviluppo di quella che sarà Netscape Navigator e successivamente diventò il nome della mascotte dell’azienda ( sotto varie forme sino all’attuale logo Godzilla-like )

Nel 1998 Netscape procede all’apertura del codice di Netscape rilasciandolo con licenza Netscape Public License (una licenza BSD-like poi diventata Mozilla Public License) e attraverso la creazione della Mozilla Organization che ne doveva coordinare lo sviluppo.

Who’s Mozilla? (2/2)

Mozilla Foundation ( 2003 ) – L’iniziale Mozilla Organization viene convertità in una vera e propria organizzazione no-profit il cui scopo è quello di promuore e coordinare le attività relative allo sviluppo delle tecnologie Mozilla e della sua comunità di sviluppo ed è l’entità che formalmente detiene i diritti di copyright sul progetto.

Mozilla Corporation ( 2005 ) – E’ una organizzazione for-profit (sussidiaria della Foundation) focalizzata sullo sviluppo e diffusione Firefox.

Mozilla Messaging ( 2008 ) – E’ una nuova organizzazione for-profit (anche questa volta sussidiaria della Foundation) focalizzata sullo sviluppo di Thunderbird.

Mozilla Developer Community (1/2)

Mozilla Developer Center rappresenta la principale fonte di informazioni riguardanti la piattaforma tecnologia Mozilla, utili agli sviluppatori delle estensioni o applicazioni basate su tali tecnologie.

Mozilla Wiki su cui vengono creati i documenti riguardanti le attività legate allo sviluppo delle tecnologie Mozilla (Meeting Schedule, Release Planning, New Design Documentation)

Mailing List / Gruppi di discussione sono i mezzi di comunicazione principali attraverso i quali si svolgono le discussioni tra i numerosissimi membri della comunità Mozilla, l’iscrizione e consultazione degli archivi può essere effettuata attraverso i seguenti link:

• https://lists.mozilla.org/listinfo
• http://groups.google.com/groups/dir?sel=usenet%3Dmozilla

IRC è invece il canale di comunicazione preferito per le discussioni realtime, a cui mozilla dedica un apposito server con i canali di discussione sui vari argomenti (dal marketing allo sviluppo):

• http://irc.mozilla.org

Mozilla Developer Community (2/2)

MozDev : Mozilla da tempo fornisce un servizio di hosting per progetti di software libero collegati con le loro tecnologie (estensioni per firefox o thunderbird, applicazioni xulrunner etc.)

MXR : il progetto Mozilla fa uso del software LXR (realizzato per generare una versione ipertestuale dei sorgenti del kernel) per generare un ipertesto navigabile dei sorgenti dei progetti principali (Firefox, Thunderbird, SeaMonkey)

Mozilla HG repository server : i sorgenti dei progetti Mozilla sono revisionati mediante il tool DVCS Mercurial (anche conosciuto come HG) e disponibili a tutta la comunità di sviluppo.

Online Manuals and API Reference

Printed Books

• O’Reilly – Creating Application with Mozilla (2002)
• Bruce Perens’ Open Source Series – Rapid Application Development with Mozilla (2003)
• O’Reilly – Programming Firefox (2007)

From http://www.mozdev.org/community/books.html

Mozilla Platform View (1/2)

Dopo l’apertura dei sorgenti di Netscape, il codice del nuovo browser libero fù completamente riscritto from scratch per semplificarne lo sviluppo multipiattaforma (sostituendo i 3 codebase in un unico browser basato su un unico engine maggiormente modulare).

Questo nuovo engine è a volte indicato con il nome XPFE (Cross Platform Front End)

La modularità dell’engine è basata su una struttura CORBA-like: XPCOM

Altre importante componenti del core dell’application framework sono:

• Gecko : XML Rendering and Layouting Engine (es. HTML/XHTML, SVG, XUL, CSS, XML)
• Necko : Network Protocol Handler (es. HTTP, HTTPS, FTP)
• Spidermonkey/Tracemonkey : Javascript Virtual Machine

Mozilla Platform View (2/2)

Firefox Extensions Developer Primer

• Extensions vs. Plugins
• There.is.only.XUL
• Mixed XUL / HTML
• XUL Overlays
• Mozilla Debuggers and Interactive Shells
• Chrome vs. Content
• DOMinspector
• XUL_Explorer
• OpenKomodo / KomodoEdit

Extensions vs. Plugins

Cos’è un estensione per Firefox? Che differenze ci sono tra un estensione ed un plugin (Flash, AcrobatReader, VLC)?

Un’estensione per Firefox a differenza di un plugin si amalgama con il resto dell’applicazione e delle altre estensioni anzichè costituire un isola all’interno del browser.

Inoltre un estensione, al contrario di un plugin, per Firefox può influenzare l’intero browser anzichè un determinato tag all’interno delle pagine web che ne fanno uso.

Le estensioni per Firefox sono realizzate con le medesime tecniche e tecnologie con cui si sviluppano le normali applicazioni Web (Javascript, XHTML, XML, CSS, DOM).

Attraverso le estensioni per Firefox è possibile modificare sia l’aspetto che il comportamento del browser, e inoltre si può avere accesso a risorse che sono precluse alle applicazioni web (come aprire un file locale in lettura/scrittura o accedere ai bookmark)

There.is.only.XUL (1/2)

La componente UI di una estensione Firefox è costituita generalmente da un insieme di file XUL (e dagli eventuali stili CSS personalizzati da applicare).

XUL è un linguaggio di markup (un dialetto XML) molto simile al più comune XHTML, ma orientato alle applicazioni invece che alle pagine e ai collegamenti ipertestuali.

Essendo XUL un dialetto XML, può essere mescolato agli altri dialetti XML di cui Gecko supporta già il rendering (XHTML ed SVG ad esempio)

Tra le caratteristiche distintive di XUL citiamo:

• supporto al merging dinamico di più file XUL in un unica UI ( chrome overlays )
• supporto alla localizzazione di attributi e testo contenuti nei file XUL ( DTD locales )
• ampio supporto di controlli (window, menù, popup etc.) con la possibilità di estenderne ulteriormente il vocabolario mediante XBL
• supporto nativo al Drag & Drop
• separazione tra contenuto, comportamento e stile

There.is.only.XUL (2/2)

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

<window title="Hello XUL!!!"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   
  <description>Hello XUL!!!</description>

</window>

• https://developer.mozilla.org/En/XUL
• https://developer.mozilla.org/en/The_Joy_of_XUL
• http://www.hevanet.com/acorbin/xul/top.xul
• https://developer.mozilla.org/en/docs/XUL_Explorer

Mixed XUL / HTML (1/2)

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

<window title="Hello Mixed XUL / HTML!!!"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   
  <script type="application/x-javascript"
	  src="chrome://global/content/dialogOverlay.js" />
  
  <description><html:h1>Hello from HTML!!!</html:h1> and from XUL too!!!</description>

  <html:div xmlns="http://www.w3.org/1999/xhtml">
     <h1> This is an H1 </h1>
     <h2> and an H2 </h2>
     <pre>
       This is a preformatted block

Mixed XUL / HTML (2/2)

Per mescolare XUL, XHTML e SVG è quindi semplicemente specificare xml namespace come previsto dallo standard XML

NOTA : Da Firebug è possibile:

• verificare gli stili css applicati e modificare al volo lo stile dei tag
• verificare il valore degli attributi (come ad esempio il namespaceURI)
• modificare il contenuto XUL
• testare l’accesso in DOM al documento XUL attraverso la console Javascript
• modificare il contenuto XUL mediante la console Javascript

More XUL – controls

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

<window title="Hello XUL!!!"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <description>Hello XUL!!!</description>
  
    <button label="button_label"/>
    <colorpicker type="button"/>

</window>

XUL è dotato di controlli sofisticati quali: button, menu-button (come button type), textbox, checkbox, radio, colorpicker, datepicker, groupbox, listbox, menulist (opzionalmente editabile), progressmeter, scale, tree, toolbar, etc.

More XUL – hbox e flex

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

<window title="Hello XUL!!!"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <description>Hello XUL!!!</description>
  
    <hbox>
        <button label="button_label" flex="3"/>
        <colorpicker type="button" flex="1" />
    </hbox>
</window>

XUL è dotato dei tag hbox e vbox utili per risolvere la maggior parte delle necessità di layouting.

Mediante l’attributo flex è possibile specificare le proporzioni con le quali gli elementi occuperanno lo spazio a disposizione.

More XUL – overlays (1/3)

Mediante il tag overlay è possibile definire dei layer ( overlay appunto) di XUL di cui Mozilla potrà effettuare il merge in altri documenti XUL (detti master document ).

Si può istruire Mozilla su quali documenti XUL effettuare il merging mediante diversi metodi:

• nei documenti XUL attraverso l’istruzione di pre-processing <?xul-overlay?> specifica di mozilla
• nel chrome.manifest attraverso il comando overlay
• da Javascript a runtime mediante il metodo document.loadOverlay

More XUL – overlays (2/3)

hello.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xul-overlay href="hello_overlay.xul"?>
<window title="Hello XUL!!!"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <description>Hello XUL!!!</description>

    <hbox id="test_overlay1">
        <button label="button_label"/>
        <colorpicker type="button" id="color1"/>
    </hbox>
</window>

More XUL – overlays (3/3)

hello_overlay.xul

<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <hbox id="test_overlay1">
        <menu type="button" label="menu from overlay" insertbefore="color1">
            <menupopup>
                <menuitem label="menu item1"/>
                <menuitem label="menu item2"/>
                <menuitem label="menu item3"/>
            </menupopup>
        </menu>
    </hbox>
</overlay>

• https://developer.mozilla.org/En/XUL_Overlays
• http://mb.eschew.org/12

Mozilla Debuggers and Interactive Shells

XPCShell

XPCShell è una shell javascript XPConnect-enabled, cioè in grado di usufruire degli stessi componenti e servizi XPCOM di cui si può fare uso dal codice javascript privileged in Chrome.

cd /usr/lib/xulrunner
./run-mozilla.sh ./xpcshell-1.9
js> 2 + 2
4
js> var Cc = Components.classes;
js> var Ci = Components.interfaces;
js> var file = Cc["@mozilla.org/file/directory_service;1"].
                     getService(Ci.nsIProperties).
                     get("CurProcD", Ci.nsIFile);
js> print(file.path);
/usr/lib/xulrunner

MozREPL

MozREPL è una estensione per Firefox che mette a disposizione su una porta tcp locale una shell javascript privileged

repl> var Cc = Components.classes;
repl> var Ci = Components.interfaces;
repl> var file = Cc["@mozilla.org/file/directory_service;1"].
                     getService(Ci.nsIProperties).
                     get("CurProcD", Ci.nsIFile);
repl> repl.print(file.path);
/usr/lib/firefox-3.0.6
repl> repl.whereAmI()
[object ChromeWindow] - Document title: "Mozilla Firefox"
repl> repl.inspect(content)
[...]
repl> repl.enter(content)
[object Window] — {addEventListener: function() {…}, repl: {…}, document: {…}, netscape: {…}, XPCSafeJSObjectWrapper: function() {…}, XPCNativeWrapper: function() {…}, Components: {…}, ...}
repl> repl.look()
[...]

Venkman/ChromeBug

Venkman è un debugger per Firefox e risulta particolarmente utile per effettuare un debugging completo del codice privileged

ChromeBug è una estensione per Firebug >= 1.4.0 e consente di utilizzare le funzionalità di Firebug per il debugging del codice privileged

Le funzionalità di Debugging Javascript sono racchiuse all’interno di un componente XPCOM ed esposte attraverso una interfaccia IDL:

• http://mxr.mozilla.org/mozilla/source/js/jsd/idl/jsdIDebuggerService.idl
• http://www.xulplanet.com/references/xpcomref/group_JavaScriptDebugger.html

Chrome vs. Content (1/3)

All’interno di Firefox il codice Javascript può trovarsi in 2 diversi ambienti, con privilegi diversi:

• Content è l’ambiente nel quale viene eseguito il codice Javascript delle pagine web visitate (unpriviled code)
• Chrome è l’ambiente nel quale viene eseguito il codice Javascript delle estensioni e del core di Firefox ( privileged code )

L’ambiente privileged può facilmente accedere all’ambiente unprivileged (mentre non è direttamente possibile il contrario).

Il DOM dell’ambiente unprivileged è completamente accessibile da parte del codice dell’ambiente privileged, ma per questioni di sicurezza viene effettuato un wrapping protettivo in modo tale da non trovarsi ad eseguire inavvertitamente del codice injected dalla pagina web negli oggetti DOM.

Chrome vs. Content (2/3)

Chrome vs. Content (3/3)

Mediante MozREPL è possibile verificare in una shell interattiva come gli oggetti provenienti dal content siano racchiusi mediante il guscio protettivo XPCNativeWrapper , per accedere in maniera completa (e insicura) all’ambiente unprivileged di una pagina Web è sufficiente utilizzare l’oggetto insicuro ( wrappedJSObject ) in modo esplicito:

repl> content
[object XPCNativeWrapper [object Window]] — {parent: {…}, location: {…}, QueryInterface: function() {…}, getInterface: function() {…}, frames: {…}, length: 1, scrollX: 0, ...}
repl> content.wrappedJSObject
[object Window] — {getInterface: function() {…}, keys: function() {…}, defaultCheck: function() {…}, notOperaFix: function() {…}, addSlideIds: function() {…}, createControls: function() {…}, populateJumpList: function() {…}, ...}
repl> 

DOMinspector

DOMinspector è un estensione per Firefox (di solito installata di default) che consente di ispezionare le pagine HTML ma anche i documenti XUL aperti (compresi quelli in Chrome ).

Risulta molto utile per identificare in maniera interattiva i componenti dell’interfaccia di cui si vuole effettuare l’Overlay per plasmare ed esporre l’UI della nostra estensione con quella dell’applicazione che si sta andando ad estendere.

NOTA : ChromeBug se pur in via sperimentale fornisce funzionalità paragonabili a quelle di DOMinspector con UI in stile Firebug.

XUL_Explorer

XUL_Explorer è una semplice applicazione Mozilla-based (basata su XULRunner) che consente di sperimentare in modo semplice XUL.

Tra le caratteristiche di XUL_Explorer ci sono:

• la validazione dello XUL
• help in linea dei tag XUL basato su MDC
• un semplice editor
• preview inline e in finestra separata
• XUL/Javascript code snippets

https://developer.mozilla.org/en/XUL_Explorer

OpenKomodo / KomodoEdit

Komodo è un ambiente integrato per lo sviluppo software ( IDE ) basato sulla Mozilla Platform (quindi estendibile in XUL, Javascript e Python grazie al binding PyXPCOM) in grado di effettuare nativamente la preview inline di file XUL, è dotato di syntax highlighting e autocompletamento.

• http://www.openkomodo.com
• http://downloads.activestate.com/Komodo/releases