Posted by: felipe | April 22, 2013

Summer of Code project – Fullscreen mode

This entry is part of a series of posts about some of our proposed GSoC projects. See here the introduction blog post.

Fullscreen mode

What is it: Many users express the desire to have a more immersive mode where screen space is a very important aspect to maximize. This mode would have all the browser fundamental controls in a single row at the top of the screen, leaving everything else for the webpage. This means that the Back button, the URL bar, the tab strip and the new tab button would all be in the same row, along with some other important information that is useful to have when a software is running in fullscreen mode (like a clock). We have had a preliminary mock-up for a while and it is the starting point for this project.

What does it involve:

  • A curved and clipped back button at the left corner of the screen
  • A sliding forward button that works just like the existing one
  • A button to access Firefox’s menu, based on Australis
  • The address bar should be a fixed width. The tabs should flex to fit the remaining space.
  • A clock and possibly other indicators such as wi-fi signal that can be obtained using the WebAPIs
  • Interaction with the UX team to evolve the mockup into the final design
  • The work to be done by the student during this project should be an implementation of this feature in one of our 3 desktop platforms (Windows, Mac or Linux)
  • The patches produced should get at least to the point of having review started on them, and should provide a good basis for the implementation on the other 2 platforms
  • Should be done as patches to the Firefox codebase

Non-goals: This project will not implement the curved tabs that is seen in the mockup, as that is part of the Australis project. It will also not involve producing the background page shown in the screenshot, of course.

Where to start: You should start by learning how to download Firefox’s source code and to successfully compile it in your platform, and also learning how to generate a patch using Mercurial. After that you should get used to the important source files related to this project: The structure of the browser window, some structural CSS used in all platforms, and the platform-specific ones (Win + Win, Mac, Linux). A tool that will be immensely useful is an add-on called DOM Inspector, which we urge you to download and explore the structure and CSS of the main Firefox window (specially when in Fullscreen mode). You should also look into the Firefox UX branch to see what the current state of Australis is.

Skills needed: Amazing CSS skills and an understanding of the new CSS flexbox model will be useful.

What is expected in your project proposal: A great understanding of the project, its goals and non-goals, and a good idea on how to approach each of the features involved and how to time slice them. Mentions of the main XUL elements of Firefox’s toolbars (during fullscreen mode) and how they are displayed the way they are with the existing CSS, and suggestions on how to put them all in the same row and style them towards the look and feel of the mockup. Links to open-source code (e.g. a github profile) and/or add-ons that you have produced.


  1. […] Fullscreen mode […]


%d bloggers like this: