As we adopt more variables, it should be really easy to see the resolved values while tweaking rules. Two ideas i have: 1. Replace variables with their values when Shift or Option is held down 2. Show a popover with the value or variable declaration when hovering a variable token
<rdar://problem/30480063>
I agree that seeing variable values would be very useful. Tangentially, I often want to see a computed value in the Rules panel. A couple of examples: font-size: 1.2em; // 16px top: calc(5vh - 12px); // 321px Switching to "Styles — Computed" and glancing over through the list of all properties is tedious.
Over IRC Devin and I discussed some possible UI. Currently we're considering an equals sign swatch [=] immediately before the "var" token, similar to the editing swatches shown for the Bezier curves. Clicking the swatch would compute the value of the variable and display it in a popover. In the future, we could replace the "var(...)" text with the computed value, and allow live editing of the variable.
Created attachment 301420 [details] Patch
Created attachment 301421 [details] [Image] After Patch is applied
Created attachment 301430 [details] Patch
Created attachment 301431 [details] [Image] After Patch is applied
Comment on attachment 301430 [details] Patch Clearing flags on attachment: 301430 Committed r212273: <http://trac.webkit.org/changeset/212273>
All reviewed patches have been landed. Closing bug.
I think the '=' glyph is unintuitive, but better than nothing. Maybe an underline for the thing with a popup with be less awkward. (Tim, can you comment r=me in the bug? I couldn't tell in radar or email what happened to land this)
Comment on attachment 301430 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=301430&action=review Nice! > Source/WebInspectorUI/UserInterface/Images/CSSVariable.svg:1 > +<?xml version="1.0" encoding="utf-8"?> Is there an Images/gtk variant? > Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js:901 > + const dontCreateIfMissing = true; Nit: I find "doNot" to be much clearer than "dont" > Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js:207 > + const variableRegex = /var\((--[\w-]+)\)/g; Technically non-ASCII and escape sequences are allowed in the identifier, not just \w. But That is likely to be so rare its fine to ignore it here for simplicity: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram