feature: allow embed <replay-web-page> to also support updating favicons from replay (#287)

It may be useful to be able to have <replay-web-page> embed also take
over the favicons for the page, propagating them from the replay (eg. if
in a single page app where replay takes up most of the view).

This PR adds a `updateFavicons` attribute, used as `<replay-web-page ...
updateFavicons>` to have icons propagated from the replay to the
top-level frame. (This may be especially useful with `deepLink` option,
which allows for linking directly to archived pages)

Details:
  - enabled via 'updateFavicons' attribute on <replay-web-page>
- pass icons via postMessage() update, adding type to embed message to
allow different types of message
  - currently supporting 'urlchange' and 'favicons' message types
- add shared updateFaviconLinks() in misc.ts, used by both embed and
main app

---------
Co-authored-by: emma <hi@emma.cafe>

src/item.ts

@@ -57,7 +57,7 @@ import fasCaretDown from "@fortawesome/fontawesome-free/svgs/solid/caret-down.sv
 import { RWPEmbedReceipt } from "./embed-receipt";
 import Split from "split.js";
 
-import type { ItemType, URLResource } from "./types";
+import type { FavIconEventDetail, ItemType, URLResource } from "./types";
 import type { Replay } from "./replay";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -85,6 +85,21 @@ export type LoadInfo = {
   importCollId?: string;
 };
 
+export type EmbedReplayData = {
+  view?: "story" | "pages" | "resources";
+  url?: string;
+  ts?: string;
+  title?: string;
+  query?: string;
+};
+
+export type TabData = EmbedReplayData & {
+  multiTs?: string[];
+  currList?: number;
+  urlSearchType?: string;
+  currMime?: string;
+};
+
 // ===========================================================================
 class Item extends LitElement {
   @property({ type: Boolean })
@@ -112,16 +127,7 @@ class Item extends LitElement {
   isLoading = false;
 
   @property({ type: Object, attribute: false })
-  tabData: {
-    view?: "story" | "pages" | "resources";
-    url?: string;
-    ts?: string;
-    multiTs?: string[];
-    currList?: number;
-    query?: string;
-    urlSearchType?: string;
-    currMime?: string;
-  } = {};
+  tabData: TabData = {};
 
   @property({ type: String })
   url = "";
@@ -328,7 +334,11 @@ class Item extends LitElement {
           }
         }
         if (this.embed && window.parent !== window) {
-          window.parent.postMessage(this.tabData, "*");
+          const { url, ts, view, query, title }: EmbedReplayData = this.tabData;
+          window.parent.postMessage(
+            { type: "urlchange", url, ts, view, query, title },
+            "*",
+          );
         }
       }
       this._locUpdateNeeded = false;
@@ -1698,11 +1708,12 @@ class Item extends LitElement {
     this.showSidebar = false;
   }
 
-  // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type.
-  async onFavIcons(event) {
+  async onFavIcons(event: CustomEvent<FavIconEventDetail>) {
+    if (this.embed && window.parent !== window) {
+      window.parent.postMessage({ type: "favicons", ...event.detail }, "*");
+    }
+
     for (const icon of event.detail.icons) {
-      // TODO: Fix this the next time the file is edited.
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       const resp = await fetch(icon.href);
       if (resp.status === 200) {
         const ct = resp.headers.get("Content-Type");