fix ff contextmenu colours + keybindings in the popup

Author: rohanb10

html/settings.html

@@ -226,14 +226,14 @@ <h4>Snoozz tabs using the right-click (context) menu</h4>
 		</div>
 		<div class="input-container flex" id="shortcut">
 			<div>
-				<h4>Keyboard shortcuts</h4>
-				<p>Set up shortcuts to snooze a tab without any clicks.</p>
+				<h4>Custom Keyboard Shortcuts</h4>
+				<p>Set up your own shortcuts to snooze a tab without any clicks.</p>
 			</div>
 			<div tabindex="0" class="btn"><div></div></div>
 			<div class="mini firefox-info">
 				<strong>Instructions</strong>
 				<ol>
-					<li>Open the Firefox Add-Ons page in a new tab: <code>about:addons</code>.</li>
+					<li>Open the Firefox Add-Ons page in a new tab: <u><code>about:addons</code></u>.</li>
 					<li>Click on the <a tabindex="0" target="_blank" href="https://bug1303384.bmoattachments.org/attachment.cgi?id=9051647">gear icon</a> in the top right and select <strong>Manage Extension Shortcuts</strong>.</li> 
 					<li>Configure snooze time shortcuts using your own key bindings.</li>
 				</ol>
@@ -244,7 +244,7 @@ <h4>Keyboard shortcuts</h4>
 			</div>
 			<div class="mini safari-info">
 				<strong>Uh Oh</strong>
-				<div>Keyboard Shortcuts cannot be configured for extensions in Safari.</div>
+				<div>Shortcuts cannot be configured for extensions in Safari. You can blame Steve Jobs for this.</div>
 			</div>
 			<div class="mini shortcuts">
 				<strong>Currently active shortcuts</strong>

scripts/flatpickr.min.js

@@ -249,7 +249,7 @@ function buildTabActions(t, tabDiv) {
 	}
 	tabDiv.querySelector('.wakeup-label').innerText = t.deleted ? 'Deleted on' : (t.opened ? `Woke up ${t.opened < t.wakeUpTime ? 'manually' : 'automatically'} on` : 'Waking up')
 	tabDiv.querySelector('.wakeup-time').innerText = t.opened ? dayjs(t.opened).format('dddd, D MMM') : formatSnoozedUntil(t)
-	tabDiv.querySelector('.wakeup-time').title = dayjs(t.opened ? t.opened : t.wakeUpTime).format(`${getHourFormat()} [on] ddd, D MMMM YYYY`);
+	tabDiv.querySelector('.wakeup-time').title = dayjs(t.opened ? t.opened : t.wakeUpTime).format(`${getHourFormat(true)} [on] ddd, D MMMM YYYY`);
 	return tabDiv;
 }
 

scripts/nap_room.js

@@ -35,18 +35,23 @@ async function init() {
 	}
 
 	document.addEventListener('keyup', e => {
-		if (e.which >= 48 && e.which <= 56 && !document.querySelector('.form-overlay').classList.contains('show')) {
+		if (e.which >= 49 && e.which <= 58 && !document.querySelector('.form-overlay').classList.contains('show')) {
 			var choices = document.querySelectorAll('.choice');
 			var selectedChoice = choices && choices.length > 0 ? choices[e.which - 48 - 1] : false;
 			if (!selectedChoice || selectedChoice.classList.contains('disabled')) return;
 			choices.forEach(c => c.classList.remove('focused'));
 			selectedChoice.focus();
 		}
+		if (e.which === 48) {
+			document.querySelectorAll('.choice').forEach(c => c.classList.remove('focused'))
+			document.querySelector('.choice:last-of-type').focus();
+		}
 		if (e.which === 13 && !document.querySelector('.form-overlay').classList.contains('show')) {
 			var selectedChoice = document.querySelector('.choice.focused');
 			if (!selectedChoice) return;
 			snooze(o.time, c)
 		}
+		if (e.which === 67) document.querySelector('.custom-choice').click();
 		if (e.which === 84) document.getElementById('tab').click();
 		if (e.which === 87) document.getElementById('window').click();
 		if (e.which === 83) document.getElementById('selection').click();
@@ -151,6 +156,7 @@ async function buildChoices() {
 			var now = Object.assign(document.createElement('option'), {value: 'now', innerText: 'Current Time', selected: s === 'now'});
 
 			var select = document.createElement('select');
+			select.tabIndex = -1;
 			select.addEventListener('change', async e => {
 				await savePopupOptions();
 				// change time
@@ -179,7 +185,15 @@ async function buildChoices() {
 			tabIndex: o.disabled ? -1 : 0,
 		}, wrapInDiv('', icon, label), o.startUp ? wrapInDiv() : wrapInDiv('', date, time));
 		c.addEventListener('mouseover', _ => c.classList.add('focused'))
-		c.addEventListener('mouseout', _ => c.classList.remove('focused'))
+		c.addEventListener('mouseout', _ => c.classList.remove('focused'));
+		if (['weekend', 'monday', 'week', 'month'].includes(name)) c.addEventListener('keydown', e => {
+			if (!e || e.which !== 38 && e.which !== 40) return;
+			var options = select.querySelectorAll('option');
+			var current = Array.from(options).findIndex(o => o.selected);
+			if (e.which === 38 && current > 0) options[current - 1].selected = true;
+			if (e.which === 40 && current < options.length - 1) options[current + 1].selected = true;
+			select.dispatchEvent(new Event('change'));
+		})
 		c.onclick = e => {if (!['OPTION', 'SELECT'].includes(e.target.nodeName)) snooze(o.startUp ? 'startup' : o.time, c)}
 		c.onkeyup = e => {if (e.which === 13) snooze(o.startUp ? 'startup' : o.time, c)}
 		return c
@@ -248,7 +262,12 @@ async function buildCustomChoice() {
 		onclick: _ => {
 			customChoice.classList.add('focused');
 			document.querySelectorAll('.choice').forEach(c => {c.classList.add('disabled');c.setAttribute('tabindex','-1')});
-			// document.querySelector('.popup-checkbox input').setAttribute('tabindex', '-1');
+			document.querySelector('.form-overlay').classList.add('show')
+		},
+		onkeydown: e => {
+			if (!e || e.which !== 13 && e.which !== 32) return;
+			customChoice.classList.add('focused');
+			document.querySelectorAll('.choice').forEach(c => {c.classList.add('disabled');c.setAttribute('tabindex','-1')});
 			document.querySelector('.form-overlay').classList.add('show')
 		}
 	}, wrapInDiv('', icon, label), wrapInDiv('custom-info', wrapInDiv('display', wrapInDiv('date-display'), wrapInDiv('time-display')), submitButton));

scripts/popup.js

@@ -30,7 +30,7 @@ function populate(found) {
 	document.querySelector('#when span').innerText = dayjs(found.timeCreated).format(`${getHourFormat(true)} on dddd, DD MMM YYYY`)
 	var till = document.querySelector('#till span');
 	till.innerText = found.startUp ? 'the next time you opened ' + capitalize(getBrowser()) : dayjs(found.timeCreated).to(dayjs(found.wakeUpTime),true) + ' later'
-	till.setAttribute('title', dayjs(found.wakeUpTime).format(`${getHourFormat()} on dddd, DD MMM YYYY`))
+	till.setAttribute('title', dayjs(found.wakeUpTime).format(`${getHourFormat(true)} on dddd, DD MMM YYYY`))
 	var tabList = document.querySelector('.tab-list');
 	found.tabs.forEach((t, i) => {
 		var iconImg = Object.assign(document.createElement('img'), {src: getFaviconUrl(t.url)});

scripts/rise.js

@@ -273,14 +273,14 @@ h3 {
 	position: relative;
 }
 
-.choice.focused select {
+.choice.focused select, select:focus:hover, .choice:focus-visible select {
 	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' fill='white'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
 }
 
 body.dark .choice .date {
 	color: #AAA;
 }
-.choice:hover *, .choice.focused *, .choice:hover .date, .custom-choice:hover *, .custom-choice.focused *, .custom-choice.really-focused {
+.choice:hover *, .choice.focused *, .choice:hover .date, .custom-choice:hover *, .custom-choice.focused *, .custom-choice.really-focused, .choice:focus-visible *, .custom-choice:focus-visible * {
 	color: #FFF !important;
 }
 
@@ -332,13 +332,17 @@ body.dark .choice .date {
 	opacity: 0.2;
 }
 
-.choice.focused, .custom-choice.focused, .custom-choice.really-focused {
+.choice.focused, .choice:focus-visible, .choice:focus-within:hover, .custom-choice.focused, .custom-choice:focus-visible, .custom-choice.really-focused {
 	background-color: var(--bg) !important;
 }
 .choice.focused, .custom-choice.focused {
 	transition: background-color 0s linear;
 	cursor: default;
 }
+.choice select:focus:hover {
+	color: var(--color);
+	background-color: rgba(0,0,0,.5);
+}
 
 body.dark #preview, body.dark .choice, body.dark .custom-choice, body.dark .form-overlay {
 	background-color: #444

styles/popup.css

@@ -69,6 +69,10 @@ option {
 	color: var(--color);
 	background-color: var(--bg-color);
 }
+select:focus:hover {
+	color: var(--color);
+	background-color: rgba(0,0,0,.5);
+}
 .select-wrapper, .btn {
 	position: relative;
 	cursor: pointer;
@@ -132,7 +136,7 @@ span.am-pm {
 	font-size: .8em;
 	margin-left: .5rem;
 }
-body.dark select {
+body.dark select, select:focus:hover, select:focus-visible {
 	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
 }
 #right-click .btn div:before {
@@ -229,7 +233,7 @@ kbd {
 code {
 	cursor: pointer;
 	font-size: 1.2em;
-	background-color: #999;
+	background-color: rgba(0, 0, 0, .3);
 	border-radius: .25em;
 	padding: .1em .2em;
 	user-select: none;