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