BL-15300 Switch TBT highlighting to pseudoelement

src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts

@@ -676,10 +676,21 @@ export default class StyleEditor {
         if (!rule) {
             return; // paranoia
         }
+        // Keep the original properties for older render paths, but also expose the colors via
+        // CSS variables so custom highlights can read the same user-configured values.
+        rule.style.setProperty(
+            "--bloom-audio-highlight-background",
+            hiliteBgColor,
+        );
         rule.style.setProperty("background-color", hiliteBgColor);
         if (hiliteTextColor) {
+            rule.style.setProperty(
+                "--bloom-audio-highlight-text-color",
+                hiliteTextColor,
+            );
             rule.style.setProperty("color", hiliteTextColor);
         } else {
+            rule.style.removeProperty("--bloom-audio-highlight-text-color");
             rule.style.removeProperty("color");
         }
     }

src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditorSpec.ts

@@ -320,6 +320,41 @@ describe("StyleEditor", () => {
         if (rule != null) expect(ParseRuleForFontSize(rule.cssText)).toBe(20);
     });
 
+    it("putAudioHiliteRulesInDom stores audio highlight css variables", () => {
+        const editor = new StyleEditor(
+            "file://" + "C:/dev/Bloom/src/BloomBrowserUI/bookEdit",
+        );
+
+        editor.putAudioHiliteRulesInDom(
+            "foo-style",
+            "rgb(1, 2, 3)",
+            "rgb(4, 5, 6)",
+        );
+
+        const sentenceRule = GetRuleMatchingSelector(
+            "foo-style span.ui-audioCurrent",
+        );
+        const paddedSentenceRule = GetRuleMatchingSelector(
+            "foo-style span.ui-audioCurrent > span.ui-enableHighlight",
+        );
+        const paragraphRule = GetRuleMatchingSelector(
+            "foo-style.ui-audioCurrent p",
+        );
+
+        expect(sentenceRule?.cssText).toContain(
+            "--bloom-audio-highlight-background: rgb(4, 5, 6)",
+        );
+        expect(sentenceRule?.cssText).toContain(
+            "--bloom-audio-highlight-color: rgb(1, 2, 3)",
+        );
+        expect(paddedSentenceRule?.cssText).toContain(
+            "--bloom-audio-highlight-background: rgb(4, 5, 6)",
+        );
+        expect(paragraphRule?.cssText).toContain(
+            "--bloom-audio-highlight-background: rgb(4, 5, 6)",
+        );
+    });
+
     // Skipped because currently we're running in jsdom. Making use of the existing rule depends on
     // getComputedStyle, which jsdom does not support. ChatGpt thinks it also depends on actual
     // dom element sizes, which jsdom also does not support. Attempts to polyfill proved difficult.

src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less

@@ -31,6 +31,17 @@ div.ui-audioCurrent:not(.ui-suppressHighlight):not(.ui-disableHighlight) p {
     // color: @textOnLightBackground;
 }
 
+body.bloom-audio-customHighlights {
+    span.ui-audioCurrent:not(.ui-suppressHighlight):not(.ui-disableHighlight),
+    div.ui-audioCurrent:not(.ui-suppressHighlight):not(.ui-disableHighlight) p,
+    .ui-audioCurrent .ui-enableHighlight {
+        // When CSS.highlights is available, let the pseudo highlight own the paint so
+        // the legacy yellow background does not stack on top of it.
+        background-color: transparent !important;
+        color: inherit !important;
+    }
+}
+
 .bloom-ui-current-audio-marker:before {
     background-image: url(currentTextIndicator.svg);
     background-repeat: no-repeat;
@@ -76,24 +87,35 @@ div.ui-audioCurrent p {
     position: unset; // BL-11633, works around Chromium bug
 }
 
+::highlight(bloom-audio-current) {
+    // Read from CSS variables so the Format dialog's stored audio highlight colors still
+    // control the yellow recording highlight even though it is now painted as a pseudo highlight.
+    background-color: var(
+        --bloom-audio-current-highlight-background,
+        @highlightColor
+    );
+    color: var(--bloom-audio-current-highlight-color, @textOnLightBackground);
+}
+
+::highlight(bloom-audio-split-1) {
+    background-color: #bfedf3;
+}
+
+::highlight(bloom-audio-split-2) {
+    background-color: #7fdae6;
+}
+
+::highlight(bloom-audio-split-3) {
+    background-color: #29c2d6;
+}
+
 .ui-audioCurrent.bloom-postAudioSplit[data-audiorecordingmode="TextBox"]:not(
         .ui-suppressHighlight
     ):not(.ui-disableHighlight) {
     // Special highlighting after the Split button completes to show it completed.
-    // Note: This highlighting is expected to persist across sessions, but to be hidden (displayed with the yellow color) while each segment is playing.
-    //       This is accomplished because this rule temporarily drops out of effect when .ui-audioCurrent is moved to the span as that segment plays.
-    //       (The rule requires a span BELOW the .ui-audioCurrent, so it drops out of effect the span IS the .ui-audioCurrent).
-    span:nth-child(3n + 1 of .bloom-highlightSegment) {
-        background-color: #bfedf3;
-    }
-
-    span:nth-child(3n + 2 of .bloom-highlightSegment) {
-        background-color: #7fdae6;
-    }
-
-    span:nth-child(3n + 3 of .bloom-highlightSegment) {
-        background-color: #29c2d6;
-    }
+    // The actual colors are now applied with named ::highlight() rules populated from TS.
+    // Note: This highlighting is expected to persist across sessions, but to be hidden
+    // (displayed with the yellow color) while each segment is playing.
 
     span {
         position: unset; // BL-11633, works around Chromium bug

src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.ts

@@ -69,6 +69,7 @@ import {
 } from "../../../react_components/featureStatus";
 import { animateStyleName } from "../../../utils/shared";
 import jQuery from "jquery";
+import { AudioTextHighlightManager } from "./audioTextHighlightManager";
 
 enum Status {
     Disabled, // Can't use button now (e.g., Play when there is no recording)
@@ -207,6 +208,7 @@ export default class AudioRecording implements IAudioRecorder {
 
     private playbackOrderCache: IPlaybackOrderInfo[] = [];
     private disablingOverlay: HTMLDivElement;
+    private audioTextHighlightManager = new AudioTextHighlightManager();
 
     constructor(maySetHighlight: boolean = true) {
         this.audioSplitButton = <HTMLButtonElement>(
@@ -898,6 +900,10 @@ export default class AudioRecording implements IAudioRecorder {
         if (pageDocBody) {
             this.removeAudioCurrent(pageDocBody);
         }
+
+        this.audioTextHighlightManager.clearManagedHighlights(
+            pageDocBody ?? undefined,
+        );
     }
 
     private removeAudioCurrent(parentElement: Element) {
@@ -997,6 +1003,7 @@ export default class AudioRecording implements IAudioRecorder {
 
         if (oldElement === newElement && !forceRedisplay) {
             // No need to do much, and better not to so we can avoid any temporary flashes as the highlight is removed and re-applied
+            this.refreshAudioTextHighlights(newElement);
             return;
         }
 
@@ -1069,6 +1076,23 @@ export default class AudioRecording implements IAudioRecorder {
                 );
             }
         }
+
+        this.refreshAudioTextHighlights(newElement);
+    }
+
+    private refreshAudioTextHighlights(currentHighlight?: Element | null) {
+        const activeHighlight = currentHighlight ?? this.getCurrentHighlight();
+        const currentTextBox = activeHighlight
+            ? ((this.getTextBoxOfElement(
+                  activeHighlight,
+              ) as HTMLElement | null) ?? null)
+            : null;
+        // The manager keeps both the yellow current highlight and the blue post-split
+        // highlights in sync so callers do not need separate refresh paths.
+        this.audioTextHighlightManager.refreshHighlights(
+            activeHighlight,
+            currentTextBox,
+        );
     }
 
     // Scrolls an element into view.
@@ -4375,6 +4399,7 @@ export default class AudioRecording implements IAudioRecorder {
         const currentTextBox = this.getCurrentTextBox();
         if (currentTextBox) {
             currentTextBox.classList.add("bloom-postAudioSplit");
+            this.refreshAudioTextHighlights(currentTextBox);
         }
     }
 
@@ -4384,6 +4409,10 @@ export default class AudioRecording implements IAudioRecorder {
             currentTextBox.classList.remove("bloom-postAudioSplit");
             currentTextBox.removeAttribute("data-audioRecordingEndTimes");
         }
+
+        this.audioTextHighlightManager.clearManagedHighlights(
+            currentTextBox ?? undefined,
+        );
     }
 
     private getElementsToUpdateForCursor(): (Element | null)[] {
@@ -4823,6 +4852,7 @@ export default class AudioRecording implements IAudioRecorder {
             }
         });
         this.nodesToRestoreAfterPlayEnded.clear();
+        this.refreshAudioTextHighlights();
     }
 }