From 8a57e506644d5da2311f1e9193c3a0560acb472a Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 16 Sep 2024 13:56:54 +0200
Subject: [PATCH] DEV: Fix some js deprecations (#28915)

1. `MediaQueryList.addListener` is deprecated in favor of `addEventListener`
2. `HTMLStyleElement.type` is deprecated with no replacement
---
 .../javascripts/discourse/app/components/ace-editor.gjs  | 4 ++--
 .../app/instance-initializers/hashtag-css-generator.js   | 5 +----
 .../app/instance-initializers/webview-background.js      | 9 ++++++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/ace-editor.gjs b/app/assets/javascripts/discourse/app/components/ace-editor.gjs
index 213ffda552e..66e5892bccb 100644
--- a/app/assets/javascripts/discourse/app/components/ace-editor.gjs
+++ b/app/assets/javascripts/discourse/app/components/ace-editor.gjs
@@ -94,7 +94,7 @@ export default class AceEditor extends Component {
     this.appEvents.on("ace:resize", this.resize);
     window.addEventListener("resize", this.resize);
     this._darkModeListener = window.matchMedia("(prefers-color-scheme: dark)");
-    this._darkModeListener.addListener(this.setAceTheme);
+    this._darkModeListener.addEventListener("change", this.setAceTheme);
   }
 
   willDestroy() {
@@ -102,7 +102,7 @@ export default class AceEditor extends Component {
 
     this.editor?.destroy();
 
-    this._darkModeListener?.removeListener(this.setAceTheme);
+    this._darkModeListener?.removeEventListener("change", this.setAceTheme);
     window.removeEventListener("resize", this.resize);
     this.appEvents.off("ace:resize", this.resize);
   }
diff --git a/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js b/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js
index 7bfef4fe959..36c013e73f5 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js
@@ -12,11 +12,8 @@ export default {
    * with the hashtag type via api.registerHashtagType. The default
    * ones in core are CategoryHashtagType and TagHashtagType.
    */
-  initialize(owner) {
-    this.site = owner.lookup("service:site");
-
+  initialize() {
     const cssTag = document.createElement("style");
-    cssTag.type = "text/css";
     cssTag.id = "hashtag-css-generator";
     cssTag.innerHTML = Object.values(getHashtagTypeClasses())
       .map((hashtagType) => hashtagType.generatePreloadedCssClasses())
diff --git a/app/assets/javascripts/discourse/app/instance-initializers/webview-background.js b/app/assets/javascripts/discourse/app/instance-initializers/webview-background.js
index 0e68eab1e31..30dc5cfe7f0 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/webview-background.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/webview-background.js
@@ -10,10 +10,17 @@ export default {
     if (caps.isAppWebview) {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .addListener(this.updateAppBackground);
+        .addEventListener("change", this.updateAppBackground);
       this.updateAppBackground();
     }
   },
+
+  teardown() {
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .removeEventListener("change", this.updateAppBackground);
+  },
+
   updateAppBackground() {
     discourseLater(() => {
       const header = document.querySelector(".d-header-wrap .d-header");