From e59c2dc308000fa14eec456238976e5418e33f3a Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Mon, 14 Mar 2022 12:32:29 +0100
Subject: [PATCH] Build the `web/viewer.css` file used in the development
 viewer (i.e. `gulp server`)

To allow using modern CSS features that currently only Mozilla Firefox supports[1], while still enabling development/testing in recent Google Chrome versions, we'll have to start building the `web/viewer.css` file with `gulp server` as well.

In my testing, building the development CSS (and copying the images) takes *less than* `200 ms` on average which is hopefully an acceptable overhead for this sort of feature.

---
[1] In particular `float`, with `inline-start`/`inline-end` values.
---
 gulpfile.js   | 25 +++++++++++++++++++++++++
 web/viewer.js |  8 ++++++++
 2 files changed, 33 insertions(+)

diff --git a/gulpfile.js b/gulpfile.js
index 149386447..492263608 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1869,6 +1869,24 @@ gulp.task(
   )
 );
 
+gulp.task("dev-css", function createDevCSS() {
+  console.log();
+  console.log("### Building development CSS");
+
+  const defines = builder.merge(DEFINES, { GENERIC: true, TESTING: true });
+  const cssDir = BUILD_DIR + "dev-css/";
+
+  return merge([
+    gulp.src("web/images/*", { base: "web/" }).pipe(gulp.dest(cssDir)),
+
+    preprocessCSS("web/viewer.css", "generic", defines)
+      .pipe(
+        postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })])
+      )
+      .pipe(gulp.dest(cssDir)),
+  ]);
+});
+
 gulp.task(
   "dev-sandbox",
   gulp.series(
@@ -1897,6 +1915,13 @@ gulp.task(
 gulp.task(
   "server",
   gulp.parallel(
+    function watchDevCSS() {
+      gulp.watch(
+        ["web/*.css", "web/images/*"],
+        { ignoreInitial: false },
+        gulp.series("dev-css")
+      );
+    },
     function watchDevSandbox() {
       gulp.watch(
         [
diff --git a/web/viewer.js b/web/viewer.js
index 0f57f7f43..ffa5b8d2c 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -199,6 +199,14 @@ function getViewerConfiguration() {
 function webViewerLoad() {
   const config = getViewerConfiguration();
   if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
+    if (window.chrome) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = "../build/dev-css/viewer.css";
+
+      document.head.appendChild(link);
+    }
+
     Promise.all([
       import("pdfjs-web/genericcom.js"),
       import("pdfjs-web/pdf_print_service.js"),