Is it possible to edit the stylesheet of FireFox Developer Tools?

Question

Is it possible to edit the visual layout of FireFox's developer tools? I'm talking about the tools themselves, not the webpage that the tools are inspecting.

I want to narrow the large gap between the CSS property name and value:

I've read that FireFox's UI is built in XUL and CSS, so theoretically it should be possible to append a custom stylesheet but I don't haven't found any info on how to customize the stylesheet.

Answer 1

It's possible by creating a chrome/userContent.css file in the profile directory. Browser Toolbox can be used to inspect the DevTools elements, similar to how DevTools inspects a webpage.

Mozilla's documentation on userContent.css is a bit outdated, so a newer guide like the one from Dedoimedo can be helpful. In particular, toolkit.legacyUserProfileCustomizations.stylesheets needs to be enabled in about:config.

/* Tab contents */
@-moz-document url-prefix("chrome://devtools/content/") {
    .computed-property-view {
        justify-content: space-between;
        column-gap: 20px;
    }

    .computed-property-name-container {
        width: auto !important;
    }

    .computed-property-value-container {
        flex: 0 0 auto !important;;
        padding-right: 5px;
    }

    .computed-property-value {
        padding-inline-start: 0 !important;;
    }
}

To change the tab bar itself you'd put styles in @-moz-document url-prefix("about:devtools-toolbox")