Closed
Bug 1312931
Opened 8 years ago
Closed 8 years ago
UI Review of CSS Grid Highlighter
Categories
(DevTools :: Inspector, defect, P3)
DevTools
Inspector
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
Reporter | ||
Comment 1•8 years ago
|
||
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?
Reporter | ||
Updated•8 years ago
|
Flags: needinfo?(hholmes)
Reporter | ||
Comment 2•8 years ago
|
||
Stroke style is the line color.
Reporter | ||
Comment 3•8 years ago
|
||
Line widths are also 1px.
Reporter | ||
Comment 4•8 years ago
|
||
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•8 years ago
|
||
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)
Reporter | ||
Comment 6•8 years ago
|
||
Flags: needinfo?(gl) → needinfo?(hholmes)
Reporter | ||
Comment 7•8 years ago
|
||
Another try build - https://treeherder.mozilla.org/#/jobs?repo=try&revision=38c6d7968e5c
Comment 8•8 years ago
|
||
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)
Updated•8 years ago
|
Attachment #8806342 -
Attachment is obsolete: true
Comment 9•8 years ago
|
||
Moved grid.svg as an attachment to Bug 1302536.
Updated•8 years ago
|
Flags: needinfo?(hholmes)
Updated•8 years ago
|
Blocks: devtools/highlighters
Reporter | ||
Updated•8 years ago
|
Status: NEW → RESOLVED
Closed: 8 years ago
Flags: needinfo?(gl)
Resolution: --- → INVALID
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•