CSE498, Collaborative Design, Fall 2020
Computer Science and Engineering
Michigan State University

Mozilla is the company behind Firefox, one of the world’s largest web browsers with well over 200 million users. They are a non-profit, mission-driven organization that emphasizes open-source development to keep the web open and accessible to all, meaning anyone can submit contributions to Firefox by participating in their online community for developers.

Multi-tasking has always been difficult, but has gotten easier with Firefox’s Picture-in-Picture (PiP) feature. PiP allows videos to be “popped” out of the browser into a dedicated window that is always on top of all other windows. This is perfect for keeping an eye on sports, or even taking notes while watching a lecture.

Since the release of Picture-in-Picture, many users have requested that the feature be expanded, improved, and made “even more awesome.”

Previously, users could not have multiple PiP windows open at the same time. This is particularly useful for events that benefit from multiple perspectives like Formula 1 races, where multiple cockpit camera views can be viewed simultaneously.

Our Making Firefox’s Picture-in-Picture Even More Awesome project addresses this issue, while additionally improving the overall user experience of Firefox’s PiP.

In addition to multiple PiP support, our project introduces smart snapping to corners: simply flicking the window towards a corner of the screen will snap it there. Additionally, PiP windows now have a “memory” and open with the position and size last set by the user. Our additions to Firefox’s PiP feature improve the user experience and functionality of one of Firefox’s best features.

Picture-in-Picture is a feature that lives entirely within the Firefox codebase; a vast piece of software spanning multiple languages like C++, HTML, and JavaScript. The feature itself uses almost exclusively HTML and JavaScript.