From 4902ad89239c342aa7f649afd8e1bd305e4f6477 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sun, 12 Jun 2022 23:15:56 +0200
Subject: [PATCH] Use modern DOM methods a bit more (PR 15031 follow-up)

Apparently the ESLint rule added in PR 15031 wasn't able to catch all cases that can be converted, which is probably not all that surprising given how some of these call-sites look.

 - Use `Element.prepend()` to insert nodes before all other ones in the element, rather than using `firstChild` with `insertBefore`-calls; see https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend

 - Fix one *incorrect* `insertBefore` call, in the AnnotationLayer-code.
   Initially the patch simply changed that to an `Element.before()`-call, however that broke one of the integration-tests. It turns out that the `index` may try to access a non-existent select-child, which triggers undefined behaviour; note the warning in https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#parameters
---
 external/webL10n/l10n.js        |  3 ++-
 src/display/annotation_layer.js | 13 ++++++++-----
 web/base_tree_viewer.js         |  2 +-
 web/overlay_manager.js          |  2 +-
 web/text_highlighter.js         |  2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/external/webL10n/l10n.js b/external/webL10n/l10n.js
index 8b99667a1..3d6bf3107 100644
--- a/external/webL10n/l10n.js
+++ b/external/webL10n/l10n.js
@@ -27,6 +27,7 @@
     - Removes window._ assignment.
     - Remove compatibility code for OldIE.
     - Replaces `String.prototype.substr()` with `String.prototype.substring()`.
+    - Replaces one `Node.insertBefore()` with `Element.prepend()`.
     - Removes `fireL10nReadyEvent` since the "localized" event it dispatches
       is unused and may clash with an identically named event in the viewer.
 */
@@ -921,7 +922,7 @@ document.webL10n = (function(window, document, undefined) {
         // first element child.
         if (!found) {
           var textNode = document.createTextNode(data[gTextProp]);
-          element.insertBefore(textNode, element.firstChild);
+          element.prepend(textNode);
         }
       }
       delete data[gTextProp];
diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index a6f3eb23a..8d863a1d0 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -1499,7 +1499,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
       noneOptionElement.value = " ";
       noneOptionElement.setAttribute("hidden", true);
       noneOptionElement.setAttribute("selected", true);
-      selectElement.insertBefore(noneOptionElement, selectElement.firstChild);
+      selectElement.prepend(noneOptionElement);
 
       removeEmptyEntry = () => {
         noneOptionElement.remove();
@@ -1573,13 +1573,16 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
           },
           insert(event) {
             const { index, displayValue, exportValue } = event.detail.insert;
+            const selectChild = selectElement.children[index];
             const optionElement = document.createElement("option");
             optionElement.textContent = displayValue;
             optionElement.value = exportValue;
-            selectElement.insertBefore(
-              optionElement,
-              selectElement.children[index]
-            );
+
+            if (selectChild) {
+              selectChild.before(optionElement);
+            } else {
+              selectElement.append(optionElement);
+            }
             storage.setValue(id, {
               value: getValue(event, /* isExport */ true),
               items: getItems(event),
diff --git a/web/base_tree_viewer.js b/web/base_tree_viewer.js
index 4fc37a5fd..c695e6a4e 100644
--- a/web/base_tree_viewer.js
+++ b/web/base_tree_viewer.js
@@ -87,7 +87,7 @@ class BaseTreeViewer {
         this._toggleTreeItem(div, shouldShowAll);
       }
     };
-    div.insertBefore(toggler, div.firstChild);
+    div.prepend(toggler);
   }
 
   /**
diff --git a/web/overlay_manager.js b/web/overlay_manager.js
index cebc1953a..885066106 100644
--- a/web/overlay_manager.js
+++ b/web/overlay_manager.js
@@ -51,7 +51,7 @@ class OverlayManager {
         const style = document.createElement("style");
         style.textContent = PDFJSDev.eval("DIALOG_POLYFILL_CSS");
 
-        document.head.insertBefore(style, document.head.firstElementChild);
+        document.head.prepend(style);
       }
     }
 
diff --git a/web/text_highlighter.js b/web/text_highlighter.js
index fbd238b3d..65c3c1217 100644
--- a/web/text_highlighter.js
+++ b/web/text_highlighter.js
@@ -176,7 +176,7 @@ class TextHighlighter {
       let div = textDivs[divIdx];
       if (div.nodeType === Node.TEXT_NODE) {
         const span = document.createElement("span");
-        div.parentNode.insertBefore(span, div);
+        div.before(span);
         span.append(div);
         textDivs[divIdx] = span;
         div = span;