Backed out changeset 2d126d9f7ef8 (bug 1653290) for /browser_markup_overflow_badge.js failures CLOSED TREE

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) {

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);
     }
 

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]

devtools/client/inspector/markup/test/browser_markup_overflow_badge.js

@@ -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 = `
-  <style type="text/css">
-    .parent {
-        width: 200px;
-        height: 200px;
-        overflow: scroll;
-    }
-    .fixed {
-        width: 50px;
-        height: 50px;
-    }
-    .shift {
-        margin-left: 300px;
-    }
-  </style>
-  <div id="top" class="parent">
-    <div id="child1" class="fixed shift">
-        <div id="child2" class="fixed"></div>
-    </div>
-    <div id="child3" class="shift">
-        <div id="child4" class="fixed"></div>
-    </div>
-  </div>
-`;
-
-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}`);
-  }
-}

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.
    */

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

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,

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;

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