From 648c02e622f91adafd7d06d1ff71ae7161e34438 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 24 Jan 2022 15:43:28 +0100
Subject: [PATCH] Don't sync dev tools service data between tabs (#10980)

---
 src/common/decorators/local-storage.ts         | 18 +++++++++++++-----
 .../cloud/account/dialog-cloud-tts-try.ts      |  4 ++--
 .../service/developer-tools-service.ts         |  4 ++--
 .../media-browser/ha-panel-media-browser.ts    |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/common/decorators/local-storage.ts b/src/common/decorators/local-storage.ts
index 6c61546ebe..52dae445fe 100644
--- a/src/common/decorators/local-storage.ts
+++ b/src/common/decorators/local-storage.ts
@@ -5,7 +5,10 @@ import type { ClassElement } from "../../types";
 type Callback = (oldValue: any, newValue: any) => void;
 
 class Storage {
-  constructor() {
+  constructor(subscribe = true) {
+    if (!subscribe) {
+      return;
+    }
     window.addEventListener("storage", (ev: StorageEvent) => {
       if (ev.key && this.hasKey(ev.key)) {
         this._storage[ev.key] = ev.newValue
@@ -80,15 +83,18 @@ class Storage {
   }
 }
 
-const storage = new Storage();
+const subscribeStorage = new Storage();
 
 export const LocalStorage =
   (
     storageKey?: string,
     property?: boolean,
+    subscribe = true,
     propertyOptions?: PropertyDeclaration
   ): any =>
   (clsElement: ClassElement) => {
+    const storage = subscribe ? subscribeStorage : new Storage(false);
+
     const key = String(clsElement.key);
     storageKey = storageKey || String(clsElement.key);
     const initVal = clsElement.initializer
@@ -97,7 +103,7 @@ export const LocalStorage =
 
     storage.addFromStorage(storageKey);
 
-    const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
+    const subscribeChanges = (el: ReactiveElement): UnsubscribeFunc =>
       storage.subscribeChanges(storageKey!, (oldValue) => {
         el.requestUpdate(clsElement.key, oldValue);
       });
@@ -131,17 +137,19 @@ export const LocalStorage =
         configurable: true,
       },
       finisher(cls: typeof ReactiveElement) {
-        if (property) {
+        if (property && subscribe) {
           const connectedCallback = cls.prototype.connectedCallback;
           const disconnectedCallback = cls.prototype.disconnectedCallback;
           cls.prototype.connectedCallback = function () {
             connectedCallback.call(this);
-            this[`__unbsubLocalStorage${key}`] = subscribe(this);
+            this[`__unbsubLocalStorage${key}`] = subscribeChanges(this);
           };
           cls.prototype.disconnectedCallback = function () {
             disconnectedCallback.call(this);
             this[`__unbsubLocalStorage${key}`]();
           };
+        }
+        if (property) {
           cls.createProperty(clsElement.key, {
             noAccessor: true,
             ...propertyOptions,
diff --git a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
index c80f4117c7..a65c544e40 100644
--- a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
+++ b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
@@ -31,9 +31,9 @@ export class DialogTryTts extends LitElement {
 
   @query("#message") private _messageInput?: PaperTextareaElement;
 
-  @LocalStorage("cloudTtsTryMessage") private _message!: string;
+  @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string;
 
-  @LocalStorage("cloudTtsTryTarget") private _target!: string;
+  @LocalStorage("cloudTtsTryTarget", false, false) private _target!: string;
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;
diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index 77b85734b9..71ffb9f8d3 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -38,10 +38,10 @@ class HaPanelDevService extends LitElement {
 
   @state() private _uiAvailable = true;
 
-  @LocalStorage("panel-dev-service-state-service-data", true)
+  @LocalStorage("panel-dev-service-state-service-data", true, false)
   private _serviceData?: ServiceAction = { service: "", target: {}, data: {} };
 
-  @LocalStorage("panel-dev-service-state-yaml-mode", true)
+  @LocalStorage("panel-dev-service-state-yaml-mode", true, false)
   private _yamlMode = false;
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts
index 6e160d7429..01c65f3be5 100644
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/src/panels/media-browser/ha-panel-media-browser.ts
@@ -38,7 +38,7 @@ class PanelMediaBrowser extends LitElement {
     },
   ];
 
-  @LocalStorage("mediaBrowseEntityId")
+  @LocalStorage("mediaBrowseEntityId", true, false)
   private _entityId = BROWSER_PLAYER;
 
   protected render(): TemplateResult {