From a0c63c8cc4b8035b5498abf438e4be2a01346ebf Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Sat, 16 Mar 2024 00:27:26 +0100
Subject: [PATCH 01/14] added notification dot and it seems to work well

---
 packages/frontend/src/ui/_common_/common.vue | 71 +++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 4fe53ae6a3..85d7b201ce 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
@@ -70,6 +70,70 @@ const dev = _DEV_;
 
 const notifications = ref<Misskey.entities.Notification[]>([]);
 
+class NotificationFavIconDot {
+	canvas : HTMLCanvasElement;
+	src : string | null = null;
+	ctx : CanvasRenderingContext2D | null = null;
+	favconImage : HTMLImageElement | null = null;
+
+	constructor() {
+		this.canvas = document.createElement('canvas');
+
+		if (this.faviconEL == null) return;
+
+		this.src = this.faviconEL.getAttribute('href');
+		this.ctx = this.canvas.getContext('2d');
+
+		this.favconImage = document.createElement('img');
+		this.favconImage.src = this.faviconEL.href;
+
+		this.favconImage.onload = () => {
+			if (!this.favconImage) return;
+
+			this.canvas.width = this.favconImage.width;
+			this.canvas.height = this.favconImage.height;
+		};
+	}
+
+	faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+
+	_createFaviconElem() {
+		const newLink = document.createElement('link');
+		newLink.rel = 'icon';
+		newLink.href = '/favicon.ico';
+		document.head.appendChild(newLink);
+		return newLink;
+	}
+
+	_drawIcon() {
+		if (!this.ctx || !this.favconImage) return;
+		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
+	}
+
+	_drawDot() {
+		if (!this.ctx || !this.favconImage) return;
+		this.ctx.beginPath();
+		this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
+		this.ctx.fillStyle = 'red';
+		this.ctx.strokeStyle = this.ctx.fillStyle;
+		this.ctx.fill();
+		this.ctx.stroke();
+	}
+
+	_drawFavicon() {
+		this.faviconEL.href = this.canvas.toDataURL('image/png');
+	}
+
+	setVisible(isVisible : boolean) {
+		this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this._drawIcon();
+		if (isVisible) this._drawDot();
+		this._drawFavicon();
+	}
+}
+
+const notificationDot = new NotificationFavIconDot();
+
 function onNotification(notification: Misskey.entities.Notification, isClient = false) {
 	if (document.visibilityState === 'visible') {
 		if (!isClient && notification.type !== 'test') {
@@ -93,6 +157,11 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
+	
+	watch(() => $i?.hasUnreadNotification, (hasAny) => {
+		notificationDot.setVisible(hasAny ?? false);
+	});
+
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 
 	//#region Listen message from SW

From 395ea9ab9fd29ac72226e2deda9a0632d46df323 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Sat, 16 Mar 2024 01:08:08 +0100
Subject: [PATCH 02/14] made notification dot appear if you load the page and
 there are already notifs

---
 packages/frontend/src/ui/_common_/common.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 85d7b201ce..70097d89ab 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -75,6 +75,7 @@ class NotificationFavIconDot {
 	src : string | null = null;
 	ctx : CanvasRenderingContext2D | null = null;
 	favconImage : HTMLImageElement | null = null;
+	loaded = false;
 
 	constructor() {
 		this.canvas = document.createElement('canvas');
@@ -92,6 +93,7 @@ class NotificationFavIconDot {
 
 			this.canvas.width = this.favconImage.width;
 			this.canvas.height = this.favconImage.height;
+			this.loaded = true;
 		};
 	}
 
@@ -120,11 +122,14 @@ class NotificationFavIconDot {
 		this.ctx.stroke();
 	}
 
-	_drawFavicon() {
+	private _drawFavicon() {
 		this.faviconEL.href = this.canvas.toDataURL('image/png');
 	}
 
-	setVisible(isVisible : boolean) {
+	async setVisible(isVisible : boolean) {
+		//Wait for it to have loaded the icon
+		const waiter = (done) => (this.loaded ? done() : setTimeout(() => waiter(done), 500));
+		await new Promise(waiter);
 		this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		this._drawIcon();
 		if (isVisible) this._drawDot();
@@ -158,9 +163,9 @@ if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
 	
-	watch(() => $i?.hasUnreadNotification, (hasAny) => {
-		notificationDot.setVisible(hasAny ?? false);
-	});
+	watch(() => $i?.hasUnreadNotification, (hasAny) => notificationDot.setVisible(hasAny ?? false));
+	
+	if ($i.hasUnreadNotification) notificationDot.setVisible(true);
 
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 

From 8f300cf4601776e00ebe72b6f6fa5fb755dec6d3 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Sat, 16 Mar 2024 01:23:02 +0100
Subject: [PATCH 03/14] added setting

---
 locales/en-US.yml                                      |  1 +
 locales/index.d.ts                                     |  4 ++++
 locales/ja-JP.yml                                      |  1 +
 packages/frontend/src/pages/settings/general.vue       |  2 ++
 .../src/pages/settings/preferences-backups.vue         |  1 +
 packages/frontend/src/store.ts                         |  4 ++++
 packages/frontend/src/ui/_common_/common.vue           | 10 ++++------
 7 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 80e45c42d8..e22b92e2f6 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -688,6 +688,7 @@ channel: "Channels"
 create: "Create"
 notificationSetting: "Notification settings"
 notificationSettingDesc: "Select the types of notification to display."
+enableFaviconNotificationDot: "Enable favicon notification dot"
 useGlobalSetting: "Use global settings"
 useGlobalSettingDesc: "If turned on, your account's notification settings will be used. If turned off, individual configurations can be made."
 other: "Other"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index e407d2119b..422f1c8429 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -2764,6 +2764,10 @@ export interface Locale extends ILocale {
      * 表示する通知の種別を選択してください。
      */
     "notificationSettingDesc": string;
+    /**
+     * ファビコン通知ドットを有効にする
+     */
+    "enableFaviconNotificationDot": string;
     /**
      * グローバル設定を使う
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 57f52c64b2..e20907e6b7 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -687,6 +687,7 @@ channel: "チャンネル"
 create: "作成"
 notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種別を選択してください。"
+enableFaviconNotificationDot: "ファビコン通知ドットを有効にする"
 useGlobalSetting: "グローバル設定を使う"
 useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
 other: "その他"
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 1e4e815d5d..b216622c33 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -180,6 +180,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div class="_gaps_m">
 			<div class="_gaps_s">
+				<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
 				<MkSwitch v-model="warnMissingAltText">{{ i18n.ts.warnForMissingAltText }}</MkSwitch>
 				<MkSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</MkSwitch>
 				<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
@@ -337,6 +338,7 @@ const oneko = computed(defaultStore.makeGetterSetter('oneko'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
+const enableFaviconNotificationDot = computed(defaultStore.makeGetterSetter('enableFaviconNotificationDot'));
 const warnMissingAltText = computed(defaultStore.makeGetterSetter('warnMissingAltText'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
 const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index f180e0b72c..86b8debe3a 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -72,6 +72,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'advancedMfm',
 	'loadRawImages',
 	'warnMissingAltText',
+	'enableFaviconNotificationDot',
 	'imageNewTab',
 	'dataSaver',
 	'disableShowingAnimatedImages',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 2cf17b27c5..7f6377613e 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -268,6 +268,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableFaviconNotificationDot: {
+		where: 'device',
+		default: true,
+	},
 	imageNewTab: {
 		where: 'device',
 		default: false,
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 70097d89ab..77148835f8 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -80,8 +80,6 @@ class NotificationFavIconDot {
 	constructor() {
 		this.canvas = document.createElement('canvas');
 
-		if (this.faviconEL == null) return;
-
 		this.src = this.faviconEL.getAttribute('href');
 		this.ctx = this.canvas.getContext('2d');
 
@@ -162,11 +160,11 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
-	
-	watch(() => $i?.hasUnreadNotification, (hasAny) => notificationDot.setVisible(hasAny ?? false));
-	
-	if ($i.hasUnreadNotification) notificationDot.setVisible(true);
 
+	watch(() => $i?.hasUnreadNotification, (hasAny) => notificationDot.setVisible((defaultStore.state.enableFaviconNotificationDot ? hasAny : false) ?? false));
+
+	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) notificationDot.setVisible(true);
+	
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 
 	//#region Listen message from SW

From ccf5659ac3548b671820c4fe45d6656aca1013f6 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Sat, 16 Mar 2024 01:34:20 +0100
Subject: [PATCH 04/14] made methods private

---
 packages/frontend/src/ui/_common_/common.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 77148835f8..78fd2d2172 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -97,7 +97,7 @@ class NotificationFavIconDot {
 
 	faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
 
-	_createFaviconElem() {
+	private _createFaviconElem() {
 		const newLink = document.createElement('link');
 		newLink.rel = 'icon';
 		newLink.href = '/favicon.ico';
@@ -105,12 +105,12 @@ class NotificationFavIconDot {
 		return newLink;
 	}
 
-	_drawIcon() {
+	private _drawIcon() {
 		if (!this.ctx || !this.favconImage) return;
 		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
 	}
 
-	_drawDot() {
+	private _drawDot() {
 		if (!this.ctx || !this.favconImage) return;
 		this.ctx.beginPath();
 		this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);

From 459e6841179979188b119be406e030e1afaf5516 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Tue, 19 Mar 2024 22:00:28 +0100
Subject: [PATCH 05/14] fixed some of the issues with it

---
 packages/frontend/src/ui/_common_/common.vue | 37 ++++++++++----------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 78fd2d2172..a5e5d19a35 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -75,28 +75,29 @@ class NotificationFavIconDot {
 	src : string | null = null;
 	ctx : CanvasRenderingContext2D | null = null;
 	favconImage : HTMLImageElement | null = null;
-	loaded = false;
+	faviconEL : HTMLLinkElement;
+	hasLoaded : Promise;
 
 	constructor() {
 		this.canvas = document.createElement('canvas');
+		this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
 
 		this.src = this.faviconEL.getAttribute('href');
 		this.ctx = this.canvas.getContext('2d');
-
+		
 		this.favconImage = document.createElement('img');
 		this.favconImage.src = this.faviconEL.href;
+		this.hasLoaded = new Promise((resolve, reject) => {
+			this.favconImage.onload = () => {
+				this.canvas.width = this.favconImage.width;
+				this.canvas.height = this.favconImage.height;
 
-		this.favconImage.onload = () => {
-			if (!this.favconImage) return;
-
-			this.canvas.width = this.favconImage.width;
-			this.canvas.height = this.favconImage.height;
-			this.loaded = true;
-		};
+				// resolve();
+				setTimeout(() => resolve(), 500);
+			};
+		});
 	}
 
-	faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
-
 	private _createFaviconElem() {
 		const newLink = document.createElement('link');
 		newLink.rel = 'icon';
@@ -107,6 +108,7 @@ class NotificationFavIconDot {
 
 	private _drawIcon() {
 		if (!this.ctx || !this.favconImage) return;
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
 	}
 
@@ -114,24 +116,23 @@ class NotificationFavIconDot {
 		if (!this.ctx || !this.favconImage) return;
 		this.ctx.beginPath();
 		this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
-		this.ctx.fillStyle = 'red';
-		this.ctx.strokeStyle = this.ctx.fillStyle;
+		this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
+		this.ctx.strokeStyle = 'white';
 		this.ctx.fill();
 		this.ctx.stroke();
 	}
 
-	private _drawFavicon() {
+	private _setFavicon() {
 		this.faviconEL.href = this.canvas.toDataURL('image/png');
 	}
 
 	async setVisible(isVisible : boolean) {
 		//Wait for it to have loaded the icon
-		const waiter = (done) => (this.loaded ? done() : setTimeout(() => waiter(done), 500));
-		await new Promise(waiter);
-		this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		await this.hasLoaded;
+		console.log(this.hasLoaded);
 		this._drawIcon();
 		if (isVisible) this._drawDot();
-		this._drawFavicon();
+		this._setFavicon();
 	}
 }
 

From de80727cfc725a2f072c5d8929ad2b87c1cf49ae Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Tue, 2 Apr 2024 23:30:14 +0200
Subject: [PATCH 06/14] Moved class to seperate file and fixed some ts warnings

---
 packages/frontend/src/scripts/favicon-dot.ts | 75 ++++++++++++++++++++
 packages/frontend/src/ui/_common_/common.vue | 74 ++-----------------
 2 files changed, 79 insertions(+), 70 deletions(-)
 create mode 100644 packages/frontend/src/scripts/favicon-dot.ts

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
new file mode 100644
index 0000000000..3a7887bca9
--- /dev/null
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -0,0 +1,75 @@
+class FavIconDot {
+	canvas : HTMLCanvasElement;
+	src : string | null = null;
+	ctx : CanvasRenderingContext2D | null = null;
+	favconImage : HTMLImageElement | null = null;
+	faviconEL : HTMLLinkElement;
+	hasLoaded : Promise<void>;
+
+	constructor() {
+		this.canvas = document.createElement('canvas');
+		this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+
+		this.src = this.faviconEL.getAttribute('href');
+		this.ctx = this.canvas.getContext('2d');
+		
+		this.favconImage = document.createElement('img');
+		this.hasLoaded = new Promise((resolve, _reject) => {
+			if (this.favconImage != null) {
+				this.favconImage.onload = () => {
+					this.canvas.width = (this.favconImage as HTMLImageElement).width;
+					this.canvas.height = (this.favconImage as HTMLImageElement).height;
+					// resolve();
+					setTimeout(() => resolve(), 200);
+				};
+			}
+		});
+		this.favconImage.src = this.faviconEL.href;
+	}
+
+	private _createFaviconElem() {
+		const newLink = document.createElement('link');
+		newLink.rel = 'icon';
+		newLink.href = '/favicon.ico';
+		document.head.appendChild(newLink);
+		return newLink;
+	}
+
+	private _drawIcon() {
+		if (!this.ctx || !this.favconImage) return;
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
+	}
+
+	private _drawDot() {
+		if (!this.ctx || !this.favconImage) return;
+		this.ctx.beginPath();
+		this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
+		this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
+		this.ctx.strokeStyle = 'white';
+		this.ctx.fill();
+		this.ctx.stroke();
+	}
+
+	private _setFavicon() {
+		this.faviconEL.href = this.canvas.toDataURL('image/png');
+	}
+
+	async setVisible(isVisible : boolean) {
+		//Wait for it to have loaded the icon
+		await this.hasLoaded;
+		console.log(this.hasLoaded);
+		this._drawIcon();
+		if (isVisible) this._drawDot();
+		this._setFavicon();
+	}
+}
+
+let icon: FavIconDot = new FavIconDot();
+
+export function setFavIconDot(visible: boolean) {
+	if (!icon) {
+		icon = new FavIconDot();
+	}
+	icon.setVisible(visible);
+}
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index a5e5d19a35..63b19dfb26 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -49,6 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
+import { setFavIconDot } from '../../scripts/favicon-dot';
 import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
 import { popups } from '@/os.js';
@@ -70,74 +71,6 @@ const dev = _DEV_;
 
 const notifications = ref<Misskey.entities.Notification[]>([]);
 
-class NotificationFavIconDot {
-	canvas : HTMLCanvasElement;
-	src : string | null = null;
-	ctx : CanvasRenderingContext2D | null = null;
-	favconImage : HTMLImageElement | null = null;
-	faviconEL : HTMLLinkElement;
-	hasLoaded : Promise;
-
-	constructor() {
-		this.canvas = document.createElement('canvas');
-		this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
-
-		this.src = this.faviconEL.getAttribute('href');
-		this.ctx = this.canvas.getContext('2d');
-		
-		this.favconImage = document.createElement('img');
-		this.favconImage.src = this.faviconEL.href;
-		this.hasLoaded = new Promise((resolve, reject) => {
-			this.favconImage.onload = () => {
-				this.canvas.width = this.favconImage.width;
-				this.canvas.height = this.favconImage.height;
-
-				// resolve();
-				setTimeout(() => resolve(), 500);
-			};
-		});
-	}
-
-	private _createFaviconElem() {
-		const newLink = document.createElement('link');
-		newLink.rel = 'icon';
-		newLink.href = '/favicon.ico';
-		document.head.appendChild(newLink);
-		return newLink;
-	}
-
-	private _drawIcon() {
-		if (!this.ctx || !this.favconImage) return;
-		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
-	}
-
-	private _drawDot() {
-		if (!this.ctx || !this.favconImage) return;
-		this.ctx.beginPath();
-		this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
-		this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
-		this.ctx.strokeStyle = 'white';
-		this.ctx.fill();
-		this.ctx.stroke();
-	}
-
-	private _setFavicon() {
-		this.faviconEL.href = this.canvas.toDataURL('image/png');
-	}
-
-	async setVisible(isVisible : boolean) {
-		//Wait for it to have loaded the icon
-		await this.hasLoaded;
-		console.log(this.hasLoaded);
-		this._drawIcon();
-		if (isVisible) this._drawDot();
-		this._setFavicon();
-	}
-}
-
-const notificationDot = new NotificationFavIconDot();
-
 function onNotification(notification: Misskey.entities.Notification, isClient = false) {
 	if (document.visibilityState === 'visible') {
 		if (!isClient && notification.type !== 'test') {
@@ -162,9 +95,10 @@ if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
 
-	watch(() => $i?.hasUnreadNotification, (hasAny) => notificationDot.setVisible((defaultStore.state.enableFaviconNotificationDot ? hasAny : false) ?? false));
+	//For the favicon notification dot
+	watch(() => $i?.hasUnreadNotification, (hasAny) => setFavIconDot((defaultStore.state.enableFaviconNotificationDot ? hasAny : false) ?? false));
 
-	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) notificationDot.setVisible(true);
+	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
 	
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 

From 7730472c7789a2d67ca10d6b3f12e7c7301521fe Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Tue, 2 Apr 2024 23:33:37 +0200
Subject: [PATCH 07/14] moved setting toggle under notifications category

---
 packages/frontend/src/pages/settings/general.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index b216622c33..c96d803d12 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -112,6 +112,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_m">
 			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
 
+			<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
+
 			<MkRadios v-model="notificationPosition">
 				<template #label>{{ i18n.ts.position }}</template>
 				<option value="leftTop"><i class="ph-arrow-up-left ph-bold ph-lg"></i> {{ i18n.ts.leftTop }}</option>
@@ -180,7 +182,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div class="_gaps_m">
 			<div class="_gaps_s">
-				<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
 				<MkSwitch v-model="warnMissingAltText">{{ i18n.ts.warnForMissingAltText }}</MkSwitch>
 				<MkSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</MkSwitch>
 				<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>

From 590f7abefdadc25f540d40c6962d193d2a47368e Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Thu, 2 May 2024 17:22:30 +0200
Subject: [PATCH 08/14] removed use of settimeout

---
 packages/frontend/src/scripts/favicon-dot.ts | 81 ++++++++++++++------
 1 file changed, 58 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index 3a7887bca9..d54991f067 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -2,29 +2,52 @@ class FavIconDot {
 	canvas : HTMLCanvasElement;
 	src : string | null = null;
 	ctx : CanvasRenderingContext2D | null = null;
-	favconImage : HTMLImageElement | null = null;
-	faviconEL : HTMLLinkElement;
-	hasLoaded : Promise<void>;
+	faviconImage : HTMLImageElement | null = null;
+	faviconEL : HTMLLinkElement | undefined;
+	hasLoaded : Promise<void> | undefined;
 
 	constructor() {
 		this.canvas = document.createElement('canvas');
-		this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+	}
 
+	//MUST BE CALLED BEFORE CALLING ANY OTHER FUNCTIONS
+	public async setup() {
+		const element : HTMLLinkElement = await this.getOrMakeFaviconElement();
+		
+		this.faviconEL = element;
 		this.src = this.faviconEL.getAttribute('href');
 		this.ctx = this.canvas.getContext('2d');
-		
-		this.favconImage = document.createElement('img');
-		this.hasLoaded = new Promise((resolve, _reject) => {
-			if (this.favconImage != null) {
-				this.favconImage.onload = () => {
-					this.canvas.width = (this.favconImage as HTMLImageElement).width;
-					this.canvas.height = (this.favconImage as HTMLImageElement).height;
-					// resolve();
-					setTimeout(() => resolve(), 200);
+			
+		this.faviconImage = document.createElement('img');
+		this.faviconImage.src = this.faviconEL.href;
+	
+		this.hasLoaded = new Promise((resolve, reject) => {
+			(this.faviconImage as HTMLImageElement).onload = () => {
+				this.canvas.width = (this.faviconImage as HTMLImageElement).width;
+				this.canvas.height = (this.faviconImage as HTMLImageElement).height;
+				resolve();
+			};
+	
+			(this.faviconImage as HTMLImageElement).onerror = () => {
+				reject('Failed to create favicon img element');
+			};
+		});
+	}
+
+	private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
+		return new Promise((resolve, reject) => {
+			const favicon = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+			if (favicon === document.querySelector<HTMLLinkElement>('link[rel$=icon]')) {
+				favicon.onload = () => {
+					resolve(favicon);
+				};
+
+				favicon.onerror = () => {
+					reject('Failed to load favicon');
 				};
 			}
+			resolve(favicon);
 		});
-		this.favconImage.src = this.faviconEL.href;
 	}
 
 	private _createFaviconElem() {
@@ -36,15 +59,15 @@ class FavIconDot {
 	}
 
 	private _drawIcon() {
-		if (!this.ctx || !this.favconImage) return;
+		if (!this.ctx || !this.faviconImage) return;
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
+		this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height);
 	}
 
 	private _drawDot() {
-		if (!this.ctx || !this.favconImage) return;
+		if (!this.ctx || !this.faviconImage) return;
 		this.ctx.beginPath();
-		this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
+		this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
 		this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
 		this.ctx.strokeStyle = 'white';
 		this.ctx.fill();
@@ -52,7 +75,7 @@ class FavIconDot {
 	}
 
 	private _setFavicon() {
-		this.faviconEL.href = this.canvas.toDataURL('image/png');
+		if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
 	}
 
 	async setVisible(isVisible : boolean) {
@@ -65,11 +88,23 @@ class FavIconDot {
 	}
 }
 
-let icon: FavIconDot = new FavIconDot();
+let icon: FavIconDot | undefined = undefined;
 
 export function setFavIconDot(visible: boolean) {
-	if (!icon) {
-		icon = new FavIconDot();
+	const setIconVisibility = async () => {
+		if (!icon) {
+			icon = new FavIconDot();
+			await icon.setup();
+		}
+		
+		(icon as FavIconDot).setVisible(visible);
+	};
+
+	// If document is already loaded, set visibility immediately
+	if (document.readyState === 'complete') {
+		setIconVisibility();
+	} else {
+		// Otherwise, set visibility when window loads
+		window.onload = setIconVisibility;
 	}
-	icon.setVisible(visible);
 }

From 42c29697070f40c994e8661f8b88ea652b46f162 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Thu, 2 May 2024 17:38:16 +0200
Subject: [PATCH 09/14] fixes

---
 packages/frontend/src/scripts/favicon-dot.ts | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index d54991f067..2e05171772 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -19,7 +19,6 @@ class FavIconDot {
 		this.ctx = this.canvas.getContext('2d');
 			
 		this.faviconImage = document.createElement('img');
-		this.faviconImage.src = this.faviconEL.href;
 	
 		this.hasLoaded = new Promise((resolve, reject) => {
 			(this.faviconImage as HTMLImageElement).onload = () => {
@@ -32,20 +31,20 @@ class FavIconDot {
 				reject('Failed to create favicon img element');
 			};
 		});
+
+		this.faviconImage.src = this.faviconEL.href;
 	}
 
 	private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
 		return new Promise((resolve, reject) => {
 			const favicon = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
-			if (favicon === document.querySelector<HTMLLinkElement>('link[rel$=icon]')) {
-				favicon.onload = () => {
-					resolve(favicon);
-				};
+			favicon.onload = () => {
+				resolve(favicon);
+			};
 
-				favicon.onerror = () => {
-					reject('Failed to load favicon');
-				};
-			}
+			favicon.onerror = () => {
+				reject('Failed to load favicon');
+			};
 			resolve(favicon);
 		});
 	}

From 47d1477ac493ac88d5b97b55de39e86251ab1735 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Fri, 3 May 2024 11:27:41 +0200
Subject: [PATCH 10/14] did thread fixes

---
 packages/frontend/src/scripts/favicon-dot.ts | 16 +++++++---------
 packages/frontend/src/ui/_common_/common.vue |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index 2e05171772..c40a08f427 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -21,15 +21,14 @@ class FavIconDot {
 		this.faviconImage = document.createElement('img');
 	
 		this.hasLoaded = new Promise((resolve, reject) => {
-			(this.faviconImage as HTMLImageElement).onload = () => {
+			(this.faviconImage as HTMLImageElement).addEventListener('load', () => {
 				this.canvas.width = (this.faviconImage as HTMLImageElement).width;
 				this.canvas.height = (this.faviconImage as HTMLImageElement).height;
 				resolve();
-			};
-	
-			(this.faviconImage as HTMLImageElement).onerror = () => {
+			});
+			(this.faviconImage as HTMLImageElement).addEventListener('error', () => {
 				reject('Failed to create favicon img element');
-			};
+			});
 		});
 
 		this.faviconImage.src = this.faviconEL.href;
@@ -38,9 +37,9 @@ class FavIconDot {
 	private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
 		return new Promise((resolve, reject) => {
 			const favicon = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
-			favicon.onload = () => {
+			favicon.addEventListener('load', () => {
 				resolve(favicon);
-			};
+			});
 
 			favicon.onerror = () => {
 				reject('Failed to load favicon');
@@ -80,7 +79,6 @@ class FavIconDot {
 	async setVisible(isVisible : boolean) {
 		//Wait for it to have loaded the icon
 		await this.hasLoaded;
-		console.log(this.hasLoaded);
 		this._drawIcon();
 		if (isVisible) this._drawDot();
 		this._setFavicon();
@@ -104,6 +102,6 @@ export function setFavIconDot(visible: boolean) {
 		setIconVisibility();
 	} else {
 		// Otherwise, set visibility when window loads
-		window.onload = setIconVisibility;
+		window.addEventListener('load', setIconVisibility);
 	}
 }
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 63b19dfb26..bec8bb6c7c 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -96,7 +96,7 @@ if ($i) {
 	connection.on('notification', onNotification);
 
 	//For the favicon notification dot
-	watch(() => $i?.hasUnreadNotification, (hasAny) => setFavIconDot((defaultStore.state.enableFaviconNotificationDot ? hasAny : false) ?? false));
+	watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean));
 
 	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
 	

From 975b6b3dd0f34731ad442480fc39e9a741ad76dc Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Fri, 3 May 2024 12:15:47 +0200
Subject: [PATCH 11/14] fixed querySelector that would grab favicon

---
 packages/frontend/src/scripts/favicon-dot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index c40a08f427..0229092ca7 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -36,7 +36,7 @@ class FavIconDot {
 
 	private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
 		return new Promise((resolve, reject) => {
-			const favicon = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+			const favicon = (document.querySelector('link[rel=icon]') ?? this._createFaviconElem()) as HTMLLinkElement;
 			favicon.addEventListener('load', () => {
 				resolve(favicon);
 			});

From 0117f1896c92843b7cb7525a454ba9d3d6c8cf03 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Fri, 3 May 2024 12:20:58 +0200
Subject: [PATCH 12/14] potential firefox fix

---
 packages/frontend/src/scripts/favicon-dot.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index 0229092ca7..143ad50c9a 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -50,8 +50,10 @@ class FavIconDot {
 
 	private _createFaviconElem() {
 		const newLink = document.createElement('link');
-		newLink.rel = 'icon';
-		newLink.href = '/favicon.ico';
+		newLink.setAttribute('rel', 'icon');
+		newLink.setAttribute('href', '/favicon.ico');
+		newLink.setAttribute('type', 'image/x-icon');
+
 		document.head.appendChild(newLink);
 		return newLink;
 	}

From 342eda431f6e7b19742c909fced38fdef772ccea Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Mon, 6 May 2024 13:54:43 +0200
Subject: [PATCH 13/14] fixing a buch of comments

---
 packages/frontend/src/scripts/favicon-dot.ts | 40 ++++++++++----------
 packages/frontend/src/ui/_common_/common.vue |  2 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index 143ad50c9a..643ee1b76b 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -1,18 +1,20 @@
 class FavIconDot {
-	canvas : HTMLCanvasElement;
-	src : string | null = null;
-	ctx : CanvasRenderingContext2D | null = null;
-	faviconImage : HTMLImageElement | null = null;
-	faviconEL : HTMLLinkElement | undefined;
-	hasLoaded : Promise<void> | undefined;
+	canvas: HTMLCanvasElement;
+	src: string | null = null;
+	ctx: CanvasRenderingContext2D | null = null;
+	faviconImage: HTMLImageElement | null = null;
+	faviconEL: HTMLLinkElement | undefined;
+	hasLoaded: Promise<void> | undefined;
 
 	constructor() {
 		this.canvas = document.createElement('canvas');
 	}
 
-	//MUST BE CALLED BEFORE CALLING ANY OTHER FUNCTIONS
+	/**
+	 * Must be called before calling any other functions
+	 */
 	public async setup() {
-		const element : HTMLLinkElement = await this.getOrMakeFaviconElement();
+		const element: HTMLLinkElement = await this.getOrMakeFaviconElement();
 		
 		this.faviconEL = element;
 		this.src = this.faviconEL.getAttribute('href');
@@ -34,9 +36,9 @@ class FavIconDot {
 		this.faviconImage.src = this.faviconEL.href;
 	}
 
-	private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
+	private async getOrMakeFaviconElement(): Promise<HTMLLinkElement> {
 		return new Promise((resolve, reject) => {
-			const favicon = (document.querySelector('link[rel=icon]') ?? this._createFaviconElem()) as HTMLLinkElement;
+			const favicon = (document.querySelector('link[rel=icon]') ?? this.createFaviconElem()) as HTMLLinkElement;
 			favicon.addEventListener('load', () => {
 				resolve(favicon);
 			});
@@ -48,7 +50,7 @@ class FavIconDot {
 		});
 	}
 
-	private _createFaviconElem() {
+	private createFaviconElem() {
 		const newLink = document.createElement('link');
 		newLink.setAttribute('rel', 'icon');
 		newLink.setAttribute('href', '/favicon.ico');
@@ -58,13 +60,13 @@ class FavIconDot {
 		return newLink;
 	}
 
-	private _drawIcon() {
+	private drawIcon() {
 		if (!this.ctx || !this.faviconImage) return;
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height);
 	}
 
-	private _drawDot() {
+	private drawDot() {
 		if (!this.ctx || !this.faviconImage) return;
 		this.ctx.beginPath();
 		this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
@@ -74,16 +76,16 @@ class FavIconDot {
 		this.ctx.stroke();
 	}
 
-	private _setFavicon() {
+	private setFavicon() {
 		if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
 	}
 
-	async setVisible(isVisible : boolean) {
-		//Wait for it to have loaded the icon
+	async setVisible(isVisible: boolean) {
+		// Wait for it to have loaded the icon
 		await this.hasLoaded;
-		this._drawIcon();
-		if (isVisible) this._drawDot();
-		this._setFavicon();
+		this.drawIcon();
+		if (isVisible) this.drawDot();
+		this.setFavicon();
 	}
 }
 
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index bec8bb6c7c..b1fe8e54fc 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -95,7 +95,7 @@ if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
 
-	//For the favicon notification dot
+	// For the favicon notification dot
 	watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean));
 
 	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);

From a058c855fc27c17d84dfb1655191cabdcf844c7a Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Mon, 6 May 2024 13:59:42 +0200
Subject: [PATCH 14/14] changed grabbing theme color for dot to match the other
 things in this project

---
 packages/frontend/src/scripts/favicon-dot.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index 643ee1b76b..e338f55f72 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -1,3 +1,5 @@
+import tinycolor from 'tinycolor2';
+
 class FavIconDot {
 	canvas: HTMLCanvasElement;
 	src: string | null = null;
@@ -70,7 +72,8 @@ class FavIconDot {
 		if (!this.ctx || !this.faviconImage) return;
 		this.ctx.beginPath();
 		this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
-		this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
+		const computedStyle = getComputedStyle(document.documentElement);
+		this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--navIndicator')).toHexString();
 		this.ctx.strokeStyle = 'white';
 		this.ctx.fill();
 		this.ctx.stroke();