Allow selection of diff using keyboard

Add overflow to the keyhelp as it it more likely to overflow on screens
now.

Author: Kevinjil

webapp/public/js/domjudge.js

@@ -965,6 +965,7 @@ $(function () {
 function initializeKeyboardShortcuts() {
     var $body = $('body');
     var ignore = false;
+    const validKeys = new Set(['c', 'd', 'j', 'p', 's', 't']);
     $body.on('keydown', function(e) {
         var keysCookie = getCookie('domjudge_keys');
         if (keysCookie != 1 && keysCookie != "") {
@@ -1010,7 +1011,7 @@ function initializeKeyboardShortcuts() {
                 parts[parts.length - 1] += '?' + params[1];
             }
             window.location = parts.join('/');
-        } else if (!ignore && (key === 's' || key === 't' || key === 'p' || key === 'j' || key === 'c')) {
+        } else if (!ignore && validKeys.has(key)) {
             if (e.shiftKey && key === 's') {
                 window.location = domjudge_base_url + '/jury/scoreboard';
                 return;
@@ -1053,6 +1054,27 @@ function initializeKeyboardShortcuts() {
                     $body.on('keydown', oldFunc);
                     if (e.key === 'Enter') {
                         switch (type) {
+                            case 'd':
+                                if (editors) {
+                                    const editorId = Object.keys(editors)[0];
+                                    const diffEditor =  editors[editorId];
+                                    const select = diffEditor.submissionSelect;
+                                    if (typedSequence.length === 0) {
+                                        // Reset to no-diff.
+                                        select.selectedIndex = 0;
+                                        select.dispatchEvent(new Event('change'));
+                                        return;
+                                    }
+                                    const url = domjudge_base_url + `/jury/submissions/${typedSequence}`;
+                                    for (let i = 0; i < select.options.length; i++) {
+                                        if (select.options[i].dataset.url === url) {
+                                            select.selectedIndex = i;
+                                            select.dispatchEvent(new Event('change'));
+                                            return;
+                                        }
+                                    }
+                                }
+                                return;
                             case 's':
                                 type = 'submissions';
                                 break;
@@ -1360,6 +1382,7 @@ function initDiffEditor(editorId) {
     const diffLink = diffTitle.querySelector('a.diff-link');
 
     const editor = {
+        'submissionSelect': select[0],
         'getDiffMode': () => {
             for (let radio of radios) {
                 if (radio.checked) {

webapp/public/style_domjudge.css

@@ -722,6 +722,7 @@ blockquote {
     padding: 20px;
     border-radius: 5px;
     z-index: 1001;
+    overflow: auto;
 }
 
 #keyhelp code {

webapp/templates/jury/base.html.twig

@@ -70,6 +70,10 @@
         <code>k</code> go to the previous item, e.g. previous submission <br/>
         <br/>
 
+        <code>d</code> <code>↵</code> switch diff viewer to no diff <br/>
+        <code>d</code> <code>[0-9]+</code> <code>↵</code> switch to diff against a submission, e.g. <code>d42↵</code> shows diff against submission 42 <br/>
+        <br/>
+
         <code>s</code> <code>↵</code> open the list of submissions <br/>
         <code>s</code> <code>[0-9]+</code> <code>↵</code> open a specific submission, e.g. <code>s42↵</code> to go to submission 42 <br/>
         <br/>