Bug 1477614 - Part 2: Display flex max-width/height clamping lock in the Flex Item Highlighter. r=pbro
MozReview-Commit-ID: Eyftye3Q8v8
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -222,16 +222,24 @@
fill: transparent;
stroke: #FF1AD9;
stroke-dasharray: 2 1;
stroke-opacity: 0.7;
stroke-width: 2;
shape-rendering: crispEdges;
}
+:-moz-native-anonymous .flex-item-lock {
+ background-size: 16px;
+ background-repeat: no-repeat;
+ position: absolute;
+ transform-origin: 0 0;
+ background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(209, 55, 244)" fill-rule="evenodd" clip-rule="evenodd" d="M9 7a3 3 0 1 1 6 0v3H9V7zm-2 3V7a5 5 0 1 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1z"></path></svg>');
+}
+
:-moz-native-anonymous .flex-item-sizing {
background-repeat: round;
position: absolute;
transform-origin: 0 0;
}
:-moz-native-anonymous .flex-item-sizing.top {
background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(148, 0, 255)" fill-opacity=".8" fill-rule="evenodd" clip-rule="evenodd" d="M12.707 7.293a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 1.414 1.414L12 9.414l6.293 6.293a1 1 0 0 0 1.414-1.414l-7-7z"></path></svg>');
--- a/devtools/server/actors/highlighters/flex-item.js
+++ b/devtools/server/actors/highlighters/flex-item.js
@@ -111,16 +111,28 @@ class FlexItemHighlighter extends AutoRe
attributes: {
id: "sizing",
class: "sizing",
hidden: "true"
},
prefix: this.ID_CLASS_PREFIX
});
+ // Build the flex item lock element that will be used to visualize max-width/height
+ // clamping.
+ createNode(this.win, {
+ parent: root,
+ attributes: {
+ id: "lock",
+ class: "lock",
+ hidden: "true",
+ },
+ prefix: this.ID_CLASS_PREFIX
+ });
+
return container;
}
destroy() {
this.highlighterEnv.off("will-navigate", this.onWillNavigate);
const { pageListenerTarget } = this.highlighterEnv;
if (pageListenerTarget) {
@@ -141,21 +153,26 @@ class FlexItemHighlighter extends AutoRe
"L" + p2.x + "," + p2.y + " " +
"L" + p3.x + "," + p3.y + " " +
"L" + p4.x + "," + p4.y + " " +
"L" + p4.x + "," + p1.y;
}
_hide() {
setIgnoreLayoutChanges(true);
+ this._hideFlexClampLock();
this._hideFlexItem();
this._hideFlexSizing();
setIgnoreLayoutChanges(false, this.highlighterEnv.window.document.documentElement);
}
+ _hideFlexClampLock() {
+ this.getElement("lock").setAttribute("hidden", "true");
+ }
+
_hideFlexItem() {
this.getElement("elements").setAttribute("hidden", "true");
}
_hideFlexSizing() {
this.getElement("sizing").setAttribute("hidden", "true");
}
@@ -200,16 +217,20 @@ class FlexItemHighlighter extends AutoRe
this.hide();
}
}
_show() {
return this._update();
}
+ _showFlexClampLock() {
+ this.getElement("lock").removeAttribute("hidden");
+ }
+
_showFlexItem() {
this.getElement("elements").removeAttribute("hidden");
}
_showFlexSizing() {
this.getElement("sizing").removeAttribute("hidden");
}
@@ -244,16 +265,17 @@ class FlexItemHighlighter extends AutoRe
}
const flexItemData = getFlexItemData(this.options.flexData, this.currentNode);
if (!flexItemData) {
return false;
}
this._updateFlexBasis(flexItemData);
+ this._updateFlexMaxClamp(flexItemData);
this._updateFlexSizing(flexItemData);
// Un-zoom the root wrapper if the page was zoomed.
const rootId = this.ID_CLASS_PREFIX + "elements";
this.markup.scaleRootElement(this.currentNode, rootId);
return true;
}
@@ -286,16 +308,54 @@ class FlexItemHighlighter extends AutoRe
{ x: p1.x + mainBaseSize, y: p3.y },
p4
);
this.getElement("basis").setAttribute("d", flexBasisPath);
}
/**
+ * Updates the flex max-width/height clamp lock of the current flex item.
+ *
+ * @param {Object} flexItemData
+ * Object representation of the Flex item data object.
+ */
+ _updateFlexMaxClamp(flexItemData) {
+ const lock = this.getElement("lock");
+ lock.setAttribute("style", "");
+
+ const { mainBaseSize, mainMaxSize } = flexItemData;
+
+ let left, top;
+ // Check if the flex item is clamped by a max-width/height.
+ if (mainBaseSize > mainMaxSize) {
+ const { bounds } = this.currentQuads.content[0];
+ const isColumn = this.options.flexDirection.startsWith("column");
+
+ if (isColumn) {
+ left = bounds.left + (bounds.width / 2) - 8;
+ top = bounds.bottom - 8;
+ } else {
+ left = bounds.right - 8;
+ top = bounds.top + (bounds.height / 2) - 8;
+ }
+ } else {
+ return;
+ }
+
+ lock.setAttribute("style", `
+ width: 16px;
+ height: 16px;
+ transform: translate(${left}px, ${top}px);
+ `);
+
+ this._showFlexClampLock();
+ }
+
+ /**
* Updates the flex sizing node to display the flex grow or shrink sizing of the
* current flex item.
*
* @param {Object} flexItemData
* Object representation of the Flex item data object.
*/
_updateFlexSizing(flexItemData) {
const sizing = this.getElement("sizing");