зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1249555 - Display edge of explicit grid and implicit grid differently in the css grid inspector r=pbro
This commit is contained in:
Gabriel Luong
Родитель
aee56ee331
Коммит
fb0c04683f
|
|
@ -14,8 +14,22 @@ const {
|
|||
const Services = require("Services");
|
||||
|
||||
const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
|
||||
const LINE_DASH_ARRAY = [5, 3];
|
||||
const LINE_STROKE_STYLE = "#483D88";
|
||||
const ROWS = "rows";
|
||||
const COLUMNS = "cols";
|
||||
const GRID_LINES_PROPERTIES = {
|
||||
"edge": {
|
||||
lineDash: [0, 0],
|
||||
strokeStyle: "#4B0082"
|
||||
},
|
||||
"explicit": {
|
||||
lineDash: [5, 3],
|
||||
strokeStyle: "#8A2BE2"
|
||||
},
|
||||
"implicit": {
|
||||
lineDash: [2, 2],
|
||||
strokeStyle: "#9370DB"
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* The CssGridHighlighter is the class that overlays a visual grid on top of
|
||||
|
|
@ -172,70 +186,122 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
|
|||
return fragment.cols.lines[fragment.cols.lines.length - 1].start;
|
||||
},
|
||||
|
||||
renderColLines(cols, {bounds}, startRowPos, endRowPos) {
|
||||
let y1 = (bounds.top / getCurrentZoom(this.win)) + startRowPos;
|
||||
let y2 = (bounds.top / getCurrentZoom(this.win)) + endRowPos;
|
||||
/**
|
||||
* Get the GridLine index of the last edge of the explicit grid for a grid dimension.
|
||||
*
|
||||
* @param {GridTracks} tracks
|
||||
* The grid track of a given grid dimension.
|
||||
* @return {Number} index of the last edge of the explicit grid for a grid dimension.
|
||||
*/
|
||||
getLastEdgeLineIndex(tracks) {
|
||||
let trackIndex = tracks.length - 1;
|
||||
|
||||
if (this.options.infiniteLines) {
|
||||
y1 = 0;
|
||||
y2 = parseInt(this.canvas.getAttribute("height"), 10);
|
||||
// Traverse the grid track backwards until we find an explicit track.
|
||||
while (trackIndex >= 0 && tracks[trackIndex].type != "explicit") {
|
||||
trackIndex--;
|
||||
}
|
||||
|
||||
for (let i = 0; i < cols.lines.length; i++) {
|
||||
let line = cols.lines[i];
|
||||
let x = (bounds.left / getCurrentZoom(this.win)) + line.start;
|
||||
this.renderLine(x, y1, x, y2);
|
||||
|
||||
// Render a second line to illustrate the gutter for non-zero breadth.
|
||||
if (line.breadth > 0) {
|
||||
x = x + line.breadth;
|
||||
this.renderLine(x, y1, x, y2);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderRowLines(rows, {bounds}, startColPos, endColPos) {
|
||||
let x1 = (bounds.left / getCurrentZoom(this.win)) + startColPos;
|
||||
let x2 = (bounds.left / getCurrentZoom(this.win)) + endColPos;
|
||||
|
||||
if (this.options.infiniteLines) {
|
||||
x1 = 0;
|
||||
x2 = parseInt(this.canvas.getAttribute("width"), 10);
|
||||
}
|
||||
|
||||
for (let i = 0; i < rows.lines.length; i++) {
|
||||
let line = rows.lines[i];
|
||||
let y = (bounds.top / getCurrentZoom(this.win)) + line.start;
|
||||
this.renderLine(x1, y, x2, y);
|
||||
|
||||
// Render a second line to illustrate the gutter for non-zero breadth.
|
||||
if (line.breadth > 0) {
|
||||
y = y + line.breadth;
|
||||
this.renderLine(x1, y, x2, y);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderLine(x1, y1, x2, y2) {
|
||||
this.ctx.save();
|
||||
this.ctx.setLineDash(LINE_DASH_ARRAY);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.translate(.5, .5);
|
||||
this.ctx.moveTo(x1, y1);
|
||||
this.ctx.lineTo(x2, y2);
|
||||
this.ctx.strokeStyle = LINE_STROKE_STYLE;
|
||||
this.ctx.stroke();
|
||||
this.ctx.restore();
|
||||
// The grid line index is the grid track index + 1.
|
||||
return trackIndex + 1;
|
||||
},
|
||||
|
||||
renderFragment(fragment, quad) {
|
||||
this.renderColLines(fragment.cols, quad,
|
||||
this.getFirstRowLinePos(fragment),
|
||||
this.getLastRowLinePos(fragment));
|
||||
this.renderLines(fragment.cols, quad, COLUMNS, "left", "top", "height",
|
||||
this.getFirstRowLinePos(fragment),
|
||||
this.getLastRowLinePos(fragment));
|
||||
this.renderLines(fragment.rows, quad, ROWS, "top", "left", "width",
|
||||
this.getFirstColLinePos(fragment),
|
||||
this.getLastColLinePos(fragment));
|
||||
},
|
||||
|
||||
this.renderRowLines(fragment.rows, quad,
|
||||
this.getFirstColLinePos(fragment),
|
||||
this.getLastColLinePos(fragment));
|
||||
/**
|
||||
* Render the grid lines given the grid dimension information of the
|
||||
* column or row lines.
|
||||
*
|
||||
* @param {GridDimension} gridDimension
|
||||
* Column or row grid dimension object.
|
||||
* @param {Object} quad.bounds
|
||||
* The content bounds of the box model region quads.
|
||||
* @param {String} dimensionType
|
||||
* The grid dimension type which is either the constant COLUMNS or ROWS.
|
||||
* @param {String} mainSide
|
||||
* The main side of the given grid dimension - "top" for rows and
|
||||
* "left" for columns.
|
||||
* @param {String} crossSide
|
||||
* The cross side of the given grid dimension - "left" for rows and
|
||||
* "top" for columns.
|
||||
* @param {String} mainSize
|
||||
* The main size of the given grid dimension - "width" for rows and
|
||||
* "height" for columns.
|
||||
* @param {Number} startPos
|
||||
* The start position of the cross side of the grid dimension.
|
||||
* @param {Number} endPos
|
||||
* The end position of the cross side of the grid dimension.
|
||||
*/
|
||||
renderLines(gridDimension, {bounds}, dimensionType, mainSide, crossSide,
|
||||
mainSize, startPos, endPos) {
|
||||
let lineStartPos = (bounds[crossSide] / getCurrentZoom(this.win)) + startPos;
|
||||
let lineEndPos = (bounds[crossSide] / getCurrentZoom(this.win)) + endPos;
|
||||
|
||||
if (this.options.infiniteLines) {
|
||||
lineStartPos = 0;
|
||||
lineEndPos = parseInt(this.canvas.getAttribute(mainSize), 10);
|
||||
}
|
||||
|
||||
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 (i == 0 || i == lastEdgeLineIndex) {
|
||||
this.renderLine(linePos, lineStartPos, lineEndPos, dimensionType, "edge");
|
||||
} else {
|
||||
this.renderLine(linePos, lineStartPos, lineEndPos, dimensionType,
|
||||
gridDimension.tracks[i - 1].type);
|
||||
}
|
||||
|
||||
// Render a second line to illustrate the gutter for non-zero breadth.
|
||||
if (line.breadth > 0) {
|
||||
linePos = linePos + line.breadth;
|
||||
this.renderLine(linePos, lineStartPos, lineEndPos, dimensionType,
|
||||
gridDimension.tracks[i].type);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the grid line on the css grid highlighter canvas.
|
||||
*
|
||||
* @param {Number} linePos
|
||||
* The line position along the x-axis for a column grid line and
|
||||
* y-axis for a row grid line.
|
||||
* @param {Number} startPos
|
||||
* The start position of the cross side of the grid line.
|
||||
* @param {Number} endPos
|
||||
* The end position of the cross side of the grid line.
|
||||
* @param {String} dimensionType
|
||||
* The grid dimension type which is either the constant COLUMNS or ROWS.
|
||||
* @param {[type]} lineType
|
||||
* The grid line type - "edge", "explicit", or "implicit".
|
||||
*/
|
||||
renderLine(linePos, startPos, endPos, dimensionType, lineType) {
|
||||
this.ctx.save();
|
||||
this.ctx.setLineDash(GRID_LINES_PROPERTIES[lineType].lineDash);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.translate(.5, .5);
|
||||
|
||||
if (dimensionType == COLUMNS) {
|
||||
this.ctx.moveTo(linePos, startPos);
|
||||
this.ctx.lineTo(linePos, endPos);
|
||||
} else {
|
||||
this.ctx.moveTo(startPos, linePos);
|
||||
this.ctx.lineTo(endPos, linePos);
|
||||
}
|
||||
|
||||
this.ctx.strokeStyle = GRID_LINES_PROPERTIES[lineType].strokeStyle;
|
||||
this.ctx.stroke();
|
||||
this.ctx.restore();
|
||||
},
|
||||
|
||||
_hide() {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче