1860544 - [meta] Improve overwritten property values UX

Status: NEW

(DevTools :: Inspector: Rules, enhancement)

Description

[Sebastian Zartner [:sebo]]

I took bug 1845075 as opportunity to summarize the changes related to improving the UX regarding overridden properties. Some bugs already exist, though here are some more suggestions:

• Strike through only the overwritten longhand values in shorthands
  This is not always applicable, as some shorthands overwrite a longhand but don't allow to set it explicitly, e.g. font => font-feature-settings or the different logical properties.
  Regarding logical properties, which value in the shorthand is overwritten is also dependent of writing-mode, direction and text-orientation, so it's not trivial.
• Strike through logical longhands that are overwritten by shorthands
  That's the opposite from the point above. Logical longhands may be overwritten by shorthands. So those should be striked out as well.
• Strike through physical longhands that are overwritten by logical longhands and vice versa
  Physical longhands may be overwritten by logical ones and the other way round. So those should be striked out as well.
• List physical longhand overwritten in shorthand by logical longhand
  When a physical longhand value overwrites a value in a shorthand, it is listed striked out below the shorthand. This should also be the case when a logical longhand overwrites a value of a shorthand. Though it needs to be mapped which physical longhand is overwritten depending on writing-mode, direction and text-orientation, so it's not trivial.
• Provide info by what a property is overwritten
  There should be some info describing by what a property or one of its values is overwritten.
  This could be done similar to the inactive CSS icon via a tooltip referring to the property that is overwriting the current value.

Sebastian