Firefox Source Code 101

Mozilla Weekend of Code, 23.06.2012, ZRH

Michael Kohler

Computer Science student at the University of Bern

Volonteer Firefox front-end developer since 2008

www.michaelkohler.info

@KohlerSolutions

Who knows C/C++?

Technologies used

You don't need to know C/C++!

XUL

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>

JavaScript

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 about styling?

What do you think which technology is used to style the GUI?

CSS

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;
 }

Java

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..]
}

C/C++

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);
 }

Folder structure

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, ..)