Cleanup iron resize event (#18813)

src/components/ha-faded.ts

@@ -17,7 +17,7 @@ class HaFaded extends LitElement {
         @click=${this._showContent}
       >
         <slot
-          @iron-resize=${
+          @content-resize=${
             // ha-markdown-element fire this when render is complete
             this._setShowContent
           }
@@ -79,4 +79,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-faded": HaFaded;
   }
+  interface HASSDomEvents {
+    "content-resize": undefined;
+  }
 }

src/components/ha-markdown-element.ts

@@ -99,7 +99,7 @@ class HaMarkdownElement extends ReactiveElement {
     }
   }
 
-  private _resize = () => fireEvent(this, "iron-resize");
+  private _resize = () => fireEvent(this, "content-resize");
 }
 
 declare global {

src/dialogs/more-info/controls/more-info-climate.ts

@@ -6,16 +6,8 @@ import {
   mdiTuneVariant,
   mdiWaterPercent,
 } from "@mdi/js";
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  css,
-  html,
-  nothing,
-} from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
@@ -50,8 +42,6 @@ class MoreInfoClimate extends LitElement {
 
   @state() private _mainControl: MainControl = "temperature";
 
-  private _resizeDebounce?: number;
-
   protected render() {
     if (!this.stateObj) {
       return nothing;
@@ -293,21 +283,6 @@ class MoreInfoClimate extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("stateObj") || !this.stateObj) {
-      return;
-    }
-
-    if (this._resizeDebounce) {
-      clearTimeout(this._resizeDebounce);
-    }
-    this._resizeDebounce = window.setTimeout(() => {
-      fireEvent(this, "iron-resize");
-      this._resizeDebounce = undefined;
-    }, 500);
-  }
-
   private _setMainControl(ev: any) {
     ev.stopPropagation();
     this._mainControl = ev.currentTarget.control;

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -8,7 +8,6 @@ import {
   nothing,
 } from "lit";
 import { property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
@@ -38,8 +37,6 @@ class MoreInfoHumidifier extends LitElement {
     }
   }
 
-  private _resizeDebounce?: number;
-
   protected render() {
     if (!this.stateObj) {
       return nothing;
@@ -135,21 +132,6 @@ class MoreInfoHumidifier extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("stateObj") || !this.stateObj) {
-      return;
-    }
-
-    if (this._resizeDebounce) {
-      clearTimeout(this._resizeDebounce);
-    }
-    this._resizeDebounce = window.setTimeout(() => {
-      fireEvent(this, "iron-resize");
-      this._resizeDebounce = undefined;
-    }, 500);
-  }
-
   private _handleStateChanged(ev) {
     const newVal = ev.target.value || null;
     this._callServiceHelper(

src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts

@@ -55,7 +55,6 @@ export class HuiViewVisibilityEditor extends LitElement {
 
     fetchUsers(this.hass).then((users) => {
       this._users = users.filter((user) => !user.system_generated);
-      fireEvent(this, "iron-resize");
     });
   }
 

src/panels/lovelace/hui-root.ts

@@ -655,8 +655,6 @@ class HUIRoot extends LitElement {
       if (!oldLovelace || oldLovelace.editMode !== this.lovelace!.editMode) {
         const views = this.config && this.config.views;
 
-        fireEvent(this, "iron-resize");
-
         // Leave unused entities when leaving edit mode
         if (
           this.lovelace!.mode === "storage" &&
@@ -980,8 +978,6 @@ class HUIRoot extends LitElement {
     }
 
     root.appendChild(view);
-    // Recalculate to see if we need to adjust content area for tab bar
-    fireEvent(this, "iron-resize");
   }
 
   static get styles(): CSSResultGroup {

src/panels/lovelace/views/hui-masonry-view.ts

@@ -64,11 +64,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   private _mqlListenerRef?: () => void;
 
-  public constructor() {
-    super();
-    this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     this._initMqls();

src/types.ts

@@ -49,7 +49,6 @@ declare global {
     };
     change: undefined;
     "hass-logout": undefined;
-    "iron-resize": undefined;
     "config-refresh": undefined;
     "hass-api-called": {
       success: boolean;