Skip to content

Start loading the viewer icons earlier in Firefox #22457

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timvandermeij merged 1 commit into from
Nov 9, 2026
+81 −1
Merged

Start loading the viewer icons earlier in Firefox #22457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions web/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,8 @@ const PDFViewerApplication = {
_isScrolling: false,
editorUndoBar: null,
_printPermissionPromise: null,
// Only used to keep the preloaded icons alive, see `load`.
_preloadedIcons: null,

// Called once when the document is loaded.
async initialize(appConfig) {
Expand Down Expand Up @@ -1911,6 +1913,63 @@ const PDFViewerApplication = {
this.pdfLayerViewer.render({ optionalContentConfig, pdfDocument });
});
}
if (
typeof PDFJSDev !== "undefined" &&
PDFJSDev.test("MOZCENTRAL && !GECKOVIEW") &&
!this._preloadedIcons
) {
// The CSS only fetches an icon once its element is rendered, hence the
// UI hidden on load would first be displayed without its icons. Warm
// the image cache up, once the first page is rendered in order to not
// delay it, with the icons that aren't already preloaded in
// viewer.html (where only the ones visible on load are).
// NOTE: When modifying the icons used in the toolbars or in the views
// manager, please keep this list and the viewer.html one in sync.
this._preloadedIcons = [];
window.requestIdleCallback(() => {
const path = AppOptions.get("imageResourcesPath");
for (const name of [
// Secondary toolbar, which also contains the print and download
// buttons when the window is narrow (see the `hiddenMediumView`
// class in viewer.css).
"toolbarButton-print.svg",
Comment thread
timvandermeij marked this conversation as resolved.
Resolved
"toolbarButton-download.svg",
"toolbarButton-presentationMode.svg",
"toolbarButton-bookmark.svg",
"secondaryToolbarButton-firstPage.svg",
"secondaryToolbarButton-lastPage.svg",
"secondaryToolbarButton-rotateCw.svg",
"secondaryToolbarButton-rotateCcw.svg",
"secondaryToolbarButton-selectTool.svg",
"secondaryToolbarButton-handTool.svg",
"secondaryToolbarButton-scrollPage.svg",
"secondaryToolbarButton-scrollVertical.svg",
"secondaryToolbarButton-scrollHorizontal.svg",
"secondaryToolbarButton-scrollWrapped.svg",
"secondaryToolbarButton-spreadNone.svg",
"secondaryToolbarButton-spreadOdd.svg",
"secondaryToolbarButton-spreadEven.svg",
"secondaryToolbarButton-documentProperties.svg",
// Views manager (see views_manager.css) and its menu.
"pages_viewButton.svg",
"pages_viewArrow.svg",
"checkmark.svg",
"toolbarButton-viewOutline.svg",
"toolbarButton-viewAttachments.svg",
"toolbarButton-viewLayers.svg",
"pages_closeButton.svg",
"altText_spinner.svg",
"altText_done.svg",
]) {
const image = new Image();
image.src = path + name;
// The images are never read: keeping a reference to them prevents
// their entries, which expire when unused, from being evicted from
// the image cache before the icons are displayed.
this._preloadedIcons.push(image);
Comment thread
timvandermeij marked this conversation as resolved.
Resolved
}
});
}
});

this._initializePageLabels(pdfDocument);
Expand Down
3 changes: 2 additions & 1 deletion web/viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1867,7 +1867,8 @@ dialog :link {
}
}

/* Account for Nova's larger toolbar buttons. */
/* Account for Nova's larger toolbar buttons. The icon preloads in viewer.html
use these breakpoints. */
/*#if MOZCENTRAL*/
@media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
@media (max-width: 880px) {
Expand Down
20 changes: 20 additions & 0 deletions web/viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,27 @@
<!--#include viewer-snippet.html-->
<!--#endif-->

<!-- In Firefox, preload the icons visible on load, i.e. the main toolbar
ones (the media queries match the breakpoints of the Nova toolbar in
viewer.css), since the CSS only fetches them once rendered. The icons
of the UI hidden on load are fetched later, from
PDFViewerApplication.load in app.js: please keep both lists in sync. -->
<!--#if MOZCENTRAL-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-viewsManagerToggle.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-pageUp.svg" media="(min-width: 801px)">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-pageDown.svg" media="(min-width: 801px)">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-zoomOut.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-zoomIn.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/comment-editButton.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-editorSignature.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-editorHighlight.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-editorFreeText.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-editorInk.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-editorStamp.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-print.svg" media="(min-width: 881px)">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-download.svg" media="(min-width: 881px)">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/toolbarButton-secondaryToolbarToggle.svg">-->
<!--<link rel="preload" as="image" href="resource://pdf.js/web/images/loading.svg">-->
<!--<link rel="stylesheet" href="resource://pdf.js/web/viewer.css">-->
<!--<link rel="localization" href="toolkit/pdfviewer/viewer.ftl"/>-->
<!--#else-->
Expand Down
Loading