Mozilla Weekend of Code, 23.06.2012, ZRH
Computer Science student at the University of Bern
Volonteer Firefox front-end developer since 2008
@KohlerSolutions
You don't need to know C/C++!
XML User Interface Language
<page id="bookmarksPanel"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="init();"
onunload="SidebarUtils.setMouseoverURL('');">
<script type="application/javascript"
src="chrome://browser/content/bookmarks/sidebarUtils.js"/>
<script type="application/javascript"
src="chrome://browser/content/bookmarks/bookmarksPanel.js"/>
<commandset id="placesCommands"/>
<commandset id="editMenuCommands"/>
<menupopup id="placesContext"/>
<!-- Bookmarks and history tooltip -->
<tooltip id="bhTooltip"/>
<hbox id="sidebar-search-container" align="center">
<label id="sidebar-search-label"
value="&search.label;" accesskey="&search.accesskey;" control="search-box"/>
<textbox id="search-box" flex="1" type="search" class="compact"
aria-controls="bookmarks-view"
oncommand="searchBookmarks(this.value);"/>
</hbox>
</page>
Control the GUI + background work
if (this._resume_from_crash) {
// create a backup if the session data file exists
try {
if (this._sessionFileBackup.exists())
this._sessionFileBackup.remove(false);
if (this._sessionFile.exists())
this._sessionFile.copyTo(null, this._sessionFileBackup.leafName);
}
catch (ex) { Cu.reportError(ex); } // file was write-locked?
}
// at this point, we've as good as resumed the session, so we can
// clear the resume_session_once flag, if it's set
if (this._loadState != STATE_QUITTING &&
this._prefBranch.getBoolPref("sessionstore.resume_session_once"))
this._prefBranch.setBoolPref("sessionstore.resume_session_once", false);
this._initialized = true;
What do you think which technology is used to style the GUI?
All GUI elements are styled with CSS! Amazing isn't it?
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}
#navigator-toolbox {
-moz-appearance: none;
background-color: transparent;
border-top: none;
}
#main-window:not([disablechrome]) #navigator-toolbox[tabsontop=true] {
border-bottom: 1px solid ThreeDShadow;
}
#navigator-toolbox[tabsontop=true] > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar),
#navigator-toolbox[tabsontop=false] > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar) {
-moz-appearance: none;
border-style: none;
background-color: -moz-Dialog;
}
Firefox mobile code (Android)
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Log.d(LOGTAG, "creating awesomebar");
mResolver = Tabs.getInstance().getContentResolver();
LayoutInflater.from(this).setFactory(GeckoViewsFactory.getInstance());
setContentView(R.layout.awesomebar);
mGoButton = (ImageButton) findViewById(R.id.awesomebar_button);
mText = (AwesomeBarEditText) findViewById(R.id.awesomebar_text);
TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
tabWidget.setDividerDrawable(null);
mAwesomeTabs = (AwesomeBarTabs) findViewById(R.id.awesomebar_tabs);
mAwesomeTabs.setOnUrlOpenListener(new AwesomeBarTabs.OnUrlOpenListener() {
public void onUrlOpen(String url) {
openUrlAndFinish(url);
}
public void onSearch(String engine, String text) {
openSearchAndFinish(text, engine);
}
[some more code..]
}
Low-level implementation code
Startup, rendering, JS engine, ..
void
nsProgressFrame::DestroyFrom(nsIFrame* aDestructRoot)
{
NS_ASSERTION(!GetPrevContinuation(),
"nsProgressFrame should not have continuations; if it does we "
"need to call RegUnregAccessKey only for the first.");
nsFormControlFrame::RegUnRegAccessKey(static_cast(this), false);
nsContentUtils::DestroyAnonymousContent(&mBarDiv);
nsContainerFrame::DestroyFrom(aDestructRoot);
}
The mozilla-central contains
browser\ | browser specific content (front-end) |
b2g\ | yes, b2g code is in the same repository! |
build\ | build scripts (autoconf, ..) |
dom\ | DOM related stuff |
layout\ | layout implementations (MathML, forms, printing, ..) |
media\ | libjpeg, libogg, libtheora, libvorbis, .. |
mobile\ | Firefox mobile specific code |
testing\ | Testing frameworks (Mochitest, ..) |
toolkit\ | shared code (addon SDK, crashreporter, file picker, ..) |
.. and many more!
.. search for a string
.. identify code parts
.. find the appropriate JS code part
IRC @ irc.mozilla.org
MDN - Mozilla Developer Network @ mdn.mozilla.org
Tinderbox Pushlog @ tbpl.mozilla.org
MXR @ mxr.mozilla.org
Bugzilla @ bugzilla.mozilla.org
Look at other people's patches!
search bugzilla.mozilla.org for [goodfirstbugs]
use MXR to search inside the code
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
You can find all my presentations at
presentations.michaelkohler.info/.