1873233 - Shape editor not available/ broken when a value inside shape function is/ changes to a CSS variable

Status: NEW

(DevTools :: Inspector: Rules, defect, P3)

Description

[Ana Tudor]

Attachment: shapeeditor.webm

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

Consider the following clip-path shapes:

clip-path: inset();
clip-path: circle();
clip-path: polygon(80% 0, 0 0, 0 80%);

All of these make the visual shape editor button to show up before the basic shape.

Now consider these clip-path shapes using some CSS variable value inside.

--a: 35%;

clip-path: inset(var(--b, 1em));
clip-path: inset(var(--a, 1em));
clip-path: inset(var(--a));

clip-path: circle(var(--b, 5em));
clip-path: circle(var(--a, 5em));
clip-path: circle(var(--a));

clip-path: polygon(var(--b, 9em) 0, 0 0, 0 80%);
clip-path: polygon(var(--a, 9em) 0, 0 0, 0 80%);
clip-path: polygon(var(--a) 0, 0 0, 0 80%);

Live test https://codepen.io/thebabydino/pen/qBvZWOa?editors=0100

Actual results:

All of these are valid CSS and they work correctly, but the visual shape editor button doesn't show up when there's a CSS variable inside the shape function (even though hovering these variables shows their value in a tooltip).

Also, when the visual shape editor is on for one of the shapes that's created without using a CSS variable and we then change the shape value in the Rules tab in DevTools to use a CSS variable, then the handles remain and dragging them results in a broken interaction.

Expected results:

I would expect that the button would show up for any shape, including those created by CSS variable values and that dragging the handles would replace the CSS variable with the new value, just like it happens for keywords like closest-side.

Comment 1

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Setting the Product to ‘DevTools’ and the Component to ‘Inspector’. Please change if there’s a better fit, thank you.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

The issue is that we enter the sawVariable if block so we're not getting into the #appendShape function https://searchfox.org/firefox-main/rev/a5316cedc669bcec09efae23521e0af6b9d3d257/devtools/client/shared/output-parser.js#549,595,645-649

if (sawVariable) {
...
} else {
...
  } else if (
    options.expectShape &&
    BASIC_SHAPE_FUNCTIONS.has(lowerCaseFunctionName)
  ) {
    this.#appendShape(functionText, options);

(note that this impact other functions, like linear)

So we would need to refactor this so we could enter into all the different functions even when there's CSS variables.
Then we'd need to make appendShape (and alike), being able to consume a mix of strings and elements, like we already do in https://searchfox.org/firefox-main/rev/a5316cedc669bcec09efae23521e0af6b9d3d257/devtools/client/shared/output-parser.js#583-593

// If function contains variable, we need to add both strings
// and nodes.
this.#appendTextNode(functionName + "(");
for (const data of functionData) {
  if (typeof data === "string") {
    this.#appendTextNode(data);
  } else if (data) {
    this.#append(data.node);
  }
}
this.#appendTextNode(")");

Then there might be an issue in how we "highlight" a given coord in the Rule when hovering the editor control point in the page, as variables are not necessarily only mapping to a single point, but that's not the most important, and ultimately we could just not do it when there are variables, as long as the editor works fine