UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3241.0 Safari/537.36

Steps to reproduce the problem:
1. Open any example with CSS Custom Properties, e.g. https://codepen.io/malyw/pen/JreKVB
2. Try debugging CSS Custom Properties in DevTools style panel (div.test node)

What is the expected behavior?
User can find the applied CSS Custom Property values easily

What went wrong?
User cannot get the applied CSS Custom Property value and just can jump to the declaration using CTRL/CMD + click
Video: https://i.imgur.com/z4T7gRI.gif

Did this work before? N/A 

Chrome version: 64.0.3241.0  Channel: canary
OS Version: OS X 10.12.6
Flash Version: 

Proper debug abilities already implemented in the DevTools for the following browsers:
1) Safari: https://twitter.com/malyw/status/919968870080897026
2) Firefox: https://twitter.com/malyw/status/919898773232418816

Possible improvements from the above implementations:
1. Non-existing CSS Custom Properties highlighted e.g. in grey
2. Autocomplete with available CSC Custom Properties appears as only the user wants to add a CSS value like "var(--|)" , where "|" the position of the cursor