Bug 1492516 - Delete badge properties when removing badge element from the DOM;r=gl

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

@@ -45,6 +45,23 @@ const TEST_DATA = [
       visible: false
     }
   },
+  {
+    desc: "Reusing the 'grid' node, updating the display to 'grid again",
+    selector: "#grid",
+    before: {
+      visible: false
+    },
+    changeStyle: async function(testActor) {
+      await testActor.eval(`
+        let node = document.getElementById("grid");
+        node.style.display = "grid";
+      `);
+    },
+    after: {
+      textContent: "grid",
+      visible: true
+    }
+  },
   {
     desc: "Showing a 'grid' node by changing its style property",
     selector: "#block",

devtools/client/inspector/markup/views/element-editor.js

@@ -282,6 +282,7 @@ ElementEditor.prototype = {
     const showEventBadge = this.node.hasEventListeners;
     if (this._eventBadge && !showEventBadge) {
       this._eventBadge.remove();
+      this._eventBadge = null;
     } else if (showEventBadge && !this._eventBadge) {
       this._createEventBadge();
     }
@@ -304,6 +305,7 @@ ElementEditor.prototype = {
     const showDisplayBadge = this.node.displayType in DISPLAY_TYPES;
     if (this._displayBadge && !showDisplayBadge) {
       this._displayBadge.remove();
+      this._displayBadge = null;
     } else if (showDisplayBadge) {
       if (!this._displayBadge) {
         this._createDisplayBadge();
@@ -339,6 +341,7 @@ ElementEditor.prototype = {
     const showCustomBadge = !!this.node.customElementLocation;
     if (this._customBadge && !showCustomBadge) {
       this._customBadge.remove();
+      this._customBadge = null;
     } else if (!this._customBadge && showCustomBadge) {
       this._createCustomBadge();
     }