From 4c8eab26927aa2825ae523f6b714c4b2b54c2dd3 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 3 Jan 2024 23:52:05 +0000
Subject: [PATCH] Set more button tooltips.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4731 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js  | 18 ++++++------------
 core/index.html | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/core/client.js b/core/client.js
index deedf6e2..61f744f0 100644
--- a/core/client.js
+++ b/core/client.js
@@ -120,12 +120,6 @@ class TfNavigationElement extends LitElement {
 		}
 	}
 
-	set_access_key_title(event) {
-		if (!event.srcElement.title) {
-			event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || event.srcElement.accessKey).toUpperCase()}]`;
-		}
-	}
-
 	render() {
 		let self = this;
 		return html`
@@ -148,10 +142,10 @@ class TfNavigationElement extends LitElement {
 			<div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center">
 				<span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span>
 				<span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span>
-				<a accesskey="h" @mouseover=${this.set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
-				<a accesskey="a" @mouseover=${this.set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</a>
-				<a accesskey="e" @mouseover=${this.set_access_key_title} data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
-				<a accesskey="p" @mouseover=${this.set_access_key_title} data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
+				<a accesskey="h" @mouseover=${set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
+				<a accesskey="a" @mouseover=${set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</a>
+				<a accesskey="e" @mouseover=${set_access_key_title} data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
+				<a accesskey="p" @mouseover=${set_access_key_title} data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
 				<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
 				<span id="requests"></span>
 				${this.render_permissions()}
@@ -294,8 +288,8 @@ class TfFilesPaneElement extends LitElement {
 			<div id="files_content">
 				<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
 				<br>
-				<div><button @click=${() => newFile()}>New File</button></div>
-				<div><button @click=${() => removeFile()}>Remove File</button></div>
+				<div><button @click=${() => newFile()} accesskey="n" @mouseover=${set_access_key_title} data-tip="Add a new, empty file to the app">New File</button></div>
+				<div><button @click=${() => removeFile()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">Remove File</button></div>
 			</div>
 		`;
 		return html`
diff --git a/core/index.html b/core/index.html
index d4b087ae..8052543a 100644
--- a/core/index.html
+++ b/core/index.html
@@ -5,18 +5,25 @@
 		<link type="text/css" rel="stylesheet" href="/static/style.css">
 		<link type="image/png" rel="shortcut icon" href="/static/favicon.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script>
+			function set_access_key_title(event) {
+				if (!event.srcElement.title) {
+					event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || ('⌨️' + event.srcElement.accessKey)).toUpperCase()}]`;
+				}
+			}
+		</script>
 	</head>
 	<body style="display: flex; flex-flow: column">
 		<tf-navigation></tf-navigation>
 		<div id="content" class="hbox" style="flex: 1 1; width: 100%">
 			<div id="editPane" class="vbox" style="flex: 1 1; display: none">
 				<div class="navigation hbox">
-					<input type="button" id="closeEditor" name="closeEditor" value="Close">
-					<input type="button" id="save" name="save" value="Save">
-					<input type="button" id="icon" name="icon" value="📦">
+					<button id="closeEditor" name="closeEditor" accesskey="c" onmouseover="set_access_key_title(event)" data-tip="Close the editor">Close</button>
+					<button id="save" name="save" accesskey="s" onmouseover="set_access_key_title(event)" data-tip="Save the app under the given path">Save</button>
+					<button id="icon" name="icon" accesskey="i" onmouseover="set_access_key_title(event)" data-tip="Set an icon/emoji for the app">📦</button>
 					<input type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input>
-					<input type="button" id="delete" name="delete" value="Delete">
-					<input type="button" id="trace_button" value="Trace">
+					<button id="delete" name="delete" accesskey="d" onmouseover="set_access_key_title(event)" data-tip="Delete the app">Delete</button>
+					<button id="trace_button" accesskey="t" onmouseover="set_access_key_title(event)" data-tip="Open a performance trace for the server">Trace</button>
 				</div>
 				<div class="hbox" style="height: 100%">
 					<tf-files-pane></tf-files-pane>