[chrome] use vite url imports for default favicon url

Author: velzie

packages/chrome/src/Tab.tsx

@@ -14,6 +14,7 @@ import {
 	ScramjetFrame,
 } from "@mercuryworkshop/scramjet/bundled";
 import { IsolatedFrame } from "./IsolatedFrame";
+import { defaultFaviconUrl } from "./assets/favicon";
 
 const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
 
@@ -64,7 +65,7 @@ export class Tab extends StatefulClass {
 		this.history = new History(this);
 		this.history.push(this.url, undefined);
 
-		this.icon = "/defaultfavicon.png";
+		this.icon = defaultFaviconUrl;
 
 		let resolver: () => void;
 		this.waitForChobitsuInit = new Promise((resolve) => {
@@ -189,17 +190,18 @@ export class Tab extends StatefulClass {
 			// placeholder title until the page fills in
 			this.title = url.href;
 
-			if (!navigator.serviceWorker.controller) {
-				serviceWorkerReady.then(() => {
-					this.frame.go(url);
-				});
-			} else {
-				this.frame.go(url);
-			}
+			// if (!navigator.serviceWorker.controller) {
+			// 	serviceWorkerReady.then(() => {
+			this.frame.go(url);
+			// 	});
+			// } else {
+			// this.frame.go(url);
+			// }
 		}
 	}
 
 	pushNavigate(url: URL) {
+		console.log("pushing");
 		this.history.push(url, undefined, true);
 	}
 	replaceNavigate(url: URL) {

packages/chrome/src/assets/favicon.ts

@@ -0,0 +1,3 @@
+import defaultFavicon from "../../public/defaultfavicon.png";
+
+export const defaultFaviconUrl = defaultFavicon;

packages/chrome/src/components/DownloadsPopup.tsx

@@ -7,6 +7,7 @@ import iconFolder from "@ktibow/iconset-ion/folder-outline";
 import iconOpen from "@ktibow/iconset-ion/open-outline";
 import iconPause from "@ktibow/iconset-ion/pause-outline";
 import { formatBytes } from "../utils";
+import { defaultFaviconUrl } from "../assets/favicon";
 
 export const DownloadsPopup: Component<{}> = function (cx) {
 	return (
@@ -27,7 +28,7 @@ export const DownloadsPopup: Component<{}> = function (cx) {
 				{use(browser.sessionDownloadHistory).mapEach((b) => (
 					<div class="entry">
 						<div class="iconcontainer">
-							<img src="/defaultfavicon.png"></img>
+							<img src={defaultFaviconUrl}></img>
 						</div>
 						<div class="contents">
 							<span>{b.filename}</span>

packages/chrome/src/components/Omnibox.tsx

@@ -13,6 +13,7 @@ import type { Tab } from "../Tab";
 import { UrlInput } from "./UrlInput";
 import { browser } from "../Browser";
 import { Icon } from "./Icon";
+import { defaultFaviconUrl } from "../assets/favicon";
 
 import iconNew from "@ktibow/iconset-ion/duplicate-outline";
 import iconTime from "@ktibow/iconset-ion/time-outline";
@@ -141,7 +142,7 @@ export const Omnibox: Component<{
 				[
 					...states.map((s) => ({
 						label: s.title || "New Tab",
-						image: s.favicon || "/defaultfavicon.png",
+						image: s.favicon || defaultFaviconUrl,
 						action: () => {
 							let rel =
 								browser.activetab.history.states.indexOf(s) -

packages/chrome/src/components/TabStrip.tsx

@@ -11,6 +11,7 @@ import type { Tab } from "../Tab";
 // import html2canvas from "html2canvas";
 import { setContextMenu } from "./Menu";
 import { browser, forceScreenshot, pushTab } from "../Browser";
+import { defaultFaviconUrl } from "../assets/favicon";
 
 const isFirefox =
 	navigator.userAgent.includes("Gecko/") &&
@@ -137,7 +138,7 @@ export const DragTab: Component<
 				<div class={use(this.active).map((x) => `main ${x ? "active" : ""}`)}>
 					<img
 						src={use(this.tab.icon)}
-						on:error={() => (this.tab.icon = "/defaultfavicon.png")}
+						on:error={() => (this.tab.icon = defaultFaviconUrl)}
 					/>
 					<span>{use(this.tab.title)}</span>
 					<button

packages/chrome/src/components/UrlInput.tsx

@@ -13,6 +13,7 @@ import iconForwards from "@ktibow/iconset-ion/arrow-forward";
 import { Icon } from "./Icon";
 import { OmnibarButton } from "./OmnibarButton";
 import { createMenuCustom, setContextMenu } from "./Menu";
+import { defaultFaviconUrl } from "../assets/favicon";
 import { browser } from "../Browser";
 import { SiteInformationPopup } from "./SiteInformationPopup";
 import { emToPx, splitUrl } from "../utils";
@@ -183,7 +184,7 @@ export const UrlInput: Component<
 							) : (
 								<img
 									class="favicon"
-									src={item.favicon || "/defaultfavicon.png"}
+									src={item.favicon || defaultFaviconUrl}
 									alt="favicon"
 								/>
 							)}
@@ -207,7 +208,7 @@ export const UrlInput: Component<
 								<img
 									src={
 										this.overflowItems[this.focusindex - 1].favicon ||
-										"/defaultfavicon.png"
+										defaultFaviconUrl
 									}
 								></img>
 							) : (

packages/chrome/src/pages/DownloadsPage.tsx

@@ -6,6 +6,7 @@ import iconClose from "@ktibow/iconset-ion/close-outline";
 import iconFolder from "@ktibow/iconset-ion/folder-outline";
 import { Icon } from "../components/Icon";
 import { formatBytes } from "../utils";
+import { defaultFaviconUrl } from "../assets/favicon";
 
 export const DownloadsPage: Component<
 	{
@@ -21,7 +22,7 @@ export const DownloadsPage: Component<
 					{use(browser.globalDownloadHistory).mapEach((e) => (
 						<div class="entry">
 							<div class="iconcontainer">
-								<img src="/defaultfavicon.png"></img>
+								<img src={defaultFaviconUrl}></img>
 							</div>
 							<div class="content">
 								<a href={e.url}>{e.filename}</a>

packages/chrome/src/pages/HistoryPage.tsx

@@ -1,6 +1,7 @@
 import { css, type Component } from "dreamland/core";
 import type { Tab } from "../Tab";
 import { browser } from "../Browser";
+import { defaultFaviconUrl } from "../assets/favicon";
 
 export const HistoryPage: Component<
 	{
@@ -21,7 +22,7 @@ export const HistoryPage: Component<
 								browser.newTab(entry.url);
 							}}
 						>
-							<img src={entry.favicon || "/defaultfavicon.png"} alt="favicon" />
+							<img src={entry.favicon || defaultFaviconUrl} alt="favicon" />
 							<span class="title">{entry.title || entry.url.href}</span>
 							<span class="url">{entry.url.hostname}</span>
 						</div>

packages/chrome/src/pages/NewTabPage.tsx

@@ -3,6 +3,7 @@ import type { Tab } from "../Tab";
 import { browser } from "../Browser";
 import { trimUrl } from "../components/UrlInput";
 import { createMenu } from "../components/Menu";
+import { defaultFaviconUrl } from "../assets/favicon";
 
 export const NewTabPage: Component<
 	{
@@ -44,10 +45,7 @@ export const NewTabPage: Component<
 						>
 							<div class="suggestioninner">
 								<div class="circle">
-									<img
-										src={entry.favicon || "/defaultfavicon.png"}
-										alt="favicon"
-									/>
+									<img src={entry.favicon || defaultFaviconUrl} alt="favicon" />
 								</div>
 								<span class="title">{entry.title || trimUrl(entry.url)}</span>
 							</div>