force reblur every 40ms

fcitx-contrib · Feb 4, 2024 · 1797ac0 · 1797ac0
1 parent 10079a7
commit 1797ac0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/page/generic.scss b/page/generic.scss
@@ -44,3 +44,7 @@ body {
 .hidden {
   display: none;
 }
+
+.blur {
+  backdrop-filter: blur(16px); /* blur background */
+}
diff --git a/page/index.html b/page/index.html
@@ -13,12 +13,14 @@
   </head>
   <body>
     <div class="panel macos">
-      <div class="header">
-        <div class="aux-up hidden"></div>
-        <div class="preedit hidden"></div>
-      </div>
-      <div class="aux-down hidden"></div>
-      <div class="candidates">
+      <div class="panel-blur">
+        <div class="header">
+          <div class="aux-up hidden"></div>
+          <div class="preedit hidden"></div>
+        </div>
+        <div class="aux-down hidden"></div>
+        <div class="candidates">
+        </div>
       </div>
     </div>
     <script type="module">

diff --git a/page/ux.ts b/page/ux.ts
@@ -51,3 +51,21 @@ document.addEventListener('mouseup', e => {
     }
   }
 })
+
+// HACK: force redraw blur every 40ms so that window background change counts
+let blurSwitch = false
+const panelBlur = document.querySelector('.panel-blur')!
+function redrawBlur () {
+  if (!panel.classList.contains('macos')) {
+    return
+  }
+  if (blurSwitch) {
+    panelBlur.classList.add('blur')
+    panel.classList.remove('blur')
+  } else {
+    panel.classList.add('blur')
+    panelBlur.classList.remove('blur')
+  }
+  blurSwitch = !blurSwitch
+}
+setInterval(redrawBlur, 40)
diff --git a/tests/test-generic.spec.ts b/tests/test-generic.spec.ts
@@ -14,24 +14,30 @@ import {
 
 test('HTML structure', async ({ page }) => {
   await init(page)
+  await page.evaluate(() => {
+    document.querySelector('.panel')?.classList.remove('macos', 'blur')
+    document.querySelector('.panel-blur')?.classList.remove('blur')
+  })
   await setCandidates(page, ['页面结构', '测试'], ['1', '2'], 0)
 
   const actual = (await panel(page).evaluate(el => el.outerHTML)).replaceAll('> <', '><')
   const expected = `
-<div class="macos panel dark">
-  <div class="header">
-    <div class="aux-up hidden"></div>
-    <div class="hidden preedit"></div>
-  </div>
-  <div class="aux-down hidden"></div>
-  <div class="candidates">
-    <div class="candidate highlighted">
-      <div class="label">1</div>
-      <div class="text">页面结构</div>
+<div class="panel dark">
+  <div class="panel-blur">
+    <div class="header">
+      <div class="aux-up hidden"></div>
+      <div class="hidden preedit"></div>
     </div>
-    <div class="candidate">
-      <div class="label">2</div>
-      <div class="text">测试</div>
+    <div class="aux-down hidden"></div>
+    <div class="candidates">
+      <div class="candidate highlighted">
+        <div class="label">1</div>
+        <div class="text">页面结构</div>
+      </div>
+      <div class="candidate">
+        <div class="label">2</div>
+        <div class="text">测试</div>
+      </div>
     </div>
   </div>
 </div>