Bug 1456681 - Toggle the flexbox highlighter from the markup display badges. r=pbro
MozReview-Commit-ID: JzIbnxG7z94
--- a/devtools/client/inspector/markup/views/element-container.js
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -29,47 +29,66 @@ loader.lazyRequireGetter(this, "setEvent
* The markup view that owns this container.
* @param {NodeFront} node
* The node to display.
*/
function MarkupElementContainer(markupView, node) {
MarkupContainer.prototype.initialize.call(this, markupView, node,
"elementcontainer");
+ this.onFlexboxHighlighterChange = this.onFlexboxHighlighterChange.bind(this);
this.onGridHighlighterChange = this.onGridHighlighterChange.bind(this);
+ this.markup.highlighters.on("flexbox-highlighter-hidden",
+ this.onFlexboxHighlighterChange);
+ this.markup.highlighters.on("flexbox-highlighter-shown",
+ this.onFlexboxHighlighterChange);
this.markup.highlighters.on("grid-highlighter-hidden", this.onGridHighlighterChange);
this.markup.highlighters.on("grid-highlighter-shown", this.onGridHighlighterChange);
if (node.nodeType === nodeConstants.ELEMENT_NODE) {
this.editor = new ElementEditor(this, node);
} else {
throw new Error("Invalid node for MarkupElementContainer");
}
this.tagLine.appendChild(this.editor.elt);
}
MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
destroy: function() {
+ this.markup.highlighters.off("flexbox-highlighter-hidden",
+ this.onFlexboxHighlighterChange);
+ this.markup.highlighters.off("flexbox-highlighter-shown",
+ this.onFlexboxHighlighterChange);
this.markup.highlighters.off("grid-highlighter-hidden", this.onGridHighlighterChange);
this.markup.highlighters.off("grid-highlighter-shown", this.onGridHighlighterChange);
MarkupContainer.prototype.destroy.call(this);
},
onContainerClick: function(event) {
if (!event.target.hasAttribute("data-event")) {
return;
}
this._buildEventTooltipContent(event.target);
},
/**
+ * Handler for "flexbox-highlighter-hidden" and "flexbox-highlighter-shown" event
+ * emitted from the HighlightersOverlay. Toggles the active state of the display badge
+ * if it matches the highlighted flex container node.
+ */
+ onFlexboxHighlighterChange: function() {
+ this.editor.displayBadge.classList.toggle("active",
+ this.markup.highlighters.flexboxHighlighterShown === this.node);
+ },
+
+ /**
* Handler for "grid-highlighter-hidden" and "grid-highlighter-shown" event emitted from
* the HighlightersOverlay. Toggles the active state of the display badge if it matches
* the highlighted grid node.
*/
onGridHighlighterChange: function() {
this.editor.displayBadge.classList.toggle("active",
this.markup.highlighters.gridHighlighterShown === this.node);
},
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -290,17 +290,21 @@ ElementEditor.prototype = {
updateDisplayBadge: function() {
const showDisplayBadge = this.node.displayType in DISPLAY_TYPES;
this.displayBadge.textContent = this.node.displayType;
this.displayBadge.dataset.display = showDisplayBadge ? this.node.displayType : "";
this.displayBadge.style.display = showDisplayBadge ? "inline-block" : "none";
this.displayBadge.title = showDisplayBadge ?
DISPLAY_TYPES[this.node.displayType] : "";
this.displayBadge.classList.toggle("active",
+ this.highlighters.flexboxHighlighterShown === this.node ||
this.highlighters.gridHighlighterShown === this.node);
+ this.displayBadge.classList.toggle("interactive",
+ Services.prefs.getBoolPref("devtools.inspector.flexboxHighlighter.enabled") &&
+ (this.node.displayType === "flex" || this.node.displayType === "inline-flex"));
},
/**
* Update the inline text editor in case of a single text child node.
*/
updateTextEditor: function() {
const node = this.node.inlineTextChild;
@@ -643,21 +647,27 @@ ElementEditor.prototype = {
/**
* Called when the display badge is clicked. Toggles on the grid highlighter for the
* selected node if it is a grid container.
*/
onDisplayBadgeClick: function(event) {
event.stopPropagation();
const target = event.target;
- if (target.dataset.display !== "grid" && target.dataset.display !== "inline-grid") {
- return;
+
+ if (Services.prefs.getBoolPref("devtools.inspector.flexboxHighlighter.enabled") &&
+ (target.dataset.display === "flex" || target.dataset.display === "inline-flex")) {
+ this.highlighters.toggleFlexboxHighlighter(this.inspector.selection.nodeFront,
+ "markup");
}
- this.highlighters.toggleGridHighlighter(this.inspector.selection.nodeFront, "markup");
+ if (target.dataset.display === "grid" || target.dataset.display === "inline-grid") {
+ this.highlighters.toggleGridHighlighter(this.inspector.selection.nodeFront,
+ "markup");
+ }
},
/**
* Called when the tag name editor has is done editing.
*/
onTagEdit: function(newTagName, isCommit) {
if (!isCommit ||
newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -413,19 +413,28 @@ ul.children + .tag-line::before {
}
.markup-badge.active {
background-color: var(--markup-badge-active-background-color);
border-color: var(--theme-selection-color);
color: var(--theme-selection-color);
}
+.markup-badge[data-display="flex"].interactive,
.markup-badge[data-display="grid"],
+.markup-badge[data-display="inline-flex"],
+.markup-badge[data-display="inline-grid"],
.markup-badge[data-event] {
cursor: pointer;
}
+.markup-badge[data-display="flex"].interactive:focus,
+.markup-badge[data-display="flex"].interactive:hover,
.markup-badge[data-display="grid"]:focus,
.markup-badge[data-display="grid"]:hover,
+.markup-badge[data-display="inline-flex"].interactive:focus,
+.markup-badge[data-display="inline-flex"].interactive:hover,
+.markup-badge[data-display="inline-grid"]:focus,
+.markup-badge[data-display="inline-grid"]:hover,
.markup-badge[data-event]:focus,
.markup-badge[data-event]:hover {
background-color: var(--markup-badge-hover-background-color);
}