The main goal of bug 1181227 is to display grid lines in a css grid container. But it's also very important to display the names of lines, because that's an information that's used when positioning elements. So if the names of lines would appear on the overlay, this would be very helpful. This is complex because of the number of names a line can have is potentially high. - A line has an index, that's not a name per say, but should be displayed along with the other names too - Items can also be positioned with negative indexes, so on top of showing the 1...N numbers, this should also show the -1...-N numbers - A line can be given 1 or more custom names - Lines wrapping areas are given automatic names <area-name>-start and <area-name>-end - Line names don't only come from the grid definition css properties. Implicit lines can be created by positioning an item at a line with a name that does not exists yet. These implicit names should appear too

(In reply to Patrick Brosset [:pbro] from comment #0) > - Line names don't only come from the grid definition css properties. > Implicit lines can be created by positioning an item at a line with a name > that does not exists yet. These implicit names should appear too I'm not sure how to get these implicit line names though. Consider the following example: #grid { display: grid; grid-template-columns: [col-line-1] 100px [col-line-2]; grid-template-rows: [row-line-1] 100px [row-line-2]; grid-auto-rows: 100px; grid-auto-columns: 100px; } .item{ grid-row: undefined; grid-column: undefined; } With the following markup: <div id="grid"> <div class="item"></div> </div> Using the computed style, I can easily get the "final" list of lines: let el = document.querySelector("#grid"); let rows = getComputedStyle(el).gridTemplateRows; This returns: "[row-line-1] 100px [row-line-2] 100px 100px" Which is nice because the implicit tracks are there, so I can use this information to draw an overlay on the grid. But it'd be even nicer if the [undefined] line names would be listed in there too. @Mats: would it be possible to add this information? Or would an other (chrome only?) API be better suited for this?

Merely using a (non-existent) line name to place an item does not create that line name in the grid. It might be nice to see which line "undefined" was resolved to in the overlay, but it might also give the wrong impression if it's presented like any other line name? Anyway, I think element.gridTemplateRows/Columns is insufficient for your needs, for two reasons: 1. it lacks line numbers (which I assume you want to present). There can be implicit lines before line 1 on the start side; for example if you use "grid-column: undefined -1" above, you'll create a column *before* line 1 and that track will be first in gridTemplateColumns, but you can't tell that line 1 actually comes *after* the first column. And with repeat(auto-fit) empty tracks may have been removed in the middle (they are absent in gridTemplateColumns) so multiple line numbers effectively starts at the same track. 2. gridTemplateRows/Columns only contains names that comes from the grid-template-* properties. It doesn't contain line names that comes from the grid-template-areas property. > would it be possible to add this information? No, gridTemplateRows/Columns is defined by the Grid spec and it seems highly unlikely that we can change the spec here, given that the spec explicitly mentions "compatibility with early implementations". https://drafts.csswg.org/css-grid/#resolved-track-list > Or would an other (chrome only?) API be better suited for this? Definitely. I'd be happy to help flesh out the IDL for this, but it's probably more efficient if someone else implements the IDL/DOM side of this. That's bug 1241932.

Thanks Mats!

The new chrome-only API el.getGridFragments has landed in m-c and already contains the line names and numbers.

Patrick, you will find this patch only displays the line number beside the grid line. I would like to discuss some technicalities with getting what we have on Helen's design (drawing over the grid line), and have that in a separate patch part. I also need some styling information (font size/style and amount of padding before drawing the lines and what happens if the line is not that big) from Helen which I will also ask her next week and implement it again on a separate patch. I feel we can move quickly in the meantime by displaying the grid numbers as an option for the time being.

Comment on attachment 8784106 [details] [diff] [review] Part 1: Display the line numbers in the css grid highlighter Review of attachment 8784106 [details] [diff] [review]: ----------------------------------------------------------------- ::: devtools/server/actors/highlighters/css-grid.js @@ +251,5 @@ > let lastEdgeLineIndex = this.getLastEdgeLineIndex(gridDimension.tracks); > for (let i = 0; i < gridDimension.lines.length; i++) { > let line = gridDimension.lines[i]; > let linePos = (bounds[mainSide] / getCurrentZoom(this.win)) + line.start; > + if (this.options.showGridLineNumbers) { There is actually a new line that separates line 254-255 but is not shown on bugzilla review. @@ +306,5 @@ > this.ctx.strokeStyle = GRID_LINES_PROPERTIES[lineType].strokeStyle; > this.ctx.stroke(); > this.ctx.restore(); > }, > + /** There is also a new line between line 309 - 310 that is not shown.

Comment on attachment 8784106 [details] [diff] [review] Part 1: Display the line numbers in the css grid highlighter Review of attachment 8784106 [details] [diff] [review]: ----------------------------------------------------------------- Looks simple enough for a quick R+, especially because this bug is leave-open and you want to post new patches to make the UI better. So no use adding review comments here. I'll do a more thorough review on the next patches.

https://hg.mozilla.org/integration/fx-team/rev/cfe0aca91c8a5c6625ea5b09b1b0114bfd817199 Bug 1249557 - Part 1: Display the line numbers in the css grid highlighter r=pbro