1526975 - Implicit grid area names are not displayed in inspector grid layout overlay

Status: RESOLVED FIXED

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

Description

[Steve Lee]

On page https://w3c.github.io/wai-coga/coga-draft/guide/

and selecting the left nav parent div in the inspector
with "show grid area names" and "div.default-grid with-gap.leftcol" checked

The grid area names are not shown i nthe overlay grid.

I wonder if this is as the columns are really long and the names are centred so are off screen?

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Looking at the page, it seems to be defining grid line names instead of grid area names. Show grid area names would show you the names defined in grid-template-area. I am gonna say this is a duplicate of our bug to implementing the first version of showing grid line names.

Comment 2

[Steve Lee]

@Gabriel

Sure but the 2 are closely related if you define names you get the areas and visa versa.
Even though the lines are defined area is used to position children in this example.

Comment 3

[Patrick Brosset <:pbro>]

Steve is right, and the spec mentions this:
https://www.w3.org/TR/css-grid-1/#implicit-named-areas

Since a named grid area is referenced by the implicit named lines it produces, explicitly adding named lines of the same form (foo-start/foo-end) effectively creates a named grid area. Such implicit named areas do not appear in the value of grid-template-areas, but can still be referenced by the grid-placement properties.

So, the grid inspector should pick those implicit area names too.

Comment 4

[Patrick Brosset <:pbro>]

Bug 1456590 dealt with something related to this a while ago. Let's make sure we keep this bug in mind before attempting a fix here, to avoid side effects where the line name auto-complete becomes confusing again.

Comment 5

[Steve Lee]

Thanks!

Comment 6

[Brad Werth [:bradwerth]]

(In reply to Patrick Brosset <:pbro> from comment #4)

Bug 1456590 dealt with something related to this a while ago. Let's make sure we keep this bug in mind before attempting a fix here, to avoid side effects where the line name auto-complete becomes confusing again.

If we turn this back on -- returning the names of implicit lines defined by implicit areas -- then we will re-introduce the confusion noted in Bug 1456590. It's a judgment call. At the time, Mats noted that the API could return all names and let devtools decide which ones to display or not display, which I argued against. If that's what we want to do now, then https://bugzilla.mozilla.org/show_bug.cgi?id=1456590#c9 describes how these lines could be identified by devtools.

Comment 7

[Brad Werth [:bradwerth]]

Let's change the API to make it return ALL implicitly named lines, including lines associated with implicit areas. This will revert the work of Bug 1456590. To prevent the problem noted in that bug, we should also add some logic to the DevTools to ignore these "double implicit" lines in the auto-completion pop-ups.

Comment 8

[Micah [:mtigley] (she/her)]

Attachment: Bug 1526975 Part 1: Undo omitting line names from implicitly named areas.

Comment 9

[Micah [:mtigley] (she/her)]

Attachment: Bug 1526975 Part 2: Update test expectations to check that implicit line names from implicit named areas are assigned to lines.

Comment 10

[Micah [:mtigley] (she/her)]

Attachment: Bug 1526975: Filter out implicit grid line names in text-property-editor's autocomplete.

Comment 11

[Micah [:mtigley] (she/her)]

The final part of this bug needs some consideration around how we want to be showing these implicit named areas. Currently, we show the area name for each grid cell belonging to that area, but these are only explicit named areas. Now that we are going to show these implicit named areas, we're going to have a bit of clutter with overlapping area labels, info-bars, etc...

Throwing around some ideas, maybe we can show the implicit grid areas differently from the explicit ones. We could draw an arrow near the edge of the grid container highlight and label it with the implicit area. These arrows could be toggled from the Grid inspector panel maybe as a sub-list under "Display area names". Or perhaps we can list all the areas in the same text box and info-bar if a grid cell happens to belong to more than one implicit named area.

Martin and Victoria, you might be able to provide more insights on this?

Comment 12

[Victoria Wang [:victoria]]

Attachment: image.png

Just copying over some of my comments from the slack discussion:

What about two labels on top of each other like this [image]?
Or maybe the implicit name only shows up upon hovering the area
(I'm not sure I fully understand the use case)
maybe we could start with both labels (plus a setting to turn off implicit?) and see if it does look cluttery in practice.

Comment 13

[Martin Balfanz [:mbalfanz]]

I like the suggestion of showing both, but I'd like to optimize this a little bit.

My suggestion would be:

• explicit grid => solid outline
• implicit grid => dashed outline
• both implicit and explicit with same name => both outlines, inner solid, outer dashed
• both implicit and explicit with different name => stacking as in Victorias attachment

My hope is that the last case is extremely rare.

Comment 14

[Phabricator Automation]

Comment on attachment 9046903 [details]
Bug 1526975 Part 2: Update test expectations to check that implicit line names from implicit named areas are assigned to lines.

Revision D21298 was moved to bug 1531982. Setting attachment 9046903 [details] to obsolete.

Comment 15

[Phabricator Automation]

Comment on attachment 9046900 [details]
Bug 1526975 Part 1: Undo omitting line names from implicitly named areas.

Revision D21297 was moved to bug 1531982. Setting attachment 9046900 [details] to obsolete.

Comment 16

[Micah [:mtigley] (she/her)]

https://treeherder.mozilla.org/testview.html?repo=try&revision=feb36fcfb884968fba749e7e5e51cc14e1e50526

Comment 17

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

There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:mtigley, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 18

[Micah [:mtigley] (she/her)]

Landing this was delayed since Try tests were timing out specifically on Linux. Added a skip-if = os =='linux' flag to the browser.ini file so that we can get this landed.

Comment 19

[Micah [:mtigley] (she/her)]

I'm going to create a follow-up for showing the implicit grid areas in the CSS grid inspector highlighter and resolve this once https://phabricator.services.mozilla.com/D21308 lands.

See Bug 1553312 for showing the names of implicit grid areas.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e61809618043
Filter out implicit grid line names in text-property-editor's autocomplete. r=gl,bradwerth

Comment 21

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/e61809618043