1940198 - Firefox should try to align grid-template-areas even if malformed

Status: RESOLVED FIXED

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

Description

[Ambrose Li]

Attachment: Screenshot_2025-01-06_23-39-04.png

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

Steps to reproduce:

Specify a complex grid-template-areas but make some minor error (e.g. omit 1 or 2 values in one of the string values)

Actual results:

The entire grid-template-areas is struck out with a ! flag, without any attempted alignment

Expected results:

If all specified values are space-separate strings (looks syntactically correct in isolation), Firefox should still attempt to align the substrings, or offer to align the substrings (e.g., if the user presses a button). Currently it’s very difficult to see where the error is if the grid-template-areas expression is complex enough.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Grid' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

Can you share a reduced testcase?

Comment 3

[Emily McDonough [:alaskanemily]]

Moving this to devtools, this appears to be requesting a feature for how the inspector displays CSS rules.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Test page: data:text/html,<meta charset=utf8><style>body { display: grid; grid-template-areas: ". . . ." "title title title . subtitle" "subtitle2 subtitle2 subtitle2 subtitle2. subtitle" "month info . . subtitle" "month info . subtitle" "month info . . edition edition edition" ". . . . . ." "contact contact contact contact contact contact"; }</style>Hello

I agree that it's hard to debug the property, and having it displayed like when it's valid would help

The formatting is handled in https://searchfox.org/mozilla-release/rev/9cbfae27052e4aaeb064d2d08e7e869f31ee4288/devtools/client/inspector/rules/views/text-property-editor.js#634-641

if (
  this.valueSpan.textProperty?.name === "grid-template-areas" &&
  this.isValid() &&
  (this.valueSpan.innerText.includes(`"`) ||
    this.valueSpan.innerText.includes(`'`))
) {
  this._formatGridTemplateAreasValue();
}

We could try to remove the this.isValid() check.
And if we do this, we should probably update the test we have that checks invalid values we're not https://searchfox.org/mozilla-release/rev/9cbfae27052e4aaeb064d2d08e7e869f31ee4288/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js#23-26,145-157

#testid-invalid-strings {
  grid-template-areas: "a   a   b"
                    "a   a";
}
...
// test that when invalid strings values do not get formatted
info("testing it does not try to format invalid values");
await selectNode("#testid-invalid-strings", inspector);
const invalidGridRuleProperty = await getRuleViewProperty(
  view,
  "#testid-invalid-strings",
  "grid-template-areas"
).valueSpan;
is(
  invalidGridRuleProperty.innerText,
  '"a a b" "a a"',
  "the invalid strings values do not get formatted"
);

Comment 5

[gopi]

Hello,

I'm a new contributor and would like to work on fixing this bug.

I will be following the excellent roadmap provided by :nchevobbe in Comment 4, which involves removing the this.isValid() check and updating the corresponding test.

I'll get my development environment set up and will post updates on my progress here. Thanks!

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

(In reply to gopi from comment #5)

Hello,

I'm a new contributor and would like to work on fixing this bug.

I will be following the excellent roadmap provided by :nchevobbe in Comment 4, which involves removing the this.isValid() check and updating the corresponding test.

I'll get my development environment set up and will post updates on my progress here. Thanks!

Hello gopi, that's great to here, let me assign the bug to you

Comment 7

[gopi]

Attachment: Bug 1940198 - Align malformed grid-template-areas in the inspector. r=#devtools.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a47d39273b6e
https://hg.mozilla.org/integration/autoland/rev/43eee1df4dfb
Align malformed grid-template-areas in the inspector. r=devtools-reviewers,jdescottes.

Comment 9

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/43eee1df4dfb