From c9b7437500a426ea334ef55f8fcac9e8998dd723 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Mon, 13 Nov 2017 10:00:39 -0500 Subject: [PATCH] Bug 1414362 - Outline the flex container and items in the flexbox highlighter. r=pbro --- .../server/actors/highlighters/css-grid.js | 5 +- .../server/actors/highlighters/flexbox.js | 104 ++++++++++++++++++ .../actors/highlighters/utils/canvas.js | 4 + 3 files changed, 110 insertions(+), 3 deletions(-) diff --git a/devtools/server/actors/highlighters/css-grid.js b/devtools/server/actors/highlighters/css-grid.js index 75009a791c3d..6f9e09e2f71c 100644 --- a/devtools/server/actors/highlighters/css-grid.js +++ b/devtools/server/actors/highlighters/css-grid.js @@ -8,6 +8,7 @@ const Services = require("Services"); const { AutoRefreshHighlighter } = require("./auto-refresh"); const { CANVAS_SIZE, + DEFAULT_COLOR, drawBubbleRect, drawLine, drawRect, @@ -39,8 +40,6 @@ const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI); const NEGATIVE_LINE_NUMBERS_PREF = "devtools.gridinspector.showNegativeLineNumbers"; -const DEFAULT_GRID_COLOR = "#4B0082"; - const COLUMNS = "cols"; const ROWS = "rows"; @@ -426,7 +425,7 @@ class CssGridHighlighter extends AutoRefreshHighlighter { } get color() { - return this.options.color || DEFAULT_GRID_COLOR; + return this.options.color || DEFAULT_COLOR; } /** diff --git a/devtools/server/actors/highlighters/flexbox.js b/devtools/server/actors/highlighters/flexbox.js index c783c911b29e..1e095cf45989 100644 --- a/devtools/server/actors/highlighters/flexbox.js +++ b/devtools/server/actors/highlighters/flexbox.js @@ -7,6 +7,8 @@ const { AutoRefreshHighlighter } = require("./auto-refresh"); const { CANVAS_SIZE, + DEFAULT_COLOR, + drawRect, getCurrentMatrix, updateCanvasElement, updateCanvasPosition, @@ -16,9 +18,22 @@ const { createNode, } = require("./utils/markup"); const { + getAdjustedQuads, + getDisplayPixelRatio, setIgnoreLayoutChanges, } = require("devtools/shared/layout/utils"); +const FLEXBOX_LINES_PROPERTIES = { + "edge": { + lineDash: [0, 0], + alpha: 1, + }, + "item": { + lineDash: [2, 2], + alpha: 1, + }, +}; + class FlexboxHighlighter extends AutoRefreshHighlighter { constructor(highlighterEnv) { super(highlighterEnv); @@ -109,6 +124,21 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { return this.markup.getElement(this.ID_CLASS_PREFIX + id); } + /** + * The AutoRefreshHighlighter's _hasMoved method returns true only if the + * element's quads have changed. Override it so it also returns true if the + * element and its flex items have changed. + */ + _hasMoved() { + let hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this); + + // TODO: Implement a check of old and new flex container and flex items to react + // to any alignment and size changes. This is blocked on Bug 1414920 that implements + // a platform API to retrieve the flex container and flex item information. + + return hasMoved; + } + _hide() { setIgnoreLayoutChanges(true); this._hideFlexbox(); @@ -162,6 +192,77 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { } } + renderFlexContainer() { + if (!this.currentQuads.content || !this.currentQuads.content[0]) { + return; + } + + let { devicePixelRatio } = this.win; + let lineWidth = getDisplayPixelRatio(this.win); + let offset = (lineWidth / 2) % 1; + + let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio); + let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio); + + this.ctx.save(); + this.ctx.translate(offset - canvasX, offset - canvasY); + this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.edge.lineDash); + this.ctx.globalAlpha = FLEXBOX_LINES_PROPERTIES.edge.alpha; + this.ctx.lineWidth = lineWidth; + this.ctx.strokeStyle = DEFAULT_COLOR; + + let { bounds } = this.currentQuads.content[0]; + + drawRect(this.ctx, 0, 0, bounds.width, bounds.height, this.currentMatrix); + + this.ctx.stroke(); + this.ctx.restore(); + } + + renderFlexItems() { + if (!this.currentQuads.content || !this.currentQuads.content[0]) { + return; + } + + let { devicePixelRatio } = this.win; + let lineWidth = getDisplayPixelRatio(this.win); + let offset = (lineWidth / 2) % 1; + + let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio); + let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio); + + this.ctx.save(); + this.ctx.translate(offset - canvasX, offset - canvasY); + this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.item.lineDash); + this.ctx.globalAlpha = FLEXBOX_LINES_PROPERTIES.item.alpha; + this.ctx.lineWidth = lineWidth; + this.ctx.strokeStyle = DEFAULT_COLOR; + + let { bounds } = this.currentQuads.content[0]; + let flexItems = this.currentNode.children; + + // 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, "content"); + if (!quads.length) { + continue; + } + + // Adjust the flex item bounds relative to the current quads. + let { bounds: flexItemBounds } = quads[0]; + let left = flexItemBounds.left - bounds.left; + let top = flexItemBounds.top - bounds.top; + let right = flexItemBounds.right - bounds.left; + let bottom = flexItemBounds.bottom - bounds.top; + + drawRect(this.ctx, left, top, right, bottom, this.currentMatrix); + this.ctx.stroke(); + } + + this.ctx.restore(); + } + _update() { setIgnoreLayoutChanges(true); @@ -184,6 +285,9 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { this.currentMatrix = currentMatrix; this.hasNodeTransformations = hasNodeTransformations; + this.renderFlexContainer(); + this.renderFlexItems(); + this._showFlexbox(); root.setAttribute("style", diff --git a/devtools/server/actors/highlighters/utils/canvas.js b/devtools/server/actors/highlighters/utils/canvas.js index 599cc6203f13..35736337dc94 100644 --- a/devtools/server/actors/highlighters/utils/canvas.js +++ b/devtools/server/actors/highlighters/utils/canvas.js @@ -35,6 +35,9 @@ const { getViewportDimensions } = require("devtools/shared/layout/utils"); // Using a fixed value should also solve bug 1348293. const CANVAS_SIZE = 4096; +// The default color used for the canvas' font, fill and stroke colors. +const DEFAULT_COLOR = "#9400FF"; + /** * Draws an arrow-bubble rectangle in the provided canvas context. * @@ -426,6 +429,7 @@ function updateCanvasPosition(canvasPosition, scrollPosition, window, windowDime } exports.CANVAS_SIZE = CANVAS_SIZE; +exports.DEFAULT_COLOR = DEFAULT_COLOR; exports.drawBubbleRect = drawBubbleRect; exports.drawLine = drawLine; exports.drawRect = drawRect;