@netless/window-manager 1.0.18 → 1.0.20

package/src/ContainerResizeObserver.ts

@@ -2,25 +2,58 @@ import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observe
 import { WindowManager } from "./index";
 import type { EmitterType } from "./InternalEmitter";
 import type { UnsubscribeFn } from "emittery";
-import { LocalConsole } from "./Utils/log";
+import type { Logger } from "white-web-sdk";
+import { CONTAINER_STATE_LOG_DEBOUNCE } from "./constants";
+import { ArgusLog, LocalConsole } from "./Utils/log";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
+export type ContainerInternalState = {
+    mainViewElement?: HTMLElement;
+    mainViewSize?: Pick<DOMRectReadOnly, "width" | "height">;
+    teleBoxContainerRect?: Pick<DOMRectReadOnly, "width" | "height">;
+    mainViewDidRelease?: boolean;
+    containerSizeRatio?: number;
+};
+
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
     private disposer?: UnsubscribeFn;
 
     private updateSizerLocalConsole = new LocalConsole("updateSizer", 100);
+    private containerStateArgusLog?: ArgusLog;
+    private containerStateLogTimer?: ReturnType<typeof setTimeout>;
+    private pendingContainerState?: {
+        origin?: string;
+        observedSize?: Pick<DOMRectReadOnly, "width" | "height">;
+    };
+    private container?: HTMLElement;
+    private sizer?: HTMLElement;
+    private wrapper?: HTMLDivElement;
 
-    constructor(private emitter: EmitterType) {}
+    constructor(
+        private emitter: EmitterType,
+        logger?: Logger,
+        private getInternalState?: () => ContainerInternalState
+    ) {
+        if (logger) {
+            this.containerStateArgusLog = new ArgusLog(logger, "containerState");
+        }
+    }
 
     public static create(
         container: HTMLElement,
         sizer: HTMLElement,
         wrapper: HTMLDivElement,
-        emitter: EmitterType
+        emitter: EmitterType,
+        logger?: Logger,
+        getInternalState?: () => ContainerInternalState
     ) {
-        const containerResizeObserver = new ContainerResizeObserver(emitter);
+        const containerResizeObserver = new ContainerResizeObserver(
+            emitter,
+            logger,
+            getInternalState
+        );
         containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
         return containerResizeObserver;
     }
@@ -30,6 +63,9 @@ export class ContainerResizeObserver {
         sizer: HTMLElement,
         wrapper: HTMLDivElement
     ) {
+        this.container = container;
+        this.sizer = sizer;
+        this.wrapper = wrapper;
         this.updateSizer(
             container.getBoundingClientRect(),
             sizer,
@@ -60,6 +96,7 @@ export class ContainerResizeObserver {
         wrapper: HTMLDivElement,
         origin?: string
     ) {
+        const observedSize = { width, height };
         if (width && height) {
             if (height / width > WindowManager.containerSizeRatio) {
                 height = width * WindowManager.containerSizeRatio;
@@ -82,12 +119,105 @@ export class ContainerResizeObserver {
                 origin,
             });
         }
+        this.scheduleContainerStateLog(origin, observedSize);
+    }
+
+    public logCurrentState(origin: string): void {
+        this.scheduleContainerStateLog(origin);
+    }
+
+    private scheduleContainerStateLog(
+        origin?: string,
+        observedSize?: Pick<DOMRectReadOnly, "width" | "height">
+    ): void {
+        if (!this.containerStateArgusLog || !this.container || !this.sizer || !this.wrapper) return;
+
+        this.pendingContainerState = {
+            origin,
+            observedSize: observedSize
+                ? { width: observedSize.width, height: observedSize.height }
+                : undefined,
+        };
+        if (this.containerStateLogTimer != null) {
+            clearTimeout(this.containerStateLogTimer);
+        }
+        this.containerStateLogTimer = setTimeout(
+            this.flushContainerStateLog,
+            CONTAINER_STATE_LOG_DEBOUNCE
+        );
+    }
+
+    private flushContainerStateLog = (): void => {
+        this.containerStateLogTimer = undefined;
+        const pendingState = this.pendingContainerState;
+        this.pendingContainerState = undefined;
+        if (
+            !pendingState ||
+            !this.containerStateArgusLog ||
+            !this.container ||
+            !this.sizer ||
+            !this.wrapper
+        ) {
+            return;
+        }
+
+        const internalState = this.getInternalState?.();
+        const root = this.container.parentElement;
+        const rootRect = root?.getBoundingClientRect();
+        const playgroundRect = this.container.getBoundingClientRect();
+        const sizerRect = this.sizer.getBoundingClientRect();
+        const wrapperRect = this.wrapper.getBoundingClientRect();
+        const mainViewRect = internalState?.mainViewElement?.getBoundingClientRect();
+        const rootStyle = root ? window.getComputedStyle(root) : undefined;
+        this.containerStateArgusLog.log(
+            `origin: ${pendingState.origin || "unknown"}, connected: ${Boolean(
+                root?.isConnected
+            )}, ` +
+                `observed: ${this.formatSize(
+                    pendingState.observedSize || playgroundRect
+                )}, root: ${this.formatSize(rootRect)}, playground: ${this.formatSize(
+                    playgroundRect
+                )}, sizer: ${this.formatSize(sizerRect)}, wrapper: ${this.formatSize(
+                    wrapperRect
+                )}, mainViewDOM: ${this.formatSize(mainViewRect)}, mainViewSize: ${this.formatSize(
+                    internalState?.mainViewSize
+                )}, teleBoxRect: ${this.formatSize(
+                    internalState?.teleBoxContainerRect
+                )}, didRelease: ${internalState?.mainViewDidRelease ?? "unknown"}, ratio: ${
+                    internalState?.containerSizeRatio ?? "unknown"
+                }, display: ${rootStyle?.display || "unknown"}, visibility: ${
+                    rootStyle?.visibility || "unknown"
+                }, clientRects: ${root?.getClientRects().length || 0}, inViewport: ${
+                    rootRect
+                        ? rootRect.bottom > 0 &&
+                          rootRect.right > 0 &&
+                          rootRect.top < window.innerHeight &&
+                          rootRect.left < window.innerWidth
+                        : false
+                }`
+        );
+    };
+
+    private formatSize(rect?: Pick<DOMRectReadOnly, "width" | "height">): string {
+        if (!rect) return "unknown";
+        return `${Math.round(rect.width * 100) / 100}x${Math.round(rect.height * 100) / 100}`;
     }
 
     public disconnect() {
         this.updateSizerLocalConsole.destroy();
+        if (this.containerStateLogTimer != null) {
+            clearTimeout(this.containerStateLogTimer);
+            this.containerStateLogTimer = undefined;
+        }
+        this.pendingContainerState = undefined;
+        this.containerStateArgusLog?.destroy();
+        this.containerStateArgusLog = undefined;
         this.containerResizeObserver?.disconnect();
         this.disposer?.();
         this.disposer = undefined;
+        this.container = undefined;
+        this.sizer = undefined;
+        this.wrapper = undefined;
+        this.getInternalState = undefined;
     }
 }

package/src/constants.ts

@@ -57,3 +57,7 @@ export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
 
 export const SETUP_APP_DELAY = 50;
+
+export const BOX_SIZE_SETTLE_DELAY = 650;
+
+export const CONTAINER_STATE_LOG_DEBOUNCE = 1000;

package/src/index.ts

@@ -528,7 +528,18 @@ export class WindowManager
             playground,
             sizer,
             wrapper,
-            internalEmitter
+            internalEmitter,
+            manager.Logger,
+            () => {
+                const mainView = manager.appManager?.mainViewProxy.view;
+                return {
+                    mainViewElement: mainView?.divElement,
+                    mainViewSize: mainView?.size,
+                    teleBoxContainerRect: manager.boxManager?.teleBoxManager.containerRect,
+                    mainViewDidRelease: Boolean((mainView as any)?.didRelease),
+                    containerSizeRatio: manager.containerSizeRatio,
+                };
+            }
         );
         WindowManager.wrapper = wrapper;
         WindowManager.sizer = sizer;
@@ -577,6 +588,7 @@ export class WindowManager
         this.appManager?.resetMinimized();
         this.appManager?.displayerWritableListener(!this.room.isWritable);
         WindowManager.container = container;
+        this.containerResizeObserver?.logCurrentState("bindContainer");
         this.extendPluginManager?.refreshContainer(container);
     }
 

package/src/typings.ts

@@ -59,6 +59,8 @@ export type AppEmitterEvent<T = any> = {
     seek: number;
     pageStateChange: PageState;
     boxStatusChange: { appId: string; status: TeleBoxState };
+    /** Actual app content size in CSS pixels after the box layout is applied. */
+    boxSizeChange: { appId: string; width: number; height: number };
 };
 
 export type RegisterEventData = {