From c78af2b448b9fa34359750a639f07a8049cf1af9 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sat, 16 Mar 2024 09:49:36 -0700
Subject: [PATCH 1/4] Fix dom cursor blink animation

Fixes #4987
Doesn't seem to regress #4773 which caused this issue
---
 src/browser/renderer/dom/DomRenderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 1549b130..3e8f2111 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -209,8 +209,8 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
-      ` background-color: ${colors.cursor.css} !important;` +
-      ` color: ${colors.cursorAccent.css} !important;` +
+      ` background-color: ${colors.cursor.css};` +
+      ` color: ${colors.cursorAccent.css};` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
       ` outline: 1px solid ${colors.cursor.css};` +

From 18147b2134b1c73a3aae57f012bd46a690309b13 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sat, 16 Mar 2024 09:55:20 -0700
Subject: [PATCH 2/4] Fix bar blink animation

---
 src/browser/renderer/dom/DomRenderer.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 3e8f2111..68004ff5 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -184,11 +184,17 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Blink animation
     styles +=
-      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      `@keyframes blink_underline` + `_` + this._terminalClass + ` {` +
       ` 50% {` +
       `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
+    styles +=
+      `@keyframes blink_bar` + `_` + this._terminalClass + ` {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
     styles +=
       `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
       ` 0% {` +
@@ -202,8 +208,11 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
-      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` animation: blink_underline` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      ` animation: blink_bar` + `_` + this._terminalClass + ` 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +

From 7b76ca7e49276d4388f750106576302982fcb23e Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sat, 16 Mar 2024 09:57:23 -0700
Subject: [PATCH 3/4] Make dom rendere animation classes more readable

---
 src/browser/renderer/dom/DomRenderer.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 68004ff5..e6db73e8 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -183,20 +183,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` font-style: italic;` +
       `}`;
     // Blink animation
+    const blinkAnimationUnderlineId = `blink_underline_${this._terminalClass}`;
+    const blinkAnimationBarId = `blink_bar_${this._terminalClass}`;
+    const blinkAnimationBlockId = `blink_block_${this._terminalClass}`;
     styles +=
-      `@keyframes blink_underline` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationUnderlineId} {` +
       ` 50% {` +
       `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
     styles +=
-      `@keyframes blink_bar` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationBarId} {` +
       ` 50% {` +
       `  box-shadow: none;` +
       ` }` +
       `}`;
     styles +=
-      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationBlockId} {` +
       ` 0% {` +
       `  background-color: ${colors.cursor.css};` +
       `  color: ${colors.cursorAccent.css};` +
@@ -209,13 +212,13 @@ export class DomRenderer extends Disposable implements IRenderer {
     // Cursor
     styles +=
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
-      ` animation: blink_underline` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationUnderlineId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
-      ` animation: blink_bar` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationBarId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
-      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` background-color: ${colors.cursor.css};` +

From a4f1299f42beaa1c7298dee68600ba15de51bdc5 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sat, 16 Mar 2024 11:05:01 -0700
Subject: [PATCH 4/4] Special case cursor block blink to not use important

Fixes #4987
---
 src/browser/renderer/dom/DomRenderer.ts | 7 +++++++
 test/playwright/SharedRendererTests.ts  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index e6db73e8..c89cee62 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -220,10 +220,17 @@ export class DomRenderer extends Disposable implements IRenderer {
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
+      // !important helps fix an issue where the cursor will not render on top of the selection,
+      // however it's very hard to fix this issue and retain the blink animation without the use of
+      // !important. So this edge case fails when cursor blink is on.
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` background-color: ${colors.cursor.css};` +
       ` color: ${colors.cursorAccent.css};` +
       `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
+      ` background-color: ${colors.cursor.css} !important;` +
+      ` color: ${colors.cursorAccent.css} !important;` +
+      `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
       ` outline: 1px solid ${colors.cursor.css};` +
       ` outline-offset: -1px;` +
diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts
index 29dc51c3..c4b66536 100644
--- a/test/playwright/SharedRendererTests.ts
+++ b/test/playwright/SharedRendererTests.ts
@@ -6,7 +6,7 @@
 import { IImage32, decodePng } from '@lunapaint/png-codec';
 import { LocatorScreenshotOptions, test } from '@playwright/test';
 import { ITheme } from '@xterm/xterm';
-import { ITestContext, MaybeAsync, openTerminal, pollFor, pollForApproximate, timeout } from './TestUtils';
+import { ITestContext, MaybeAsync, openTerminal, pollFor, pollForApproximate } from './TestUtils';
 
 export interface ISharedRendererTestContext {
   value: ITestContext;