Currently the new Style panel displays the specificity like this: -,1,1,0 or !,0,1,0 or .... I believe that the display of specificity of a rule must be improved, for it to become useful to the target audience of the new Firefox developer tools. Suggestions: 1. Provide a tooltip that displays an expanded "view" of the specificity: "!important, X IDs, Y class names, ..." 2. Do not use "-" for when there property is not marked with !important. Use a white-space. (less confusion) 3. Ideally, the column should display a score, not a comma-delimited "hard-core" view of the specificity, like 110, 010 and so on. It's certainly nice for power devs, but it's confusing to newcomers. That's all. Thanks!

I believe Joe had intended that we would have some sort of readable display (like your tooltip suggestion). For simplicity, a score would be nice. On the other hand, that hides what's actually happening in a way that may not be beneficial. You can take a stab at suggesting a simple score format.

I did discuss this idea with Joe. He agreed that the specificity display needs some improvements, especially with point one from the above list. Currently, the display of the rule specificity is too confusing, too hard to understand what's about and what it shows (what are those numbers?), it's "hard-core" - far from the targeted audience. How exactly we will improve this is up to Joe and maybe Limi can give us ideas.

Proposed patch. This requires the latest patches from bug 582596. This should receive feedback before b5 code freeze because it includes new strings. If I get feedback+ I'll merge these changes into the main patch. I have implemented all of the three ideas listed in the bug description. There's one serious problem: title="" attributes do not show as tooltips as in normal web pages, so the effect of that improvement is not visible :(. Why? Maybe Neil Deakin can help us with this. Thanks!

Neil: Sorry to bother you again, but we have another problem now. We have a xul:browser inside a xul:panel. In the XHTML page we have elements with title attributes. The titles do not show any tooltip on mouse hover. Do you have an idea why this fails? Thank you!

If the <browser> element is inside browser.xul, then you can just use tooltip="aHTMLTooltip" on the <browser>. Otherwise, you'll need to create a <tooltip> element and call FillInHTMLTooltip or equivalent function when the tooltip is showing. Bug 480356 involves just having this built-in to the <browser> element.

Attaching screenshot for Limi. The UI still has obvious issues, and we'll have to work on those. However, we are currently highly focused on matters that relate to the b5 code freeze, string freeze, and to getting the style panel reviewed. In the screenshot you can see how the proposed rule specificity looks. I believe it's better, in the sense that it's a number that users can more easily discern as "hey, that rule is more important than the other one" - it's a "score" for each rule. Additionally, the user should be able to hover the specificity column to see a short explanation like "!important, 3 IDs, 4 classes, 2 tags".

Updated patch. Now the tooltips in csshtmltree.xhtml show when needed. Yay! Neil: thank you very much! You're awesome. :) We have the xul:browser in browser.xul, so the fix was really easy.

This patch removes the CSS specificity column, the "show specificity" checkbox and the "help" link. Now CSS rule specificity is always shown when the user hovers a rule. This change is based on the feedback received from Limi. Thank you Limi! (This patch should be applied on top of the latest style panel patches from bug 582596.)

Comment on attachment 468040 [details] [diff] [review] New patch I think this is better. Fewer lines too!

Patch tweaked after discussion with limi and included in the main style panel bug 582596.