How to override this single selector within a CSS ruleset (Firefox web browser user interface)?

Question

Firefox 89 includes many changes to the web browser's UI.

One of the benefits of the new UI is that tabs can show a secondary information row to indicate, for example, if media is playing in a tab.

Unfortunately, when the highly-desirable compact mode is used, these secondary info rows disappear.

I went through the Firefox source code, and determined that this issue is created by this line of CSS code:

:root[uidensity="compact"] .tab-secondary-label, .tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
    display: none;
}

As you can see, the selector :root[uidensity="compact"] .tab-secondary-label at the beginning of this ruleset is causing this issue.

I would like to add to the userChrome.css overlay a CSS ruleset to overcome this issue, but I'm not exactly sure how. Yes, I could just change this ruleset in the Firefox source code, and recompile the browser, but I would prefer not to go through that hassle for every Firefox update.

Within userChrome.css, for obvious reasons, something like:

:root[uidensity="compact"] .tab-secondary-label {
    display: revert !important;
}

or

:root[uidensity="compact"] .tab-secondary-label {
    display: unset !important;
}

will not quite work.

What is a good CSS technique to use to accomplish this goal?

Answer 1

I figured out a solution.

I don't love it, but it does work.

.tab-secondary-label {
    display: -moz-box !important;
}

.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
    display: none !important;
}

If anyone can propose different techniques, I'm interested in reading your answer(s).