diff --git a/gulpfile.js b/gulpfile.js index 1647f2ffc..a0bc0eb54 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'); @@ -69,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: @@ -577,6 +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(AUTOPREFIXER_CONFIG)])) .pipe(gulp.dest(GENERIC_DIR + 'web')), gulp.src('web/compressed.tracemonkey-pldi-09.pdf') @@ -602,6 +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(AUTOPREFIXER_CONFIG)])) .pipe(gulp.dest(COMPONENTS_DIR)), ]); }); @@ -629,6 +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(AUTOPREFIXER_CONFIG)])) .pipe(gulp.dest(MINIFIED_DIR + 'web')), gulp.src('web/compressed.tracemonkey-pldi-09.pdf') @@ -719,6 +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({ browsers: ['last 1 firefox versions'], }) + ])) .pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + 'web')), gulp.src(FIREFOX_EXTENSION_DIR + 'locale/en-US/*.properties') @@ -766,6 +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({ browsers: ['chrome >= 49'], })])) .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 5c45aa0d7..172425983 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", diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css index 97432939d..c2d13407a 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; diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css index 4bbbd16e2..016e186c7 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 dc6ff0cff..cc0afa1fb 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 ff5e7c855..230b5d24d 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 13a8d6606..0b008d92b 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);