Bug 1385144 - Overlapping negative line numbers do not display as a stack. r?zer0
MozReview-Commit-ID: xlkj6OjL4n
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1157,22 +1157,50 @@ class CssGridHighlighter extends AutoRef
* column or row lines.
*
* See @param for renderLines.
*/
renderNegativeLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
startPos) {
let lineStartPos = startPos;
+ // Keep track of the number of collapsed lines per line position
+ let stackedLines = [];
+
const { lines } = gridDimension;
- for (let i = 0, line = lines[i]; i < lines.length; line = lines[++i]) {
+ for (let i = 0, line = lines[i++]; line; line = lines[i++]) {
let linePos = line.start;
+ let negativeLineNumber = i - lines.length - 1;
- const negativeLineNumber = i - lines.length;
+ // Check for overlapping lines. We render a second box beneath the last overlapping
+ // line number to indicate there are lines beneath it.
+ const gridLine = gridDimension.tracks[line.number - 1];
+
+ if (gridLine) {
+ const { breadth } = gridLine;
+
+ if (breadth === 0) {
+ stackedLines.push(negativeLineNumber);
+
+ if (stackedLines.length > 0) {
+ this.renderGridLineNumber(negativeLineNumber, linePos, lineStartPos,
+ line.breadth, dimensionType, 1);
+ }
+
+ continue;
+ }
+ }
+
+ // For negative line numbers, we want to display the smallest
+ // value at the front of the stack.
+ if (stackedLines.length) {
+ negativeLineNumber = stackedLines[0];
+ stackedLines = [];
+ }
this.renderGridLineNumber(negativeLineNumber, linePos, lineStartPos, line.breadth,
dimensionType);
}
}
/**
* Renders the grid area overlay on the css grid highlighter canvas.
@@ -1355,18 +1383,19 @@ class CssGridHighlighter extends AutoRef
*/
renderLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
startPos) {
let lineStartPos = startPos;
// Keep track of the number of collapsed lines per line position
let stackedLines = [];
- for (let i = 0; i < gridDimension.lines.length; i++) {
- let line = gridDimension.lines[i];
+ const { lines } = gridDimension;
+
+ for (let i = 0, line = lines[i++]; line; line = lines[i++]) {
let linePos = line.start;
// If you place something using negative numbers, you can trigger some implicit grid
// creation above and to the left of the explicit grid (assuming a horizontal-tb
// writing mode).
// The first explicit grid line gets the number of 1; any implicit grid lines
// before 1 get negative numbers, but do not get any positivity numbers.
// Since here we're rendering only the positive line numbers, we have to skip any
@@ -1374,24 +1403,28 @@ class CssGridHighlighter extends AutoRef
// For such lines the API returns always 0 as line's number.
if (line.number === 0) {
continue;
}
// Check for overlapping lines. We render a second box beneath the last overlapping
// line number to indicate there are lines beneath it.
const gridLine = gridDimension.tracks[line.number - 1];
+
if (gridLine) {
const { breadth } = gridLine;
+
if (breadth === 0) {
stackedLines.push(gridDimension.lines[i].number);
+
if (stackedLines.length > 0) {
this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
dimensionType, 1);
}
+
continue;
}
}
this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
dimensionType);
}
}