Bug 168172 – Web Inspector: provide a way to show current value of CSS variables in style rules

• Component: Web Inspector
• Status: RESOLVED FIXED

[Blaze Burg]

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

[Radar WebKit Bug Importer]

<rdar://problem/30480063>

[Nikita Vasilyev]

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.

[Matt Baker]

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.

[Devin Rousso]

Created attachment 301420 [details]
Patch

[Devin Rousso]

Created attachment 301421 [details]
[Image] After Patch is applied

[Devin Rousso]

Created attachment 301430 [details]
Patch

[Devin Rousso]

Created attachment 301431 [details]
[Image] After Patch is applied

[WebKit Commit Bot]

Comment on attachment 301430 [details]
Patch

Clearing flags on attachment: 301430

Committed r212273: <http://trac.webkit.org/changeset/212273>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Blaze Burg]

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)

[Joseph Pecoraro]

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