Support multiple filter types for limit mask (#159)

Author: sheepzh

global.d.ts

@@ -85,14 +85,18 @@ declare namespace timer {
              * @since 1.1.0
              */
             darkMode: DarkMode
-
             /**
              * The range of seconds to turn on dark mode. Required if {@param darkMode} is 'timed'
              * 
              * @since 1.1.0
              */
             darkModeTimeStart?: number
             darkModeTimeEnd?: number
+            /**
+             * The filter of limit mark
+             * @since 1.3.2
+             */
+            limitMarkFilter: limit.FilterType
         }
 
         type StatisticsOption = {
@@ -283,6 +287,14 @@ declare namespace timer {
              */
             wasteTime: number
         }
+        /**
+         * @since 1.3.2
+         */
+        type FilterType =
+            // translucent filter
+            | 'translucent'
+            // ground glass filter
+            | 'groundGlass'
     }
 
     namespace period {

src/app/components/option/components/appearance/index.ts

@@ -80,6 +80,24 @@ const locale = (option: UnwrapRef<timer.option.AppearanceOption>) => h(ElSelect,
     )
 })
 
+const ALL_LIMIT_FILTER_TYPE: timer.limit.FilterType[] = [
+    'translucent',
+    'groundGlass',
+]
+
+const limitFilterTypeSelect = (option: timer.option.AppearanceOption) => h(ElSelect, {
+    modelValue: option.limitMarkFilter,
+    size: 'small',
+    onChange: (val: timer.limit.FilterType) => {
+        option.limitMarkFilter = val
+        optionService.setAppearanceOption(unref(option))
+    }
+}, {
+    default: () => ALL_LIMIT_FILTER_TYPE.map(item =>
+        h(ElOption, { value: item, label: t(msg => msg.option.appearance.limitFilterType[item]) })
+    )
+})
+
 function copy(target: timer.option.AppearanceOption, source: timer.option.AppearanceOption) {
     target.displayWhitelistMenu = source.displayWhitelistMenu
     target.displayBadgeText = source.displayBadgeText
@@ -88,6 +106,7 @@ function copy(target: timer.option.AppearanceOption, source: timer.option.Appear
     target.darkMode = source.darkMode
     target.darkModeTimeStart = source.darkModeTimeStart
     target.darkModeTimeEnd = source.darkModeTimeEnd
+    target.limitMarkFilter = source.limitMarkFilter
 }
 
 const _default = defineComponent({
@@ -143,7 +162,14 @@ const _default = defineComponent({
                 input: printInConsole(option),
                 console: tagText(msg => msg.option.appearance.printInConsole.console),
                 info: tagText(msg => msg.option.appearance.printInConsole.info)
-            }, msg => msg.appearance.printInConsole.label, t(msg => msg.option.yes))
+            }, msg => msg.appearance.printInConsole.label, t(msg => msg.option.yes)),
+            h(ElDivider),
+            renderOptionItem({
+                input: limitFilterTypeSelect(option)
+            },
+                msg => msg.appearance.limitFilterType.label,
+                t(msg => msg.option.appearance.limitFilterType[defaultAppearance().limitMarkFilter])
+            )
         ])
     }
 })

src/app/locale/components/option.ts

@@ -50,6 +50,9 @@ export type OptionMessage = {
                 timed: string
             }
         }
+        limitFilterType: Record<timer.limit.FilterType, string> & {
+            label: string
+        }
     }
     statistics: {
         title: string
@@ -123,7 +126,12 @@ const _default: Messages<OptionMessage> = {
                     off: "始终关闭",
                     timed: "定时开启"
                 }
-            }
+            },
+            limitFilterType: {
+                label: "每日时限的背景风格 {input}",
+                translucent: "半透明",
+                groundGlass: "毛玻璃",
+            },
         },
         statistics: {
             title: '统计',
@@ -199,7 +207,12 @@ const _default: Messages<OptionMessage> = {
                     off: "始終關閉",
                     timed: "定時開啟"
                 }
-            }
+            },
+            limitFilterType: {
+                label: "每日時限的背景風格 {input}",
+                translucent: "半透明",
+                groundGlass: "毛玻璃",
+            },
         },
         statistics: {
             title: '統計',
@@ -274,7 +287,12 @@ const _default: Messages<OptionMessage> = {
                     off: "Always off",
                     timed: "Timed on"
                 }
-            }
+            },
+            limitFilterType: {
+                label: "Background style for daily time limit {input}",
+                translucent: "Translucent",
+                groundGlass: "Ground Glass",
+            },
         },
         statistics: {
             title: 'Statistics',
@@ -351,6 +369,11 @@ const _default: Messages<OptionMessage> = {
                     timed: "時限スタート"
                 }
             },
+            limitFilterType: {
+                label: "毎日の時間制限の背景スタイル {input}",
+                translucent: "半透明",
+                groundGlass: "すりガラス",
+            }
         },
         statistics: {
             title: '統計',

src/content-script/limit.ts

@@ -6,6 +6,7 @@
  */
 
 import TimeLimitItem from "@entity/time-limit-item"
+import optionService from "@service/option-service"
 import { t2Chrome } from "@util/i18n/chrome/t"
 
 function moreMinutes(url: string): Promise<timer.limit.Item[]> {
@@ -38,7 +39,16 @@ class _Modal {
         this.mask.id = "_timer_mask"
         this.mask.append(link2Setup(url))
         this.url = url
-        Object.assign(this.mask.style, maskStyle)
+        this.initStyle()
+    }
+
+    private async initStyle() {
+        const filterType = (await optionService.getAllOption())?.limitMarkFilter
+        const realMaskStyle = {
+            ...maskStyle,
+            ...filterStyle[filterType || 'translucent']
+        }
+        Object.assign(this.mask.style, realMaskStyle)
     }
 
     showModal(showDelay: boolean) {
@@ -104,17 +114,27 @@ const maskStyle: Partial<CSSStyleDeclaration> = {
     height: "100%",
     position: "fixed",
     zIndex: '99999',
-    backgroundColor: '#444',
-    opacity: '0.9',
     display: 'block',
     top: '0px',
     left: '0px',
     textAlign: 'center',
     paddingTop: '120px'
 }
 
+const filterStyle: Record<timer.limit.FilterType, Partial<CSSStyleDeclaration & { backdropFilter: string }>> = {
+    translucent: {
+        backgroundColor: '#444',
+        opacity: '0.9',
+        color: '#EEE',
+    },
+    groundGlass: {
+        backdropFilter: 'blur(5px)',
+        color: '#111',
+    }
+}
+
 const linkStyle: Partial<CSSStyleDeclaration> = {
-    color: '#EEE',
+    color: 'inherit',
     fontFamily: '-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif',
     fontSize: '16px !important'
 }

src/util/constant/environment.ts

@@ -11,22 +11,32 @@ let isChrome = false
 let isEdge = false
 let isOpera = false
 let isSafari = false
+let browserMajorVersion = undefined
 
 if (/Firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
     isFirefox = true
+    browserMajorVersion = /Firefox\/([0-9]+)/.exec(userAgent)?.[1]
 } else if (userAgent.includes('Edg')) {
     // The Edge implements the chrome
     isEdge = true
+    browserMajorVersion = /Edg\/([0-9]+)/.exec(userAgent)?.[1]
 } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
     // The Opera implements the chrome
     isOpera = true
+    browserMajorVersion = /OPR\/([0-9]+)/.exec(userAgent)?.[1] || /Opera\/([0-9]+)/.exec(userAgent)?.[1]
 } else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
     // Chrome on macOs includes 'Safari'
     isSafari = true
+    browserMajorVersion = /Safari\/([0-9]+)/.exec(userAgent)?.[1]
 } else if (userAgent.includes('Chrome')) {
     isChrome = true
+    browserMajorVersion = /Chrome\/([0-9]+)/.exec(userAgent)?.[1]
 }
 
+try {
+    browserMajorVersion && (browserMajorVersion = Number.parseInt(browserMajorVersion))
+} catch (ignored) { }
+
 export const IS_FIREFOX: boolean = isFirefox
 
 export const IS_EDGE: boolean = isEdge
@@ -41,4 +51,9 @@ export const IS_OPERA: boolean = isOpera
 /**
  * @since 1.3.0
  */
-export const IS_SAFARI: boolean = isSafari
+export const IS_SAFARI: boolean = isSafari
+
+/**
+ * @since 1.3.2
+ */
+export const BROWSER_MAJOR_VERSION = browserMajorVersion

src/util/constant/option.ts

@@ -32,6 +32,7 @@ export function defaultAppearance(): timer.option.AppearanceOption {
         darkModeTimeStart: 64800,
         // 6*60*60
         darkModeTimeEnd: 21600,
+        limitMarkFilter: 'translucent',
     }
 }