From e95412a03cb84d4d835047d44e55a2900cdfb0d1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 31 May 2021 14:16:37 +0300 Subject: [PATCH 01/81] fix BooleanSetting and ChoiceSetting not working properly on initial launch as anon visitor (would show all as changed, empty selects) --- src/components/settings_modal/helpers/boolean_setting.js | 5 ++++- src/components/settings_modal/helpers/choice_setting.js | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js index 1dda49f2..dea77e10 100644 --- a/src/components/settings_modal/helpers/boolean_setting.js +++ b/src/components/settings_modal/helpers/boolean_setting.js @@ -18,8 +18,11 @@ export default { state () { return get(this.$parent, this.path) }, + defaultState () { + return get(this.$parent, this.pathDefault) + }, isChanged () { - return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault) + return this.state !== undefined && this.state !== this.defaultState } }, methods: { diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js index 042e8106..f4387e62 100644 --- a/src/components/settings_modal/helpers/choice_setting.js +++ b/src/components/settings_modal/helpers/choice_setting.js @@ -17,13 +17,13 @@ export default { return [firstSegment + 'DefaultValue', ...rest].join('.') }, state () { - return get(this.$parent, this.path) + return get(this.$parent, this.path) || get(this.$parent, this.pathDefault) }, defaultState () { return get(this.$parent, this.pathDefault) }, isChanged () { - return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault) + return this.state !== undefined && this.state !== this.defaultState } }, methods: { From 32d1a0e1813e706a298871361123636187cde9bc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 31 May 2021 14:22:08 +0300 Subject: [PATCH 02/81] better approach --- src/components/settings_modal/helpers/boolean_setting.js | 9 +++++++-- src/components/settings_modal/helpers/choice_setting.js | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js index dea77e10..5c52f697 100644 --- a/src/components/settings_modal/helpers/boolean_setting.js +++ b/src/components/settings_modal/helpers/boolean_setting.js @@ -16,13 +16,18 @@ export default { return [firstSegment + 'DefaultValue', ...rest].join('.') }, state () { - return get(this.$parent, this.path) + const value = get(this.$parent, this.path) + if (value === undefined) { + return this.defaultState + } else { + return value + } }, defaultState () { return get(this.$parent, this.pathDefault) }, isChanged () { - return this.state !== undefined && this.state !== this.defaultState + return this.state !== this.defaultState } }, methods: { diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js index f4387e62..a15f6bac 100644 --- a/src/components/settings_modal/helpers/choice_setting.js +++ b/src/components/settings_modal/helpers/choice_setting.js @@ -17,13 +17,18 @@ export default { return [firstSegment + 'DefaultValue', ...rest].join('.') }, state () { - return get(this.$parent, this.path) || get(this.$parent, this.pathDefault) + const value = get(this.$parent, this.path) + if (value === undefined) { + return this.defaultState + } else { + return value + } }, defaultState () { return get(this.$parent, this.pathDefault) }, isChanged () { - return this.state !== undefined && this.state !== this.defaultState + return this.state !== this.defaultState } }, methods: { From 008e711e116044f76a13e35cfd616fc211a3d6f0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 2 Jun 2021 12:15:31 +0300 Subject: [PATCH 03/81] fix favico badge not working on chrome --- src/services/favicon_service/favicon_service.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js index d1ddee41..e78aa2ae 100644 --- a/src/services/favicon_service/favicon_service.js +++ b/src/services/favicon_service/favicon_service.js @@ -14,6 +14,7 @@ const createFaviconService = () => { favcanvas.width = faviconWidth favcanvas.height = faviconHeight favimg = new Image() + favimg.crossOrigin = 'anonymous' favimg.src = favicon.href favcontext = favcanvas.getContext('2d') } From 2a2483f4c9db7142676fb9be1e2917f007301e7f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 2 Jun 2021 12:47:54 +0300 Subject: [PATCH 04/81] handle multiple favicons (different sizes) --- .../favicon_service/favicon_service.js | 69 ++++++++++--------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js index e78aa2ae..7e19629d 100644 --- a/src/services/favicon_service/favicon_service.js +++ b/src/services/favicon_service/favicon_service.js @@ -1,53 +1,58 @@ -import { find } from 'lodash' - const createFaviconService = () => { - let favimg, favcanvas, favcontext, favicon + const favicons = [] const faviconWidth = 128 const faviconHeight = 128 const badgeRadius = 32 const initFaviconService = () => { - const nodes = document.getElementsByTagName('link') - favicon = find(nodes, node => node.rel === 'icon') - if (favicon) { - favcanvas = document.createElement('canvas') - favcanvas.width = faviconWidth - favcanvas.height = faviconHeight - favimg = new Image() - favimg.crossOrigin = 'anonymous' - favimg.src = favicon.href - favcontext = favcanvas.getContext('2d') - } + const nodes = document.querySelectorAll('link[rel="icon"]') + nodes.forEach(favicon => { + if (favicon) { + const favcanvas = document.createElement('canvas') + favcanvas.width = faviconWidth + favcanvas.height = faviconHeight + const favimg = new Image() + favimg.crossOrigin = 'anonymous' + favimg.src = favicon.href + const favcontext = favcanvas.getContext('2d') + favicons.push({ favcanvas, favimg, favcontext, favicon }) + } + }) } const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0 const clearFaviconBadge = () => { - if (!favimg || !favcontext || !favicon) return + if (favicons.length === 0) return + favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => { + if (!favimg || !favcontext || !favicon) return - favcontext.clearRect(0, 0, faviconWidth, faviconHeight) - if (isImageLoaded(favimg)) { - favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) - } - favicon.href = favcanvas.toDataURL('image/png') + favcontext.clearRect(0, 0, faviconWidth, faviconHeight) + if (isImageLoaded(favimg)) { + favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) + } + favicon.href = favcanvas.toDataURL('image/png') + }) } const drawFaviconBadge = () => { - if (!favimg || !favcontext || !favcontext) return - + if (favicons.length === 0) return clearFaviconBadge() + favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => { + if (!favimg || !favcontext || !favcontext) return - const style = getComputedStyle(document.body) - const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}` + const style = getComputedStyle(document.body) + const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}` - if (isImageLoaded(favimg)) { - favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) - } - favcontext.fillStyle = badgeColor - favcontext.beginPath() - favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false) - favcontext.fill() - favicon.href = favcanvas.toDataURL('image/png') + if (isImageLoaded(favimg)) { + favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) + } + favcontext.fillStyle = badgeColor + favcontext.beginPath() + favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false) + favcontext.fill() + favicon.href = favcanvas.toDataURL('image/png') + }) } return { From 59d046b16332e92b40b20c5dd19f074fb290dd17 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Jun 2021 23:48:46 +0300 Subject: [PATCH 05/81] fix theme selection not working --- .../tabs/theme_tab/theme_tab.js | 36 ++++++++++++------- .../tabs/theme_tab/theme_tab.vue | 2 +- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 1388f74b..c76314f0 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -73,7 +73,8 @@ export default { getExportedObject: () => this.exportedTheme }), availableStyles: [], - selected: this.$store.getters.mergedConfig.theme, + selected: '', + selectedTheme: this.$store.getters.mergedConfig.theme, themeWarning: undefined, tempImportFile: undefined, engineVersion: 0, @@ -207,7 +208,7 @@ export default { } }, selectedVersion () { - return Array.isArray(this.selected) ? 1 : 2 + return Array.isArray(this.selectedTheme) ? 1 : 2 }, currentColors () { return Object.keys(SLOT_INHERITANCE) @@ -744,8 +745,19 @@ export default { console.warn(e) } }, - selected () { + selected() { + this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => { + if (Array.isArray(s)) { + console.log(s[0] === this.selected, this.selected) + return s[0] === this.selected + } else { + return s.name === this.selected + } + })[1] + }, + selectedTheme () { this.dismissWarning() + console.log(this.selectedVersion) if (this.selectedVersion === 1) { if (!this.keepRoundness) { this.clearRoundness() @@ -762,17 +774,17 @@ export default { if (!this.keepColor) { this.clearV1() - this.bgColorLocal = this.selected[1] - this.fgColorLocal = this.selected[2] - this.textColorLocal = this.selected[3] - this.linkColorLocal = this.selected[4] - this.cRedColorLocal = this.selected[5] - this.cGreenColorLocal = this.selected[6] - this.cBlueColorLocal = this.selected[7] - this.cOrangeColorLocal = this.selected[8] + this.bgColorLocal = this.selectedTheme[1] + this.fgColorLocal = this.selectedTheme[2] + this.textColorLocal = this.selectedTheme[3] + this.linkColorLocal = this.selectedTheme[4] + this.cRedColorLocal = this.selectedTheme[5] + this.cGreenColorLocal = this.selectedTheme[6] + this.cBlueColorLocal = this.selectedTheme[7] + this.cOrangeColorLocal = this.selectedTheme[8] } } else if (this.selectedVersion >= 2) { - this.normalizeLocalState(this.selected.theme, 2, this.selected.source) + this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source) } } } diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index 548dc852..c02986ed 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -63,7 +63,7 @@