A Specificity Calculator in Firefox Dev Tools?

As a CSS developer on enterprise-level software, debugging issues can be challenging for various reasons. On a platform that supports thousands of websites and over 75 designs with various moving parts, features, and widgets, there is a lot of CSS that needs to work together and overlap each other in just the right way.

For me, debugging starts in the browser with the developer tools inspector. I'm not going to go into the details of the debugging process in this post but one thing I often look for is specificity clashes. I spend time analyzing the selector lists to see what CSS is being applied/overridden on an element.

I use Visual Studio Code as my IDE. One of the tools that I really like is the specificity calculator that shows up when you hover over CSS selectors in the IDE.

However, because we use a preprocessor (LESS) to generate the CSS, looking at the code in the IDE doesn't give a complete picture of the CSS specificity for an element.

I think it would be a great addition to the dev tools if a developer is able to hover over an element and see its CSS specificity. Perhaps something along the lines of (but much better implemented/looking than) the mockup below:

What do you think?