зеркало из https://github.com/mozilla/gecko-dev.git
Backed out 1 changesets (bug 1422470) for ESlint failure /builds/worker/checkouts/gecko/devtools/server/actors/highlighters/flexbox.js:14:3 r=backout a=backout on a CLOSED TREE
Backed out changeset affa7f97ff91 (bug 1422470) --HG-- extra : amend_source : 2708f4059cac59d33e70e4ad7591632885ab445e
This commit is contained in:
Andreea Pavel
Родитель
8ba04e79f9
Коммит
33f8c94f52
|
|
@ -8,10 +8,8 @@ const { AutoRefreshHighlighter } = require("./auto-refresh");
|
|||
const {
|
||||
CANVAS_SIZE,
|
||||
DEFAULT_COLOR,
|
||||
clearRect,
|
||||
drawRect,
|
||||
getCurrentMatrix,
|
||||
getPointsFromDiagonal,
|
||||
updateCanvasElement,
|
||||
updateCanvasPosition,
|
||||
} = require("./utils/canvas");
|
||||
|
|
@ -36,17 +34,6 @@ const FLEXBOX_LINES_PROPERTIES = {
|
|||
},
|
||||
};
|
||||
|
||||
const FLEXBOX_CONTAINER_PATTERN_WIDTH = 14; // px
|
||||
const FLEXBOX_CONTAINER_PATTERN_HEIGHT = 14; // px
|
||||
const FLEXBOX_CONTAINER_PATTERN_LINE_DISH = [5, 3]; // px
|
||||
|
||||
/**
|
||||
* Cached used by `FlexboxHighlighter.getFlexContainerPattern`.
|
||||
*/
|
||||
const gCachedFlexboxPattern = new Map();
|
||||
|
||||
const FLEXBOX = "flexbox";
|
||||
|
||||
class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
constructor(highlighterEnv) {
|
||||
super(highlighterEnv);
|
||||
|
|
@ -111,10 +98,6 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
return container;
|
||||
}
|
||||
|
||||
clearCache() {
|
||||
gCachedFlexboxPattern.clear();
|
||||
}
|
||||
|
||||
destroy() {
|
||||
let { highlighterEnv } = this;
|
||||
highlighterEnv.off("will-navigate", this.onWillNavigate);
|
||||
|
|
@ -126,8 +109,6 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
|
||||
this.markup.destroy();
|
||||
|
||||
// Clear the pattern cache to avoid dead object exceptions (Bug 1342051).
|
||||
this.clearCache();
|
||||
AutoRefreshHighlighter.prototype.destroy.call(this);
|
||||
}
|
||||
|
||||
|
|
@ -143,51 +124,6 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
return this.markup.getElement(this.ID_CLASS_PREFIX + id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the flexbox container pattern used to render the container regions.
|
||||
*
|
||||
* @param {Number} devicePixelRatio
|
||||
* The device pixel ratio we want the pattern for.
|
||||
* @return {CanvasPattern} flex container pattern.
|
||||
*/
|
||||
getFlexContainerPattern(devicePixelRatio) {
|
||||
let flexboxPatternMap = null;
|
||||
|
||||
if (gCachedFlexboxPattern.has(devicePixelRatio)) {
|
||||
flexboxPatternMap = gCachedFlexboxPattern.get(devicePixelRatio);
|
||||
} else {
|
||||
flexboxPatternMap = new Map();
|
||||
}
|
||||
|
||||
if (gCachedFlexboxPattern.has(FLEXBOX)) {
|
||||
return gCachedFlexboxPattern.get(FLEXBOX);
|
||||
}
|
||||
|
||||
// Create the diagonal lines pattern for the rendering the flexbox gaps.
|
||||
let canvas = createNode(this.win, { nodeType: "canvas" });
|
||||
let width = canvas.width = FLEXBOX_CONTAINER_PATTERN_WIDTH * devicePixelRatio;
|
||||
let height = canvas.height = FLEXBOX_CONTAINER_PATTERN_HEIGHT * devicePixelRatio;
|
||||
|
||||
let ctx = canvas.getContext("2d");
|
||||
ctx.save();
|
||||
ctx.setLineDash(FLEXBOX_CONTAINER_PATTERN_LINE_DISH);
|
||||
ctx.beginPath();
|
||||
ctx.translate(.5, .5);
|
||||
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(width, height);
|
||||
|
||||
ctx.strokeStyle = DEFAULT_COLOR;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
|
||||
let pattern = ctx.createPattern(canvas, "repeat");
|
||||
flexboxPatternMap.set(FLEXBOX, pattern);
|
||||
gCachedFlexboxPattern.set(devicePixelRatio, flexboxPatternMap);
|
||||
|
||||
return pattern;
|
||||
}
|
||||
|
||||
/**
|
||||
* The AutoRefreshHighlighter's _hasMoved method returns true only if the
|
||||
* element's quads have changed. Override it so it also returns true if the
|
||||
|
|
@ -251,8 +187,6 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
* next time.
|
||||
*/
|
||||
onWillNavigate({ isTopLevel }) {
|
||||
this.clearCache();
|
||||
|
||||
if (isTopLevel) {
|
||||
this.hide();
|
||||
}
|
||||
|
|
@ -276,12 +210,11 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
this.ctx.globalAlpha = FLEXBOX_LINES_PROPERTIES.edge.alpha;
|
||||
this.ctx.lineWidth = lineWidth;
|
||||
this.ctx.strokeStyle = DEFAULT_COLOR;
|
||||
this.ctx.fillStyle = this.getFlexContainerPattern(devicePixelRatio);
|
||||
|
||||
let { bounds } = this.currentQuads.content[0];
|
||||
|
||||
drawRect(this.ctx, 0, 0, bounds.width, bounds.height, this.currentMatrix);
|
||||
|
||||
this.ctx.fill();
|
||||
this.ctx.stroke();
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
|
@ -311,7 +244,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
// TODO: Utilize the platform API that will be implemented in Bug 1414290 to
|
||||
// retrieve the flex item properties.
|
||||
for (let flexItem of flexItems) {
|
||||
let quads = getAdjustedQuads(this.win, flexItem, "border");
|
||||
let quads = getAdjustedQuads(this.win, flexItem, "content");
|
||||
if (!quads.length) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -323,7 +256,6 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
|||
let right = flexItemBounds.right - bounds.left;
|
||||
let bottom = flexItemBounds.bottom - bounds.top;
|
||||
|
||||
clearRect(this.ctx, left, top, right, bottom, this.currentMatrix);
|
||||
drawRect(this.ctx, left, top, right, bottom, this.currentMatrix);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,28 +38,6 @@ const CANVAS_SIZE = 4096;
|
|||
// The default color used for the canvas' font, fill and stroke colors.
|
||||
const DEFAULT_COLOR = "#9400FF";
|
||||
|
||||
/**
|
||||
* Draws a rect to the context given and applies a transformation matrix if passed.
|
||||
* The coordinates are the start and end points of the rectangle's diagonal.
|
||||
*
|
||||
* @param {CanvasRenderingContext2D} ctx
|
||||
* The 2D canvas context.
|
||||
* @param {Number} x1
|
||||
* The x-axis coordinate of the rectangle's diagonal start point.
|
||||
* @param {Number} y1
|
||||
* The y-axis coordinate of the rectangle's diagonal start point.
|
||||
* @param {Number} x2
|
||||
* The x-axis coordinate of the rectangle's diagonal end point.
|
||||
* @param {Number} y2
|
||||
* The y-axis coordinate of the rectangle's diagonal end point.
|
||||
* @param {Array} [matrix=identity()]
|
||||
* The transformation matrix to apply.
|
||||
*/
|
||||
function clearRect(ctx, x1, y1, x2, y2, matrix = identity()) {
|
||||
let p = getPointsFromDiagonal(x1, y1, x2, y2, matrix);
|
||||
ctx.clearRect(p[0].x, p[0].y, p[1].x - p[0].x, p[3].y - p[0].y);
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws an arrow-bubble rectangle in the provided canvas context.
|
||||
*
|
||||
|
|
@ -452,7 +430,6 @@ function updateCanvasPosition(canvasPosition, scrollPosition, window, windowDime
|
|||
|
||||
exports.CANVAS_SIZE = CANVAS_SIZE;
|
||||
exports.DEFAULT_COLOR = DEFAULT_COLOR;
|
||||
exports.clearRect = clearRect;
|
||||
exports.drawBubbleRect = drawBubbleRect;
|
||||
exports.drawLine = drawLine;
|
||||
exports.drawRect = drawRect;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче