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 8b99667a1df72..3d6bf3107a696 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 a6f3eb23a2b68..8d863a1d050e0 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 4fc37a5fd026b..c695e6a4e1843 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 cebc1953a8811..8850661061649 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 fbd238b3d9b00..65c3c1217c27b 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;