The Evolution of Side View
Side View is a new Firefox Test Pilot experiment which allows you to send any webpage to the Firefox sidebar, giving you an easy way to view two webpages side-by-side. It was released June 5 through the Test Pilot program, and we thought we would share with you some of the different approaches we tried while implementing this idea.
Beginnings — Tab Split
The history of Side View implementations goes back to the end of 2017, when a prototype implementation was completed as an old style XPCOM add-on. It was originally called Tab Split and the spec called for being able to split any tab into two, with full control over the URL bar and history for each side of the split. Clicking on either the left side or the right side of the split would focus that side, causing the URL bar, back button, and other controls to apply to that half of the split. The spec also originally mentioned being able to split the window either horizontally or vertically, but this feature may have made it difficult to understand which page the URL bar was referring to, so we decided to focus on only allowing viewing pages side-by-side.
Firefox Quantum
With the release of Firefox Quantum, XPCOM add-ons are no longer supported. We therefore needed to rewrite our prototype as a WebExtension. The implementation was simply an Embedded WebExtension API Experiment containing the entire previous XPCOM implementation. Our WebExtension wrapper handled the click on the browser action by calling a function exposed by the API Experiment which then called into the old XPCOM implementation. In this way, we quickly had a working WebExtension implementation that had all the capabilities of the old version. However, we encountered a bug in Firefox which broke all of the webExtension APIs if an embedded web extension experiment was loaded. This bug was eventually fixed, but we decided to see how far we could get with a pure WebExtension implementation since this entire implementation seemed prone to failure.
Tab Split 2: WebExtension Sidebar
WebExtension APIs are new standardized APIs which can be used to write web browser add-ons in a cross-browser way. They are supported by Chrome, Opera, Firefox, and Edge, although there are some APIs that are only available on specific browsers. Add-ons written using WebExtension APIs do not have as much freedom to modify the browser as XPCOM add-ons used to have. Therefore, we were not able to implement the user interface we had previously used where any number of tabs could be split into side by side pairs, with the focused side having control over the navigation bar user interface. However, WebExtensions are allowed to display a pane in the sidebar. We decided that we could show a web page in the sidebar with some of our user interface around it to allow the user to change the page that was being shown in the sidebar, since the sidebar webpage would not be able to use the browser’s navigation bar user interface as a normal webpage would. This limited the usefulness of navigating in the web page that was being shown in the sidebar, so any links that were clicked in the sidebar web page would be opened in a new tab instead of navigating the sidebar.
IFRAME troubles
The WebExtension APIs allow a web extension to set the sidebar to a particular webpage. We needed some user interface in the sidebar, so the webpage we set it to was an HTML page inside our add-on which had a bar at the top showing the URL of the page currently being viewed with a back button, the actual webpage embedded using an iframe, and a bottom bar which contained some miscellaneous UI. We also had a Tab Split homepage which would appear when you first pressed the button. This home page showed you a list of all your current tabs and a list of tabs that you had recently sent to the sidebar, allowing you to choose one of them to be loaded in the sidebar.
However, the fact that our implementation required the sidebar webpage to be embedded in an iframe caused a large number of problems. Many webpages use frame busting techniques to detect if they are being embedded in a frame and attempt to prevent it. The original technique for frame busting involves checking whether window.top is equal to window.self. We were able to fix some pages which use this technique by setting the sandbox attribute on the iframe, but this caused a number of other problems.
Some more modern Web servers use CORS headers to tell the browser not to frame the page. Since we had code running in the WebExtension, we were able to successfully strip out just the part of the header that caused this. Nevertheless, this approach felt unstable since we would have to consistently mess with site security to make it work.
A new approach
After struggling with the problems our anti-frame-busting approaches were encountering, I finally had a new idea which removed the need for us to put the sidebar webpage in an iframe. We would put the previous homepage in a pop-up panel instead of in the sidebar. This would allow us to show our user interface in the panel, while reserving the entire sidebar for the chosen webpage. While this required changing the UI slightly, it solved all the technical problems we were encountering and made the implementation much more solid.
A new name for the launch
Since the implementation changed to be more of a sidebar browser than a tab splitting feature, marketing gave us a new name: Side View. Side View is now available for you to try on Firefox Test Pilot. If you try it, we would love your feedback! Press the “Give Feedback” button in the Side View panel to submit suggestions and comments, and use our GitHub repository to submit bug reports.
