From 4d287a1f83deb85c7494761f673e83d56255ecb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Mon, 26 Apr 2021 16:41:30 +0200
Subject: [PATCH] Use top.history in dialogs and navigate (#8995)

---
 hassio/src/hassio-main.ts          |  5 ++++-
 src/common/navigate.ts             | 18 +++++++++++-------
 src/dialogs/make-dialog-manager.ts | 12 ++++++------
 src/state/url-sync-mixin.ts        | 18 +++++++++---------
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts
index fd05060c94..e5b8f89530 100644
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -44,7 +44,10 @@ export class HassioMain extends SupervisorBaseElement {
     // We changed the navigate event to fire directly on the window, as that's
     // where we are listening for it. However, the older panel_custom will
     // listen on this element for navigation events, so we need to forward them.
-    window.addEventListener("location-changed", (ev) =>
+
+    // Joakim - April 26, 2021
+    // Due to changes in behavior in Google Chrome, we changed navigate to fire on the top element
+    top.addEventListener("location-changed", (ev) =>
       // @ts-ignore
       fireEvent(this, ev.type, ev.detail, {
         bubbles: false,
diff --git a/src/common/navigate.ts b/src/common/navigate.ts
index e8505ca3d4..7bbc589f29 100644
--- a/src/common/navigate.ts
+++ b/src/common/navigate.ts
@@ -12,20 +12,24 @@ declare global {
 export const navigate = (_node: any, path: string, replace = false) => {
   if (__DEMO__) {
     if (replace) {
-      history.replaceState(
-        history.state?.root ? { root: true } : null,
+      top.history.replaceState(
+        top.history.state?.root ? { root: true } : null,
         "",
-        `${location.pathname}#${path}`
+        `${top.location.pathname}#${path}`
       );
     } else {
-      window.location.hash = path;
+      top.location.hash = path;
     }
   } else if (replace) {
-    history.replaceState(history.state?.root ? { root: true } : null, "", path);
+    top.history.replaceState(
+      top.history.state?.root ? { root: true } : null,
+      "",
+      path
+    );
   } else {
-    history.pushState(null, "", path);
+    top.history.pushState(null, "", path);
   }
-  fireEvent(window, "location-changed", {
+  fireEvent(top, "location-changed", {
     replace,
   });
 };
diff --git a/src/dialogs/make-dialog-manager.ts b/src/dialogs/make-dialog-manager.ts
index 129349e556..bc32b08050 100644
--- a/src/dialogs/make-dialog-manager.ts
+++ b/src/dialogs/make-dialog-manager.ts
@@ -61,25 +61,25 @@ export const showDialog = async (
   }
 
   if (addHistory) {
-    history.replaceState(
+    top.history.replaceState(
       {
         dialog: dialogTag,
         open: false,
         oldState:
-          history.state?.open && history.state?.dialog !== dialogTag
-            ? history.state
+          top.history.state?.open && top.history.state?.dialog !== dialogTag
+            ? top.history.state
             : null,
       },
       ""
     );
     try {
-      history.pushState(
+      top.history.pushState(
         { dialog: dialogTag, dialogParams: dialogParams, open: true },
         ""
       );
     } catch (err) {
       // dialogParams could not be cloned, probably contains callback
-      history.pushState(
+      top.history.pushState(
         { dialog: dialogTag, dialogParams: null, open: true },
         ""
       );
@@ -90,7 +90,7 @@ export const showDialog = async (
 };
 
 export const replaceDialog = () => {
-  history.replaceState({ ...history.state, replaced: true }, "");
+  top.history.replaceState({ ...top.history.state, replaced: true }, "");
 };
 
 export const closeDialog = async (dialogTag: string): Promise<boolean> => {
diff --git a/src/state/url-sync-mixin.ts b/src/state/url-sync-mixin.ts
index b7f44f89de..2a9efa8d05 100644
--- a/src/state/url-sync-mixin.ts
+++ b/src/state/url-sync-mixin.ts
@@ -28,13 +28,13 @@ export const urlSyncMixin = <
           if (history.length === 1) {
             history.replaceState({ ...history.state, root: true }, "");
           }
-          window.addEventListener("popstate", this._popstateChangeListener);
+          top.addEventListener("popstate", this._popstateChangeListener);
           this.addEventListener("dialog-closed", this._dialogClosedListener);
         }
 
         public disconnectedCallback(): void {
           super.disconnectedCallback();
-          window.removeEventListener("popstate", this._popstateChangeListener);
+          top.removeEventListener("popstate", this._popstateChangeListener);
           this.removeEventListener("dialog-closed", this._dialogClosedListener);
         }
 
@@ -45,21 +45,21 @@ export const urlSyncMixin = <
             console.log("dialog closed", ev.detail.dialog);
             console.log(
               "open",
-              history.state?.open,
+              top.history.state?.open,
               "dialog",
-              history.state?.dialog
+              top.history.state?.dialog
             );
           }
           // If not closed by navigating back, and not a new dialog is open, remove the open state from history
           if (
-            history.state?.open &&
-            history.state?.dialog === ev.detail.dialog
+            top.history.state?.open &&
+            top.history.state?.dialog === ev.detail.dialog
           ) {
             if (DEBUG) {
               console.log("remove state", ev.detail.dialog);
             }
             this._ignoreNextPopState = true;
-            history.back();
+            top.history.back();
           }
         };
 
@@ -73,7 +73,7 @@ export const urlSyncMixin = <
               if (DEBUG) {
                 console.log("remove old state", ev.state.oldState);
               }
-              history.back();
+              top.history.back();
               return;
             }
             this._ignoreNextPopState = false;
@@ -98,7 +98,7 @@ export const urlSyncMixin = <
                 console.log("dialog could not be closed");
               }
               // dialog could not be closed, push state again
-              history.pushState(
+              top.history.pushState(
                 {
                   dialog: state.dialog,
                   open: true,