Merge pull request #9629 from wojtekmaj/add-autoprefixer

Implement autoprefixer
This commit is contained in:
Tim van der Meij 2018-04-08 15:11:41 +02:00 committed by GitHub
commit 1a634f9c6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 140 deletions

View File

@ -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)),

View File

@ -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",

View File

@ -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;

View File

@ -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;
}

View File

@ -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 {

View File

@ -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 {

View File

@ -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);