667
edits
Changes
Created page with "=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 wo..."
=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 [https://www.openhub.net/p/firefox 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 [https://developer.mozilla.org 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 [https://twitter.com/bwinton Blake Winton (@bwinton)], and I think that one ore more of these would be fun to try:
1. In <code>browser/base/content/browser.js</code> change the function <code>OpenBrowserWindow</code> to automatically open cat GIFs or a random picture from [Unsplash]. You can alter the code like so:
<code>
function OpenBrowserWindow(options) {
window.open("http://www.chilloutandwatchsomecatgifs.com"); return;
}
</code>
or:
<code>
function OpenBrowserWindow(options) {
window.open("https://unsplash.it/800/600?random"); return;
}
</code>
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 <code>browser/base/content/browser.css</code> and try changing some of the colours.
3. Modify the way tabs appear by playing with CSS in <code>browser/themes/shared/tabs.inc.css</code>, for example: you could alter things like <code>min-height</code>.
4. You could try adding a <code>background: url(http://i.imgur.com/UkT7jcm.gif);</code> to the <code>#TabsToolbar</code> in <code>browser/themes/windows/browser.css</code> to add something new
5. Modify the labels for menu items like <code>"New Window"</code> in <code>browser/locales/en-US/chrome/browser/browser.dtd</code> 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 <code>about:buildconfig</code> 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.
{| class="wikitable"
! #
! Name
! Firefox Build Blog (URL)
|-
| 1
|
|
|-
| 2
|
|
|-
| 3
|
|
|-
| 4
|
|
|-
| 5
|
|
|-
| 6
|
|
|-
| 7
|
|
|-
| 8
|
|
|-
| 9
|
|
|-
| 10
|
|
|-
| 11
|
|
|-
| 12
|
|
|-
| 13
|
|
|-
| 14
|
|
|-
| 15
|
|
|-
| 16
|
|
|-
| 17
|
|
|-
| 18
|
|
|-
| 19
|
|
|-
| 20
|
|
|-
| 21
|
|
|-
| 22
|
|
|-
| 23
|
|
|-
| 24
|
|
|-
| 25
|
|
|-
| 26
|
|
|-
| 27
|
|
|-
| 28
|
|
|-
| 29
|
|
|-
| 30
|
|
|-
| 31
|
|
|-
| 32
|
|
|-
| 33
|
|
|-
| 34
|
|
|-
| 35
|
|
|-
| 36
|
|
|-
| 37
|
|
|-
| 38
|
|
|-
| 39
|
|
|-
|}
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 [https://www.openhub.net/p/firefox 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 [https://developer.mozilla.org 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 [https://twitter.com/bwinton Blake Winton (@bwinton)], and I think that one ore more of these would be fun to try:
1. In <code>browser/base/content/browser.js</code> change the function <code>OpenBrowserWindow</code> to automatically open cat GIFs or a random picture from [Unsplash]. You can alter the code like so:
<code>
function OpenBrowserWindow(options) {
window.open("http://www.chilloutandwatchsomecatgifs.com"); return;
}
</code>
or:
<code>
function OpenBrowserWindow(options) {
window.open("https://unsplash.it/800/600?random"); return;
}
</code>
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 <code>browser/base/content/browser.css</code> and try changing some of the colours.
3. Modify the way tabs appear by playing with CSS in <code>browser/themes/shared/tabs.inc.css</code>, for example: you could alter things like <code>min-height</code>.
4. You could try adding a <code>background: url(http://i.imgur.com/UkT7jcm.gif);</code> to the <code>#TabsToolbar</code> in <code>browser/themes/windows/browser.css</code> to add something new
5. Modify the labels for menu items like <code>"New Window"</code> in <code>browser/locales/en-US/chrome/browser/browser.dtd</code> 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 <code>about:buildconfig</code> 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.
{| class="wikitable"
! #
! Name
! Firefox Build Blog (URL)
|-
| 1
|
|
|-
| 2
|
|
|-
| 3
|
|
|-
| 4
|
|
|-
| 5
|
|
|-
| 6
|
|
|-
| 7
|
|
|-
| 8
|
|
|-
| 9
|
|
|-
| 10
|
|
|-
| 11
|
|
|-
| 12
|
|
|-
| 13
|
|
|-
| 14
|
|
|-
| 15
|
|
|-
| 16
|
|
|-
| 17
|
|
|-
| 18
|
|
|-
| 19
|
|
|-
| 20
|
|
|-
| 21
|
|
|-
| 22
|
|
|-
| 23
|
|
|-
| 24
|
|
|-
| 25
|
|
|-
| 26
|
|
|-
| 27
|
|
|-
| 28
|
|
|-
| 29
|
|
|-
| 30
|
|
|-
| 31
|
|
|-
| 32
|
|
|-
| 33
|
|
|-
| 34
|
|
|-
| 35
|
|
|-
| 36
|
|
|-
| 37
|
|
|-
| 38
|
|
|-
| 39
|
|
|-
|}