chore: render overlay on top of modal dom content (#36625)

packages/injected/src/highlight.ts

@@ -61,7 +61,7 @@ export class Highlight {
     this._glassPaneElement.style.right = '0';
     this._glassPaneElement.style.bottom = '0';
     this._glassPaneElement.style.left = '0';
-    this._glassPaneElement.style.zIndex = '2147483646';
+    this._glassPaneElement.style.zIndex = '2147483647';
     this._glassPaneElement.style.pointerEvents = 'none';
     this._glassPaneElement.style.display = 'flex';
     this._glassPaneElement.style.backgroundColor = 'transparent';
@@ -90,7 +90,9 @@ export class Highlight {
 
   install() {
     // NOTE: document.documentElement can be null: https://github.com/microsoft/TypeScript/issues/50078
-    if (this._injectedScript.document.documentElement && !this._injectedScript.document.documentElement.contains(this._glassPaneElement))
+    if (!this._injectedScript.document.documentElement)
+      return;
+    if (!this._injectedScript.document.documentElement.contains(this._glassPaneElement) || this._glassPaneElement.nextElementSibling)
       this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
   }
 

packages/injected/src/recorder/recorder.ts

@@ -206,7 +206,11 @@ class RecordActionTool implements RecorderTool {
     return 'pointer';
   }
 
-  install() {
+  private _installObserverIfNeeded() {
+    if (this._observer)
+      return;
+    if (!this._recorder.injectedScript.document?.body)
+      return;
     this._observer = new MutationObserver(mutations => {
       if (!this._hoveredElement)
         return;
@@ -601,6 +605,7 @@ class RecordActionTool implements RecorderTool {
   }
 
   private _updateModelForHoveredElement() {
+    this._installObserverIfNeeded();
     if (this._performingActions.size)
       return;
     if (!this._hoveredElement || !this._hoveredElement.isConnected) {