Making DevTools (Elements) for humans

[Jonathan Garbee]

Irish posted a link to Flexbox Game which uses this Webflow UX to design things with in Issue 398214. Upon taking a look around it, this is the kind of interface we should focus on adding to DevTools. It provides direct contextual information as to why things are calculated the way they are or not possible in other cases. Some take-aways from a few minutes using the product:

• Clear UX to a calculated value that is inherited from an ancestor.
• Disabled toggles for functionality not capable due to a constraint with a tooltip on why the functions aren't available. (In this case float has no affect on flex items.)
• Simple forms to provide box-shadow parameters, transform function values, and even a beautiful form to selecting the cursor value.
• Contextual information provided when a value is provided that has no effect since the constraints to use it are not present currently.

Providing this context to developers has been something we've known should be done for a while but finding a good UX for it has been rough. This webflow thing provides a solid foundation to look to for interactions that work.

Our current UX throws all the information at you and assumes the user can parse out the important parts. There are some open issues to help trim this down on the users behalf, but it doesn't go far enough. We should allow for the full dump still (since it is really useful to dig into problems.) However, our primary interface should end up being more webflow-like since it is human-friendly.