Make requesting permissions appear less terrible.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3952 ed5197a5-7fde-0310-b194-c3ffbd925b24

core/client.js

@@ -443,18 +443,59 @@ function api_localStorageGet(key, value) {
 
 function api_requestPermission(permission, id) {
 	let permissions = document.getElementById('permissions');
+
+	let container = document.createElement('div');
+	container.classList.add('permissions_contents');
+
 	let div = document.createElement('div');
-	div.appendChild(document.createTextNode(permission));
+	div.appendChild(document.createTextNode('This app is requesting the following permission:'));
-	for (let action of ['allow', 'allow once', 'deny once', 'deny']) {
+	let span = document.createElement('span');
+	span.style = 'font-weight: bold';
+	span.appendChild(document.createTextNode(permission));
+	div.appendChild(span);
+	container.appendChild(div);
+
+	div = document.createElement('div');
+	div.style = 'padding: 1em';
+	let check = document.createElement('input');
+	check.id = 'permissions_remember_check';
+	check.type = 'checkbox';
+	div.appendChild(check);
+	let label = document.createElement('label');
+	label.htmlFor = check.id;
+	label.appendChild(document.createTextNode('Remember this decision.'));
+	div.appendChild(label);
+	container.appendChild(div);
+
+	const k_options = [
+		{
+			text: '✅ Allow',
+			grant: ['allow once', 'allow'],
+
+		},
+		{
+			text: '❌ Deny',
+			grant: ['deny once', 'deny'],
+		},
+	];
+
+	div = document.createElement('div');
+	for (let option of k_options) {
 		let button = document.createElement('button');
-		button.innerText = action;
+		button.innerText = option.text;
 		button.onclick = function() {
-			send({action: 'permission', id: id, granted: action});
+			send({action: 'permission', id: id, granted: option.grant[check.checked ? 1 : 0]});
-			permissions.removeChild(div);
+			while (permissions.firstChild) {
+				permissions.removeChild(permissions.firstChild);
+			}
+			permissions.style.visibility = 'hidden';
 		}
 		div.appendChild(button);
 	}
-	permissions.appendChild(div);
+	container.appendChild(div);
+
+	permissions.appendChild(container);
+	permissions.style.visibility = 'visible';
 }
 
 function receive(message) {

core/style.css

@@ -253,3 +253,23 @@ kbd {
 	padding: 2px 4px;
 	white-space: nowrap;
 }
+
+#permissions {
+	visibility: hidden;
+	position: absolute;
+	display: block;
+	top: 0;
+	z-index: 100;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.permissions_contents {
+	background-color: #444;
+	border-left: 4px solid #fff;
+	border-right: 4px solid #fff;
+	border-bottom: 4px solid #fff;
+	padding: 1em;
+	margin: 0 auto;
+}