How does FireFox work? Source code walk through? - firefox

I'd like to learn how FireFox works behind the scenes. I'd like to understand the source code and the different components but the code-base is rather large and I'm not sure where to start.
I'm wondering if there is some sort of walk though written up by anybody either from the firefox team or from outside the community.
I've looked a little bit at: https://developer.mozilla.org/En but I don't see anything that screams "Start here". I'm simply trying to review their code base for [self-]educational reasons.

Seneca College in Toronto has a program geared towards exactly this -- beginners to Mozilla development.
Check out some of these links:
Real World Mozilla
Fall 2008 Weekly Schedule
Some labs if you want to dive right in:
Lab: Learning Collaborative Development (Fall 2008)
Lab: Building Open Source Projects (Fall 2008)
Lab: Real World Mozilla - Source Code Reading
Lab: Working with Patches
Lab: Dive into Mozilla - Debugging Mozilla
Lab: Thunderbird Bug Fix
Lab: Modifying the Browser
Lab: Modifying Firefox using an extension
Lab: Real World Mozilla - First XPCOM Component
Lab: Real World Mozilla - Adding chrome to first XPCOM component
If you need any help, use IRC: #seneca on irc.mozilla.org. Don't worry if you're not a (Seneca) student, lots of people around the world (people from Seneca, people from Mozilla, and others) are in this channel, the purpose is to educate developers about open source in general and the Mozilla project specifically.
Good luck!

Here's a top-down answer (most of the others are bottom-up):
Firefox is a XUL application (see also: XUL); XUL is a variant of XML used to describe a GUI that is interpreted by a renderer, much the same way that HTML is rendered within the browser, but XUL includes the browser's menus, buttons, status bar, keyboard shortcuts, etc. It's pretty neat; I've been able to put together some simple GUI apps much faster in XUL than in other frameworks (and it's platform-independent!).
If you look in the Firefox application directory (wherever you installed it on your system), you'll see a "chrome" directory with a bunch of .jar files. These are just .zip files with a particular structure (including a manifest) and you can look through them yourself.
Much of the Firefox browser is actually XUL + Javascript. It does utilize a lot of lower-level libraries written in C++ and accessible to Javascript via XPCOM, but if you want to understand (& modify) the higher-level behavior, the XUL+Javascript parts are probably the place to start.
edit: p.s. here are some tutorials/references for XUL: 1 2 and also the O'Reilly book
edit: XUL documents are very similar to HTML documents (only more so!) in the way they interact with the user + events. There's a document model for dynamically modifying the XUL, and there are event models that have event listeners. Both act just like HTML + DOM + its event model, but with a richer set of builtin objects/interfaces/events/etc. The event handlers are interfaces of a particular sort, and can be implemented by Javascript objects (declared in the XUL with onclick="blah()", or added dynamically through Javascript calls to addEventListener() -- both are exactly the same syntax as HTML events in Firefox) or by C++ or other languages that can implement XPCOM objects with the proper interfaces.

One way to start would be to look at some recently fixed bugs in Firefox (see Bugzilla) and take a look at how they were fixed.
That said. The Firefox codebase is very large, and it's likely that no one person understands all of it, so it would be a good idea to start off with a small section (say favorites), and try finding the code for it and looking at how it works. Again, resolved bugs and the files they affect would be a good way of identifying some relevant code to start with.

i worked with mozilla code ( precisely mozilla/nss/security). as far as my understanding of mozilla goes :
It follows layered architecture with NSPR layer (Netscape Portable Runtime ) at the bottom which interacts with Operating Systems.
get the source code from
https://developer.mozilla.org/En/Download_Mozilla_Source_Code and build it in your working environment( as far as i know it support wide variety of platforms/architectures)
join Mozilla developers community/ try to help through testing some of the components.
to code for mozilla, go through :
http://www.mozilla.org/hacking/ ( C++ portability standards is a must if you are C++ programmer).
hope some of the above might help you getting started.

A set of videos was recently released (as for beginning of 2015) that walk through the some of Mozilla Firefox components. Maybe you would be interested in them.
https://air.mozilla.org/search/?q=tag%3A+TorontoBootcamp
They aren't very newbie but still can be helpful I think.

Related

A good way to build javascript profiler for Mozilla Firefox

I'm working on a javascript profiler for Mozilla Firefox, that would let me obtain all available information about the execution of the script on the page (DOM object calls, events, calls to functions like Math.random(), document and navigator object calls, as well as code's own execution tree with arguments etc etc).
Currently, I think that the best way to implement this sort of profiler is by modifying Firefoxe's own source code.
One way to go about it is to find all implementations for corresponding method calls and add profiler log calls there. But there are 2 problems with this approach:
The methods and objects are widely scattered, and I'm not really familiar with the source code at this moment. Tracking down all the functions and making sure that the profiler works as intended will take A LOT of time
When created in this way, the profiler is going to be difficult to maintain when Firefox source code evolves with time.
So I was wondering, if there is a single class/a small group of key classes in firefox source, that could be modified to allow me to collect the information I want? Or is there a better way of doing what I need to do?
The latest Aurora release of Firefox has a basic profiler built into its developer tools, or you can download a more advanced interface from the Mozilla Add-ons site which works with Firefox 16 or later.

swf to exe, real world experience

i'm facing a challenge of rebrushing and updating an almost 10-years old Screenweaver project, and looking for a decent modern swf-exe convertor. Don't have much time to evaluate all the options, therefore i'd like to hear responses with actual working experience with such a tool.
Since WinAPI interaction is a must, the default projector is not an option.
Similar questions (no concrete answers there)
Package SWF into an EXE or APP
Create an EXE from a SWF using Flex 3 without requiring AIR?
Many thanks
UPD: 300 bounty for anyone who can help me with a practical answer.
I've been experimenting with different SWF projectors for a long time now, and so far I think I've tried most if not all of them. I've explained in more detail the best projectors I have used below.
MDM Zinc
http://www.multidmedia.com/software/zinc/
I remember back in when I had Vista that MDM had quite a few bugs running under that OS. It took a while for them to fix those bugs - the bugs didn't stop it from running, but really interfered with the functioning of some methods in the program. For this reason, I decided not to continue testing Zinc and moved on to another projector. Saying that though, I'm certain they have fixed those bugs now.
The program itself has a nice intuitive interface, and allows you create screensaver as well as EXEs (which is obviously good for you).
The product is pricey - currently at $349.99, so this put me off.
You can also generate Mac and Linux projectors which is very attractive, but requires an additional license for each which does cost a lot of money.
SWF Studio
http://www.northcode.com/
This was one of the projectors I really enjoyed working with. It's fully featured, has great community support and the developers are always on hand to help. The projectors it generates are compatible with all Windows operating systems, and I've never had any problems with bugs on this one.
Northcode also offer a student license for SWF Studio for $49. I nearly purchased a license with these guys but the only reason why I didn't was because I found another projector which was better for my scenario which I will come onto in a moment.
I can tell you that one of the reasons why I didn't use this projector (it does sound trivial) is because it had a large file size. SWF Studio allows you to select what size projector you want in terms of filesize - with options like tiny and compact I think but the smaller file types might have dependencies with other files in the directory. This means that you would have to bundle your application with some folders and additional files as well as the EXE itself.
SWF Studio also has the option to create screensavers.
mProjector
http://www.screentime.com/software/flash-projector
mProjector has gone up a version (from 3 to 4) since I last used it, so it may incorporate a lot more features in this version. I remember that the product is very good with transparency, and showcases some 'screen buddies' which use transparency to virtually walk about your screen. The reason why I didn't use this projector is because it didn't have as many Actionscript functions as I would have liked, but I believe it has a lot more nowadays. In your project this wouldn't be so much of a problem because you want a screensaver.
It is reasonably priced at $399 for both Windows and Mac compatibility, but you can buy just Windows or Mac if you wish for a cheaper price.
Janus Flash
I was going to explain this product in more detail but I have now realised that the website no longer exists! Janus is the projector I liked the most and ended up using because of the sheer amount of features available for use in your code.
Like all the projectors I have mentioned above, each one adds functionality to flash which you don't usually get with an SWF. Each product includes pre-built actionscript methods which can interface with the operating system itself to do things you can't do in the Flash sandbox. For example, each one of these projectors allows you to manipulate files (add, edit, delete e.t.c.) on the computer. Janus had the most methods available out of all the projectors I tried. This is partially because Janus used the .NET framework (which meant that .NET 2.0 was required on the system you were executing the projector on).
Also like MDM Zinc, this product allowed you to create applications for the Mac too. I managed to get a cheaper price too when I contacted them directly explaining that I was a student. I recently contacted Janus-Flash to ask about the future of the product, and they said that they may re-release Janus in the future, but for now it's off the market.
Some other products I have used which are worth a mention but I haven't explained in detail: SWFKit, Jugglor, F-IN-BOX (more developer releated as it required cutting code).
A quick search brings up these which might be worth a look: Flash2Me, Flash EXE Builder and SWF to Screensaver.
For your project I think the best option would be SWF Studio. It has lots of nice scripting features you can use to interface with the OS, and is nicely priced too at $299 for a full license.
I hope this helps in your decision for what projector to use, and will save you from trying out many different projectors like I did over several months!
We support a lot of Win32 functionality directly in our core API so chances are you may not even have to make a direct API call, but if you do...
SWF Studio has an advanced Plugin API that allows you to write custom plugins in C++, C# or VB.NET so you can call win32 or .NET functions. We created our own ummanaged to managed code shim so you can write a native .NET plugin and call it from SWF Studio just as easily as you can write a Win32 plugin.
There's no difference between how you call a SWF Studio function in AS2 or AS3. We have maintained 100% backward compatibility in our API. Whether you're using AS2 or AS3, your calls will just work. And they'll continue to work.
However, the place we really shine is support. I created SWF Studio and I'm still in the forums EVERY day answering questions and fixing bugs.
My experience here is from a year ago.
Having worked with mProjector I can tell you that the AS3 API is quite robust and easy to use. I was able to wrap a large swf-based project using external assets up into an EXE without a lot of problems. The UI for mProjector's project gui leaves something to be desired, but the actual hooks to the file system were easy to use.
The difficulty is that not all of it is documented. In fact there were as of a year ago a lot of undocumented packages.
My only real problem with mprojector was that in AS3 there wasn't any support for SharedObjects. Someone in their community worked around this and made their solution available. It does of course make use of storing a file on the local system.
This overall compared favorably against Zinc which was extraordinarily complex, slow to compile, and worse than having no documentation all the docs I needed were flat-out wrong.
I ruled out Jugglor almost immediately. It never successfuly compiled anything.
Since this is an old project you're talking about, and written in AS2, I can't speak to that side of it. I can say however that programs like Zinc and mProjector have been around a lot longer than AS3 has, and that the same hooks that are available in AS3 seemed to be available in AS2 also. The possibility exists that there may be more such hooks in AS2 since it's been supported for longer, but I cannot vouch for this at all.
I have used all of these applications, but most of all I liked theFlajector - a program that converts flash movies (swf) to exe files. You can include a flash player in generated applications and they will use it. In other words, the applications will work even if no flash player is installed. Also, Flajector can create windowless applications from flash movies. You can extend your applications using plugins. Using standard classes you can work with files and more.

What is The difference between Firefox extension and plugin?

In Firefox there are plugins and extensions. Could you please explain to me why these addons have different name and tabs ? Does they differ so much so they need different names? I think it's a little unnatural to differ these things, extensions have so much and more functionality, what they lack for comparing to plugins?
The difference is both historical and real:
plugins are compiled, loadable modules, originally descended from NPAPI; they can live outside of the browser's process space (which leads to all kinds of fun interoperability issues and vulerabilities). The most common examples of these are Flash and Java - both request a sub-window ("viewport" or "canvas" (not HTML5's canvas - that's something else altogether: a native part of the webpage)) inside the webpage and handle it themselves, in a way that's largely independent of the browser.
extensions are written mostly in JavaScript and XUL. Since the extensions act as part of the browser, they have wider access privileges than JS-in-a-webpage, but they are still subject to some limitations. The most common way of integration is to hook into some part of FF's functionality and extend it.
So, although the plugins and extensions might appear to be related, they're very different technologies behind the scenes.
According to Mozilla, plugins help the browser display content, such as playing media. Extensions actually add new functionality to the browser.
See the first couple paragraphs here:
https://developer.mozilla.org/en/extensions
One are programs which runs side-by-side of firefox. They get a canvas and when they paint on the canvas, firefox renders it. Notable examples: Flash, Java, QuakeLive.
The other are programs which run in the javascript interpreter/compiler of firefox. They extend firefox functionality more directly, since they have access to the firefox internals and are not merely a canvas. Also, they are much more portable since they do not require underlying support of the operating system as much.
There are advantages and disadvantages to both approaches, and they solve different tasks.

Visual VoiceXML/VXML development tool?

Does anyone know of any tools out there that will let me run and debug a VXML application visually? There are a ton of VXML development tools, but they all require you to build your application within them.
I have an existing application that uses JSPs to generate VXML, and I'm looking for a way to navigate through and debug the rendered VXML in much the same way that Firebug allows one to do this with HTML. I have some proxy-like tools that let me inspect the rendered code as it is sent to the VXML browser, but there's a ton of JS, which makes traversing the code by hand rather difficult.
Has anyone worked with a product that allows for this?
Thanks!
IVR Avenger
There is JigSaw Test suite - has free trial license and reasonably priced.
There is IBM's debugger - part of WebSphere Voice Toolkit.
Many other products have debuggers - a very good summary is here
Disclaimer: I am the development manager for Voiyager (www.voiyager.com), a VoiceXML testing tool. It doesn't meet your criteria nor do I believe it is the type of tool you want, but I thought it was worth mentioning it.
As far as I know, there isn't such a test tool for VoiceXML. In fact there are very few VoiceXML tools on the market and hardly any of them test or analysis. The vendors that created development tools, have all been acquired by other companies. Some of them offered did offer various forms of debugging that were specific to their tool set or stayed at the Dialog (caller input) level. From your question, I'm assuming you need much lower level debugging capabilities.
I think the alternative paths are minimal and somewhat difficult. I believe your primary goal is to debug or rewrite an existing application, but you haven't provided any specific challenges beyond the JavaScript. Some thoughts or approaches that may help:
Isolate the JavaScript and place the code into a unit test harness. That will go a long way to understanding the logic of the application. Any encapsulation of the JavaScript you perform will probably go a long way towards better code maintainability.
Attempt to run the VoiceXML through a translation layer to HTML so you could use FireBug. The largest challenge would involve caller input (ie processing the SRGS grammars). You could probably cheat this by just having the form accept a JSON string the populates the field values. There are tools on the market to test grammars. Depending on the nature of your problems, you could take a simple and light approach and attempt this over just the trouble areas.
Plumb the application with a lot of logging. This can be done through the VoiceXML LOG element, or push the variable space back to the server. By adding intermediate forms, you may be able to provide a dump from each via the VoiceXML Data element.
See if your application will run in one of the open source VoiceXML browsers (not sure of the state of the open source browsers as we've built and bought for our various product lines). If you can get it mostly working, you can use the development debugger to provide some ability to step through the logic. However, it is probably one of the more difficult paths as you'll really need to understand the browser to know when and where to stick your breakpoints and to figure out how to expose the data you want.
Good luck on the challenge. If you find another approach, I would be interested in seeing it posted.
An alternative debug env is to use something like Asterisk with a voicexml browser plugin like the one from http://www.voiceglue.org/ or for a limited licence, i6net.
You can keep all the pieces separate(dynamic html and vxml application in php/jsp/j2ee/, tts processing, and optional asr processing as separate virtual machines with something like virtualbox. If the logic can be kept the same, then it is just a matter of changing the UI based on the channel.
A softphone is all you need to call a minimal asterisk machine, which has the voicexml browser with the url of the vxml in the call plan.
I just used Zend Framework as php is used in this environment, and changed view suffixes(phtml vs vxml) based on the user-agent string.
Flite for tts is fine for debugging, and when your app is ready you can either record phrases, and there was a page on the ubuntu forums with directions for how to increase flite quality with some additional sound files.
Do you have tried Eclipse VTP or InVision Studio?
Eclipse VTP
This is Eclipse plugin. But I feel that it is user-unfriendly a little (of Japanese viewpoint).
InVision Studio *Required create user account*
This is Convergys's IVR tool. It has to edit standard VXML mode. (Unfortunately, It's not exact matching.)
For just debugging vxml, I use Nuance Cafe's VoiceXML checker. It doesn't give you a visual tree or anything, but it's pretty good at spotting syntax errors and is free. I think they might also have more advanced debugging tools if you look into it, but I haven't had the need. (Note: I have no association with them)
http://cafe.bevocal.com/tools/vxmlchecker/vxmlchecker.jsp
I'm looking for the same problem that most of the links are down. I found a document where they propose an open source solution, which works as a plugin for Asterisk (https://www.researchgate.net/publication/228873959_Open_Source_VoiceXML_Interpreter_over_Asterisk_for_Use_in_IVR_Applications) and is available at https://sourceforge.net/projects/voxy/
I would like to know if there are current options to create a VXML structure graphically, like the next image.

How do I develop an addon for Safari?

I want some personally developed JavaScript code to execute whenever I load a page in Safari. Seems like addblock for Safari does this. Anyone know how to do this?
Safari is not extensible. There's no addon framework for it. But yet there's adblock and verious other addons available for it, although Apple's Webkit and Safari developers discourage users from using them, calling them 'binary hacks'. Seems though some of these addons use InputManager, which isn't documented at all anywhere, at least for not for how people are using it to load scripts in Safari. I guess I'm going to have to backwards engineer to see how addblock does it, but before I do, I thought I'd ask around here. Anyone know?
Input managers are a commonly (ab)used way of injecting arbitrary code into another application's runtime. Once you are there, you have to reverse-engineer enough of the application itself to figure out how to get the behavior you want; usually that involves method swizzling to replace parts of the application you are hacking. It's not documented because there's no API to document, but you can learn about the individual pieces (how to write an input manager in general, how method swizzling in Objective C works, how to use tools like class-dump) and then put it all together.
What you are describing sounds like Greasemonkey though, and there are least one or two hacks already out there to enable Greasemonkey-like behavior in Safari. I'd suggest seeing if one of them meets your needs first.

Resources