@openfin/web-utils 0.45.69 → 0.45.70

package/out/custom-elements/of-view.d.ts

@@ -1,9 +1,30 @@
 declare const mixin: (Base: typeof HTMLElement) => {
     new (): {
         "__#1@#titleObserver": MutationObserver | null;
+        "__#1@#faviconObserver": MutationObserver | null;
+        "__#1@#isLoaded": boolean;
+        /**
+         * The last favicon URL dispatched by this element, regardless of which path
+         * discovered it (same-origin DOM or data channel).
+         * Set via `#emitFaviconEvent` for element-driven paths, or written directly
+         * by `LayoutView.setFavicon` for the data-channel path.
+         */
+        favicon: string | null;
+        /** Centralised favicon dispatch: caches the URL and fires the DOM event. */
+        "__#1@#emitFaviconEvent"(favicon: string): void;
         "__#1@#initObservers"(): void;
         "__#1@#clearObservers"(): void;
         readonly lastKnownUrl: string | undefined;
+        /**
+         * Returns the favicon URL for this view's same-origin iframe, or `null` if the
+         * frame is cross-origin, not yet loaded, or has no favicon link element.
+         *
+         * For same-origin frames the value is read synchronously from the DOM and the
+         * favicon MutationObserver is (re-)initialised so future changes are tracked.
+         * Cross-origin frames without the OpenFin connect script return `null` — favicon
+         * updates for those frames are delivered exclusively via the data channel.
+         */
+        getOrDiscoverFavicon(): Promise<string | null>;
         connectedCallback(): void;
         readonly iframe: HTMLIFrameElement | null;
         title: string;
@@ -15,6 +36,7 @@ declare const mixin: (Base: typeof HTMLElement) => {
         providerId: string | null;
         contextGroup: string | null;
         allow: string | null;
+        showFavicon: boolean;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/out/custom-elements/of-view.js

@@ -1,11 +1,27 @@
 import { encodeOptions } from '../utils/options-encoder';
-import { getTitleObserver, isSameOrigin } from '../utils/utils';
+import { getFaviconObserver, getTitleObserver, isSameOrigin } from '../utils/utils';
 const mixin = (Base) => class _OfViewElement extends Base {
     constructor() {
         super(...arguments);
         this.#titleObserver = null;
+        this.#faviconObserver = null;
+        this.#isLoaded = false;
+        /**
+         * The last favicon URL dispatched by this element, regardless of which path
+         * discovered it (same-origin DOM or data channel).
+         * Set via `#emitFaviconEvent` for element-driven paths, or written directly
+         * by `LayoutView.setFavicon` for the data-channel path.
+         */
+        this.favicon = null;
     }
     #titleObserver;
+    #faviconObserver;
+    #isLoaded;
+    /** Centralised favicon dispatch: caches the URL and fires the DOM event. */
+    #emitFaviconEvent(favicon) {
+        this.favicon = favicon;
+        this.dispatchEvent(new CustomEvent('page-favicon-updated', { detail: { favicon } }));
+    }
     #initObservers() {
         // we can only monitor the DOM if the iframe is same-origin
         const iframe = this.iframe;
@@ -17,6 +33,13 @@ const mixin = (Base) => class _OfViewElement extends Base {
             this.#titleObserver = getTitleObserver(iframe.contentDocument.head, (title) => this.dispatchEvent(new CustomEvent('page-title-updated', { detail: { title } })));
             // Emit initial document.title
             this.dispatchEvent(new CustomEvent('page-title-updated', { detail: { title: iframe.contentDocument.title } }));
+            if (this.showFavicon) {
+                this.#faviconObserver = getFaviconObserver(iframe.contentDocument.head, (favicon) => this.#emitFaviconEvent(favicon));
+                const initialFavicon = iframe.contentDocument.querySelector('link[rel~="icon"]')?.href;
+                if (initialFavicon) {
+                    this.#emitFaviconEvent(initialFavicon);
+                }
+            }
         }
     }
     #clearObservers() {
@@ -24,10 +47,42 @@ const mixin = (Base) => class _OfViewElement extends Base {
             this.#titleObserver.disconnect();
             this.#titleObserver = null;
         }
+        if (this.#faviconObserver) {
+            this.#faviconObserver.disconnect();
+            this.#faviconObserver = null;
+        }
     }
     get lastKnownUrl() {
         return this.iframe?.contentDocument?.location.href;
     }
+    /**
+     * Returns the favicon URL for this view's same-origin iframe, or `null` if the
+     * frame is cross-origin, not yet loaded, or has no favicon link element.
+     *
+     * For same-origin frames the value is read synchronously from the DOM and the
+     * favicon MutationObserver is (re-)initialised so future changes are tracked.
+     * Cross-origin frames without the OpenFin connect script return `null` — favicon
+     * updates for those frames are delivered exclusively via the data channel.
+     */
+    getOrDiscoverFavicon() {
+        if (!this.#isLoaded)
+            return Promise.resolve(null);
+        const iframe = this.iframe;
+        if (!iframe)
+            return Promise.resolve(null);
+        const isSame = !!(iframe.contentDocument?.head &&
+            iframe.contentWindow &&
+            window.top &&
+            isSameOrigin(iframe.contentWindow, window.top));
+        if (isSame && iframe.contentDocument) {
+            // Ensure the favicon observer is running for future DOM changes.
+            if (!this.#faviconObserver) {
+                this.#faviconObserver = getFaviconObserver(iframe.contentDocument.head, (favicon) => this.#emitFaviconEvent(favicon));
+            }
+            return Promise.resolve(iframe.contentDocument.querySelector('link[rel~="icon"]')?.href ?? null);
+        }
+        return Promise.resolve(null);
+    }
     connectedCallback() {
         if (!this.name || !this.uuid) {
             throw new Error('<of-view> Name or uuid attribute missing');
@@ -38,6 +93,7 @@ const mixin = (Base) => class _OfViewElement extends Base {
         if (!this.iframe) {
             const iframe = document.createElement('iframe');
             iframe.addEventListener('load', () => {
+                this.#isLoaded = true;
                 // reload observers every navigation
                 this.#initObservers();
             });
@@ -145,6 +201,17 @@ const mixin = (Base) => class _OfViewElement extends Base {
             this.setAttribute('allow', val);
         }
     }
+    get showFavicon() {
+        return this.hasAttribute('of-show-favicon');
+    }
+    set showFavicon(val) {
+        if (val) {
+            this.setAttribute('of-show-favicon', '');
+        }
+        else {
+            this.removeAttribute('of-show-favicon');
+        }
+    }
     static get observedAttributes() {
         return ['name'];
     }

package/out/utils/utils.d.ts

@@ -1,2 +1,12 @@
 export declare const isSameOrigin: (windowA: Window | WindowProxy, windowB: Window | WindowProxy) => boolean;
 export declare const getTitleObserver: (documentHead: Node, setter: (title: string | null) => void) => MutationObserver;
+/**
+ * Observe the canonical `link[rel~="icon"]` element in a document and report its href when it
+ * changes. The callback is only invoked when the resolved href differs from the last emitted
+ * value, preventing spurious re-emissions on unrelated `<head>` mutations.
+ *
+ * **Cross-origin / Core Web connect:** dynamic favicon detection requires the loaded page to be
+ * same-origin with the shell, or to use OpenFin Core Web `connect` to establish the data channel.
+ * Arbitrary third-party pages without the OpenFin connect script will not update tab icons dynamically.
+ */
+export declare const getFaviconObserver: (documentHead: HTMLHeadElement, callback: (favicon: string) => void) => MutationObserver;

package/out/utils/utils.js

@@ -47,4 +47,32 @@ export const getTitleObserver = (documentHead, setter) => {
     observer.observe(documentHead, { childList: true, subtree: true, characterData: true });
     return observer;
 };
-// TODO: getFavIconObserver()
+/**
+ * Observe the canonical `link[rel~="icon"]` element in a document and report its href when it
+ * changes. The callback is only invoked when the resolved href differs from the last emitted
+ * value, preventing spurious re-emissions on unrelated `<head>` mutations.
+ *
+ * **Cross-origin / Core Web connect:** dynamic favicon detection requires the loaded page to be
+ * same-origin with the shell, or to use OpenFin Core Web `connect` to establish the data channel.
+ * Arbitrary third-party pages without the OpenFin connect script will not update tab icons dynamically.
+ */
+export const getFaviconObserver = (documentHead, callback) => {
+    let lastHref;
+    const run = () => {
+        const href = documentHead.querySelector('link[rel~="icon"]')?.href;
+        if (href && href !== lastHref) {
+            lastHref = href;
+            callback(href);
+        }
+    };
+    const observer = new MutationObserver(() => {
+        run();
+    });
+    observer.observe(documentHead, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['href', 'rel']
+    });
+    return observer;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfin/web-utils",
-  "version": "0.45.69",
+  "version": "0.45.70",
   "description": "",
   "private": false,
   "publishConfig": {