855505 - Don't show a strike-through on a rule when being overridden with a "attribute: inherit" rule

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Comment 1

[Joe Walker [:jwalker]]

Could you give us some more context, maybe an STR?

Comment 2

[Siddhartha Dugar [:sdrocking]]

Attachment: HTML code to reproduce issue

Inspect the text on this page.
font-family for the body has a strike-through even though Verdana is the font being used.

Comment 3

[John Drinkwater (:beta)]

Came to file this, as glancing through the inspector I could not see the source of an applied value. Though there are some improvements that could be applied while working on this.

1, Being able to jump to the inherited value from the inherit entry would be very useful.
2, Mirroring the inherited value alongside the inherit value would be even more so.

also, Platform could shift to All

Comment 4

[Franklin?]

I also came here to report this and I agree with comment 3. It should not strike through.

Proposal:
- An "inherit" value will show in parentheses what the inherited value is.
- Mouseover shows the parent. (E.g. If you inherit from the "div" tag: "... body > <b>div#main</b> > article#news > p > <i>span</i>".)
- Clicking on it will bring you to the other value.

How do we at least have the bug marked "confirmed"?

Comment 5

[Tom Tromey :tromey]

(In reply to Franklin? from comment #4)

It seems like a reasonable request to me.

If I hover over "font-family", I see some sample text in the given font.
It would be great if this worked for "inherit" as well.

> - Clicking on it will bring you to the other value.

I wasn't sure how this would work.
It could open the style editor, perhaps, or start editing the property
that was inherited.

Comment 6

[Franklin?]

comment #4:
> I wasn't sure how this would work.
> It could open the style editor, perhaps, or start editing the property
> that was inherited.

Well, you're already inside the inspector.

Current:

  (at inherit point:)
    font-family: inherit;
  (at parent:)
    font: 12px/18px Arial,Helvetica,sans-serif;

Hovering over "inherit" shows a dotted line, and single-clicking on it makes it editable.

Suggested: (different from what I suggested before)

    font-family: inherit; (Arial,Helvetica,sans-serif) []

Hovering over the font names can still show example text. There can be a little "go to"-like icon at the end (represented by "[]") which you can hover over to show which ancestor it was inherited from, and clicking on it will bring you to that ancestor's rule, which will always be lower down in the Rules panel. (Don't change which element is being selected.)

I'd be fine with just not striking it out, though. That's pretty close to a bug, and this suggestion is a feature request.

Comment 7

[Tom Tromey :tromey]

I took a quick look at this last week.
It's somewhat harder than it first appears, in particular because it seems that the
"empty rule" filtering is done too early.  Use of "inherit" on an otherwise non-inheritable
property means that some rule that currently would be filtered out as irrelevant would
now have to be included.  Also this applies "even more" if the inherited rule itself
uses "inherit".

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Bug triage. Filter on CLIMBING SHOES