diff --git a/devtools/client/fronts/node.js b/devtools/client/fronts/node.js
index 1342fb312346..3cba9e0a2fdd 100644
--- a/devtools/client/fronts/node.js
+++ b/devtools/client/fronts/node.js
@@ -389,10 +389,6 @@ class NodeFront extends FrontClassWithSpec(nodeSpec) {
return this._form.isScrollable;
}
- get causesOverflow() {
- return this._form.causesOverflow;
- }
-
get isTreeDisplayed() {
let parent = this;
while (parent) {
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js
index acea11497239..4e7b1d8584fc 100644
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -356,7 +356,6 @@ function MarkupView(inspector, frame, controllerWindow) {
this._walkerEventListener = new WalkerEventListener(this.inspector, {
"display-change": this._onWalkerNodeStatesChanged,
"scrollable-change": this._onWalkerNodeStatesChanged,
- "overflow-change": this._onWalkerNodeStatesChanged,
mutations: this._onWalkerMutations,
});
}
@@ -925,10 +924,6 @@ MarkupView.prototype = {
"scrollable-change",
this._onWalkerNodeStatesChanged
);
- nodeFront.walkerFront.on(
- "overflow-change",
- this._onWalkerNodeStatesChanged
- );
nodeFront.walkerFront.on("mutations", this._onWalkerMutations);
}
diff --git a/devtools/client/inspector/markup/test/browser.ini b/devtools/client/inspector/markup/test/browser.ini
index 421b4c7965d9..c72c1d96847b 100644
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -184,7 +184,6 @@ skip-if = verify
[browser_markup_node_names_namespaced.js]
[browser_markup_node_not_displayed_01.js]
[browser_markup_node_not_displayed_02.js]
-[browser_markup_overflow_badge.js]
[browser_markup_pagesize_01.js]
[browser_markup_pagesize_02.js]
[browser_markup_pseudo_on_reload.js]
diff --git a/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js b/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js
deleted file mode 100644
index ae8efcb711cd..000000000000
--- a/devtools/client/inspector/markup/test/browser_markup_overflow_badge.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-// Tests that the overflow badge is shown to overflow causing elements and is updated
-// dynamically.
-
-const TEST_URI = `
-
-
-`;
-
-add_task(async function() {
- await SpecialPowers.setBoolPref("devtools.overflow.debugging.enabled", true);
-
- const { inspector } = await openInspectorForURL(
- "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
- );
-
- await expandChildContainers(inspector);
-
- const child1 = await getContainerForSelector("#child1", inspector);
- const child2 = await getContainerForSelector("#child2", inspector);
- const child3 = await getContainerForSelector("#child3", inspector);
- const child4 = await getContainerForSelector("#child4", inspector);
-
- info(
- "Checking if overflow badges appear correctly right after the markup-view is loaded"
- );
-
- checkBadges([child1, child4], [child2, child3]);
-
- info("Changing the elements to check whether the badge updates correctly");
-
- await toggleClass(inspector);
-
- checkBadges([child2, child3], [child1, child4]);
-
- info(
- "Once again, changing the elements to check whether the badge updates correctly"
- );
-
- await toggleClass(inspector);
-
- checkBadges([child1, child4], [child2, child3]);
-});
-
-async function expandChildContainers(inspector) {
- const container = await getContainerForSelector("#top", inspector);
-
- await expandContainer(inspector, container);
- for (const child of container.getChildContainers()) {
- await expandContainer(inspector, child);
- }
-}
-
-async function toggleClass(inspector) {
- const onStateChanged = inspector.walker.once("overflow-change");
-
- await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
- content.document.querySelector("#child1").classList.toggle("fixed");
- content.document.querySelector("#child3").classList.toggle("fixed");
- });
-
- await onStateChanged;
-}
-
-function checkBadges(elemsWithBadges, elemsWithNoBadges) {
- const hasBadge = elem =>
- elem.elt.querySelector(
- `#${elem.elt.children[0].id} > span.editor > .inspector-badge.overflow-badge`
- );
-
- for (const elem of elemsWithBadges) {
- ok(hasBadge(elem), `Overflow badge exists in ${elem.node.id}`);
- }
-
- for (const elem of elemsWithNoBadges) {
- ok(!hasBadge(elem), `Overflow badge does not exist in ${elem.node.id}`);
- }
-}
diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js
index dbe15c285c56..85aa893431c9 100644
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -32,10 +32,6 @@ const INSPECTOR_L10N = new LocalizationHelper(
"devtools/client/locales/inspector.properties"
);
-const OVERFLOW_DEBUGGING_ENABLED = Services.prefs.getBoolPref(
- "devtools.overflow.debugging.enabled"
-);
-
// Page size for pageup/pagedown
const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
const COLLAPSE_DATA_URL_LENGTH = 60;
@@ -316,7 +312,6 @@ ElementEditor.prototype = {
this.updateCustomBadge();
this.updateScrollableBadge();
this.updateTextEditor();
- this.updateOverflowBadge();
},
updateEventBadge: function() {
@@ -420,31 +415,6 @@ ElementEditor.prototype = {
}
},
- updateOverflowBadge: function() {
- if (!OVERFLOW_DEBUGGING_ENABLED) {
- return;
- }
-
- if (this.node.causesOverflow && !this._overflowBadge) {
- this._createOverflowBadge();
- } else if (!this.node.causesOverflow && this._overflowBadge) {
- this._overflowBadge.remove();
- this._overflowBadge = null;
- }
- },
-
- _createOverflowBadge: function() {
- this._overflowBadge = this.doc.createElement("div");
- this._overflowBadge.className = "inspector-badge overflow-badge";
- this._overflowBadge.textContent = INSPECTOR_L10N.getStr(
- "markupView.overflowBadge.label"
- );
- this._overflowBadge.title = INSPECTOR_L10N.getStr(
- "markupView.overflowBadge.tooltip"
- );
- this.elt.insertBefore(this._overflowBadge, this._customBadge);
- },
-
/**
* Update the markup custom element badge.
*/
diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties
index 56bb1f1aaeb7..37c410167acd 100644
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -507,14 +507,6 @@ markupView.scrollableBadge.label=scroll
# when hovering over badges next to scrollable elements in the inspector.
markupView.scrollableBadge.tooltip=This element has scrollable overflow.
-# LOCALIZATION NOTE (markupView.overflowBadge.label): This is the text displayed inside a
-# badge, in the inspector, next to nodes that are causing overflow in other elements.
-markupView.overflowBadge.label=overflow
-
-# LOCALIZATION NOTE (markupView.overflowBadge.tooltip): This is the tooltip that is displayed
-# when hovering over badges next to overflow causing elements in the inspector.
-markupView.overflowBadge.tooltip=This element is causing an element to overflow.
-
# LOCALIZATION NOTE (rulePreviewTooltip.noAssociatedRule): This is the text displayed inside
# the RulePreviewTooltip when a rule cannot be found for a CSS property declaration.
rulePreviewTooltip.noAssociatedRule=No associated rule
diff --git a/devtools/server/actors/inspector/node.js b/devtools/server/actors/inspector/node.js
index e25e6a53f855..e158ac948106 100644
--- a/devtools/server/actors/inspector/node.js
+++ b/devtools/server/actors/inspector/node.js
@@ -107,12 +107,6 @@ const NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
this.currentDisplayType = this.displayType;
this.wasDisplayed = this.isDisplayed;
this.wasScrollable = this.isScrollable;
-
- this.walker.updateOverflowCausingElements(
- this.rawNode,
- this,
- this.walker.overflowCausingElementsSet
- );
},
toString: function() {
@@ -182,7 +176,6 @@ const NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
inlineTextChild: inlineTextChild ? inlineTextChild.form() : undefined,
displayType: this.displayType,
isScrollable: this.isScrollable,
- causesOverflow: this.walker.overflowCausingElementsSet.has(this.rawNode),
// doctype attributes
name: this.rawNode.name,
diff --git a/devtools/server/actors/inspector/walker.js b/devtools/server/actors/inspector/walker.js
index 2e13e440846e..d812155c8825 100644
--- a/devtools/server/actors/inspector/walker.js
+++ b/devtools/server/actors/inspector/walker.js
@@ -203,7 +203,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
this.customElementWatcher = new CustomElementWatcher(
targetActor.chromeEventHandler
);
- this.overflowCausingElementsSet = new Set();
this.showAllAnonymousContent = options.showAllAnonymousContent;
@@ -412,9 +411,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
this.clearPseudoClassLocks();
this._activePseudoClassLocks = null;
- this.overflowCausingElementsSet.clear();
- this.overflowCausingElementsSet = null;
-
this._hoveredNode = null;
this.rootWin = null;
this.rootDoc = null;
@@ -550,12 +546,10 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
_onReflows: function(reflows) {
// Going through the nodes the walker knows about, see which ones have had their
- // display, scrollable or overflow state changed and send events if any.
+ // display or scrollable state changed and send events if any.
const displayTypeChanges = [];
const scrollableStateChanges = [];
- const currentOverflowCausingElementsSet = new Set();
-
for (const [node, actor] of this._refMap) {
if (Cu.isDeadWrapper(node)) {
continue;
@@ -580,28 +574,8 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
scrollableStateChanges.push(actor);
actor.wasScrollable = isScrollable;
}
-
- this.updateOverflowCausingElements(
- node,
- actor,
- currentOverflowCausingElementsSet
- );
}
- // Get the NodeActor for each node in the symmetric difference of
- // currentOverflowCausingElementsSet and this.overflowCausingElementsSet
- const overflowStateChanges = [...currentOverflowCausingElementsSet]
- .filter(node => !this.overflowCausingElementsSet.has(node))
- .concat(
- [...this.overflowCausingElementsSet].filter(
- node => !currentOverflowCausingElementsSet.has(node)
- )
- )
- .filter(node => this.hasNode(node))
- .map(node => this.getNode(node));
-
- this.overflowCausingElementsSet = currentOverflowCausingElementsSet;
-
if (displayTypeChanges.length) {
this.emit("display-change", displayTypeChanges);
}
@@ -609,10 +583,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
if (scrollableStateChanges.length) {
this.emit("scrollable-change", scrollableStateChanges);
}
-
- if (overflowStateChanges.length) {
- this.emit("overflow-change", overflowStateChanges);
- }
},
/**
@@ -2872,32 +2842,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
cancelPick() {
this.nodePicker.cancelPick();
},
-
- /**
- * If element has a scrollbar, find the children causing the overflow and
- * add them to the set.
- * @param {DOMNode} node The node whose overflow causing elements are returned.
- * @param {NodeActor} actor The actor of the node.
- * @param {Set} set The set to which the overflow causing elements are added.
- */
- updateOverflowCausingElements: function(node, actor, set) {
- if (node.nodeType !== Node.ELEMENT_NODE || !actor.isScrollable) {
- return;
- }
-
- const overflowCausingChildren = [
- ...InspectorUtils.getOverflowingChildrenOfElement(node),
- ];
-
- for (let child of overflowCausingChildren) {
- // child is a Node, but not necessarily an Element.
- // So, get the containing Element
- if (child.nodeType !== Node.ELEMENT_NODE) {
- child = child.parentElement;
- }
- set.add(child);
- }
- },
});
exports.WalkerActor = WalkerActor;
diff --git a/devtools/shared/specs/walker.js b/devtools/shared/specs/walker.js
index 355f2c772f73..81c0b58d6965 100644
--- a/devtools/shared/specs/walker.js
+++ b/devtools/shared/specs/walker.js
@@ -85,10 +85,6 @@ const walkerSpec = generateActorSpec({
type: "scrollable-change",
nodes: Arg(0, "array:domnode"),
},
- "overflow-change": {
- type: "scrollable-change",
- nodes: Arg(0, "array:domnode"),
- },
// The walker actor emits a useful "resize" event to its front to let
// clients know when the browser window gets resized. This may be useful
// for refreshing a DOM node's styles for example, since those may depend on