Mozilla @ ROSEdu Tech Talks

Crash course and overview

29 Martie 2012

Valentin Goșu

Conținut
• • • • De ce Mozilla? Extensii pentru Firefox Firefox – cum contribuim Boot2Gecko

De ce Mozilla?
• Netscape • Mozilla - 1998 • Firefox - 2004 • Misiunea
– Mozilla's mission is to promote openness, innovation and opportunity on the web.

Extensii pentru Firefox
• Cea mai ușoară metodă de a implementa un feature • Nu toți au aceleași nevoi

Extensii pentru Firefox
• http://addons.mozilla.org • XUL Add-ons • Add-on SDK

XUL Add-ons
• • • • Ce este XUL? Care este structura extensiei Avantaje Dezavantaje

Structura extensiei
• C:\Users\[username]\App Data\Roaming\ Mozilla\Firefox\Profiles\[profile]\extensions\

• ~/.mozilla/firefox/[profile]/extensions/

• Firefox.exe –P [profile] –no-remote

Structura extensiei
my_extension.xpi: //Echivalent cu un folder cu același nume /install.rdf //Informații generale despre extensie /chrome.manifest //Inregistrează conținutul în browser /chrome/ /chrome/content/ //Fișiere XUL și JavaScript /chrome/icons/default/* //Imaginea default a extensiei /chrome/locale/* //Localizare /defaults/preferences/*.js //Fisiere Default /plugins/* /components/* // XPCOM components /components/cmdline.js // Rularea extensiei ca aplicație

Structura extensiei
• install.rdf
<em:id>{59c81df5-4b7a-477b-912d-4e0fdf64e5f2}</em:id> <em:targetApplication> <Description> <em:id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em:id> <em:minVersion> 0.7 </em:minVersion> <em:maxVersion> 13.0a1 </em:maxVersion> </Description> </em:targetApplication>

<em:name> ROSEdu Tech Talks </em:name> <em:description> Stuff you need to know </em:description> <em:creator> ROSEdu </em:creator> <em:homepageURL> http://rosedu.org </em:homepageURL>

Structura extensiei
• chrome.manifest
overlay packagename overlayname path/to/files locale packagename localename path/to/files Skin/style packagename skinname path/to/files overlay chrome://browser/content/browser.xul chrome://chatzilla/content/browserOverlay.xul application={ec8030f7-c20a-464f-9b0e13a3a9e97384}

Structura extensiei
• chrome/content/ff-overlay.js
extensia_mea.onFirefoxLoad = function(event) { document.getElementById("contentAreaContextMenu") .addEventListener("popupshowing", function (e){extensia_mea.showFirefoxContextMenu(e); }, false); }; window.addEventListener("load", extensia_mea.onFirefoxLoad, false);

Structura extensiei
• chrome/content/ff-overlay.xul
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="chrome://extensia_mea/skin/overlay.css" type="text/css"?> <!DOCTYPE overlay SYSTEM "chrome://extensia_mea/locale/overlay.dtd">

<overlay id="extensia_mea-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <stringbundleset id="stringbundleset"> <stringbundle id="extensia_mea-strings" src="chrome://extensia_mea/locale/overlay.properties"/> </stringbundleset> <script type="application/x-javascript" src="options.js"/>
<statusbarpanel id="extensia_mea-panel" insertbefore="statusbar-display"> ... </statusbarpanel> </overlay>

Avantaje
• • • • Performanță Flexibilitate Conectare la elementele interne ale Firefox Standalone application (XUL Runner)

Dezavantaje
• • • • Incompatibilitate Securitate Portabilitate Restart

Add-on SDK
• • • • • • Mai mic Fără restart HTML5 & Javascript Mai sigur Web editor High level sau low level

Add-on SDK
require("widget").Widget({ id: "widgetID1", label: "My Mozilla Widget", contentURL: "http://www.mozilla.org/favicon.ico", onClick: function(event) { require("tabs").open("http://www.mozilla.org"); } });

Add-on SDK
• • • • • • • • Clipboard Context-menu Hotkeys Notifications Page-mod Page-worker Panel Passwords • • • • • • • • Private-browsing Request Selection Self Tabs Timers Widget Windows

How To
• Add-on SDK
– https://addons.mozilla.org/en-US/developers/builder – https://addons.mozilla.org/en-US/developers/docs/sdk/latest/

• Extensii "native"
– https://developer.mozilla.org/En/Firefox_addons_developer_guide – https://developer.mozilla.org/en/Extensions

Întrebări despre extensii

Firefox
• Ce este Gecko? • Code versioning – Mercurial vs Git • Getting to know the code

hg, make
• hg clone http://hg.mozilla.org/mozilla-central/ src
mozilla-central mozilla-aurora mozilla-beta mozilla-release

• echo '. $topsrcdir/browser/config/mozconfig' > .mozconfig • echo 'mk_add_options AUTOCONF=autoconf2.13' >> .mozconfig • make -f client.mk build

What to do
• bugzilla.mozilla.org
– Assign – Ask – Code – Patch

Getting to know the code

Think small
• https://developer.mozilla.org/en/Mozilla_Source_Code_Directory_Structure

• • • •

Concentrează-te pe fișierul curent Break stuff – pentru asta sunt testele http://mxr.mozilla.org/ IRC – irc.mozilla.org
– #devmo – #css

Building
• hg clone http://hg.mozilla.org/mozilla-central/
– git clone git://github.com/doublec/mozilla-central.git

• .mozconfig
– https://developer.mozilla.org/en/Configuring_Build_Options

• make -f client.mk build • objdir/dist/bin

Rebuiling
• Încet: make în objdir • Foarte încet: make –f client.mk build • Rapid:
– Make în subdirector din objdir – (uneori) make în layout/build și toolkit/library

Testing
• • • • • Reftests Crashtests XPCShell Tests Mochitests JS tests

• https://developer.mozilla.org/en/Running_automated_tests • https://developer.mozilla.org/en/Mozilla_automated_testing

Testing
• Push to try
– https://wiki.mozilla.org/ReleaseEngineering/TryServer

• hg push -f ssh://hg.mozilla.org/try/

Some things to remember
• XPCOM
– Cross Platform Component Object Module – Permite dezvoltarea separată a modulelor – Interfețe idl
– https://developer.mozilla.org/en/Creating_XPCOM_Components – https://developer.mozilla.org/en/

Boot2Gecko
• Ce este? • Este Android? • De ce nu Android/IOS/WP7?

Boot2Gecko
• • • • Linux based Gonk – the kernel (C) Gecko – the layout engine (C++) Gaia – the user interface (HTML5 & Js)

• WebAPI – arewemobileyet.com

WebAPI

Demo

Boot2Gecko
• Getting Started • https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko • https://wiki.mozilla.org/Gaia/Hacking

Alte proiecte

Întrebări