Add an disable view transition as it crashes chrome browser when using chrome dev tools (#29339)

src/common/util/view-transition.ts

@@ -1,3 +1,15 @@
+let isViewTransitionDisabled = false;
+try {
+  isViewTransitionDisabled =
+    window.localStorage.getItem("disableViewTransition") === "true";
+} catch {
+  // ignore
+}
+
+export const setViewTransitionDisabled = (disabled: boolean): void => {
+  isViewTransitionDisabled = disabled;
+};
+
 /**
  * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
@@ -14,7 +26,7 @@
 export const withViewTransition = (
   callback: (viewTransitionAvailable: boolean) => void
 ): Promise<void> => {
-  if (!document.startViewTransition) {
+  if (!document.startViewTransition || isViewTransitionDisabled) {
     callback(false);
     return Promise.resolve();
   }

src/panels/config/developer-tools/debug/developer-tools-debug.ts

@@ -7,6 +7,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./ha-debug-connection-row";
+import "./ha-debug-disable-view-transition-row";
 import {
   getStatisticMetadata,
   validateStatistics,
@@ -37,6 +38,10 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
             .hass=${this.hass}
             .narrow=${this.narrow}
           ></ha-debug-connection-row>
+          <ha-debug-disable-view-transition-row
+            .hass=${this.hass}
+            .narrow=${this.narrow}
+          ></ha-debug-disable-view-transition-row>
         </ha-card>
         <ha-card
           .header=${this.hass.localize(

src/panels/config/developer-tools/debug/ha-debug-disable-view-transition-row.ts

@@ -0,0 +1,51 @@
+import type { TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { storage } from "../../../../common/decorators/storage";
+import { setViewTransitionDisabled } from "../../../../common/util/view-transition";
+import "../../../../components/ha-settings-row";
+import "../../../../components/ha-switch";
+import type { HaSwitch } from "../../../../components/ha-switch";
+import type { HomeAssistant } from "../../../../types";
+
+@customElement("ha-debug-disable-view-transition-row")
+class HaDebugDisableViewTransitionRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @storage({ key: "disableViewTransition", state: true, subscribe: false })
+  private _disabled = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize(
+            "ui.panel.config.developer-tools.tabs.debug.disable_view_transition.title"
+          )}
+        </span>
+        <span slot="description">
+          ${this.hass.localize(
+            "ui.panel.config.developer-tools.tabs.debug.disable_view_transition.description"
+          )}
+        </span>
+        <ha-switch
+          .checked=${this._disabled}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private _checkedChanged(ev: Event) {
+    this._disabled = (ev.target as HaSwitch).checked;
+    setViewTransitionDisabled(this._disabled);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-debug-disable-view-transition-row": HaDebugDisableViewTransitionRow;
+  }
+}

src/translations/en.json

@@ -3471,6 +3471,10 @@
                 "title": "Debug connection",
                 "description": "Observe requests to the server and responses from the server in browser console."
               },
+              "disable_view_transition": {
+                "title": "Disable view transitions",
+                "description": "Disable animated view transitions to prevent browser crash when using browser dev tools."
+              },
               "entity_diagnostic": {
                 "title": "Entity diagnostic",
                 "description": "Select an entity to copy diagnostic details.",