@readium/navigator 2.10.2 → 2.11.0

package/src/epub/frame/FramePoolManager.ts

@@ -1,12 +1,12 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication } from "@readium/shared";
-import FrameBlobBuider from "./FrameBlobBuilder.ts";
+import FrameBlobBuilder, { UpgradeInsecureRequests } from "./FrameBlobBuilder.ts";
 import { FrameManager } from "./FrameManager.ts";
 import { Injector } from "../../injection/Injector.ts";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 
-const UPPER_BOUNDARY = 5;
-const LOWER_BOUNDARY = 3;
+const UPPER_BOUNDARY = 10;
+const LOWER_BOUNDARY = 5;
 
 export class FramePoolManager {
     private readonly container: HTMLElement;
@@ -14,15 +14,18 @@ export class FramePoolManager {
     private _currentFrame: FrameManager | undefined;
     private currentCssProperties: { [key: string]: string } | undefined;
     private readonly pool: Map<string, FrameManager> = new Map();
-    private readonly blobs: Map<string, string> = new Map();
-    private readonly inprogress: Map<string, Promise<void>> = new Map();
+    private readonly blobs: Map<string, FrameBlobBuilder> = new Map();
+    private readonly inprogress: Map<string, Promise<unknown>> = new Map();
     private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
     private readonly injector: Injector | null = null;
     private readonly contentProtectionConfig: IContentProtectionConfig;
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
+    private updateSequence = 0;
+    private forcedUpdate: Promise<void> | undefined;
     private resizeWatchSelectors: string[];
     private readonly getFragmentIds: (href: string) => string[];
+    private readonly upgradeInsecureRequests: UpgradeInsecureRequests;
 
     constructor(
         container: HTMLElement,
@@ -32,7 +35,8 @@ export class FramePoolManager {
         contentProtectionConfig?: IContentProtectionConfig,
         keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig,
         getFragmentIds?: (href: string) => string[],
-        resizeWatchSelectors: string[] = []
+        resizeWatchSelectors: string[] = [],
+        upgradeInsecureRequests?: UpgradeInsecureRequests
     ) {
         this.container = container;
         this.positions = positions;
@@ -42,6 +46,7 @@ export class FramePoolManager {
         this.keyboardPeripheralsConfig = keyboardPeripheralsConfig || [];
         this.getFragmentIds = getFragmentIds ?? (() => []);
         this.resizeWatchSelectors = [...resizeWatchSelectors];
+        this.upgradeInsecureRequests = upgradeInsecureRequests ?? 'always';
     }
 
     addResizeTarget(selector: string): void {
@@ -61,7 +66,7 @@ export class FramePoolManager {
         // Wait for all in-progress loads to complete
         let iit = this.inprogress.values();
         let inp = iit.next();
-        const inprogressPromises: Promise<void>[] = [];
+        const inprogressPromises: Promise<unknown>[] = [];
         while(inp.value) {
             inprogressPromises.push(inp.value);
             inp = iit.next();
@@ -81,10 +86,8 @@ export class FramePoolManager {
         this.pool.clear();
 
         // Revoke all blobs
-        this.blobs.forEach(v => {
-            this.injector?.releaseBlobUrl?.(v);
-            URL.revokeObjectURL(v);
-        });
+        this.blobs.forEach(v => v.reset());
+        this.blobs.clear();
 
         // Clean up injector if it exists
         this.injector?.dispose();
@@ -96,6 +99,9 @@ export class FramePoolManager {
     }
 
     async update(pub: Publication, locator: Locator, modules: ModuleName[], force=false) {
+        // Updates arriving mid-rebuild must not cancel it, or the old frame is gone with no replacement
+        while (this.forcedUpdate) await this.forcedUpdate;
+        const updateSequence = ++this.updateSequence;
         let i = this.positions.findIndex(l => l.locations.position === locator.locations.position);
         if(i < 0) throw Error(`Locator not found in position list: ${locator.locations.position} > ${this.positions.reduce<number>((acc, l) => l.locations.position || 0 > acc ? l.locations.position || 0 : acc, 0)  }`);
         const newHref = this.positions[i].href;
@@ -125,39 +131,33 @@ export class FramePoolManager {
                 this.pool.delete(href);
                 if(this.pendingUpdates.has(href))
                     this.pendingUpdates.set(href, { inPool: false });
+                // Note that we don't reset the blob here, unlike in the FXL pool.
+                // This is because FXL tends to have a ton more blobs. Maybe we'll adjust
+                // this at a later point with a much larger boundary for resets to deal
+                // with extremely long/large reflowable publications.
+                // Reflowable publication resources also tend to be much larger documents,
+                // so they're more expensive to preprocess with the FrameBlobBuilder.
             });
 
             // Check if base URL of publication has changed
             if(this.currentBaseURL !== undefined && pub.baseURL !== this.currentBaseURL) {
                 // Revoke all blobs
-                this.blobs.forEach(v => {
-                    this.injector?.releaseBlobUrl?.(v);
-                    URL.revokeObjectURL(v);
-                });
+                this.blobs.forEach(v => v.reset());
                 this.blobs.clear();
             }
             this.currentBaseURL = pub.baseURL;
 
+            if(force) {
+                this.blobs.forEach(v => v.reset());
+                this.blobs.clear();
+                this.pendingUpdates.clear();
+            }
+
             const creator = async (href: string) => {
-                if(force) {
-                    // Revoke all blobs so that CSSProperties are not stale
-                    // When using force, we switch scroll/paginated
-                    // If this property is not up to date, it creates issues
-                    // when navigating backwards, where paginated will go the
-                    // start of the resource instead of the end due to the
-                    // corrupted width ColumnSnapper (injectables) gets on init
-                    this.blobs.forEach(v => {
-                        this.injector?.releaseBlobUrl?.(v);
-                        URL.revokeObjectURL(v);
-                    });
-                    this.blobs.clear();
-                    this.pendingUpdates.clear();
-                }
                 if(this.pendingUpdates.has(href) && this.pendingUpdates.get(href)?.inPool === false) {
-                    const url = this.blobs.get(href);
-                    if(url) {
-                        this.injector?.releaseBlobUrl?.(url);
-                        URL.revokeObjectURL(url);
+                    const v = this.blobs.get(href);
+                    if(v) {
+                        v.reset();
                         this.blobs.delete(href);
                         this.pendingUpdates.delete(href);
                     }
@@ -176,44 +176,92 @@ export class FramePoolManager {
                 const itm = pub.readingOrder.findWithHref(href);
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new FrameBlobBuider(
+                    this.blobs.set(href, new FrameBlobBuilder(
                         pub,
                         this.currentBaseURL || "",
                         itm,
                         {
                             cssProperties: this.currentCssProperties,
-                            injector: this.injector
+                            injector: this.injector,
+                            upgradeInsecureRequests: this.upgradeInsecureRequests
                         }
-                    );
-                    const blobURL = await blobBuilder.build();
-                    this.blobs.set(href, blobURL);
+                    ));
                 }
 
                 // Create <iframe>
-                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig, this.getFragmentIds(href), this.resizeWatchSelectors);
+                const fm = new FrameManager(await this.blobs.get(href)!.build(), this.contentProtectionConfig, this.keyboardPeripheralsConfig, this.getFragmentIds(href), this.resizeWatchSelectors);
                 if(href !== newHref) await fm.hide(); // Avoid unecessary hide
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);
                 this.pool.set(href, fm);
+                return fm;
             }
+
+            // Target frame is awaited
             try {
-                await Promise.all(creation.map(href => creator(href)));
+                await Promise.all(creation.filter(href => href === newHref).map(href => creator(href)));
             } catch (error) {
                 reject(error);
+                return;
             }
 
+            if (updateSequence !== this.updateSequence) {
+                resolve();
+                return;
+            }
+
+            Promise.all(creation.filter(href => href !== newHref && !this.inprogress.has(href)).map(async href => {
+                const c = creator(href);
+                this.inprogress.set(href, c);
+                try {
+                    await c;
+                } finally {
+                    if (this.inprogress.get(href) === c) this.inprogress.delete(href);
+                }
+            })).catch(error => console.warn("Failed preloading frame", error));
+
             // Update current frame
-            const newFrame = this.pool.get(newHref)!;
+            const newFrame = this.pool.get(newHref);
+            if (!newFrame) {
+                resolve();
+                return;
+            }
+
             if(newFrame?.source !== this._currentFrame?.source || force) {
                 await this._currentFrame?.hide(); // Hide current frame. It's possible it no longer even exists in the DOM at this point
-                if(newFrame) // If user is speeding through the publication, this can get destroyed
-                    await newFrame.load(modules); // In order to ensure modules match the latest configuration
+
+                // Resolve if there is a concurrent update that has started since this one began
+                if (updateSequence !== this.updateSequence) {
+                    resolve();
+                    return;
+                }
+
+                // If user is speeding through the publication, this can get destroyed
+                const currentFrame = this.pool.get(newHref);
+                if (!currentFrame) {
+                    resolve();
+                    return;
+                }
+                
+                await currentFrame.load(modules); // In order to ensure modules match the latest configuration
+
+                // Resolve if there is a concurrent update that has started since this one began
+                if (updateSequence !== this.updateSequence) {
+                    resolve();
+                    return;
+                }
+
+                // Check if it was destroyed, again
+                const latestFrame = this.pool.get(newHref);
+                if (!latestFrame) {
+                    resolve();
+                    return;
+                }
 
                 // Update progression if necessary and show the new frame
-                if(newFrame) // If user is speeding through the publication, this can get destroyed
-                    await newFrame.show(locator.locations.progression); // Show/activate new frame
+                await latestFrame.show(locator.locations.progression); // Show/activate new frame
 
-                this._currentFrame = newFrame;
+                this._currentFrame = latestFrame;
 
                 // Safari retains focus on the hidden iframe; transfer it to the new
                 // frame only if no meaningful element in the parent document owns focus.
@@ -227,8 +275,18 @@ export class FramePoolManager {
         });
 
         this.inprogress.set(newHref, progressPromise); // Add the job to the in progress map
-        await progressPromise; // Wait on the job to finish...
-        this.inprogress.delete(newHref); // Delete it from the in progress map!
+        if (force) {
+            const forced = progressPromise.catch(() => {});
+            this.forcedUpdate = forced;
+            forced.then(() => {
+                if (this.forcedUpdate === forced) this.forcedUpdate = undefined;
+            });
+        }
+        try {
+            await progressPromise; // Wait on the job to finish...
+        } finally {
+            this.inprogress.delete(newHref); // Delete it from the in progress map!
+        }
     }
 
     setCSSProperties(properties: { [key: string]: string }) {

package/src/epub/fxl/FXLFrameManager.ts

@@ -1,13 +1,14 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { Page, ReadingProgression } from "@readium/shared";
 import { FrameComms } from "../frame/FrameComms.ts";
-import { FXLPeripherals } from "./FXLPeripherals.ts";
+import { FXLPeripherals, isTypedOMSupported } from "./FXLPeripherals.ts";
 import type { ReadiumWindow } from "@readium/navigator-html-injectables";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { KeyboardConditionBridge } from "../../peripherals/KeyboardConditionBridge.ts";
 
 export class FXLFrameManager {
     private frame: HTMLIFrameElement;
+    private frameIsAppended = false;
     private loader: Loader | undefined;
     public source: string;
     private comms: FrameComms | undefined;
@@ -24,6 +25,7 @@ export class FXLFrameManager {
     public debugHref: string;
     private loadPromise: Promise<Window> | undefined;
     private showPromise: Promise<void> | undefined;
+    private viewportSize: { width: number, height: number } | undefined = undefined;
 
     constructor(
         peripherals: FXLPeripherals,
@@ -45,7 +47,7 @@ export class FXLFrameManager {
         this.frame.classList.add("blank");
         this.frame.scrolling = "no";
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.display = "none";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -56,15 +58,17 @@ export class FXLFrameManager {
         this.frame.dataset.originalHref = debugHref;
         this.source = "about:blank";
 
-        // NEW
         this.wrapper = document.createElement("div");
         this.wrapper.style.position = "relative";
+        this.wrapper.style.contain = "strict";
         this.wrapper.style.float = this.wrapper.style.cssFloat = direction === ReadingProgression.rtl ? "right" : "left";
-
-        this.wrapper.appendChild(this.frame);
     }
 
     async load(modules: ModuleName[], source: string): Promise<Window> {
+        if(!this.frameIsAppended) {
+            this.wrapper.appendChild(this.frame);
+            this.frameIsAppended = true;
+        }
         if(this.source === source && this.loadPromise/* && this.loaded*/) {
             if([...this.currModules].sort().join("|") === [...modules].sort().join("|")) {
                 return this.loadPromise;
@@ -110,6 +114,7 @@ export class FXLFrameManager {
 
     // Parses the page size from the viewport meta tag of the loaded resource.
     loadPageSize(): { width: number, height: number } {
+        if(this.viewportSize) return this.viewportSize;
         const wnd = this.frame.contentWindow!;
 
         // Try to get the page size from the viewport meta tag
@@ -126,8 +131,10 @@ export class FXLFrameManager {
                 else if(match[1] === "height")
                     height = Number.parseFloat(match[2]);
             }
-            if(width > 0 && height > 0)
-                return { width, height };
+            if(width > 0 && height > 0) {
+                this.viewportSize = { width, height };
+                return this.viewportSize;
+            }
         }
 
         // Otherwise get it from the size of the loaded content
@@ -140,25 +147,47 @@ export class FXLFrameManager {
     update(page?: Page) {
         if(!this.loaded) return;
         const dimensions = this.loadPageSize();
-        this.frame.style.height = `${dimensions.height}px`;
-        this.frame.style.width = `${dimensions.width}px`;
         const ratio = Math.min(this.wrapper.clientWidth / dimensions.width, this.wrapper.clientHeight / dimensions.height);
-        this.frame.style.transform = `scale(${ratio})`;
+        if(isTypedOMSupported()) {
+            this.frame.attributeStyleMap.set("width", CSS.px(dimensions.width));
+            this.frame.attributeStyleMap.set("height", CSS.px(dimensions.height));
+            this.frame.attributeStyleMap.set("transform", new CSSTransformValue([
+                new CSSScale(ratio, ratio),
+            ]));
+        } else {
+            this.frame.style.height = `${dimensions.height}px`;
+            this.frame.style.width = `${dimensions.width}px`;
+            this.frame.style.transform = `scale(${ratio})`;
+        }
         const bcr = this.frame.getBoundingClientRect();
         const hdiff = this.wrapper.clientHeight - bcr.height;
-        this.frame.style.top = `${hdiff / 2}px`;
-        if(page === Page.left) {
-            const wdiff = this.wrapper.clientWidth - bcr.width;
-            this.frame.style.left = `${wdiff}px`;
-        } else if(page === Page.center) {
-            const wdiff = this.wrapper.clientWidth - bcr.width;
-            this.frame.style.left = `${wdiff / 2}px`;
+
+        if(isTypedOMSupported()) {
+            this.frame.attributeStyleMap.set("top", CSS.px(hdiff / 2));
+            if(page === Page.left) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.attributeStyleMap.set("left", CSS.px(wdiff));
+            } else if(page === Page.center) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.attributeStyleMap.set("left", CSS.px(wdiff / 2));
+            } else {
+                this.frame.attributeStyleMap.set("left", CSS.px(0));
+            }
         } else {
-            this.frame.style.left = "0px";
+            this.frame.style.top = `${hdiff / 2}px`;
+            if(page === Page.left) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.style.left = `${wdiff}px`;
+            } else if(page === Page.center) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.style.left = `${wdiff / 2}px`;
+            } else {
+                this.frame.style.left = "0px";
+            }
         }
 
         this.frame.style.removeProperty("visibility");
-        this.frame.style.removeProperty("aria-hidden");
+        this.frame.ariaHidden = null;
         this.frame.style.removeProperty("pointer-events");
         this.frame.classList.remove("blank");
         this.frame.classList.add("loaded");
@@ -175,7 +204,7 @@ export class FXLFrameManager {
         if(!this.loaded) return;
         this.deselect();
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.pointerEvents = "none";
         this.frame.classList.add("blank");
         this.frame.classList.remove("loaded");
@@ -193,6 +222,8 @@ export class FXLFrameManager {
             this.source = "about:blank";
             this.frame.contentWindow!.location.replace("about:blank");
             this.frame.style.display = "none";
+            this.frame.style.width = "0px";
+            this.frame.style.height = "0px";
         });
     }
 
@@ -326,15 +357,27 @@ export class FXLFrameManager {
     }
 
     set width(width: number) {
-        const newWidth = `${width}%`;
-        if(this.wrapper.style.width === newWidth) return;
-        this.wrapper.style.width = newWidth;
+        if(isTypedOMSupported()) {
+            const current = this.wrapper.attributeStyleMap.get("width");
+            if(current instanceof CSSUnitValue && current.unit === "percent" && current.value === width) return;
+            this.wrapper.attributeStyleMap.set("width", CSS.percent(width));
+        } else {
+            const newWidth = `${width}%`;
+            if(this.wrapper.style.width === newWidth) return;
+            this.wrapper.style.width = newWidth;
+        }
     }
 
     set height(height: number) {
-        const newHeight = `${height}px`;
-        if(this.wrapper.style.height === newHeight) return;
-        this.wrapper.style.height = newHeight;
+        if(isTypedOMSupported()) {
+            const current = this.wrapper.attributeStyleMap.get("height");
+            if(current instanceof CSSUnitValue && current.unit === "px" && current.value === height) return;
+            this.wrapper.attributeStyleMap.set("height", CSS.px(height));
+        } else {
+            const newHeight = `${height}px`;
+            if(this.wrapper.style.height === newHeight) return;
+            this.wrapper.style.height = newHeight;
+        }
     }
 
     get window() {