From 502fd7c80d410145589bd17932e60a933f087413 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sun, 13 Mar 2022 22:47:44 +0100 Subject: [PATCH 1/2] Stop polyfilling the CSS `calc` functionality At this point in time, all browsers that we support have native support for CSS variables; please see https://developer.mozilla.org/en-US/docs/Web/CSS/calc()#browser_compatibility and https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support We can also remove the hack introduced back in PR 11567, which was only necessary to work-around an IE 11 specific bug. --- gulpfile.js | 4 ---- package-lock.json | 24 ------------------------ package.json | 1 - web/viewer.css | 4 ++-- 4 files changed, 2 insertions(+), 31 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 0689988c23dcf..f8f40588253ec 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,7 +17,6 @@ "use strict"; const autoprefixer = require("autoprefixer"); -const postcssCalc = require("postcss-calc"); const postcssDirPseudoClass = require("postcss-dir-pseudo-class"); const postcssLogical = require("postcss-logical"); const fs = require("fs"); @@ -853,7 +852,6 @@ function buildGeneric(defines, dir) { preprocessCSS("web/viewer.css", defines) .pipe( postcss([ - postcssCalc(), postcssLogical({ preserve: true }), postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG), @@ -936,7 +934,6 @@ function buildComponents(defines, dir) { preprocessCSS("web/pdf_viewer.css", defines) .pipe( postcss([ - postcssCalc(), postcssLogical({ preserve: true }), postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG), @@ -1033,7 +1030,6 @@ function buildMinified(defines, dir) { preprocessCSS("web/viewer.css", defines) .pipe( postcss([ - postcssCalc(), postcssLogical({ preserve: true }), postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG), diff --git a/package-lock.json b/package-lock.json index 56d48474a14b1..b842af50e5c19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,6 @@ "mkdirp": "^1.0.4", "needle": "^3.0.0", "postcss": "^8.4.7", - "postcss-calc": "^8.2.4", "postcss-dir-pseudo-class": "^6.0.4", "postcss-logical": "^5.0.4", "prettier": "^2.5.1", @@ -14969,19 +14968,6 @@ "url": "https://opencollective.com/postcss/" } }, - "node_modules/postcss-calc": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz", - "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==", - "dev": true, - "dependencies": { - "postcss-selector-parser": "^6.0.9", - "postcss-value-parser": "^4.2.0" - }, - "peerDependencies": { - "postcss": "^8.2.2" - } - }, "node_modules/postcss-dir-pseudo-class": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz", @@ -30241,16 +30227,6 @@ "source-map-js": "^1.0.2" } }, - "postcss-calc": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz", - "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==", - "dev": true, - "requires": { - "postcss-selector-parser": "^6.0.9", - "postcss-value-parser": "^4.2.0" - } - }, "postcss-dir-pseudo-class": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz", diff --git a/package.json b/package.json index ab4613ab08fbd..f9ee1ef3ea8b4 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "mkdirp": "^1.0.4", "needle": "^3.0.0", "postcss": "^8.4.7", - "postcss-calc": "^8.2.4", "postcss-dir-pseudo-class": "^6.0.4", "postcss-logical": "^5.0.4", "prettier": "^2.5.1", diff --git a/web/viewer.css b/web/viewer.css index 20c5ae39cc65f..627fa98ec4de9 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -244,12 +244,12 @@ select { } html[dir="ltr"] #sidebarContainer { transition-property: left; - left: calc(0px - var(--sidebar-width)); + left: calc(-1 * var(--sidebar-width)); border-right: var(--doorhanger-border-color-whcm); } html[dir="rtl"] #sidebarContainer { transition-property: right; - right: calc(0px - var(--sidebar-width)); + right: calc(-1 * var(--sidebar-width)); border-left: var(--doorhanger-border-color-whcm); } From bc6ea6a8787e920c0bf6831e5826f7937402c21b Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sun, 13 Mar 2022 23:21:32 +0100 Subject: [PATCH 2/2] Replace `dir`-dependent `float` with logical properties *Please note:* This is another step in what will, time permitting, become a series of patches to simplify/modernize the viewer CSS. Rather than having to manually specify ltr/rtl-specific float-values in the CSS, we can use logical `inline-start`/`inline-end` instead (and similar for some related left/right occurrences). These logical properties depend on, among other things, the direction of the HTML document which we *always* specify in the viewer. Given that most of these logical CSS properties are fairly new, and that cross-browser support is thus somewhat limited (see below), we rely on PostCSS plugins in order to support this in the GENERIC viewer. - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility --- web/viewer.css | 77 +++++++++++++------------------------------------- 1 file changed, 20 insertions(+), 57 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 627fa98ec4de9..e78a34ec691bf 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -668,46 +668,31 @@ html[dir="rtl"] .secondaryToolbar { transform: translateX(-50%); } -html[dir="ltr"] #toolbarViewerLeft, -html[dir="rtl"] #toolbarViewerRight, -html[dir="ltr"] #toolbarSidebarLeft, -html[dir="rtl"] #toolbarSidebarRight { - float: left; -} -html[dir="ltr"] #toolbarViewerRight, -html[dir="rtl"] #toolbarViewerLeft, -html[dir="ltr"] #toolbarSidebarRight, -html[dir="rtl"] #toolbarSidebarLeft { - float: right; +#toolbarViewerLeft, +#toolbarSidebarLeft { + float: inline-start; } -html[dir="ltr"] #toolbarViewerLeft > *, -html[dir="ltr"] #toolbarViewerMiddle > *, -html[dir="ltr"] #toolbarViewerRight > *, -html[dir="ltr"] #toolbarSidebarLeft *, -html[dir="ltr"] #toolbarSidebarRight *, -html[dir="ltr"] .findbar * { - position: relative; - float: left; +#toolbarViewerRight, +#toolbarSidebarRight { + float: inline-end; } -html[dir="rtl"] #toolbarViewerLeft > *, -html[dir="rtl"] #toolbarViewerMiddle > *, -html[dir="rtl"] #toolbarViewerRight > *, -html[dir="rtl"] #toolbarSidebarLeft *, -html[dir="rtl"] #toolbarSidebarRight *, -html[dir="rtl"] .findbar * { + +#toolbarViewerLeft > *, +#toolbarViewerMiddle > *, +#toolbarViewerRight > *, +#toolbarSidebarLeft *, +#toolbarSidebarRight *, +.findbar * { position: relative; - float: right; + float: inline-start; } .splitToolbarButton { margin: 2px 2px 0; display: inline-block; } -html[dir="ltr"] .splitToolbarButton > .toolbarButton { - float: left; -} -html[dir="rtl"] .splitToolbarButton > .toolbarButton { - float: right; +.splitToolbarButton > .toolbarButton { + float: inline-start; } .toolbarButton, @@ -764,6 +749,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child { margin: 0; } .splitToolbarButtonSeparator { + float: inline-start; padding: 10px 0; width: 1px; background-color: var(--separator-color); @@ -778,13 +764,6 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child { padding: 13px 0; } -html[dir="ltr"] .splitToolbarButtonSeparator { - float: left; -} -html[dir="rtl"] .splitToolbarButtonSeparator { - float: right; -} - .toolbarButton, .dropdownToolbarButton, .secondaryToolbarButton, @@ -1230,14 +1209,9 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after { } .thumbnail { + float: inline-start; margin: 0 10px 5px; } -html[dir="ltr"] .thumbnail { - float: left; -} -html[dir="rtl"] .thumbnail { - float: right; -} #thumbnailView > a:last-of-type > .thumbnail { margin-bottom: 10px; @@ -1332,11 +1306,13 @@ a:focus > .thumbnail > .thumbnailSelectionRing, .treeItemToggler { position: relative; + float: inline-start; height: 0; width: 0; color: rgba(255, 255, 255, 0.5); } .treeItemToggler::before { + inset-inline-end: 4px; mask-image: var(--treeitem-expanded-icon); } .treeItemToggler.treeItemsHidden::before { @@ -1348,18 +1324,6 @@ html[dir="rtl"] .treeItemToggler.treeItemsHidden::before { .treeItemToggler.treeItemsHidden ~ .treeItems { display: none; } -html[dir="ltr"] .treeItemToggler { - float: left; -} -html[dir="rtl"] .treeItemToggler { - float: right; -} -html[dir="ltr"] .treeItemToggler::before { - right: 4px; -} -html[dir="rtl"] .treeItemToggler::before { - left: 4px; -} .treeItem.selected > a { background-color: var(--treeitem-selected-bg-color); @@ -1396,7 +1360,6 @@ html[dir="rtl"] .treeItemToggler::before { #errorMessageLeft { float: left; } - #errorMessageRight { float: right; }