587125 - Improve the display of specificity in the new Style panel

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Mihai Sucan [:msucan]]

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!

Comment 1

[Kevin Dangoor]

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.

Comment 2

[Mihai Sucan [:msucan]]

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.

Comment 3

[Mihai Sucan [:msucan]]

Attachment: proposed patch

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!

Comment 4

[Mihai Sucan [:msucan]]

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!

Comment 5

[Neil Deakin]

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.

Comment 6

[Mihai Sucan [:msucan]]

Attachment: screenshot

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".

Comment 7

[Mihai Sucan [:msucan]]

Attachment: Updated patch

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.

Comment 8

[Mihai Sucan [:msucan]]

Attachment: New patch

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 9

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 468040 [details] [diff] [review]
New patch

I think this is better. Fewer lines too!

Comment 10

[Joe Walker [:jwalker]]

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