From bb8f5ec20bf6a2fed1f962178b06bc4d99d1e2ef Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sat, 4 Jun 2022 17:43:22 +0200
Subject: [PATCH] Bundle the `<dialog>` polyfill-CSS in the GENERIC
 `legacy/`-viewer (PR 14710 follow-up)

In PR 14710 we only included the JavaScript-part of the polyfill, however we probably need to include the CSS as well to reduce the risk of problems in older browsers.

With the recent CSS-related improvements in the `preprocess`-function we could probably have included this conditionally in the `viewer.css` file. However, considering that the `<dialog>` polyfill-code is only invoked when actually needed it seemed most appropriate/correct to lazy-load the polyfill-CSS as well.
---
 gulpfile.js            | 10 ++++++++++
 web/overlay_manager.js |  9 +++++++++
 2 files changed, 19 insertions(+)

diff --git a/gulpfile.js b/gulpfile.js
index ffc508355..5d98642b6 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -190,6 +190,8 @@ function createWebpackConfig(
     DEFAULT_PREFERENCES: defaultPreferencesDir
       ? getDefaultPreferences(defaultPreferencesDir)
       : {},
+    DIALOG_POLYFILL_CSS:
+      defines.GENERIC && !defines.SKIP_BABEL ? getDialogPolyfillCSS() : "",
   });
   const licenseHeaderLibre = fs
     .readFileSync("./src/license_header_libre.js")
@@ -736,6 +738,12 @@ function getDefaultPreferences(dir) {
   return AppOptions.getAll(OptionKind.PREFERENCE);
 }
 
+function getDialogPolyfillCSS() {
+  return fs
+    .readFileSync("node_modules/dialog-polyfill/dist/dialog-polyfill.css")
+    .toString();
+}
+
 gulp.task("locale", function () {
   const VIEWER_LOCALE_OUTPUT = "web/locale/";
 
@@ -1519,6 +1527,8 @@ function buildLib(defines, dir) {
     DEFAULT_PREFERENCES: getDefaultPreferences(
       defines.SKIP_BABEL ? "lib/" : "lib-legacy/"
     ),
+    DIALOG_POLYFILL_CSS:
+      defines.GENERIC && !defines.SKIP_BABEL ? getDialogPolyfillCSS() : "",
   });
 
   const inputStream = merge([
diff --git a/web/overlay_manager.js b/web/overlay_manager.js
index e4d7378e1..cebc1953a 100644
--- a/web/overlay_manager.js
+++ b/web/overlay_manager.js
@@ -44,6 +44,15 @@ class OverlayManager {
     ) {
       const dialogPolyfill = require("dialog-polyfill/dist/dialog-polyfill.js");
       dialogPolyfill.registerDialog(dialog);
+
+      if (!this._dialogPolyfillCSS) {
+        this._dialogPolyfillCSS = true;
+
+        const style = document.createElement("style");
+        style.textContent = PDFJSDev.eval("DIALOG_POLYFILL_CSS");
+
+        document.head.insertBefore(style, document.head.firstElementChild);
+      }
     }
 
     dialog.addEventListener("cancel", evt => {