Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-07 07:04:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1369942 - Display Negative Line Numbers in CSS Grid Inspector. r=zer0

Browse Source 
MozReview-Commit-ID: FmOj7jVT3Ll
This commit is contained in:
Micah Tigley 2017-07-26 18:27:36 -06:00
parent bcac1f2797
commit 0bdc10be67
2 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/preferences/devtools.js
View File

@ -83,6 +83,7 @@ pref("devtools.gridinspector.gridOutlineMaxRows", 50);
pref("devtools.gridinspector.showGridAreas", false);
pref("devtools.gridinspector.showGridLineNumbers", false);
pref("devtools.gridinspector.showInfiniteLines", false);
pref("devtools.gridinspector.showNegativeLineNumbers", false);
// Whether or not the box model panel is opened in the computed view
pref("devtools.computed.boxmodel.opened", true);

42
devtools/server/actors/highlighters/css-grid.js
View File

@ -34,6 +34,7 @@ const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
const NEGATIVE_LINE_NUMBERS_PREF = "devtools.gridinspector.showNegativeLineNumbers";
const DEFAULT_GRID_COLOR = "#4B0082";
@ -1141,6 +1142,35 @@ class CssGridHighlighter extends AutoRefreshHighlighter {
this.getFirstRowLinePos(fragment));
this.renderLineNumbers(fragment.rows, ROWS, "top", "left",
this.getFirstColLinePos(fragment));
if (Services.prefs.getBoolPref(NEGATIVE_LINE_NUMBERS_PREF)) {
this.renderNegativeLineNumbers(fragment.cols, COLUMNS, "left", "top",
this.getLastRowLinePos(fragment));
this.renderNegativeLineNumbers(fragment.rows, ROWS, "top", "left",
this.getLastColLinePos(fragment));
}
}
}
/**
* Render the negative grid lines given the grid dimension information of the
* column or row lines.
*
* See @param for renderLines.
*/
renderNegativeLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
startPos) {
let lineStartPos = startPos;
const { lines } = gridDimension;
for (let i = 0, line = lines[i]; i < lines.length; line = lines[++i]) {
let linePos = line.start;
const negativeLineNumber = i - lines.length;
this.renderGridLineNumber(negativeLineNumber, linePos, lineStartPos, line.breadth,
dimensionType);
}
}
@ -1480,6 +1510,18 @@ class CssGridHighlighter extends AutoRefreshHighlighter {
// centered on the line, and in the middle of the gap if there is any.
let x, y;
let startOffset = (boxHeight + 2) / devicePixelRatio;
if (Services.prefs.getBoolPref(NEGATIVE_LINE_NUMBERS_PREF)) {
// If the line number is negative, offset it from the grid container edge,
// (downwards if its a column, rightwards if its a row).
if (lineNumber < 0) {
startPos += startOffset;
} else {
startPos -= startOffset;
}
}
if (dimensionType === COLUMNS) {
x = linePos + breadth / 2;
y = startPos;