From c99d55864689dddb5fa84aecb573a222ed714c62 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sun, 13 Mar 2022 18:30:51 +0100 Subject: [PATCH] Replace `dir`-dependent `margin`/`margin-left`/`margin-right` 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 margin-values in the CSS, we can use logical margin 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 need to use a couple of PostCSS plugins (see below) in order to support this in the GENERIC viewer. - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility --- - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class --- gulpfile.js | 43 ++++++++++++++++--- package-lock.json | 45 ++++++++++++++++++++ package.json | 2 + web/viewer.css | 106 ++++++++++++---------------------------------- 4 files changed, 111 insertions(+), 85 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index bcb0027dc..0689988c2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,7 +17,9 @@ "use strict"; const autoprefixer = require("autoprefixer"); -const calc = require("postcss-calc"); +const postcssCalc = require("postcss-calc"); +const postcssDirPseudoClass = require("postcss-dir-pseudo-class"); +const postcssLogical = require("postcss-logical"); const fs = require("fs"); const gulp = require("gulp"); const postcss = require("gulp-postcss"); @@ -849,7 +851,14 @@ function buildGeneric(defines, dir) { preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")), preprocessCSS("web/viewer.css", defines) - .pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)])) + .pipe( + postcss([ + postcssCalc(), + postcssLogical({ preserve: true }), + postcssDirPseudoClass(), + autoprefixer(AUTOPREFIXER_CONFIG), + ]) + ) .pipe(gulp.dest(dir + "web")), gulp @@ -925,7 +934,14 @@ function buildComponents(defines, dir) { createComponentsBundle(defines).pipe(gulp.dest(dir)), gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")), preprocessCSS("web/pdf_viewer.css", defines) - .pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)])) + .pipe( + postcss([ + postcssCalc(), + postcssLogical({ preserve: true }), + postcssDirPseudoClass(), + autoprefixer(AUTOPREFIXER_CONFIG), + ]) + ) .pipe(gulp.dest(dir)), ]); } @@ -1015,7 +1031,14 @@ function buildMinified(defines, dir) { preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")), preprocessCSS("web/viewer.css", defines) - .pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)])) + .pipe( + postcss([ + postcssCalc(), + postcssLogical({ preserve: true }), + postcssDirPseudoClass(), + autoprefixer(AUTOPREFIXER_CONFIG), + ]) + ) .pipe(gulp.dest(dir + "web")), gulp @@ -1338,7 +1361,11 @@ gulp.task( ), preprocessCSS("web/viewer.css", defines) .pipe( - postcss([autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] })]) + postcss([ + postcssLogical({ preserve: true }), + postcssDirPseudoClass(), + autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] }), + ]) ) .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")), @@ -1873,7 +1900,11 @@ gulp.task("dev-css", function createDevCSS() { preprocessCSS("web/viewer.css", defines) .pipe( - postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })]) + postcss([ + postcssLogical({ preserve: true }), + postcssDirPseudoClass(), + autoprefixer({ overrideBrowserslist: ["last 2 versions"] }), + ]) ) .pipe(gulp.dest(cssDir)), ]); diff --git a/package-lock.json b/package-lock.json index 546b87e8d..56d48474a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,8 @@ "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", "puppeteer": "^13.4.1", "rimraf": "^3.0.2", @@ -14980,6 +14982,21 @@ "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", + "integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.9" + }, + "engines": { + "node": "^12 || ^14 || >=16" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/postcss-load-config": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz", @@ -15006,6 +15023,18 @@ } } }, + "node_modules/postcss-logical": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", + "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", + "dev": true, + "engines": { + "node": "^12 || ^14 || >=16" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", @@ -30222,6 +30251,15 @@ "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", + "integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.9" + } + }, "postcss-load-config": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz", @@ -30233,6 +30271,13 @@ "yaml": "^1.10.2" } }, + "postcss-logical": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", + "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", + "dev": true, + "requires": {} + }, "postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", diff --git a/package.json b/package.json index 040359a8f..ab4613ab0 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "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", "puppeteer": "^13.4.1", "rimraf": "^3.0.2", diff --git a/web/viewer.css b/web/viewer.css index 9656967d9..20c5ae39c 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -355,18 +355,11 @@ html[dir="rtl"] #toolbarSidebar { 0 0 1px rgba(0, 0, 0, 0.1); } -html[dir="ltr"] #toolbarSidebar .toolbarButton { - margin-right: 2px !important; +#toolbarSidebar .toolbarButton { + margin-inline-end: 2px !important; } -html[dir="rtl"] #toolbarSidebar .toolbarButton { - margin-left: 2px !important; -} - -html[dir="ltr"] #toolbarSidebarRight .toolbarButton { - margin-right: 3px !important; -} -html[dir="rtl"] #toolbarSidebarRight .toolbarButton { - margin-left: 3px !important; +#toolbarSidebarRight .toolbarButton { + margin-inline-end: 3px !important; } #sidebarResizer { @@ -510,14 +503,7 @@ html[dir="rtl"] .findbar { .findbar .splitToolbarButton { margin-top: 3px; -} -html[dir="ltr"] .findbar .splitToolbarButton { - margin-left: 0; - margin-right: 5px; -} -html[dir="rtl"] .findbar .splitToolbarButton { - margin-left: 5px; - margin-right: 0; + margin-inline: 0 5px; } .findbar .splitToolbarButton > .toolbarButton { @@ -627,7 +613,7 @@ html[dir="rtl"] .secondaryToolbar { .doorHangerRight:after, .doorHangerRight:before { bottom: 100%; - border: solid rgba(0, 0, 0, 0); + border: 8px solid rgba(0, 0, 0, 0); content: " "; height: 0; width: 0; @@ -635,14 +621,14 @@ html[dir="rtl"] .secondaryToolbar { pointer-events: none; opacity: var(--doorhanger-triangle-opacity-whcm); } -.doorHanger:after, -.doorHangerRight:after { - border-width: 8px; -} .doorHanger:after { + inset-inline-start: 10px; + margin-inline-start: -8px; border-bottom-color: var(--toolbar-bg-color); } .doorHangerRight:after { + inset-inline-end: 10px; + margin-inline-end: -8px; border-bottom-color: var(--doorhanger-bg-color); } .doorHanger:before, @@ -650,29 +636,13 @@ html[dir="rtl"] .secondaryToolbar { border-bottom-color: var(--doorhanger-border-color); border-width: 9px; } - -html[dir="ltr"] .doorHanger:after, -html[dir="rtl"] .doorHangerRight:after { - left: 10px; - margin-left: -8px; +.doorHanger:before { + inset-inline-start: 10px; + margin-inline-start: -9px; } - -html[dir="ltr"] .doorHanger:before, -html[dir="rtl"] .doorHangerRight:before { - left: 10px; - margin-left: -9px; -} - -html[dir="rtl"] .doorHanger:after, -html[dir="ltr"] .doorHangerRight:after { - right: 10px; - margin-right: -8px; -} - -html[dir="rtl"] .doorHanger:before, -html[dir="ltr"] .doorHangerRight:before { - right: 10px; - margin-right: -9px; +.doorHangerRight:before { + inset-inline-end: 10px; + margin-inline-end: -9px; } #findResultsCount { @@ -788,9 +758,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton { position: relative; } html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child, -html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child { - margin: 0; -} +html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child, html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child, html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child { margin: 0; @@ -834,15 +802,13 @@ html[dir="rtl"] .splitToolbarButtonSeparator { box-sizing: border-box; } -html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child, -html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child { - margin-left: 2px; +#toolbarViewerLeft > .toolbarButton:first-child { + margin-inline-start: 2px; +} +#toolbarViewerRight > .toolbarButton:last-child { + margin-inline-end: 2px; } -html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child, -html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child { - margin-right: 2px; -} .toolbarButton:hover, .toolbarButton:focus-visible { background-color: var(--button-hover-color); @@ -1178,12 +1144,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after { width: 1px; background-color: var(--separator-color); } -html[dir="ltr"] .verticalToolbarSeparator { - margin-left: 2px; -} -html[dir="rtl"] .verticalToolbarSeparator { - margin-right: 2px; -} .horizontalToolbarSeparator { display: block; @@ -1213,14 +1173,8 @@ html[dir="rtl"] .verticalToolbarSeparator { opacity: 0; position: absolute !important; left: 0; -} - -html[dir="ltr"] .toolbarField[type="checkbox"] { - margin: 10px 0 3px 7px; -} - -html[dir="rtl"] .toolbarField[type="checkbox"] { - margin: 10px 7px 3px 0; + margin: 10px 0 3px; + margin-inline-start: 7px; } .toolbarField.pageNumber { @@ -1288,7 +1242,6 @@ html[dir="rtl"] .thumbnail { #thumbnailView > a:last-of-type > .thumbnail { margin-bottom: 10px; } - #thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) { margin-bottom: 9px; } @@ -1346,14 +1299,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing, user-select: none; } -html[dir="ltr"] .treeWithDeepNesting > .treeItem, -html[dir="ltr"] .treeItem > .treeItems { - margin-left: 20px; -} - -html[dir="rtl"] .treeWithDeepNesting > .treeItem, -html[dir="rtl"] .treeItem > .treeItems { - margin-right: 20px; +.treeWithDeepNesting > .treeItem, +.treeItem > .treeItems { + margin-inline-start: 20px; } .treeItem > a {