1312931 - UI Review of CSS Grid Highlighter

Status: RESOLVED INVALID

(DevTools :: Inspector, defect, P3)

Description

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

Since we are starting to expose the CSS grid highlighter with Bug 1302536, we should do an ui-review of the current grid line styles.

Try build for testing - https://treeherder.mozilla.org/#/jobs?repo=try&revision=7bef8342f77a

Comment 1

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

The following are our grid line properties defined in css-grid.js:
const GRID_LINES_PROPERTIES = {
  "edge": { // Edge of explicit grid
    lineDash: [0, 0], // Line dash setting for canvas, dashes are 0px and spaces are 0px
    strokeStyle: "#4B0082"
  },
  "explicit": { // Explicit grid line, inner lines
    lineDash: [5, 3], // Dashes are 5px and spaces are 5px
    strokeStyle: "#8A2BE2"
  },
  "implicit": { // Implicit grid line
    lineDash: [2, 2], // Dashes are 2px and spaces are 2px
    strokeStyle: "#9370DB"
  }
};

The following is the canvas pattern properties to render the grid gaps:
// px
const GRID_GAP_PATTERN_WIDTH = 14;
const GRID_GAP_PATTERN_HEIGHT = 14;
const GRID_GAP_PATTERN_LINE_DASH = [5, 3];
const GRID_GAP_PATTERN_STROKE_STYLE = "#9370DB";

The grid gap is rendered as follows: http://searchfox.org/mozilla-central/source/devtools/server/actors/highlighters/css-grid.js#230. It essentially draw a 14x14 box and draws a line dash from one corner to the other depending on whether the grid gap is for a column or row.

Line Dash playground: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

Helen, can you review some of the specs that we have here and see if we need any adjustments?

Comment 2

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

Stroke style is the line color.

Comment 3

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

Line widths are also 1px.

Comment 4

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

Also, another suggestion is should we show infinite lines by default with bug 1302536. Maybe this try build is good enough for the focus group to propose what we should ship.

Comment 5

[Helen V. Holmes (:helenvholmes) (:✨)]

Gabe, when you get a chance—

I'm having issues with a "damaged disk issue" when I try to download and mount your try-build. Can you follow up on IRC about it?

Comment 6

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

New try build - https://treeherder.mozilla.org/#/jobs?repo=try&revision=60fdbdfd88f7

Comment 7

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

Another try build - https://treeherder.mozilla.org/#/jobs?repo=try&revision=38c6d7968e5c

Comment 8

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: grid.svg

This one has a stroke color attribute that should be removed (just so that it can be downloaded and checked in a lower dpi monitor, I'm on 300 dpi for the day).

Comment 9

[Helen V. Holmes (:helenvholmes) (:✨)]

Moved grid.svg as an attachment to Bug 1302536.

Comment 10

[Helen V. Holmes (:helenvholmes) (:✨)]

Clearing ni, left review on patch in bug 1302536.

Comment 11

[Matteo Ferretti [:zer0] [:matteo]]

Gabriel, do we still need this?