1282728 - Add an infinite-line mode to the CSS Grids highlighter

Status: RESOLVED DUPLICATE of bug 1282726

(DevTools :: Inspector, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

Bug 1282726 adds a new highlighter for CSS Grids. By default, it will highlight lines inside the implicit grid, but in some cases, it is useful to have lines extend all the way to the limits of the viewport in order to check the alignment of the grid with the whole page.

The highlighter should support a mode to do this.

Comment 1

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 2

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

This can be accomplished by the following steps with BUg 1282726:

- open a page that has a css grid (e.g. http://gridbyexample.com/examples/code/layout4.html )
- open the inspector and select the node with class 'wrapper' in the markup-view
- open scratchpad, switch it to browser environment
- execute the following code in scratchpad:

/* -sp-context:browser */
var t = [...gDevTools._toolboxes][0][1];
var i = t.getPanel("inspector");
t.highlighterUtils.getHighlighterByType("CssGridHighlighter").then(h => {
  h.show(i.selection.nodeFront, {
    infiniteLines: true
  });
});