Mozilla @ ROSEdu Tech Talks

Crash course and overview

29 Martie 2012

Valentin Gou

Coninut
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 uoar metod de a implementa un feature Nu toi au aceleai 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 acelai nume /install.rdf //Informaii generale despre extensie /chrome.manifest //Inregistreaz coninutul n browser /chrome/ /chrome/content/ //Fiiere 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 aplicaie

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 Fr 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

ntrebri 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 fiierul 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 Interfee 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

ntrebri