The aim of the project was to implement tools in Firefox's DevTools which can help web developers debug unwanted scrollbars which appear in HTML elements because of its descendant elements' size/position.
As the project progressed and our understanding of
- what features will be useful for developers and
- how the features will fit into the existing toolset of DevTools
improved, we updated our goals for the project. We started with implementing a feature in Gecko (Firefox's browser/layout engine) which would allow us to get a scrollable element's overflow causing elements. The criteria that the descendants of a scrollable element should satisfy to be an overflow causing element were:
- It should lie outside the scrollable element.
- It should either
- have a specific size which is determined by its CSS or content (and not its children), or
- be one of the leaf/deepest elements.
The following patches cover this initial work:
- https://phabricator.services.mozilla.com/D77837
- https://phabricator.services.mozilla.com/D77940
- https://phabricator.services.mozilla.com/D79079
After working on the above patches, we found that a better approach would be to implement the feature in Inspector Utils instead of Container Frame, so we applied the required changes there:
- https://phabricator.services.mozilla.com/D80216
- https://phabricator.services.mozilla.com/D81118
- https://phabricator.services.mozilla.com/D81957
After doing all of this, the work in Gecko was complete. So, we moved onto the server and client of DevTools which would utilize the API created in Gecko. Here, we prioritized the feature which would show overflow inspector badges on every overflow causing element:
Then we focused on implementing a click functionality on the scroll inspector badge which would reveal and highlight all the overflow causing elements of the element whose scroll inspector badge was clicked:
Most of the work had been completed by this time.
We worked on encapsulating the entire feature in a pref (accessible by putting about:config in the URL box in Firefox), so it can be used as a switch for toggling the feature which would allow us to better assess the impact on DevTools by the code written:
This covers all the code written during GSoC. However, there are some things which are not yet complete and are in progress:
- Adding telemetry to understand the usefulness of the feature: https://phabricator.services.mozilla.com/D88049
- A bug fix: https://bugzilla.mozilla.org/show_bug.cgi?id=1660973
Once these things have been completed, the features will be availble by default on Firefox DevTools.
Right now, the overflow badges can be shown by following these steps in Firefox Nightly:
- Go to about:config
- Search for
devtools.overflow.debugging.enabled - Set
devtools.overflow.debugging.enabledto true - Restart the browser
This was the coding part of GSoC. Behind the scenes, there were a lot of discussions, brainstorming, and meetings held as part of the GSoC journey.
I don't want to update the gist so its state (when it was submitted) is preserved. Instead I want to publish updates here in the comments.
So, the telemetry feature has landed. Now there's only the last portion left, which is the bug fix.