--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -16,38 +16,40 @@ const {
const {
getCurrentZoom,
setIgnoreLayoutChanges,
getWindowDimensions
} = require("devtools/shared/layout/utils");
const { stringifyGridFragments } = require("devtools/server/actors/utils/css-grid-utils");
const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
+const DEFAULT_GRID_COLOR = "#4B0082";
const ROWS = "rows";
const COLUMNS = "cols";
+
const GRID_LINES_PROPERTIES = {
"edge": {
lineDash: [0, 0],
- strokeStyle: "#4B0082"
+ alpha: 1,
},
"explicit": {
lineDash: [5, 3],
- strokeStyle: "#8A2BE2"
+ alpha: 0.75,
},
"implicit": {
lineDash: [2, 2],
- strokeStyle: "#9370DB"
+ alpha: 0.5,
}
};
// 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";
+const GRID_GAP_ALPHA = 0.5;
/**
* Cached used by `CssGridHighlighter.getGridGapPattern`.
*/
const gCachedGridPattern = new WeakMap();
// WeakMap key for the Row grid pattern.
const ROW_KEY = {};
// WeakMap key for the Column grid pattern.
@@ -59,16 +61,19 @@ const COLUMN_KEY = {};
*
* Usage example:
* let h = new CssGridHighlighter(env);
* h.show(node, options);
* h.hide();
* h.destroy();
*
* Available Options:
+ * - color(colorValue)
+ * @param {String} colorValue
+ * The color that should be used to draw the highlighter for this grid.
* - showGridArea(areaName)
* @param {String} areaName
* Shows the grid area highlight for the given area name.
* - showAllGridAreas
* Shows all the grid area highlights for the current grid.
* - showGridLineNumbers(isShown)
* @param {Boolean}
* Displays the grid line numbers on the grid lines if isShown is true.
@@ -246,16 +251,20 @@ CssGridHighlighter.prototype = extend(Au
get ctx() {
return this.canvas.getCanvasContext("2d");
},
get canvas() {
return this.getElement("canvas");
},
+ get color() {
+ return this.options.color || DEFAULT_GRID_COLOR;
+ },
+
/**
* Gets the grid gap pattern used to render the gap regions.
*
* @param {Object} dimension
* Refers to the WeakMap key for the grid dimension type which is either the
* constant COLUMN or ROW.
* @return {CanvasPattern} grid gap pattern.
*/
@@ -265,60 +274,70 @@ CssGridHighlighter.prototype = extend(Au
}
// Create the diagonal lines pattern for the rendering the grid gaps.
let canvas = createNode(this.win, { nodeType: "canvas" });
canvas.width = GRID_GAP_PATTERN_WIDTH;
canvas.height = GRID_GAP_PATTERN_HEIGHT;
let ctx = canvas.getContext("2d");
+ ctx.save();
ctx.setLineDash(GRID_GAP_PATTERN_LINE_DASH);
ctx.beginPath();
ctx.translate(.5, .5);
if (dimension === COLUMN_KEY) {
ctx.moveTo(0, 0);
ctx.lineTo(GRID_GAP_PATTERN_WIDTH, GRID_GAP_PATTERN_HEIGHT);
} else {
ctx.moveTo(GRID_GAP_PATTERN_WIDTH, 0);
ctx.lineTo(0, GRID_GAP_PATTERN_HEIGHT);
}
- ctx.strokeStyle = GRID_GAP_PATTERN_STROKE_STYLE;
+ ctx.strokeStyle = this.color;
+ ctx.globalAlpha = GRID_GAP_ALPHA;
ctx.stroke();
+ ctx.restore();
let pattern = ctx.createPattern(canvas, "repeat");
gCachedGridPattern.set(dimension, pattern);
return pattern;
},
/**
* Called when the page navigates. Used to clear the cached gap patterns and avoid
* using DeadWrapper objects as gap patterns the next time.
*/
onNavigate() {
- gCachedGridPattern.delete(ROW_KEY);
- gCachedGridPattern.delete(COLUMN_KEY);
+ this._clearCache();
},
onWillNavigate({ isTopLevel }) {
if (isTopLevel) {
this.hide();
}
},
_show() {
if (Services.prefs.getBoolPref(CSS_GRID_ENABLED_PREF) && !this.isGrid()) {
this.hide();
return false;
}
+ // The grid pattern cache should be cleared in case the color changed.
+ this._clearCache();
+
return this._update();
},
+ _clearCache() {
+ gCachedGridPattern.delete(ROW_KEY);
+ gCachedGridPattern.delete(COLUMN_KEY);
+ },
+
/**
* Shows the grid area highlight for the given area name.
*
* @param {String} areaName
* Grid area name.
*/
showGridArea(areaName) {
this.renderGridArea(areaName);
@@ -605,17 +624,19 @@ CssGridHighlighter.prototype = extend(Au
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.strokeStyle = this.color;
+ this.ctx.globalAlpha = GRID_LINES_PROPERTIES[lineType].alpha;
+
this.ctx.stroke();
this.ctx.restore();
},
/**
* Render the grid line number on the css grid highlighter canvas.
*
* @param {Number} lineNumber