DPS909/OSD600 Fall 2017 Lab 2
Contents
Building Large Software Projects From Source
One skill we'll learn this fall is how to use, read, modify, and build large, open source projects.
For this lab we will be working with the source code to Mozilla's Firefox web browser. With over 17 Million lines of code in languages like C++, JavaScript, Python, Rust, XML, HTML, CSS, and many others, Firefox is a very large project.
The first step in being able to do something (e.g., fix a bug, add a feature) in a project like Firefox is to build it on your local machine. Doing so requires a number of steps:
- Creating a build environment by installing necessary tools and dependencies
- Obtaining the source code
- Configuring your build to work in your local build environment
- Building the sources
Read the Docs
Projects like Firefox are complex to build, and usually require the use of specialized software tools, as well as particular versions of libraries, compilers, etc. It's important to pay careful attention to any necessary requirements before we begin. We do this by reading the project documentation.
Mozilla is an excellent project in terms of documentation, with information available on MDN. The Firefox build instructions are located on MDN here:
https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions
These docs outline the steps you must take to setup development tools, download and build the source code, and run Firefox locally.
Firefox is cross-platform, which means that you can build binaries for different operating systems, architectures, and platforms from the same source code. It's important that you read and follow all instructions for your particular operating system. Don't skip anything while reading these instructions.
Make a Change to the Source
After you set up the build environment and get the source code, it's time to try making a change and building.
Often you'll have a goal of fixing a bug or adding a new feature, but in this first attempt, I just want you to try making a very simple change--just enough to see that you can indeed influence the outcome of this mammoth amount of code!
The following suggestions were given to me by Mozilla's Blake Winton (@bwinton), and I think that one ore more of these would be fun to try:
1. In browser/base/content/browser.js change the function OpenBrowserWindow to automatically open cat GIFs or a random picture from Unsplash. You can alter the code like so:
function OpenBrowserWindow(options) {
return window.open("http://www.chilloutandwatchsomecatgifs.com");
}
or:
function OpenBrowserWindow(options) {
return window.open("https://unsplash.it/800/600?random");
}
Can you fix the code above to use the full width of the current window, so it always fills the page?
2. Look at the CSS in browser/base/content/browser.css and try changing some of the colours.
3. Modify the way tabs appear by playing with CSS in browser/themes/shared/tabs.inc.css, for example: you could alter things like min-height.
4. You could try adding a background: url(http://i.imgur.com/UkT7jcm.gif); to the #TabsToolbar in browser/themes/windows/browser.css to add something new
5. Modify the labels for menu items like "New Window" in browser/locales/en-US/chrome/browser/browser.dtd to something else.
Build
Once you've made your code change(s), complete your build following the steps outlined on MDN. As you go, make notes:
- Did anything fail? If so, what were the errors you got? How did you fix them?
- What did you find interesting about the build? Did anything surprise you? What did you notice? Remember, be curious about how things work
- How long did the build take on your computer?
Screenshots of your Build Running
Once your build is completed, run Firefox (again, read the docs on MDN for info on how) and make sure your code changes above are indeed working.
Take screenshot(s) of your build, showing your changes in action. You can also type about:buildconfig into your address bar to see info about the build.
Blog
When you're done, write a blog post about your experience, and show your screenshots. Discuss your changes, any issues you ran into, how you overcame them, and what you learned.
Once your blog is posted, add a line to the table below.
