Closed Bug 1312931 Opened 8 years ago Closed 8 years ago

UI Review of CSS Grid Highlighter

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(Not tracked)

RESOLVED INVALID

People

(Reporter: gl, Unassigned)

References

(Blocks 2 open bugs)

Details

Attachments

(1 obsolete file)

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
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?
Flags: needinfo?(hholmes)
Stroke style is the line color.
Line widths are also 1px.
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.
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?
Flags: needinfo?(hholmes) → needinfo?(gl)
Flags: needinfo?(gl) → needinfo?(hholmes)
Attached image grid.svg (obsolete) (deleted) —
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).
Flags: needinfo?(hholmes)
Attachment #8806342 - Attachment is obsolete: true
Moved grid.svg as an attachment to Bug 1302536.
Flags: needinfo?(hholmes)
Clearing ni, left review on patch in bug 1302536.
Flags: needinfo?(hholmes)
Gabriel, do we still need this?
Flags: needinfo?(gl)
Status: NEW → RESOLVED
Closed: 8 years ago
Flags: needinfo?(gl)
Resolution: --- → INVALID
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: