Commit Graph

490 Commits

Author SHA1 Message Date
Calixte Denizet
e56c30eb59 Move 'presentation mode' and 'bookmarks' buttons in the secondary toolbar (bug 1789082) 2022-09-08 12:18:08 +02:00
Jonas Jenwald
19182d5f25 [editor] Remove the editorNone toolbar button (bug 1787295) 2022-08-26 09:25:05 +02:00
Jonas Jenwald
7543a91086 [Firefox] Remove a couple of webkit CSS rules related to editing
Thanks to the CSS preprocessor, we can get rid of a couple of unnecessary CSS rules in the Firefox PDF Viewer.
2022-07-30 20:07:44 +02:00
Jonas Jenwald
4a38949886 Remove unnecessary color CSS property
This property is first of all unused, and secondly it contained a static value which means that it'd not have worked correctly in light/dark themes.
2022-07-30 19:53:34 +02:00
Jonas Jenwald
03c6febc44
Merge pull request #15121 from Snuffleupagus/loadingBar-cleanup
[api-minor] Further modernize the `ProgressBar` class (PR 14918 follow-up)
2022-07-02 16:46:40 +02:00
Jonas Jenwald
84ae9f9c58 [editor] Tweak @media CSS rules to account for the new toolbar buttons 2022-07-01 13:27:13 +02:00
Jonas Jenwald
d9ce17642f [api-minor] Further modernize the ProgressBar class (PR 14918 follow-up)
- Simplify how we look-up the DOM-element, which should also be a tiny bit more efficent.

 - Use private class-fields, rather than property-names prefixed with underscores.

 - Inline the `#updateBar` helper-method directly in the `percent`-setter, since having a separate method doesn't seem necessary in this case.

 - Set the `indeterminate`-class on the ProgressBar DOM-element, to simplify the code.

Finally, also (slightly) re-factors the `PDFViewerApplication.progress`-method to make it a bit smaller.
2022-07-01 10:31:25 +02:00
Calixte Denizet
1a3ef2a0aa [editor] Add some UI elements in order to set font size & color, and ink thickness & color 2022-06-28 12:05:04 +02:00
Jonas Jenwald
9748d3eb85 Remove element ids from the layersView in the sidebar
Similar to other recent patches, see e.g. PR 15057, we don't want to add these kind of `id`s to DOM-elements since they shouldn't become "linkable" through the URL hash.

*Please note:* This patch can be tested, in the viewer, with e.g. `bug1737260.pdf` from the test-suite.
2022-06-24 20:15:46 +02:00
Calixte Denizet
c161a86ba1 [editor] Add an Ink editor
- Approximate the drawn curve by a set of Bezier curves in using
  js code from https://github.com/soswow/fit-curves.
  The code has been slightly modified in order to make the linter
  happy.
2022-06-09 19:35:59 +02:00
Jonas Jenwald
d34e7fff01 [editor] Disable the editor-buttons in XFA documents
Given the differences between XFA documents and "normal" PDF documents, we don't support editing of the former ones. Hence, when a XFA-document is opened, we temporarily disable the editor-buttons.
2022-06-05 10:00:08 +02:00
Calixte Denizet
be1aa11986 [edition] Add a FreeText editor (#14970)
- add a basic UI to edit some text in a pdf;
- an editor can be moved, suppressed, cut, copied, pasted, selected;
- add an undo/redo manager.
2022-06-04 18:20:11 +02:00
Calixte Denizet
e94b9d1d7f Use a CSS transform to update the progress bar instead of changing the width (bug 1768481)
- it isn't a fix for bug 1768481 but just a tiny improvement to refresh the progress bar on the compositor thread.
2022-05-15 17:30:37 +02:00
Jonas Jenwald
1f3da032b4 [api-minor] Modernize and simplify the ProgressBar class
The original `ProgressBar`-functionality is very old, and could thus do with some general clean-up.
In particular, while it currently accepts various options those have never really been used in either the default viewer or in any examples. The sort of "styling" that these options provided are *much better*, not to mention simpler, done directly with CSS rules.

As part of these changes, the "progress" is now updated using CSS variables rather than by directly modifying the `style` of DOM elements. This should hopefully simplify future changes to this code, see e.g. PR 14898.

Finally, this also fixes a couple of other small things in the "mobile viewer" example.
2022-05-14 13:49:10 +02:00
Jonas Jenwald
d1f13a6af3 Use the regular preprocess-function for the CSS files as well
An old shortcoming of the `preprocessCSS`-function is its complete lack of support for our "normal" defines, which makes it very difficult to have build-specific CSS rules. Recently we've started using specially crafted comments to remove CSS rules from the MOZCENTRAL build, but (ab)using the `preprocessCSS`-function in this way really doesn't feel great.
However, it turns out to be surprisingly simple to instead use the "regular" `preprocess`-function for the CSS files as well. The only special-handling that's still necessary is the helper-function for dealing with CSS-imports, but apart from that everything seems to just work.

One reason, as far as I can tell, for having a separate `preprocessCSS`-function was likely that we originally used *lots* of vendor-prefixed CSS rules in our CSS files. With improvements over the years, especially thanks to Autoprefixer and PostCSS, we've been able to remove *almost* all non-standard CSS rules and the need for special-casing the CSS parsing has mostly vanished.

*Please note:* As part of testing this patch I've diffed the output of `gulp generic`, `gulp mozcentral`, and `gulp chromium` against the `master`-branch to check that there was no obvious breakage.
2022-05-07 22:45:52 +02:00
Jonas Jenwald
9817230ef8 Introduce a --viewer-container-height CSS variable to simplify the code
This new CSS variable will allow us to simplify a couple of different viewer components, since we no longer need to use JavaScript-based hacks and can directly set the CSS rules instead. In particular:

 - The `BaseViewer`-handling, used as part of the code that will center pages *vertically* in PresentationMode, can be simplified.
   By using CSS to control the height of the "dummy"-page we avoid unnecessarily invalidating the scale-value, which can reduce *some* unneeded re-rendering while PresentationMode is active.

 - The `SecondaryToolbar.#setMaxHeight`-method, and its associated parameters, are no longer necessary and can be completely removed.

Note that in order for things to work correctly in general, the new `--viewer-container-height` CSS variable must potentially be updated on any window-based "resize"-event (even when there's no zooming). While this is currently only done in the default viewer, that shouldn't be an issue since neither PresentationMode nor Toolbar-functionality is included in the "viewer components".
2022-05-06 13:45:39 +02:00
Jonas Jenwald
1e24fe97f2 Remove unnecessary CSS classes when specifying button icons
Currently we're using *both* ids and classes when specifying the button icons, which seems completely unnecessary and only serves to bloat the CSS code.
In general you always need to be careful about CSS specificity, but in these cases that should not actually be a problem.

Also, while not a button, this patch makes a similar simplification for the `pageNumber`-input.
2022-04-29 09:40:03 +02:00
Jonas Jenwald
4f69d66ab2 Remove redundant class names from the button DOM-elements
Note how in the `viewer.html` file we're specifying class names for most buttons, despite that not really being necessary. First of all, in many cases those class names are *identical* to the element-ids. Secondly, looking through the CSS rules they are only ever used when specifying button icons.
All-in-all, we should be able to simplify the HTML-code and use the element-ids in the CSS rules instead. Obviously ids have a higher CSS specificity than classes, but given how the old classes were being used that shouldn't be a problem here.

Also, the patch generalizes the styling for buttons (e.g. `viewBookmark`) that are *actually* link-elements.

Finally, while slightly unrelated, this patch also removes a little bit of duplication when specifying the border for `toolbarField`s.
2022-04-29 09:36:35 +02:00
Tim van der Meij
b72a448327
Merge pull request #14835 from Snuffleupagus/CSS-cleanup-separators
Clean-up some CSS rules for the various toolbar separators
2022-04-27 14:32:23 +02:00
Jonas Jenwald
3c10c66cd3 Remove unused CSS rules for toolbar buttons with textButton-classes
Searching through all of the files in the `web/`-folder has no *other* hits for the "textButton" string. Hence it's clear that there are no DOM elements actually using this class, and it's thus dead code.
2022-04-25 14:55:32 +02:00
Jonas Jenwald
f9262d29fc Clean-up some CSS rules for the various toolbar separators
This re-factors the various toolbar separators to *explicitly* specify both their dimensions and margins. Also, for the `horizontalToolbarSeparator`-class we can just set the `background-color` rather than using `border-top`.

Note that the `splitToolbarButtonSeparator`-class currently sets a number of unnecessary CSS rules, since as mentioned by the Firefox Devtools both the `display`- and `z-index`-properties are being ignored because `float` is used.

Finally, there's also no need to set a `z-index` for some of the `:hover`-rules. It's possible that this *was* necessary before the re-design, since the buttons had borders then.
2022-04-25 14:53:12 +02:00
Jonas Jenwald
b04c373362 Stop bundling the openFile-buttons in the MOZCENTRAL build
Note how both of the openFile-buttons are always hidden during viewer initialization in the MOZCENTRAL build, i.e. the *built-in* Firefox PDF Viewer. Despite that we still include HTML, CSS, and JavaScript code for these buttons in the build.

This patch *reduces* the size of the `gulp mozcentral` output by `1679` bytes, which isn't a lot but still cannot hurt.
2022-04-25 11:35:17 +02:00
Jonas Jenwald
925a7bc58a Remove unnecessary print CSS rules
These rules became unnecessary with PR 7697, over five years ago, since printing is now done from a `printContainer`-element rather than "directly" using the viewer.

Note how the *entire* `outerContainer`, which contains all of the DOM elements that were being manually hidden, is now being hidden during printing. Furthermore, note also how the print-canvases/images and their containers are using custom CSS-classes[1] rather than re-using the ones from the viewer.

---
[1] See the `printedPage` respectively `xfaPrintedPage` classes.
2022-04-23 14:32:00 +02:00
Jonas Jenwald
33ed743c48 Simplify setting of spacing at the left/right edges of the toolbar(s)
Rather than modifying the leading/trailing `margin` on the actual toolbar buttons, to achieve appropriate spacing at the left/right edges of the toolbar(s), it seems much more appropriate (and simpler) to just specify an explicit `padding` for the relevant toolbar containers.

Also, for toolbar buttons placed in `splitToolbarButton`-classes we can reduce some complexity around setting the `margin` (since it should always be zero now).

With these changes, we're thus able to get rid of a couple more `!important`-rules.
2022-04-22 18:15:28 +02:00
Jonas Jenwald
0f7e3213a1 Some more, small, CSS clean-up
- Remove a redundant `margin-top` rule for the `.dropdownToolbarButton`. After the (somewhat) recent UI-refresh all buttons now use `margin: 2px 1px;`, which renders the override unnecessary (and getting rid of an `!important`-rule can't hurt).

 - Combine two `.toggled::before` rules, since they're identical.
2022-04-21 15:41:30 +02:00
Jonas Jenwald
1d803451c3 Stop bundling errorWrapper CSS rules in the MOZCENTRAL build
Note that both the `errorWrapper` HTML and JavaScript code is being ignored in the MOZCENTRAL build, i.e. the *built-in* Firefox PDF Viewer, however the CSS rules are still being included.
That seems totally unnecessary, and while we currently don't have full build-target support in the CSS pre-processor we can actually improve things quite easily anyway. By (ab)using the existing CSS pre-processor, which will remove any non-Firefox CSS rules for the MOZCENTRAL build, it's possible to easily stop bundling any CSS rules by using comments that include a `-webkit`-string.

*Please note:* To easily test that this doesn't break the `errorWrapper` in GENERIC builds, try running e.g. `PDFViewerApplication._otherError("test");` in the web-console.
2022-04-20 14:35:09 +02:00
Tim van der Meij
c58ff7c301
Merge pull request #14801 from Snuffleupagus/findbar-simplify-button-styling
[GENERIC viewer] Simplify the styling of the previous/next findbar buttons
2022-04-19 21:29:41 +02:00
Tim van der Meij
a115d17b43
Merge pull request #14795 from Snuffleupagus/CSS-reduce-duplication
Reduce more duplication in the CSS
2022-04-19 21:19:05 +02:00
Tim van der Meij
5f6ca2224e
Merge pull request #14790 from Snuffleupagus/rm-print-CSS
Remove some outdated CSS rules related to printing
2022-04-19 21:14:42 +02:00
Jonas Jenwald
fb90ef7b28 [GENERIC viewer] Simplify the styling of the previous/next findbar buttons
The styling of the previous/next-buttons and the findInput, with the elements being "glued" together, was supposed to mimic the styling used in the Firefox *browser* findbar. However, after the most recent re-styling of the Firefox browser UI these elements are now visually separated.
Hence it makes sense, as far as I'm concerned, to try and follow this styling for the findbar used in the GENERIC viewer. One benefit of doing this is that we get more consistent styling, since the buttons now look/behave identically in both the main toolbar and the findbar. Additionally this also simplifies the CSS a bit, since a lot of the existing findbar-specific rules can be removed.
2022-04-19 14:12:30 +02:00
Jonas Jenwald
1ea9740fdb Reduce more duplication in the CSS
This patch combines a couple of different CSS rules, thus reducing the overall size of the file.
2022-04-17 14:03:01 +02:00
Jonas Jenwald
d7fd8d3883 Remove some outdated CSS rules related to printing
Given that no HTML element has used the `loadingBox`-id for many years, we obviously don't need to try and hide a non-existent element during printing.
Furthermore, we also shouldn't need to change the `overflow`-value for the `viewerContainer`-element during printing. Originally, many years ago now, we printed "directly" using the viewer and then this apparently made sense.
2022-04-16 16:03:17 +02:00
Jonas Jenwald
7023bac8d3 Move the PDFBug-related CSS from viewer.css and into its own file
Given that none of these CSS rules are used at all, unless debugging is enabled, it seems completely unnecessary to load them *unconditionally* for all users.[1]

Note that if *both* the `textLayer` and `pdfBug` debugging hash-parameters are specified simultaneously, we'll now load the `PDFBug`-file *twice* (since the code is simpler that way). However, given first of all that none of this is enabled by default and secondly that using those parameters together isn't helpful[2], potentially loading that file twice is hopefully not an issue.

For the `gulp mozcentral` target, the size of the *built* `viewer.css` file is reduced `> 3%` with this patch.

---
[1] For the Firefox built-in PDF Viewer, in order to even be able to access the `PDFBug` functionality, you need to first of all set `pdfjs.pdfBugEnabled = true` manually in `about:config`. Secondly, you then also need to append the `pdfBug=...` hash-parameter to the URL when *initially* loading the document.

[2] Note how the `textLayer`-settings are already, since essentially forever, overriding the highlighting-features of the "FontInspector"-tab.
2022-04-16 14:16:39 +02:00
Tim van der Meij
c4a9fd635e
Merge pull request #14773 from Snuffleupagus/rm-dropdownToolbarButton-styling
Remove some `dropdownToolbarButton`-related CSS rules
2022-04-14 21:02:57 +02:00
Tim van der Meij
5ca26bcc05
Merge pull request #14772 from Snuffleupagus/rm-unneeded-CSS
Remove/simplify some CSS rules
2022-04-14 20:57:04 +02:00
Tim van der Meij
e9aedf2d91
Merge pull request #14771 from Snuffleupagus/dialog-backdrop-rm-user-select
Simplify the `dialog::backdrop` CSS rules (PR 14710 follow-up)
2022-04-14 20:54:22 +02:00
Jonas Jenwald
11b30c974e Remove some dropdownToolbarButton-related CSS rules
According to the CSS, there should be a visible "divider" after the "Page Width" zoom-option. However, this is being ignored in both Mozilla Firefox[1] and Google Chrome hence the rule is effectively useless now.
Furthermore, the "custom" zoom-option is already being `hidden` using the attribute (in the HTML code) and there should thus be no reason to duplicate this in the CSS as well.

---
[1] Support for *detailed* styling of `<select>`-elements was removed as part of the E10s project.
2022-04-12 16:05:23 +02:00
Jonas Jenwald
3752b8975b Reduce (some) duplication in the CSS rules for the sidebarViews
With just a couple of exceptions, for the `thumbnailView`, all of the sidebarViews share the same basic styling which thus allows for some simplification.
2022-04-12 13:51:50 +02:00
Jonas Jenwald
f788035a58 Remove unnecessary min-width CSS rules
- For the findbar/secondaryToolbar case, the `min-width` rule doesn't really make sense since it's way too small to be useful. Furthermore, the findbar is already specifying its own `min-width` and the secondaryToolbar will (thanks to its buttons) receive a correct/useful width.

 - The pageNumber-input already has an *explicit* `width` set, hence setting the `min-width` rule as well is completely unnecessary.

 - The treeItem-links are supposed to *compute* their `min-width`, and the static value was only added as a fallback for older browsers without `calc()` support.
2022-04-12 13:51:45 +02:00
Jonas Jenwald
93c5c6e5e9 Use background-color rather than background in a few CSS rules
In a couple of spots, mostly related to the debugging tools, we're unnecessarily using a somewhat "complex" `background`-format only to specify a solid color. This can be simplified by using `background-color` instead, and the patch also removes a `color`-rule that's being ignored anyway.
2022-04-12 12:41:34 +02:00
Jonas Jenwald
3aed103ce8 Simplify the dialog::backdrop CSS rules (PR 14710 follow-up)
After the changes in https://bugzilla.mozilla.org/show_bug.cgi?id=1761839, we no longer need this CSS work-around to prevent the entire `<dialog>` contents from becoming selected when the backdrop is clicked.
2022-04-12 12:41:29 +02:00
Jonas Jenwald
0a83538e64 Remove unnecessary @media CSS rules (PR 8993 follow-up)
With the changes in PR 8993, a number of the `@media`-related CSS rules became unnecessary. However, it appears that some of these rule were *accidentally* left behind despite being unused now.
Note that previously, when opening the sidebar shifted the position of the main toolbar, we had to take both the sidebar opened *and* closed cases into account in these `@media` rules.
2022-04-11 10:08:48 +02:00
Jonas Jenwald
5390d2b377 [GENERIC viewer] Re-factor the fileInput initialization
*This is yet another installment in a never-ending series of patches that attempt to simplify and improve old code.*

The `fileInput`-element is used to support the "Open file"-button in the `GENERIC` viewer, however this is very old code.
Rather than creating the element dynamically in JavaScript, we can simply define it conditionally in the HTML code thanks to the pre-processor. Furthermore, the `fileInput`-element currently has a number of unnecessary CSS rules, since the element is *purposely* never made visibly.

Note that with these changes, the `fileInput`-element will now *always* have `display: none;` set. This shouldn't matter, since we can still trigger the `click`-event of the element just fine (via JavaScript) and this patch has been successfully tested in both Mozilla Firefox and Google Chrome.
2022-04-09 21:21:18 +02:00
Jonas Jenwald
966da4babe [GENERIC viewer] Try to improve a11y, for search results, in the findbar (issue 14525)
Note that it seemed necessary to re-factor the `findResultsCount` and `findMsg` element grouping, in the HTML/CSS code, in order those elements to be correctly announced by a11y software in Firefox.

The following MDN articles may be helpful here:
 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
2022-03-31 23:12:56 +02:00
Jonas Jenwald
f0aa08b464 Convert the existing overlays to use <dialog> elements (issue 14698)
This replaces our *custom* overlays with standard `<dialog>` DOM elements, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog, thus simplifying the related CSS, HTML, and JavaScript code.

With these changes, some of the functionality of the `OverlayManager` class is now handled natively (e.g. `Esc` to close the dialog). However, since we still need to be able to prevent dialogs from overlaying one another, it still makes sense to keep this functionality (as far as I'm concerned).
2022-03-28 11:36:29 +02:00
Jonas Jenwald
f8d60da94e Remove the remaining dir-dependent CSS rules
After the recent round of patches, I figured that we'd gone as far as possible in replacing `dir`-dependent CSS rules for the viewer.
However, it occurred that me that we could actually use a bit of CSS-trickery to get rid of the remaining ones. More specifically, this was done by defining a CSS variable whose value depends on the document direction and then using that variable together with `calc()` in the affected rules.

*Please note:* I suppose that this could perhaps be seen as a bit too "magical", hence I understand if this patch is ultimately rejected, however this is probably the only simple way to get rid of the remaining `dir`-dependent CSS rules.
2022-03-23 22:05:23 +01:00
Jonas Jenwald
477dc08b00 Replace dir-dependent border-rules with logical properties
*Please note:* This is the final step in a series of patches to simplify/modernize the viewer CSS, since the remaining `html[dir="rtl"]`-cases cannot be converted.

Rather than having to manually specify ltr/rtl-specific border-values in the CSS, we can use logical `border-inline-end`/`border-start-end-radius`/`border-end-end-radius` instead.
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 rely on the previously added PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius#browser_compatibility
2022-03-20 12:45:37 +01:00
Jonas Jenwald
9eed8c3576 Replace dir-dependent left/right with logical properties
*Please note:* This is another step in a series of patches to simplify/modernize the viewer CSS.

Rather than having to manually specify ltr/rtl-specific left/right-values in the CSS, we can use logical `inset-inline`/`inset-inline-start`/`inset-inline-end` instead.
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 rely on the previously added PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline#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
2022-03-19 14:44:01 +01:00
Jonas Jenwald
bc6ea6a878 Replace dir-dependent float 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 float-values in the CSS, we can use logical `inline-start`/`inline-end` 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 rely on PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility
2022-03-19 14:03:20 +01:00
Jonas Jenwald
502fd7c80d Stop polyfilling the CSS calc functionality
At this point in time, all browsers that we support have native support for CSS variables; please see https://developer.mozilla.org/en-US/docs/Web/CSS/calc()#browser_compatibility and https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support

We can also remove the hack introduced back in PR 11567, which was only necessary to work-around an IE 11 specific bug.
2022-03-19 14:03:19 +01:00
Jonas Jenwald
c99d558646 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
2022-03-19 13:35:24 +01:00
Tim van der Meij
489e9ff7d3
Merge pull request #14675 from Snuffleupagus/build-dev-CSS
Build the `web/viewer.css` file used in the development viewer (i.e. `gulp server`)
2022-03-16 20:14:02 +01:00
Jonas Jenwald
c5574864e1 Remove the -webkit-mask-image/-webkit-mask-image CSS rules
Given that we're now *building* the `web/viewer.css` file used in the development viewer, i.e. with `gulp server`, we no longer need to hard-code these `-webkit`-prefixed rules and can instead let Autoprefixer handle that for us.
2022-03-15 13:37:46 +01:00
Jonas Jenwald
ee2896dd1e Remove the custom grab/grabbing cursor image files
According to the MDN compatibility data, see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#browser_compatibility, all browsers that we now support should have these cursors available natively.
2022-03-14 14:36:38 +01:00
Jonas Jenwald
331f4e72de Replace dir-dependent padding-left/padding-right/text-align with logical properties
*Please note:* This is small first 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 padding-values in the CSS, we can use logical padding instead (and similar for text-align).
These logical properties depend on, among other things, the direction of the HTML document which we *always* specify in the viewer.

Note that a number of logical CSS properties are new enough that we'll need to use PostCSS plugins, however the ones in this patch are natively supported in all browsers that we currently support:
 - 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
2022-03-13 14:36:11 +01:00
Tim van der Meij
636fc05843
Merge pull request #14617 from Snuffleupagus/rm-webkit-outer-spin-button
Remove the `-webkit-outer-spin-button` CSS rule
2022-03-02 20:40:37 +01:00
Jonas Jenwald
fdd06fa393 Remove the -webkit-outer-spin-button CSS rule
Unfortunately simply using `appearance: textfield;`, or even `-webkit-appearance: textfield;`, doesn't actually hide the "spinner" in number-input elements in e.g. Google Chrome.
Hence we need to use a work-around with the `-webkit-inner-spin-button` rule, however in our CSS code we also have `-webkit-outer-spin-button` currently. According to both [the MDN compatibility data](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-outer-spin-button#browser_compatibility) and also manual testing in Google Chrome Beta 99, the `-webkit-outer-spin-button` rule is no longer necessary and we can thus clean-up the CSS a tiny bit.
2022-02-28 12:16:32 +01:00
Jonas Jenwald
047a971093 Remove the -webkit-overflow-scrolling: touch; CSS rules (PR 4516 follow-up)
This was added in PR 4516 specifically for Safari on iOS devices, but according to MDN it should no longer be necessary now; see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling#browser_compatibility

According to the MDN compatibility data, this CSS feature:
 - Was never implemented anywhere *except* for Safari on iOS.
 - Was never standardized and thus never existed in an *unprefixed* version.
 - Has now been removed, starting with Safari version 13.

Given that [the FAQ](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support) already lists Safari as "Mostly" supported, and that the default viewer is written primarily for Mozilla Firefox, it ought to be fine to remove these CSS rules now.
2022-02-27 22:09:19 +01:00
Jonas Jenwald
06190dbbb3 Remove unnecessary font-size CSS rule from the html element (issue 14555, PR 3794 follow-up)
According to https://github.com/mozilla/pdf.js/pull/3794#discussion_r6983639 this was intended to be *temporary*, and the B2G project itself was discontinued years ago.
2022-02-11 19:44:03 +01:00
Jonas Jenwald
6fe4b3a5ae Simplify the findResultsCount span toggling, by using the same approach as with the findMsg span 2022-02-03 22:16:56 +01:00
Jonas Jenwald
d0354d20b3 Avoid the findResultsCount span taking up (vertical) space when hidden (PR 13261 follow-up)
When the viewer becomes narrow, the `PDFFindBar` will (forcibly) wrap its elements to prevent it from extending to the full window width.
Currently, after PR 13261, this now leads to the `findResultsCount` span taking up vertical space *unconditionally* when the findbar is wrapped. To avoid a blank space being shown in this case, before searching has begun, place the `findResultsCount` span in a "message" rather than an "options" container.
2022-02-03 21:52:01 +01:00
Calixte Denizet
7dda85654e [UI] Avoid to have buttons in hover state after having been clicked (bug 836732)
- it aims to fix https://bugzilla.mozilla.org/show_bug.cgi?id=836732;
 - replace :focus by :focus-visible for the buttons in the UI, according to the docs:
   - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
   - the button has the focus-visible state when it has been focused with the keyboard
2022-01-30 18:11:34 +01:00
Jonas Jenwald
b03281de18 Move the permissions handling into the BaseViewer (PR 11789 follow-up)
Besides making the permissions-functionality directly available in the viewer-components, these changes are also necessary for the next patch.
2021-12-11 17:13:41 +01:00
Jonas Jenwald
f15eb63ed5 Remove the PDFSinglePageViewer-specific code from web/secondary_toolbar.js (PR 9877 follow-up)
This was added on the assumption that the viewer would (eventually) start using the `PDFSinglePageViewer` for e.g. PAGE-scrolling mode and PresentationMode. However, having both a `PDFViewer` and a `PDFSinglePageViewer` side-by-side in the viewer would've been tricky to implement well, which is why PR 14112 implemented PAGE-scrolling for the general `BaseViewer` instead.

Given that the default viewer is no longer (potentially) going to use `PDFSinglePageViewer`, there's code in the `SecondaryToolbar` (and related CSS rules) which is now unnecessary.
2021-11-29 13:13:17 +01:00
Jonas Jenwald
f7b1da418f Center pages vertically in PresentationMode (issue 10906)
*This patch can be tested e.g. with the `sizes.pdf` document in the test-suite.*

While this patch isn't necessarily the best solution, e.g. it might be possible to solve this with *only* CSS, it's what I was able to come up with to address an old issue.
The solution here re-uses the `spread`-class in PresentationMode, since that one already takes care of centering pages *vertically*, together with a dummy-page that takes up the entire height of the window.

Finally, some PresentationMode-related CSS-rules are also simplified slightly, since the changes in PR 14112 (using Page-scrolling) allows some clean-up here.
2021-11-24 14:09:34 +01:00
Tim van der Meij
38e5360533
Merge pull request #14162 from brendandahl/indent-stepper
Indent the stepper on save/restore.
2021-10-22 21:17:36 +02:00
Brendan Dahl
2e56369f79 Indent the stepper on save/restore.
Makes it easier to debug and visualize the graphics
state changes in the debugger.
2021-10-22 10:30:32 -07:00
Jonas Jenwald
511458fbbc Add a new Page scrolling mode (issue 2638, 8952, 10907)
This implements a new Page scrolling mode, essentially bringing (and extending) the functionality from `PDFSinglePageViewer` into the regular `PDFViewer`-class. Compared to `PDFSinglePageViewer`, which as its name suggests will only display one page at a time, in the `PDFViewer`-implementation this new Page scrolling mode also support spreadModes properly (somewhat similar to e.g. Adobe Reader).

Given the size and scope of these changes, I've tried to focus on implementing the basic functionality. Hence there's room for further clean-up and/or improvements, including e.g. simplifying the CSS/JS related to PresentationMode and implementing easier page-switching with the mouse-wheel/arrow-keys.
2021-10-12 13:45:15 +02:00
Brendan Dahl
c3ca78fdf8
Merge pull request #14042 from serdnab/doc-info-color
Fix dialogs with forced colors (bug 1722984)
2021-09-23 18:03:04 -07:00
unknown
a3cc2e63eb removed unnecessary variable setting 2021-09-17 18:43:31 -03:00
Jonas Jenwald
4a7976f097 Use CSS variables for setting the width of the zoom dropdown (PR 11570 follow-up)
By using CSS variables to set the width of the zoom dropdown, we can simplify both the relevant CSS and JS code. This will not only improve overall maintainability of this code, but should also make it (slightly) easier for third-party users that want to customize the width.

Note in particular that by having the code in `Toolbar._adjustScaleWidth` lookup the values of the CSS variables, we no longer need to worry about keeping hard-coded values up-to-date with the CSS rules.
2021-09-15 15:51:30 +02:00
Calixte Denizet
19309c1f28 XFA - Page can be too small when printing (bug 1723705) 2021-08-03 15:07:33 +02:00
Calixte Denizet
0b4bf5b645 XFA - Only the first page was printed (bug 1720159) 2021-07-12 20:53:21 +02:00
Brendan Dahl
17f1857556 Add more info for showText operator in stepper.
Adds a table that shows original char code, font char code, and unicode.
2021-06-04 13:58:05 -07:00
Jonas Jenwald
daf8461489 [GENERIC viewer] Fix printing regression from PR 13411
I missed this during review, since some of the changes in `web/pdf_print_service.js` broke printing.

Also, as part of these changes the patch replaces what looks like unnecessary `setAttribute` usage with "regular" `className` assignment and finally updates a couple of the CSS-rules to be more consistent.
2021-06-02 21:42:24 +02:00
Calixte Denizet
a434011517 XFA - Add support to print XFA forms 2021-05-31 10:26:30 +02:00
Brendan Dahl
6cf3070008
Merge pull request #13203 from utopianknight/high_contrast
Implement high contrast mode
2021-04-12 16:24:03 -07:00
utopianknight
be3debeeb8 Implement high contrast mode 2021-04-11 17:07:33 +04:00
Jonas Jenwald
52494be545 [GENERIC viewer] Display a warning message, using the errorWrapper, for documents with signatures (PR 13214 follow-up, issue 13215)
To simplify the overall implementation, given that it only applies to the GENERIC-viewer, this patch purposely re-uses the existing `errorWrapper`-functionality to display the message.
While that one is mostly intended for actual *errors*, by re-using it here we considerably reduce the amount of code/complexity necessary for supporting this new warning. It's obviously possible to re-factor/improve this later on, but the patch should do just fine here since it'll indeed inform users (of the GENERIC-viewer) about unverified signatures.

Finally this patch also tweaks the background-color of the `errorWrapper`, making it 20 percent lighter respectively darker (depending on the theme) to make it "stand out" a little bit *less*.[1] While it may perhaps be useful to re-style/re-factor the `errorWrapper`, this patch probably isn't the right place for doing that.

---
[1] Note how in the MOZCENTRAL-viewer, which instead uses the browser notification-bar, we're purposely using a neutral colour to not draw too much attention to the notification-bar.
2021-04-11 12:46:17 +02:00
Brendan Dahl
fc9501a637 Add support for basic structure tree for accessibility.
When a PDF is "marked" we now generate a separate DOM that represents
the structure tree from the PDF.  This DOM is inserted into the <canvas>
element and allows screen readers to walk the tree and have more
information about headings, images, links, etc. To link the structure
tree DOM (which is empty) to the text layer aria-owns is used. This
required modifying the text layer creation so that marked items are
now tracked.
2021-04-09 09:56:28 -07:00
Emilio Cobos Álvarez
81c7f905bc print: Improve rendering of oversized pages.
This improves and simplifies #13102 in order to make printing of test-cases
like the one in bug 1698414 (where the real page is bigger than the target
page) much better, see incoming screenshots.

The reason why we need to stop setting .style.width / .style.height is to get
the right auto-sizing behavior in both axes. This shouldn't change behavior as
long as the print resolution is >= the CSS resolution, which seems like a
reasonable assumption.

If you try to print with a lower resolution than CSS, then instead of an
stretched canvas, you'd get a centered CSS-quality canvas, which seems
sensible. This could maybe be fixed with some CSS hackery (some combination of
min / max and viewport units perhaps?), but I think it's more trouble than it's
worth.
2021-03-26 16:07:49 +01:00
Emilio Cobos Álvarez
1d70bfe6e6 print: RFC: Center when printing a PDF with smaller size than the output page.
This builds on top of #13100, but this changes printing behavior intentionally
so I thought it was worth discussing separately, to improve the rendering on
test-cases like the one in https://bugzil.la/1697778.

This matches what e.g.  Evince does when you print the PDF in there on an A4
printer.

We use margins to center horizontally, and flex to center vertically. The
reasoning for this is that it should have better browser support (though maybe
pdf.js no longer supports browsers without flex support?) and it's just as
simple.
2021-03-15 09:51:53 +01:00
Emilio Cobos Álvarez
baed09f1ff
print: Ensure print containers have the right size and don't create overflow.
First, there's just no need to do something like this, this is simpler and
closer to what the screen renderer does.

Second, this causes overflow, which Firefox tries to compensate for when
fitting to page width, and fails at it. That is tracked in:

https://bugzilla.mozilla.org/show_bug.cgi?id=1698136

But this bug works around it by not causing overflow.

For modern browsers, we could avoid the duplication setting the style attribute
by using something like width: min/max-content, but this is not a big deal I
think, let me know if you'd prefer that.

Also I had to add a max-height for Chromium not to create extra pages. This
is harmless in Firefox and workarounds the Chromium bug, so so be it.
2021-03-14 14:49:46 +01:00
Jonas Jenwald
7c52c01267 Change the background to ensure that the sidebar is visible/readable when the viewer is narrow (issue 13036)
This is more fallout from PR 11077.
2021-03-01 18:27:27 +01:00
Jonas Jenwald
38c9f1a37a Enable the Stylelint shorthand-property-no-redundant-values rule
Note that these changes were done automatically, using `gulp lint --fix`; this rule will help avoid unnecessary repetition in the CSS.

Please find additional details about the Stylelint rule at https://stylelint.io/user-guide/rules/shorthand-property-no-redundant-values
2021-01-22 14:36:02 +01:00
Jonas Jenwald
246a6f9d13 Enable the Stylelint length-zero-no-unit rule
Note that these changes were done automatically, using `gulp lint --fix`.
With this rule, we'll thus enforce a *consistent* formatting of zero-lengths in our CSS files.

Please find additional details about the Stylelint rule at https://stylelint.io/user-guide/rules/length-zero-no-unit
2021-01-10 14:09:36 +01:00
Jonas Jenwald
ccbee6d2be Remove unnecessary dir-dependent CSS rules, and simplify som findbar-button rules (PR 11077 follow-up)
With the updated default viewer UI, some `dir`-dependent CSS rules are now redundant since *identical* rules are being specified for both LTR and RTL mode; after PR 12807 landed I've found even more of these cases.

Note in particular that the findbar-button rules can be simplified quite a bit, since there's a fair amount of unnecessary duplication in the CSS.
2021-01-10 13:30:36 +01:00
Jonas Jenwald
5729c0b32f Add support for finding/highlighting the outlineItem, corresponding to the currently visible page, in the sidebar (issue 7557, bug 1253820, bug 1499050)
This implementation is inspired by the behaviour in (recent versions of) Adobe Reader, since it leads to reasonably simple and straightforward code as far as I'm concerned.
*Specifically:* We'll only consider *one* destination per page when finding/highlighting the current outline item, which is similar to e.g. Adobe Reader, and we choose the *first* outline item at the *lowest* level of the outline tree.

Given that this functionality requires not only parsing of the `outline`, but looking up *all* of the destinations in the document, this feature can when initialized have a non-trivial performance overhead for larger PDF documents.
In an attempt to reduce the performance impact, the following steps are taken here:

 - The "find current outline item"-functionality will only be enabled once *one* page has rendered and *all* the pages have been loaded[1], to prevent it interfering with data regular fetching/parsing early on during document loading and viewer initialization.

 - With the exception of a couple of small and simple `eventBus`-listeners, in `PDFOutlineViewer`, this new functionality is initialized *lazily* the first time that the user clicks on the `currentOutlineItem`-button.

 - The entire "find current outline item"-functionality is disabled when `disableAutoFetch = true` is set, since it can easily lead to the setting becoming essentially pointless[2] by triggering *a lot* of data fetching from a relatively minor viewer-feature.

 - Fetch the destinations *individually*, since that's generally more efficient than using `PDFDocumentProxy.getDestinations` to fetch them all at once. Despite making the overall parsing code *more* asynchronous, and leading to a lot more main/worker-thread message passing, in practice this seems faster for larger documents.

Finally, we'll now always highlight an outline item that the user manually clicked on, since only highlighting when the new "find current outline item"-functionality is used seemed inconsistent.

---
[1] Keep in mind that the `outline` itself already isn't fetched/parsed until at least *one* page has been rendered in the viewer.

[2] And also quite slow, since it can take a fair amount of time to fetch all of the necessary `destinations` data when `disableAutoFetch = true` is set.
2021-01-09 16:09:44 +01:00
Jonas Jenwald
94f1020769 Remove unnecessary dir-dependent CSS rules, and add a missing CSS variable (PR 11077 follow-up)
With the updated default viewer UI, a couple of `dir`-dependent CSS rules have now become redundant since *identical* rules are being specified for both LTR and RTL mode.

Furthermore, there's also some unnecessary re-defining of the `toolbarButton`/`secondaryToolbarButton`-icon related CSS rules.

Finally, for the toggle-buttons there's a particular styling applied to the `:hover:active` state, however the color wasn't defined with CSS variables.
2021-01-03 15:01:03 +01:00
Jonas Jenwald
5cb31a7ab6 Remove unnecessary toolbarButton icon-flipping in RTL mode (PR 11077 follow-up)
With the updated default viewer UI, a couple of the toolbarButton icons are now *vertically* symmetrical; hence we can remove some now unneeded `transform: scaleX(-1);` rules from the viewer CSS.
2021-01-02 14:04:31 +01:00
Jonas Jenwald
e8b8020667 Remove unused .noResults CSS-rule
This CSS-rule was added all the way back in PR 1808, however it's been completely unused for years (I didn't bother finding out *exactly* when that happened). Looking at its only usage, see https://github.com/mozilla/pdf.js/pull/1808/files#diff-987d91686287a25ac2405baaf17b699a5fc1a176a53f8ea347a72ef486001f7bR795, it's already clear from the surrounding code that it's indeed unnecessary now.
2020-12-26 13:04:32 +01:00
Tim van der Meij
a618b02e62
Merge pull request #12682 from Snuffleupagus/findbar-notFound
[Generic viewer] Re-factor how the `notFound` appearance is set on the "findInput" in the `PDFFindBar`
2020-12-02 22:00:41 +01:00
Jonas Jenwald
313ee28436 [Generic viewer] Re-factor how the notFound appearance is set on the "findInput" in the PDFFindBar
Rather than having two slightly different ways of setting the pending/notFound appearance on the "findInput", we can simply use "data-status" in both cases since they're obviously mutually exclusive.
2020-12-02 15:23:20 +01:00
Jonas Jenwald
488a81a7bc Fix the treeitem-expanded/treeitem-collapsed images in dark-mode (PR 12666 follow-up)
I completely missed updating these in PR 12666; sorry about that!
2020-12-02 11:48:32 +01:00
Jonas Jenwald
f2ec546cbb Use the same SVG images, in the default viewer, regardless of the CSS theme
As mentioned in https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support, PDF.js version `2.6.347` is the last release with IE 11/Edge support.
Hence we should now be able to reduce unnecessary duplication in the default viewer image resources, note the files in the `web/images/` folder with a `-dark` suffix, by using only *one* SVG-image for each icon and letting the `background-color` depend on the CSS theme instead.

For the `gulp mozcentral` build-target, the resulting `web/images/` folder is reduced from `43 997` to `28 566` bytes (~35 percent).

*Please note:* I don't really know if this implementation is necessarily the *best* solution, but it seems to work well enough in e.g. Firefox Nightly and Google Chrome Beta as far as my testing goes.
2020-12-01 11:45:09 +01:00
Jonas Jenwald
17a507016a Let the loadingBar have the same width as the viewerContainer
For years the loadingBar and sidebarContainer has had a slightly annoying and unfortunate dependency, since the loadingBar width follows the main toolbar width[1].
To prevent the loadingBar from obscuring part of the sidebarContainer, especially the buttons, the sidebarContainer is thus moved down when the loadingBar is visible. This has always annoyed me[2], since it means that the buttons in the sidebar may thus move vertically which seems bad from a UX perspective.

Now that CSS variables are available in all supported browsers[3] however, fixing the loadingBar/sidebarContainer overlap issues are finally easy. The solution is simply to let the sidebarContainer, when visible, control the loadingBar left position (right in RTL locales) in the same way that the viewerContainer is handled. Hence the sidebarContainer can now have a *consistent* vertical postition, without the loadingBar overlapping it.

---
[1] Obviously the right position (left in RTL locales) of the loadingBar is, potentially, reduced to account for a scrollbar.

[2] I've tried to fix this a few times, but it always seemed like more trouble than it's worth.

[3] https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Browser_compatibility
2020-09-10 17:16:24 +02:00
Jonas Jenwald
7b1418368d Remove some code/comments relevant for old (pre-Chromium) versions of Opera 2020-09-08 12:54:51 +02:00
Tim van der Meij
83e1bbea6e
Merge pull request #12328 from Snuffleupagus/rm-web-IE
Remove code-paths only relevant for IE 11/Edge (non-Chromium based) from the `web/` folder
2020-09-06 14:15:49 +02:00
Jonas Jenwald
cdeeec966d Rename the --outline-... CSS variables to --treeitem-... instead (PR 11077 follow-up)
Given that the outlineView/attachmentsView/layersView all share a common base-class and CSS rules, see PRs 12169 and 12170, the names of the CSS variables in question feels slightly strange now.
2020-09-05 23:06:44 +02:00
Jonas Jenwald
87b002c52f Remove code-paths only relevant for IE 11/Edge (non-Chromium based) from the web/ folder
This patch purposely starts small, by removing IE-specific code from various JS/CSS files in the `web/` folder.

There's obviously lots of potential for additional clean-up, especially the removal of no longer necessary polyfills in `src/shared/compatibility.js`, however that will require some care considering that certain polyfills may also be necessary for e.g. Node.js or the Chromium-extension as well.
Generally speaking, once we start removing polyfills it's probably a good idea to consult the compatibility information on https://developer.mozilla.org/ and also https://caniuse.com/ first. (Deciding on the lowest supported Chromium version, for the extension, would also seem like a good idea.)
2020-09-05 17:18:15 +02:00