diff --git a/src/common/util/view-transition.ts b/src/common/util/view-transition.ts index a53ab4715c..235e8cf374 100644 --- a/src/common/util/view-transition.ts +++ b/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 => { - if (!document.startViewTransition) { + if (!document.startViewTransition || isViewTransitionDisabled) { callback(false); return Promise.resolve(); } diff --git a/src/panels/config/developer-tools/debug/developer-tools-debug.ts b/src/panels/config/developer-tools/debug/developer-tools-debug.ts index 50af67654c..810068d934 100644 --- a/src/panels/config/developer-tools/debug/developer-tools-debug.ts +++ b/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} > + + + ${this.hass.localize( + "ui.panel.config.developer-tools.tabs.debug.disable_view_transition.title" + )} + + + ${this.hass.localize( + "ui.panel.config.developer-tools.tabs.debug.disable_view_transition.description" + )} + + + + `; + } + + 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; + } +} diff --git a/src/translations/en.json b/src/translations/en.json index 0b014644bf..ca14546a6b 100644 --- a/src/translations/en.json +++ b/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.",