mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-20 15:18:08 +02:00
Code Activity

[api-minor] Update the minimum supported browsers, and remove the PostCSS logical plugin

Browse source 
The patch updates the minimum supported browsers/environments as follows:
 - Chrome 87, which was released on 2020-11-17; see https://en.wikipedia.org/wiki/Google_Chrome_version_history
 - Firefox ESR (no change); see https://wiki.mozilla.org/Release_Management/Calendar
 - Safari 14.1, which was released on 2021-04-26; see https://en.wikipedia.org/wiki/Safari_version_history#Safari_14
 - Node.js 14 (no change); see https://en.wikipedia.org/wiki/Node.js#Releases

The recent *major* release of the PostCSS `logical` plugin effectively removed support for all of the things that we used it for, which includes (but may not be limited to): preserving the original CSS code (for up-to-date browsers), re-writing the `:dir` pseudo-class, and support for re-writing `float: inline-start;`/`float: inline-end;` properties.
Please find additional details at https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-logical/CHANGELOG.md#600-january-24-2023
Hence the primary reason for these changes are related to native support for *logical* CSS properties/values. Currently, in the default viewer, we're using the following ones:
 - 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://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/padding-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility

By updating the minimum supported browsers, we thus only have to worry about the *last* case here. Thankfully there's not that many `float: inline-start;`/`float: inline-end;` occurrences, and we can utilize CSS variables together with the pre-processor to support those in a way that won't affect the Firefox PDF Viewer.
This commit is contained in:
Jonas Jenwald 2023-01-26 18:43:08 +01:00
parent f492d96301
commit ca996d2546
4 changed files with 26 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

28
web/viewer.css
View file

@ -17,6 +17,14 @@
:root {
--dir-factor: 1;
/*#if MOZCENTRAL*/
--inline-start: inline-start;
--inline-end: inline-end;
/*#else*/
--inline-start: left;
--inline-end: right;
/*#endif*/
--sidebar-width: 200px;
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
@ -114,6 +122,10 @@
:root:dir(rtl) {
--dir-factor: -1;
/*#if !MOZCENTRAL*/
--inline-start: right;
--inline-end: left;
/*#endif*/
}
@media (prefers-color-scheme: dark) {
@ -658,11 +670,11 @@ body {
#toolbarViewerLeft,
#toolbarSidebarLeft {
float: inline-start;
float: var(--inline-start);
}
#toolbarViewerRight,
#toolbarSidebarRight {
float: inline-end;
float: var(--inline-end);
}
#toolbarViewerLeft > *,
@ -672,7 +684,7 @@ body {
#toolbarSidebarRight *,
.findbar * {
position: relative;
float: inline-start;
float: var(--inline-start);
}
#toolbarViewerLeft {
@ -690,7 +702,7 @@ body {
display: inline-block;
}
.splitToolbarButton > .toolbarButton {
float: inline-start;
float: var(--inline-start);
}
.toolbarButton,
@ -740,7 +752,7 @@ body {
}
.splitToolbarButtonSeparator {
float: inline-start;
float: var(--inline-start);
margin: 4px 0;
width: 1px;
height: 20px;
@ -1169,7 +1181,7 @@ a.secondaryToolbarButton[href="#"] {
}
.thumbnail {
float: inline-start;
float: var(--inline-start);
margin: 0 10px 5px;
}
@ -1251,13 +1263,13 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
padding-inline-start: 4px;
}
#layersView .treeItem > a > label > input {
float: inline-start;
float: var(--inline-start);
margin-top: 1px;
}
.treeItemToggler {
position: relative;
float: inline-start;
float: var(--inline-start);
height: 0;
width: 0;
color: rgba(255, 255, 255, 0.5);