From e59c2dc308000fa14eec456238976e5418e33f3a Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Mon, 14 Mar 2022 12:32:29 +0100 Subject: [PATCH 1/2] 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"), From c5574864e1bf08f82c2395c8049bf8aa708508fd Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Mon, 14 Mar 2022 12:36:39 +0100 Subject: [PATCH 2/2] Remove the `-webkit-mask-image`/`-webkit-mask-image` CSS rules Given that we're now *building* the `web/viewer.css` file used in the development viewer, i.e. with `gulp server`, we no longer need to hard-code these `-webkit`-prefixed rules and can instead let Autoprefixer handle that for us. --- web/viewer.css | 38 -------------------------------------- 1 file changed, 38 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 84d1cd1e2..1fa7b3786 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -884,8 +884,6 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child { .dropdownToolbarButton::after { top: 6px; pointer-events: none; - - -webkit-mask-image: var(--toolbarButton-menuArrow-icon); mask-image: var(--toolbarButton-menuArrow-icon); } html[dir="ltr"] .dropdownToolbarButton::after { @@ -945,7 +943,6 @@ html[dir="rtl"] .dropdownToolbarButton::after { content: ""; background-color: var(--toolbar-icon-bg-color); - -webkit-mask-size: cover; mask-size: cover; } @@ -980,7 +977,6 @@ html[dir="rtl"] .secondaryToolbarButton::before { } .toolbarButton#sidebarToggle::before { - -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon); mask-image: var(--toolbarButton-sidebarToggle-icon); } html[dir="rtl"] .toolbarButton#sidebarToggle::before { @@ -988,7 +984,6 @@ html[dir="rtl"] .toolbarButton#sidebarToggle::before { } .toolbarButton#secondaryToolbarToggle::before { - -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); } html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before { @@ -996,56 +991,46 @@ html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before { } .toolbarButton.findPrevious::before { - -webkit-mask-image: var(--findbarButton-previous-icon); mask-image: var(--findbarButton-previous-icon); } .toolbarButton.findNext::before { - -webkit-mask-image: var(--findbarButton-next-icon); mask-image: var(--findbarButton-next-icon); } .toolbarButton.pageUp::before { - -webkit-mask-image: var(--toolbarButton-pageUp-icon); mask-image: var(--toolbarButton-pageUp-icon); } .toolbarButton.pageDown::before { - -webkit-mask-image: var(--toolbarButton-pageDown-icon); mask-image: var(--toolbarButton-pageDown-icon); } .toolbarButton.zoomOut::before { - -webkit-mask-image: var(--toolbarButton-zoomOut-icon); mask-image: var(--toolbarButton-zoomOut-icon); } .toolbarButton.zoomIn::before { - -webkit-mask-image: var(--toolbarButton-zoomIn-icon); mask-image: var(--toolbarButton-zoomIn-icon); } .toolbarButton.presentationMode::before, .secondaryToolbarButton.presentationMode::before { - -webkit-mask-image: var(--toolbarButton-presentationMode-icon); mask-image: var(--toolbarButton-presentationMode-icon); } .toolbarButton.print::before, .secondaryToolbarButton.print::before { - -webkit-mask-image: var(--toolbarButton-print-icon); mask-image: var(--toolbarButton-print-icon); } .toolbarButton.openFile::before, .secondaryToolbarButton.openFile::before { - -webkit-mask-image: var(--toolbarButton-openFile-icon); mask-image: var(--toolbarButton-openFile-icon); } .toolbarButton.download::before, .secondaryToolbarButton.download::before { - -webkit-mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon); } @@ -1061,17 +1046,14 @@ html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before { .toolbarButton.bookmark::before, .secondaryToolbarButton.bookmark::before { - -webkit-mask-image: var(--toolbarButton-bookmark-icon); mask-image: var(--toolbarButton-bookmark-icon); } #viewThumbnail.toolbarButton::before { - -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon); mask-image: var(--toolbarButton-viewThumbnail-icon); } #viewOutline.toolbarButton::before { - -webkit-mask-image: var(--toolbarButton-viewOutline-icon); mask-image: var(--toolbarButton-viewOutline-icon); } html[dir="rtl"] #viewOutline.toolbarButton::before { @@ -1079,17 +1061,14 @@ html[dir="rtl"] #viewOutline.toolbarButton::before { } #viewAttachments.toolbarButton::before { - -webkit-mask-image: var(--toolbarButton-viewAttachments-icon); mask-image: var(--toolbarButton-viewAttachments-icon); } #viewLayers.toolbarButton::before { - -webkit-mask-image: var(--toolbarButton-viewLayers-icon); mask-image: var(--toolbarButton-viewLayers-icon); } #currentOutlineItem.toolbarButton::before { - -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon); mask-image: var(--toolbarButton-currentOutlineItem-icon); } html[dir="rtl"] #currentOutlineItem.toolbarButton::before { @@ -1097,7 +1076,6 @@ html[dir="rtl"] #currentOutlineItem.toolbarButton::before { } #viewFind.toolbarButton::before { - -webkit-mask-image: var(--toolbarButton-search-icon); mask-image: var(--toolbarButton-search-icon); } @@ -1138,72 +1116,58 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after { } .secondaryToolbarButton.firstPage::before { - -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon); mask-image: var(--secondaryToolbarButton-firstPage-icon); } .secondaryToolbarButton.lastPage::before { - -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon); mask-image: var(--secondaryToolbarButton-lastPage-icon); } .secondaryToolbarButton.rotateCcw::before { - -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon); mask-image: var(--secondaryToolbarButton-rotateCcw-icon); } .secondaryToolbarButton.rotateCw::before { - -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon); mask-image: var(--secondaryToolbarButton-rotateCw-icon); } .secondaryToolbarButton.selectTool::before { - -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon); mask-image: var(--secondaryToolbarButton-selectTool-icon); } .secondaryToolbarButton.handTool::before { - -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon); mask-image: var(--secondaryToolbarButton-handTool-icon); } .secondaryToolbarButton.scrollPage::before { - -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon); mask-image: var(--secondaryToolbarButton-scrollPage-icon); } .secondaryToolbarButton.scrollVertical::before { - -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon); mask-image: var(--secondaryToolbarButton-scrollVertical-icon); } .secondaryToolbarButton.scrollHorizontal::before { - -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); } .secondaryToolbarButton.scrollWrapped::before { - -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); } .secondaryToolbarButton.spreadNone::before { - -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon); mask-image: var(--secondaryToolbarButton-spreadNone-icon); } .secondaryToolbarButton.spreadOdd::before { - -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon); mask-image: var(--secondaryToolbarButton-spreadOdd-icon); } .secondaryToolbarButton.spreadEven::before { - -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon); mask-image: var(--secondaryToolbarButton-spreadEven-icon); } .secondaryToolbarButton.documentProperties::before { - -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon); mask-image: var(--secondaryToolbarButton-documentProperties-icon); } @@ -1425,11 +1389,9 @@ html[dir="rtl"] .treeItem > .treeItems { color: rgba(255, 255, 255, 0.5); } .treeItemToggler::before { - -webkit-mask-image: var(--treeitem-expanded-icon); mask-image: var(--treeitem-expanded-icon); } .treeItemToggler.treeItemsHidden::before { - -webkit-mask-image: var(--treeitem-collapsed-icon); mask-image: var(--treeitem-collapsed-icon); } html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {