Add no-diff mode to diff viewer.

Sometimes, you want to easily read the submission instead of the diff
with the previous submission. Unfortunately, Monaco cannot easily switch
between a diff editor and a normal editor (see
microsoft/monaco-editor#1881). We mimic the
normal editor behaviour instead.

Store the current diff mode instead of the side-by-side boolean in local
storage. The latest release did not yet include the storage variable, so
no migration is added.

Author: Kevinjil

webapp/public/js/domjudge.js

@@ -124,18 +124,18 @@ function applyEditorTheme(theme = undefined, isExternal = false)
     });
 }
 
-function isDiffSideBySide()
+function getDiffMode()
 {
-    let sideBySide = localStorage.getItem('domjudge_editor_side_by_side');
-    if (sideBySide === undefined) {
-        return true;
+    let diffMode = localStorage.getItem('domjudge_editor_diff_mode');
+    if (diffMode === undefined) {
+        return 'side-by-side';
     }
-    return sideBySide == 'true';
+    return diffMode;
 }
 
-function setDiffSideBySide(value)
+function setDiffMode(value)
 {
-    localStorage.setItem('domjudge_editor_side_by_side', value);
+    localStorage.setItem('domjudge_editor_diff_mode', value);
 }
 
 // Send a notification if notifications have been enabled.

webapp/src/Twig/TwigExtension.php

@@ -172,6 +172,11 @@ public function getGlobals(): array
                 'hc-light'                  => ['name' => 'High contrast (light)'],
                 'hc-black'                  => ['name' => 'High contrast (dark)'],
             ],
+            'diff_modes'                    => [
+                'no-diff'                   => ["name"  => "No diff"],
+                'side-by-side'              => ["name"  => "Side-by-side"],
+                'inline'                    => ["name"  => "Inline"],
+            ],
         ];
     }
 
@@ -955,16 +960,10 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
             monaco.Uri.parse("diff-new/%s")
         );
 
-        const sideBySide = isDiffSideBySide()
-        const diffSelect = $("#diffselect-__EDITOR__");
-        diffSelect.find("input[value='side-by-side']").prop('checked', sideBySide);
-        diffSelect.find("input[value='inline']").prop('checked', !sideBySide);
-        diffSelect.find("input[type='radio']").change(function(e) {
-            const sbs = e.target.value === 'side-by-side';
-            setDiffSideBySide(sbs);
-            diffEditor.updateOptions({
-                renderSideBySide: sbs,
-            });
+        const initialDiffMode = getDiffMode();
+        const radios = $("#diffselect-__EDITOR__ > input[name='__EDITOR__-mode']");
+        radios.each((_, radio) => {
+            $(radio).prop('checked', radio.value === initialDiffMode);
         });
 
         const diffEditor = monaco.editor.createDiffEditor(
@@ -976,13 +975,37 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
             scrollBeyondLastLine: false,
             automaticLayout: true,
             readOnly: true,
-            renderSideBySide: sideBySide,
             theme: getCurrentEditorTheme(),
         });
-        diffEditor.setModel({
-            original: originalModel,
-            modified: modifiedModel,
+
+        const updateMode = (diffMode) => {
+            setDiffMode(diffMode);
+            const noDiff = diffMode === 'no-diff';
+            diffEditor.updateOptions({
+                renderOverviewRuler: !noDiff,
+                renderSideBySide: diffMode === 'side-by-side',
+            });
+
+            const oldViewState = diffEditor.saveViewState();
+            diffEditor.setModel({
+                original: noDiff ? modifiedModel : originalModel,
+                modified: modifiedModel,
+            });
+            diffEditor.restoreViewState(oldViewState);
+
+            diffEditor.getOriginalEditor().updateOptions({
+                lineNumbers: !noDiff,
+            });
+            diffEditor.getModifiedEditor().updateOptions({
+                minimap: {
+                    enabled: noDiff,
+                },
+            })
+        };
+        radios.change((e) => {
+            updateMode(e.target.value);
         });
+        updateMode(initialDiffMode);
     });
 });
 </script>

webapp/templates/jury/partials/submission_diff.html.twig

@@ -57,10 +57,10 @@
                 {% endif %}
                 <div id="diffselect-{{ diff_id }}" class="btn-group">
                     <a href="#" role="button" class="btn btn-secondary btn-sm pe-none" aria-disabled="true"><i class="fas fa-code-branch"></i></a>
-                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-side-by-side" value="side-by-side" autocomplete="off">
-                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-side-by-side">side-by-side</label>
-                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-inline" value="inline" autocomplete="off">
-                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-inline">inline</label>
+                    {%- for mode_id, mode in diff_modes %}
+                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-{{ mode_id }}" value="{{ mode_id }}" autocomplete="off">
+                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-{{ mode_id }}">{{ mode.name }}</label>
+                    {%- endfor %}
                 </div>
             </div>
             {{ showDiff(diff_id, filePair.0, filePair.1) }}