From dbb0e88bc10e9b8e319e74b6dccd33e0e6c6495c Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Wed, 4 Apr 2018 00:18:57 +0200 Subject: [PATCH 1/4] Clean up browser-specific CSS --- web/annotation_layer_builder.css | 3 - web/pdf_viewer.css | 11 --- web/text_layer_builder.css | 9 +-- web/viewer.css | 125 ++----------------------------- 4 files changed, 8 insertions(+), 140 deletions(-) diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css index 4bbbd16e2c5d9..016e186c78611 100644 --- a/web/annotation_layer_builder.css +++ b/web/annotation_layer_builder.css @@ -144,9 +144,6 @@ .annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation.radioButton input { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; appearance: none; padding: 0; } diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css index dc6ff0cffd7de..cc0afa1fb01a6 100644 --- a/web/pdf_viewer.css +++ b/web/pdf_viewer.css @@ -65,19 +65,8 @@ background: url('images/loading-icon.gif') center no-repeat; } -.pdfPresentationMode:-webkit-full-screen .pdfViewer .page { - margin-bottom: 100%; - border: 0; -} - -.pdfPresentationMode:-moz-full-screen .pdfViewer .page { - margin-bottom: 100%; - border: 0; -} - .pdfPresentationMode:-ms-fullscreen .pdfViewer .page { margin-bottom: 100% !important; - border: 0; } .pdfPresentationMode:fullscreen .pdfViewer .page { diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index ff5e7c8551d71..230b5d24d83a1 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -29,10 +29,6 @@ position: absolute; white-space: pre; cursor: text; - -webkit-transform-origin: 0% 0%; - -moz-transform-origin: 0% 0%; - -o-transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; } @@ -61,7 +57,6 @@ } .textLayer ::selection { background: rgb(0,0,255); } -.textLayer ::-moz-selection { background: rgb(0,0,255); } .textLayer .endOfContent { display: block; @@ -72,9 +67,7 @@ bottom: 0px; z-index: -1; cursor: default; - -webkit-user-select: none; - -ms-user-select: none; - -moz-user-select: none; + user-select: none; } .textLayer .endOfContent.active { diff --git a/web/viewer.css b/web/viewer.css index 13a8d66062dcf..0b008d92bc805 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -53,36 +53,9 @@ select { display: none !important; } -#viewerContainer.pdfPresentationMode:-webkit-full-screen { - top: 0px; - border-top: 2px solid transparent; - background-color: #000; - width: 100%; - height: 100%; - overflow: hidden; - cursor: none; - -webkit-user-select: none; -} - -#viewerContainer.pdfPresentationMode:-moz-full-screen { - top: 0px; - border-top: 2px solid transparent; - background-color: #000; - width: 100%; - height: 100%; - overflow: hidden; - cursor: none; - -moz-user-select: none; -} - #viewerContainer.pdfPresentationMode:-ms-fullscreen { top: 0px !important; - border-top: 2px solid transparent; - width: 100%; - height: 100%; overflow: hidden !important; - cursor: none; - -ms-user-select: none; } #viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop { @@ -97,39 +70,13 @@ select { height: 100%; overflow: hidden; cursor: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -.pdfPresentationMode:-webkit-full-screen a:not(.internalLink) { - display: none; -} - -.pdfPresentationMode:-moz-full-screen a:not(.internalLink) { - display: none; -} - -.pdfPresentationMode:-ms-fullscreen a:not(.internalLink) { - display: none !important; + user-select: none; } .pdfPresentationMode:fullscreen a:not(.internalLink) { display: none; } -.pdfPresentationMode:-webkit-full-screen .textLayer > div { - cursor: none; -} - -.pdfPresentationMode:-moz-full-screen .textLayer > div { - cursor: none; -} - -.pdfPresentationMode:-ms-fullscreen .textLayer > div { - cursor: none; -} - .pdfPresentationMode:fullscreen .textLayer > div { cursor: none; } @@ -156,19 +103,15 @@ select { z-index: 100; border-top: 1px solid #333; - -webkit-transition-duration: 200ms; - -webkit-transition-timing-function: ease; transition-duration: 200ms; transition-timing-function: ease; } html[dir='ltr'] #sidebarContainer { - -webkit-transition-property: left; transition-property: left; left: -200px; left: calc(-1 * var(--sidebar-width)); } html[dir='rtl'] #sidebarContainer { - -webkit-transition-property: right; transition-property: right; right: -200px; right: calc(-1 * var(--sidebar-width)); @@ -180,11 +123,9 @@ html[dir='rtl'] #sidebarContainer { #outerContainer.sidebarResizing #sidebarContainer { /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ - -webkit-transition-duration: 0s; transition-duration: 0s; /* Prevent e.g. the thumbnails being selected when the sidebar is resized. */ - -webkit-user-select: none; - -moz-user-select: none; + user-select: none; } #outerContainer.sidebarMoving #sidebarContainer, @@ -235,8 +176,6 @@ html[dir='rtl'] #sidebarContent { left: 0; outline: none; - -webkit-transition-duration: 200ms; - -webkit-transition-timing-function: ease; transition-duration: 200ms; transition-timing-function: ease; } @@ -249,18 +188,15 @@ html[dir='rtl'] #viewerContainer { #outerContainer.sidebarResizing #viewerContainer { /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ - -webkit-transition-duration: 0s; transition-duration: 0s; } html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer { - -webkit-transition-property: left; transition-property: left; left: 200px; left: var(--sidebar-width); } html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer { - -webkit-transition-property: right; transition-property: right; right: 200px; right: var(--sidebar-width); @@ -353,15 +289,9 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { height: 100%; background-color: #ddd; overflow: hidden; - -webkit-transition: width 200ms; transition: width 200ms; } -@-webkit-keyframes progressIndeterminate { - 0% { left: -142px; } - 100% { left: 0; } -} - @keyframes progressIndeterminate { 0% { left: -142px; } 100% { left: 0; } @@ -369,7 +299,6 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { #loadingBar .progress.indeterminate { background-color: #999; - -webkit-transition: none; transition: none; } @@ -385,7 +314,6 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { #999 45px, #ddd 55px, #ddd 95px, #bbb 100px); - -webkit-animation: progressIndeterminate 950ms linear infinite; animation: progressIndeterminate 950ms linear infinite; } @@ -424,23 +352,15 @@ html[dir='rtl'] .findbar { } .findbar label { - -webkit-user-select: none; - -moz-user-select: none; + user-select: none; } #findInput { width: 200px; } #findInput::-webkit-input-placeholder { - font-style: italic; color: hsl(0, 0%, 75%); } -#findInput::-moz-placeholder { - font-style: italic; -} -#findInput:-ms-input-placeholder { - font-style: italic; -} #findInput::placeholder { font-style: italic; } @@ -627,9 +547,6 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, 0 1px 0 hsla(0,0%,100%,.05); - -webkit-transition-property: background-color, border-color, box-shadow; - -webkit-transition-duration: 150ms; - -webkit-transition-timing-function: ease; transition-property: background-color, border-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease; @@ -689,9 +606,6 @@ html[dir='rtl'] .splitToolbarButtonSeparator { padding: 12px 0; margin: 1px 0; box-shadow: 0 0 0 1px hsla(0,0%,100%,.03); - -webkit-transition-property: padding; - -webkit-transition-duration: 10ms; - -webkit-transition-timing-function: ease; transition-property: padding; transition-duration: 10ms; transition-timing-function: ease; @@ -708,14 +622,9 @@ html[dir='rtl'] .splitToolbarButtonSeparator { color: hsla(0,0%,100%,.8); font-size: 12px; line-height: 14px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + user-select: none; /* Opera does not support user-select, use <... unselectable="on"> instead */ cursor: default; - -webkit-transition-property: background-color, border-color, box-shadow; - -webkit-transition-duration: 150ms; - -webkit-transition-timing-function: ease; transition-property: background-color, border-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease; @@ -758,9 +667,6 @@ html[dir='rtl'] .dropdownToolbarButton { box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, 0 0 1px hsla(0,0%,0%,.2) inset, 0 1px 0 hsla(0,0%,100%,.05); - -webkit-transition-property: background-color, border-color, box-shadow; - -webkit-transition-duration: 10ms; - -webkit-transition-timing-function: linear; transition-property: background-color, border-color, box-shadow; transition-duration: 10ms; transition-timing-function: linear; @@ -775,9 +681,6 @@ html[dir='rtl'] .dropdownToolbarButton { box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, 0 0 1px hsla(0,0%,0%,.2) inset, 0 1px 0 hsla(0,0%,100%,.05); - -webkit-transition-property: background-color, border-color, box-shadow; - -webkit-transition-duration: 10ms; - -webkit-transition-timing-function: linear; transition-property: background-color, border-color, box-shadow; transition-duration: 10ms; transition-timing-function: linear; @@ -951,8 +854,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { .toolbarButton.bookmark, .secondaryToolbarButton.bookmark { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; outline: none; padding-top: 4px; @@ -1158,8 +1059,7 @@ html[dir='rtl'] .verticalToolbarSeparator { font-size: 12px; line-height: 14px; text-align: left; - -webkit-user-select: none; - -moz-user-select: none; + user-select: none; cursor: default; } @@ -1249,8 +1149,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing, bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; - -webkit-user-select: none; - -moz-user-select: none; + user-select: none; } #outlineView { @@ -1283,7 +1182,7 @@ html[dir='rtl'] .outlineItem > .outlineItems { color: hsla(0,0%,100%,.8); font-size: 13px; line-height: 15px; - -moz-user-select: none; + user-select: none; white-space: normal; } @@ -1379,7 +1278,6 @@ html[dir='rtl'] .outlineItemToggler::before { so we can override the opaque grey background when the window is inactive; see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */ ::selection { background: rgba(0,0,255,0.3); } -::-moz-selection { background: rgba(0,0,255,0.3); } #errorWrapper { background: none repeat scroll 0 0 #FF5555; @@ -1594,8 +1492,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { background-color: rgba(255, 255, 0, 0.1); color: black; border: solid 1px rgba(255, 0, 0, 0.5); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -1611,8 +1507,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { .grab-to-pan-grab { cursor: url("images/grab.cur"), move !important; - cursor: -webkit-grab !important; - cursor: -moz-grab !important; cursor: grab !important; } .grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) { @@ -1621,8 +1515,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { .grab-to-pan-grab:active, .grab-to-pan-grabbing { cursor: url("images/grabbing.cur"), move !important; - cursor: -webkit-grabbing !important; - cursor: -moz-grabbing !important; cursor: grabbing !important; position: fixed; @@ -1647,13 +1539,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { @media screen and (min-resolution: 2dppx) { /* Rules for Retina screens */ .toolbarButton::before { - -webkit-transform: scale(0.5); transform: scale(0.5); top: -5px; } .secondaryToolbarButton::before { - -webkit-transform: scale(0.5); transform: scale(0.5); top: -4px; } @@ -1804,7 +1694,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } .outlineItemToggler::before { - -webkit-transform: scale(0.5); transform: scale(0.5); top: -1px; content: url(images/treeitem-expanded@2x.png); From ed67c1d6aa61bd494fa2d9658a61ac7aecf401db Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Wed, 4 Apr 2018 00:19:13 +0200 Subject: [PATCH 2/4] Introduce autoprefixer to gulp process --- gulpfile.js | 7 +++++++ package.json | 2 ++ 2 files changed, 9 insertions(+) diff --git a/gulpfile.js b/gulpfile.js index 1647f2ffce3c9..a8a8425f1acf7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,9 +18,11 @@ 'use strict'; +var autoprefixer = require('autoprefixer'); var fancylog = require('fancy-log'); var fs = require('fs'); var gulp = require('gulp'); +var postcss = require('gulp-postcss'); var rename = require('gulp-rename'); var replace = require('gulp-replace'); var transform = require('gulp-transform'); @@ -577,6 +579,7 @@ gulp.task('generic', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(GENERIC_DIR + 'web')), preprocessCSS('web/viewer.css', 'generic', defines, true) + .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(GENERIC_DIR + 'web')), gulp.src('web/compressed.tracemonkey-pldi-09.pdf') @@ -602,6 +605,7 @@ gulp.task('components', ['buildnumber'], function () { createComponentsBundle(defines).pipe(gulp.dest(COMPONENTS_DIR)), gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(COMPONENTS_DIR + 'images')), preprocessCSS('web/pdf_viewer.css', 'components', defines, true) + .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(COMPONENTS_DIR)), ]); }); @@ -629,6 +633,7 @@ gulp.task('minified-pre', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(MINIFIED_DIR + 'web')), preprocessCSS('web/viewer.css', 'minified', defines, true) + .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(MINIFIED_DIR + 'web')), gulp.src('web/compressed.tracemonkey-pldi-09.pdf') @@ -719,6 +724,7 @@ gulp.task('mozcentral-pre', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + 'web')), preprocessCSS('web/viewer.css', 'mozcentral', defines, true) + .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + 'web')), gulp.src(FIREFOX_EXTENSION_DIR + 'locale/en-US/*.properties') @@ -766,6 +772,7 @@ gulp.task('chromium-pre', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + 'web')), preprocessCSS('web/viewer.css', 'chrome', defines, true) + .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + 'web')), gulp.src('LICENSE').pipe(gulp.dest(CHROME_BUILD_DIR)), diff --git a/package.json b/package.json index 5c45aa0d73303..1724259837aa4 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "2.0.0", "devDependencies": { "acorn": "^5.5.3", + "autoprefixer": "^8.2.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", @@ -14,6 +15,7 @@ "eslint-plugin-no-unsanitized": "^3.0.0", "fancy-log": "^1.3.2", "gulp": "^3.9.1", + "gulp-postcss": "^7.0.1", "gulp-rename": "^1.2.2", "gulp-replace": "^0.6.1", "gulp-transform": "^3.0.5", From acd1fa4c4f83617feb969c2b8a79dca1e286257c Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Wed, 4 Apr 2018 14:51:29 +0200 Subject: [PATCH 3/4] Configure Autoprefixer --- gulpfile.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index a8a8425f1acf7..a0bc0eb54eecd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -71,6 +71,20 @@ var builder = require('./external/builder/builder.js'); var CONFIG_FILE = 'pdfjs.config'; var config = JSON.parse(fs.readFileSync(CONFIG_FILE).toString()); +// Default Autoprefixer config used for generic, components, minifed-pre +var AUTOPREFIXER_CONFIG = { + browsers: [ + 'last 2 versions', + 'Chrome >= 49', // Last supported on Windows XP + 'Firefox >= 52', // Last supported on Windows XP + 'Firefox ESR', + 'IE >= 11', + 'Safari >= 8', + '> 0.5%', + 'not dead', + ], +}; + var DEFINES = { PRODUCTION: true, // The main build targets: @@ -579,7 +593,7 @@ gulp.task('generic', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(GENERIC_DIR + 'web')), preprocessCSS('web/viewer.css', 'generic', defines, true) - .pipe(postcss([autoprefixer()])) + .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)])) .pipe(gulp.dest(GENERIC_DIR + 'web')), gulp.src('web/compressed.tracemonkey-pldi-09.pdf') @@ -605,7 +619,7 @@ gulp.task('components', ['buildnumber'], function () { createComponentsBundle(defines).pipe(gulp.dest(COMPONENTS_DIR)), gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(COMPONENTS_DIR + 'images')), preprocessCSS('web/pdf_viewer.css', 'components', defines, true) - .pipe(postcss([autoprefixer()])) + .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)])) .pipe(gulp.dest(COMPONENTS_DIR)), ]); }); @@ -633,7 +647,7 @@ gulp.task('minified-pre', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(MINIFIED_DIR + 'web')), preprocessCSS('web/viewer.css', 'minified', defines, true) - .pipe(postcss([autoprefixer()])) + .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)])) .pipe(gulp.dest(MINIFIED_DIR + 'web')), gulp.src('web/compressed.tracemonkey-pldi-09.pdf') @@ -724,7 +738,9 @@ gulp.task('mozcentral-pre', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + 'web')), preprocessCSS('web/viewer.css', 'mozcentral', defines, true) - .pipe(postcss([autoprefixer()])) + .pipe(postcss([ + autoprefixer({ browsers: ['last 1 firefox versions'], }) + ])) .pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + 'web')), gulp.src(FIREFOX_EXTENSION_DIR + 'locale/en-US/*.properties') @@ -772,7 +788,7 @@ gulp.task('chromium-pre', ['buildnumber', 'locale'], function () { preprocessHTML('web/viewer.html', defines) .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + 'web')), preprocessCSS('web/viewer.css', 'chrome', defines, true) - .pipe(postcss([autoprefixer()])) + .pipe(postcss([autoprefixer({ browsers: ['chrome >= 49'], })])) .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + 'web')), gulp.src('LICENSE').pipe(gulp.dest(CHROME_BUILD_DIR)), From 69e9fe2494e9a68902934fbf92259bb8a85839a5 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sun, 8 Apr 2018 13:54:16 +0200 Subject: [PATCH 4/4] Provide a prefixed `appearance` CSS rule for reference testing in Chrome In `rasterizeAnnotationLayer` we load the source CSS files directly, so these are not processed by Autoprefixer. Since the prefixed rules have now been removed from the source CSS files, we must manually provide one prefixed rule that Chrome needs in the overrides CSS file for checkbox and radio button rendering to work in the reference tests. --- test/annotation_layer_builder_overrides.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css index 97432939d7d1c..c2d13407a2191 100644 --- a/test/annotation_layer_builder_overrides.css +++ b/test/annotation_layer_builder_overrides.css @@ -19,6 +19,11 @@ position: absolute; } +.annotationLayer .buttonWidgetAnnotation.checkBox input, +.annotationLayer .buttonWidgetAnnotation.radioButton input { + -webkit-appearance: none; +} + .annotationLayer .linkAnnotation > a, .annotationLayer .buttonWidgetAnnotation.pushButton > a { opacity: 0.2;