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