Skip to content

Instantly share code, notes, and snippets.

@20manas
Last active Jan 31, 2021
Embed
What would you like to do?
GSoC Project at Mozilla - Debugging Unwanted Scrollbars

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

  1. what features will be useful for developers and
  2. 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
    1. have a specific size which is determined by its CSS or content (and not its children), or
    2. be one of the leaf/deepest elements.

The following patches cover this initial work:

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:

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:

  1. Adding telemetry to understand the usefulness of the feature: https://phabricator.services.mozilla.com/D88049
  2. 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:

  1. Go to about:config
  2. Search for devtools.overflow.debugging.enabled
  3. Set devtools.overflow.debugging.enabled to true
  4. 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.

@20manas
Copy link
Author

20manas commented Sep 2, 2020

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.

@20manas
Copy link
Author

20manas commented Oct 18, 2020

All of the remaining tasks were completed several days ago. The feature is available on Firefox Nightly 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment