I think devtools should communicate to the developer that a page is in quirks mode (except for about:blank pages that are not interacted with), and maybe also provide tools to help transition from quirks mode to no-quirks mode.

Sometimes when people have a problem with CSS and they find removing the doctype "fixes" it, they assume that using quirks mode is the right way of doing things. I think we should communicate better that it's not.

Quirks mode has behaviors that are confusing and generally it is recommended to not use it. For example IDs and class names being case-insensitive can introduce bugs.

Ideas to communicate quirks mode being active:

* The DOM view can have an error message for the doctype (or at the top if there is no doctype).
* There could be a warning logged in the console.
* Firefox error-highlights parse errors in "view source", which highlights quirky doctypes or if the first thing is a tag instead of a doctype.

Ideas to help transition from quirks mode to no-quirks mode:

* Highlight what causes layout to be different in quirks mode. I don't have good ideas about how but I think this is what people will have the most trouble with. (Maybe highlight quirk.css UA styles in Styles tab?)
* Error-highlight CSS values in the Styles tab that are using https://quirks.spec.whatwg.org/#the-hashless-hex-color-quirk or https://quirks.spec.whatwg.org/#the-unitless-length-quirk
* Error-highlight ":active" and ":hover" selectors in Styles tab https://quirks.spec.whatwg.org/#the-active-and-hover-quirk
* Highlight <p><table> HTML parser quirk somewhere (DOM view? console?).
* etc; search for quirks in the codebase.