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-9b0e-13a3a9e97384}
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
• echo '. $topsrcdir/browser/config/mozconfig' > .mozconfig
• echo 'mk_add_options AUTOCONF=autoconf2.13' >> .mozconfig
• make -f client.mk build
mozilla-central mozilla-aurora mozilla-beta mozilla-release
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
Top Related