This project is a part of UCOSP and is being steered by Greg Tatum (@gregtatum).
It is intended to be a prototype. Additional documentation will be added to the docs/ directory.
Firefox Developer Tools allow developers to inspect HTML pages to better understand and debug how the structure of a web page translates into an image on the screen. Ultimately the image that is rendered to the screen is 2d, but it is composed of a variety of elements on the screen including blocks of color, text, images, and video. Conceptually these elements can be represented as a 3d document where the z-index of each element determines its height in the space. The higher z-indexed elements end up blocking the elements with lower z-indexes. However, this can become more complicated with the different types of positioning like ‘absolute’, ‘relative’, and ‘fixed’ positioning. Users can quickly become confused and struggle with stacking elements correctly.
The goal of this project would be to create a tool that intuitively lets users understand this overlapping structure of their webpage by visualizing it in three dimensions. Firefox devtools used to have a 3d debugging tool called Tilt, but its focus was on showing the nesting structure of a webpage, rather than the z-index stacking behavior. That tool is also no longer shipped with the Firefox devtools as it does not support multiprocess Firefox.
Clone this repo, then from the terminal run
yarn installto install the dependencies.
To bundle the ./src files for both the demo web app and the extension panel run
yarn buildthis will also watch for changes to the ./src directory and re-bundle
To run the firefox extension, do
yarn start-extThis should start up firefox and load the extension from the ./extension folder, it will also watch for changes to the folder and auto-reload the extension.
To run the web app, do
yarn start-app