in web interfaces, put crumbs path in document title, for more useful browser history

webaccount/account.js

@@ -762,8 +762,17 @@ const localStorageRemove = (k) => {
 };
 const client = new api.Client().withOptions({ csrfHeader: 'x-mox-csrf', login: login }).withAuthToken(localStorageGet('webaccountcsrftoken') || '');
 const link = (href, anchorOpt) => dom.a(attr.href(href), attr.rel('noopener noreferrer'), anchorOpt || href);
-const crumblink = (text, link) => dom.a(text, attr.href(link));
+const crumblink = (text, path) => {
-const crumbs = (...l) => [
+	return {
+		text: text,
+		path: path
+	};
+};
+const crumbs = (...l) => {
+	const crumbtext = (e) => typeof e === 'string' ? e : e.text;
+	document.title = l.map(e => crumbtext(e)).join(' - ');
+	const crumblink = (e) => typeof e === 'string' ? e : dom.a(e.text, attr.href(e.path));
+	return [
 		dom.div(style({ float: 'right' }), localStorageGet('webaccountaddress') || '(unknown)', ' ', dom.clickbutton('Logout', attr.title('Logout, invalidating this session.'), async function click(e) {
 			const b = e.target;
 			try {
@@ -782,9 +791,10 @@ const crumbs = (...l) => [
 			// Reload so all state is cleared from memory.
 			window.location.reload();
 		})),
-	dom.h1(l.map((e, index) => index === 0 ? e : [' / ', e])),
+		dom.h1(l.map((e, index) => index === 0 ? crumblink(e) : [' / ', crumblink(e)])),
 		dom.br()
 	];
+};
 const errmsg = (err) => '' + (err.message || '(no error message)');
 const footer = dom.div(style({ marginTop: '6ex', opacity: 0.75 }), link('https://www.xmox.nl', 'mox'), ' ', moxversion);
 const domainName = (d) => {

webaccount/account.ts

@@ -103,8 +103,19 @@ const client = new api.Client().withOptions({csrfHeader: 'x-mox-csrf', login: lo
 
 const link = (href: string, anchorOpt: string) => dom.a(attr.href(href), attr.rel('noopener noreferrer'), anchorOpt || href)
 
-const crumblink = (text: string, link: string) => dom.a(text, attr.href(link))
+const crumblink = (text: string, path: string) => {
-const crumbs = (...l: ElemArg[]) => [
+	return {
+		text: text,
+		path: path
+	}
+}
+const crumbs = (...l: ({text: string, path: string} | string)[]) => {
+	const crumbtext = (e: {text: string, path: string} | string) => typeof e === 'string' ? e : e.text
+	document.title = l.map(e => crumbtext(e)).join(' - ')
+
+	const crumblink = (e: {text: string, path: string} | string) =>
+		typeof e === 'string' ? e : dom.a(e.text, attr.href(e.path))
+	return [
 		dom.div(
 			style({float: 'right'}),
 			localStorageGet('webaccountaddress') || '(unknown)',
@@ -127,9 +138,10 @@ const crumbs = (...l: ElemArg[]) => [
 				window.location.reload()
 			}),
 		),
-	dom.h1(l.map((e, index) => index === 0 ? e : [' / ', e])),
+		dom.h1(l.map((e, index) => index === 0 ? crumblink(e) : [' / ', crumblink(e)])),
 		dom.br()
 	]
+}
 
 const errmsg = (err: unknown) => ''+((err as any).message || '(no error message)')
 

webadmin/admin.js

@@ -1456,8 +1456,17 @@ const yellow = '#ffe400';
 const red = '#ff7443';
 const blue = '#8bc8ff';
 const link = (href, anchorOpt) => dom.a(attr.href(href), attr.rel('noopener noreferrer'), anchorOpt || href);
-const crumblink = (text, link) => dom.a(text, attr.href(link));
+const crumblink = (text, path) => {
-const crumbs = (...l) => [
+	return {
+		text: text,
+		path: path
+	};
+};
+const crumbs = (...l) => {
+	const crumbtext = (e) => typeof e === 'string' ? e : e.text;
+	document.title = l.map(e => crumbtext(e)).join(' - ');
+	const crumblink = (e) => typeof e === 'string' ? e : dom.a(e.text, attr.href(e.path));
+	return [
 		dom.div(style({ float: 'right' }), dom.clickbutton('Logout', attr.title('Logout, invalidating this session.'), async function click(e) {
 			const b = e.target;
 			try {
@@ -1475,9 +1484,10 @@ const crumbs = (...l) => [
 			// Reload so all state is cleared from memory.
 			window.location.reload();
 		})),
-	dom.h1(l.map((e, index) => index === 0 ? e : [' / ', e])),
+		dom.h1(l.map((e, index) => index === 0 ? crumblink(e) : [' / ', crumblink(e)])),
 		dom.br()
 	];
+};
 const errmsg = (err) => '' + (err.message || '(no error message)');
 const footer = dom.div(style({ marginTop: '6ex', opacity: 0.75 }), link('https://www.xmox.nl', 'mox'), ' ', moxversion, ' ', moxgoversion, ' ', moxgoos, '/', moxgoarch);
 const age = (date, future, nowSecs) => {

webadmin/admin.ts

@@ -92,8 +92,19 @@ const blue = '#8bc8ff'
 
 const link = (href: string, anchorOpt?: string) => dom.a(attr.href(href), attr.rel('noopener noreferrer'), anchorOpt || href)
 
-const crumblink = (text: string, link: string) => dom.a(text, attr.href(link))
+const crumblink = (text: string, path: string) => {
-const crumbs = (...l: ElemArg[]) => [
+	return {
+		text: text,
+		path: path
+	}
+}
+const crumbs = (...l: ({text: string, path: string} | string)[]) => {
+	const crumbtext = (e: {text: string, path: string} | string) => typeof e === 'string' ? e : e.text
+	document.title = l.map(e => crumbtext(e)).join(' - ')
+
+	const crumblink = (e: {text: string, path: string} | string) =>
+		typeof e === 'string' ? e : dom.a(e.text, attr.href(e.path))
+	return [
 		dom.div(
 			style({float: 'right'}),
 			dom.clickbutton('Logout', attr.title('Logout, invalidating this session.'), async function click(e: MouseEvent) {
@@ -113,9 +124,10 @@ const crumbs = (...l: ElemArg[]) => [
 				window.location.reload()
 			}),
 		),
-	dom.h1(l.map((e, index) => index === 0 ? e : [' / ', e])),
+		dom.h1(l.map((e, index) => index === 0 ? crumblink(e) : [' / ', crumblink(e)])),
 		dom.br()
 	]
+}
 
 const errmsg = (err: unknown) => ''+((err as any).message || '(no error message)')