Bug 1478492 - Remove the flex basis rendering from the Flexbox highlighter. r=pbro
MozReview-Commit-ID: AeijccKUOl
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -40,17 +40,16 @@ const FLEXBOX_LINES_PROPERTIES = {
}
};
const FLEXBOX_CONTAINER_PATTERN_WIDTH = 14; // px
const FLEXBOX_CONTAINER_PATTERN_HEIGHT = 14; // px
const FLEXBOX_JUSTIFY_CONTENT_PATTERN_WIDTH = 7; // px
const FLEXBOX_JUSTIFY_CONTENT_PATTERN_HEIGHT = 7; // px
const FLEXBOX_CONTAINER_PATTERN_LINE_DISH = [5, 3]; // px
-const BASIS_FILL_COLOR = "rgb(109, 184, 255, 0.4)";
/**
* Cached used by `FlexboxHighlighter.getFlexContainerPattern`.
*/
const gCachedFlexboxPattern = new Map();
const FLEXBOX = "flexbox";
const JUSTIFY_CONTENT = "justify-content";
@@ -61,19 +60,16 @@ const JUSTIFY_CONTENT = "justify-content
*
* Available Options:
* - color(colorValue)
* @param {String} colorValue
* The color that should be used to draw the highlighter for this flexbox.
* - showAlignment(isShown)
* @param {Boolean} isShown
* Shows the alignment in the flexbox highlighter.
- * - showFlexBasis(isShown)
- * @param {Boolean} isShown
- * Shows the flex basis in the flexbox highlighter.
*/
class FlexboxHighlighter extends AutoRefreshHighlighter {
constructor(highlighterEnv) {
super(highlighterEnv);
this.ID_CLASS_PREFIX = "flexbox-";
this.markup = new CanvasFrameAnonymousContentHelper(this.highlighterEnv,
@@ -291,45 +287,39 @@ class FlexboxHighlighter extends AutoRef
const oldFlexData = this.flexData;
this.flexData = getFlexData(this.currentNode.getAsFlexContainer(), this.win);
const hasFlexDataChanged = compareFlexData(oldFlexData, this.flexData);
const oldAlignItems = this.alignItemsValue;
this.alignItemsValue = this.computedStyle.alignItems;
const newAlignItems = this.alignItemsValue;
- const oldFlexBasis = this.flexBasis;
- this.flexBasis = this.computedStyle.flexBasis;
- const newFlexBasis = this.flexBasis;
-
const oldFlexDirection = this.flexDirection;
this.flexDirection = this.computedStyle.flexDirection;
const newFlexDirection = this.flexDirection;
const oldFlexWrap = this.flexWrap;
this.flexWrap = this.computedStyle.flexWrap;
const newFlexWrap = this.flexWrap;
const oldJustifyContent = this.justifyContentValue;
this.justifyContentValue = this.computedStyle.justifyContent;
const newJustifyContent = this.justifyContentValue;
return hasMoved ||
hasFlexDataChanged ||
oldAlignItems !== newAlignItems ||
- oldFlexBasis !== newFlexBasis ||
oldFlexDirection !== newFlexDirection ||
oldFlexWrap !== newFlexWrap ||
oldJustifyContent !== newJustifyContent;
}
_hide() {
this.alignItemsValue = null;
this.computedStyle = null;
- this.flexBasis = null;
this.flexData = null;
this.flexDirection = null;
this.flexWrap = null;
this.justifyContentValue = null;
setIgnoreLayoutChanges(true);
this._hideFlexbox();
setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
@@ -537,38 +527,16 @@ class FlexboxHighlighter extends AutoRef
const angleRad = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
this.ctx.rotate(angleRad);
this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
- /**
- * Renders the flex basis for a given flex item.
- */
- renderFlexItemBasis(flexItem, left, top, right, bottom, boundsWidth) {
- if (!this.options.showFlexBasis || !this.computedStyle) {
- return;
- }
-
- let basis = this.flexBasis;
-
- if (basis.endsWith("px")) {
- right = Math.round(left + parseFloat(basis));
- } else if (basis.endsWith("%")) {
- basis = parseFloat(basis) / 100 * boundsWidth;
- right = Math.round(left + basis);
- }
-
- this.ctx.fillStyle = BASIS_FILL_COLOR;
- drawRect(this.ctx, left, top, right, bottom, this.currentMatrix);
- this.ctx.fill();
- }
-
renderFlexItems() {
if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {
return;
}
const { devicePixelRatio } = this.win;
const lineWidth = getDisplayPixelRatio(this.win);
const offset = (lineWidth / 2) % 1;
@@ -595,18 +563,16 @@ class FlexboxHighlighter extends AutoRef
const left = Math.round(flexItemBounds.left - bounds.left);
const top = Math.round(flexItemBounds.top - bounds.top);
const right = Math.round(flexItemBounds.right - bounds.left);
const bottom = Math.round(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();
-
- this.renderFlexItemBasis(flexItem.node, left, top, right, bottom, bounds.width);
}
}
this.ctx.restore();
}
renderFlexLines() {
if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {