From c677b167b60fd1c37032d7e220676cdecc47844e Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Thu, 22 Dec 2022 21:55:25 +0100
Subject: [PATCH] Set a z-index for the different layers within a page (fixes
 #15861)

Each layer has an absolute position, hence it induces the creation of
some stacking contexts (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
Thanks to this feature, we don't have to worry about the z-index used in
the annotation layer and how form elements interact with the other layers.
---
 web/annotation_editor_layer_builder.css |  2 +-
 web/annotation_layer_builder.css        |  1 +
 web/pdf_page_view.js                    | 16 ++--------------
 web/pdf_viewer.css                      |  2 ++
 web/text_layer_builder.css              |  1 +
 5 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 6217ff681..29c06a403 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -60,7 +60,7 @@
   font-size: calc(100px * var(--scale-factor));
   transform-origin: 0 0;
   cursor: auto;
-  z-index: 20000;
+  z-index: 4;
 }
 
 .annotationEditorLayer.freeTextEditing {
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 989a8309e..3a3ddf556 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -44,6 +44,7 @@
   left: 0;
   pointer-events: none;
   transform-origin: 0 0;
+  z-index: 3;
 }
 
 .annotationLayer section {
diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js
index 2286fe99c..e54a679d1 100644
--- a/web/pdf_page_view.js
+++ b/web/pdf_page_view.js
@@ -804,19 +804,7 @@ class PDFPageView {
     // overflow will be hidden in Firefox.
     const canvasWrapper = document.createElement("div");
     canvasWrapper.classList.add("canvasWrapper");
-
-    if (this.textLayer) {
-      this.textLayer.div.before(canvasWrapper);
-    } else {
-      const lastDivBeforeTextDiv =
-        this.annotationLayer?.div || this.annotationEditorLayer?.div;
-      if (lastDivBeforeTextDiv) {
-        // The annotation layer needs to stay on top.
-        lastDivBeforeTextDiv.before(canvasWrapper);
-      } else {
-        div.append(canvasWrapper);
-      }
-    }
+    div.append(canvasWrapper);
 
     if (
       !this.textLayer &&
@@ -830,7 +818,7 @@ class PDFPageView {
         accessibilityManager: this._accessibilityManager,
         isOffscreenCanvasSupported: this.isOffscreenCanvasSupported,
       });
-      canvasWrapper.after(this.textLayer.div);
+      div.append(this.textLayer.div);
     }
 
     if (
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index a050d4b63..d0a86bda7 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -55,6 +55,7 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
+  z-index: 1;
 }
 
 .pdfViewer .page {
@@ -156,6 +157,7 @@
   right: 0;
   bottom: 0;
   background: url("images/loading-icon.gif") center no-repeat;
+  z-index: 5;
 }
 .pdfViewer .page .loadingIcon.notVisible {
   background: none;
diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
index b794377e4..63cae7262 100644
--- a/web/text_layer_builder.css
+++ b/web/text_layer_builder.css
@@ -26,6 +26,7 @@
   text-size-adjust: none;
   forced-color-adjust: none;
   transform-origin: 0 0;
+  z-index: 2;
 }
 
 .textLayer span,