From 97ec3901c7fcb3ca6e0c5ed37b13b373214533d2 Mon Sep 17 00:00:00 2001
From: David Liu <david@cs.toronto.edu>
Date: Fri, 11 Oct 2024 01:17:57 +0000
Subject: [PATCH] Merge 'result' js and css into 'application' (#7265)

---
 Changelog.md                                  |  2 ++
 .../Components/Helpers/tag_modal.jsx          |  2 +-
 .../Modals/collect_submissions_modal.jsx      |  2 +-
 .../create_modify_annotation_panel_modal.jsx  |  2 +-
 .../Modals/download_test_results_modal.jsx    |  2 +-
 .../Components/Modals/extension_modal.jsx     |  2 +-
 .../Components/Modals/filter_modal.jsx        |  2 +-
 .../Modals/graders_distribution_modal.jsx     |  2 +-
 .../Components/Modals/roster_sync_modal.jsx   |  2 +-
 .../Modals/section_distribution_modal.js      |  2 +-
 .../Modals/send_lti_grades_modal.jsx          |  2 +-
 .../Components/Result/feedback_file_panel.jsx |  6 +++-
 .../Result/submission_file_panel.jsx          |  2 +-
 .../Components/Result/summary_panel.jsx       |  2 +-
 .../Components/submission_file_manager.jsx    |  2 +-
 app/assets/javascripts/modals.js              |  2 +-
 app/assets/stylesheets/common/_markus.scss    |  2 +-
 .../stylesheets/common/_react_tabs.scss       | 10 +++++--
 app/assets/stylesheets/common/codeviewer.scss |  5 ++--
 .../stylesheets/entrypoints/application.scss  |  5 ++++
 .../stylesheets/entrypoints/result_main.scss  |  3 --
 app/assets/stylesheets/grader.scss            | 30 -------------------
 app/javascript/application_webpack.js         | 12 ++++++++
 app/javascript/result.js                      | 15 ----------
 app/views/assignments/show.html.erb           |  2 +-
 .../student_interface.html.erb                |  3 --
 .../exam_templates/_event_listeners.js.erb    |  2 +-
 .../exam_templates/assign_errors.html.erb     | 10 -------
 app/views/groups/assign_scans.html.erb        |  7 -----
 app/views/groups/index.html.erb               |  2 +-
 app/views/layouts/_about.html.erb             |  2 +-
 app/views/layouts/_head.html.erb              |  1 +
 app/views/layouts/_modal_dialog.html.erb      |  2 +-
 app/views/layouts/_pdfjs_config.html.erb      |  3 ++
 app/views/layouts/_role_switch.html.erb       |  2 +-
 app/views/layouts/assignment_content.html.erb |  1 +
 app/views/layouts/content.html.erb            |  1 +
 app/views/layouts/result_content.erb          |  1 +
 app/views/results/edit.html.erb               | 11 ++-----
 app/views/results/view_marks.html.erb         |  5 ----
 app/views/students/_student_form.html.erb     |  2 +-
 app/views/students/index.html.erb             |  2 +-
 app/views/submissions/file_manager.html.erb   |  5 ----
 app/views/submissions/repo_browser.html.erb   |  5 ----
 app/views/tags/index.html.erb                 |  2 +-
 webpack.common.js                             |  1 -
 46 files changed, 67 insertions(+), 123 deletions(-)
 delete mode 100644 app/assets/stylesheets/entrypoints/result_main.scss
 delete mode 100644 app/javascript/result.js
 create mode 100644 app/views/layouts/_pdfjs_config.html.erb

diff --git a/Changelog.md b/Changelog.md
index f6cc5749ea..438c6ab9c0 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -27,6 +27,8 @@
 - Move model validation error messages to respective localization files (#7229)
 - Replace time-warp gem with newer, maintained timecop gem (#7234)
 - Update pre-commit-hooks to v5.0 and add checks `check-illegal-windows-names`, `check-json`, and `check-merge-conflict` (#7259)
+- Merge result.js and result_main.css build files into application.js/application.css (#7260)
+- Simplify pdf.js configuration (#7260)
 - Improve descriptions of the Group and Grouping models (#7262)
 
 ## [v2.5.2]
diff --git a/app/assets/javascripts/Components/Helpers/tag_modal.jsx b/app/assets/javascripts/Components/Helpers/tag_modal.jsx
index 829d98f59d..310268eb11 100644
--- a/app/assets/javascripts/Components/Helpers/tag_modal.jsx
+++ b/app/assets/javascripts/Components/Helpers/tag_modal.jsx
@@ -11,7 +11,7 @@ export default class TagModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
         id="tag_modal"
diff --git a/app/assets/javascripts/Components/Modals/collect_submissions_modal.jsx b/app/assets/javascripts/Components/Modals/collect_submissions_modal.jsx
index e8d8b5a06c..7b9eec634d 100644
--- a/app/assets/javascripts/Components/Modals/collect_submissions_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/collect_submissions_modal.jsx
@@ -55,7 +55,7 @@ class CollectSubmissionsModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >
diff --git a/app/assets/javascripts/Components/Modals/create_modify_annotation_panel_modal.jsx b/app/assets/javascripts/Components/Modals/create_modify_annotation_panel_modal.jsx
index 6fb5e8b8b6..097a0c442b 100644
--- a/app/assets/javascripts/Components/Modals/create_modify_annotation_panel_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/create_modify_annotation_panel_modal.jsx
@@ -191,7 +191,7 @@ class CreateModifyAnnotationPanel extends React.Component {
 
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.show}
         onAfterOpen={this.onModalOpen}
         onRequestClose={this.props.onRequestClose}
diff --git a/app/assets/javascripts/Components/Modals/download_test_results_modal.jsx b/app/assets/javascripts/Components/Modals/download_test_results_modal.jsx
index ada9fb051f..35f12f18a0 100644
--- a/app/assets/javascripts/Components/Modals/download_test_results_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/download_test_results_modal.jsx
@@ -9,7 +9,7 @@ class DownloadTestResultsModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >
diff --git a/app/assets/javascripts/Components/Modals/extension_modal.jsx b/app/assets/javascripts/Components/Modals/extension_modal.jsx
index 225600a0cf..e54387fad5 100644
--- a/app/assets/javascripts/Components/Modals/extension_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/extension_modal.jsx
@@ -127,7 +127,7 @@ class ExtensionModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >
diff --git a/app/assets/javascripts/Components/Modals/filter_modal.jsx b/app/assets/javascripts/Components/Modals/filter_modal.jsx
index fb06902d22..18b0b7aaa4 100644
--- a/app/assets/javascripts/Components/Modals/filter_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/filter_modal.jsx
@@ -199,7 +199,7 @@ export class FilterModal extends React.Component {
     }
     return (
       <Modal
-        className="react-modal dialog filter-modal"
+        className="react-modal markus-dialog filter-modal"
         isOpen={this.props.isOpen}
         onRequestClose={() => {
           this.props.onRequestClose();
diff --git a/app/assets/javascripts/Components/Modals/graders_distribution_modal.jsx b/app/assets/javascripts/Components/Modals/graders_distribution_modal.jsx
index 6843a64290..76b5a21b15 100644
--- a/app/assets/javascripts/Components/Modals/graders_distribution_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/graders_distribution_modal.jsx
@@ -45,7 +45,7 @@ export class GraderDistributionModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >
diff --git a/app/assets/javascripts/Components/Modals/roster_sync_modal.jsx b/app/assets/javascripts/Components/Modals/roster_sync_modal.jsx
index b59194196f..a8162f9f20 100644
--- a/app/assets/javascripts/Components/Modals/roster_sync_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/roster_sync_modal.jsx
@@ -47,7 +47,7 @@ class LtiRosterModal extends React.Component {
     return (
       <div>
         <Modal
-          className="react-modal dialog"
+          className="react-modal markus-dialog"
           isOpen={this.props.isOpen}
           onRequestClose={this.props.onRequestClose}
         >
diff --git a/app/assets/javascripts/Components/Modals/section_distribution_modal.js b/app/assets/javascripts/Components/Modals/section_distribution_modal.js
index 3ea46e9ec0..ba93dc0396 100644
--- a/app/assets/javascripts/Components/Modals/section_distribution_modal.js
+++ b/app/assets/javascripts/Components/Modals/section_distribution_modal.js
@@ -53,7 +53,7 @@ export class SectionDistributionModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >
diff --git a/app/assets/javascripts/Components/Modals/send_lti_grades_modal.jsx b/app/assets/javascripts/Components/Modals/send_lti_grades_modal.jsx
index 4cacc01a68..cff431ef15 100644
--- a/app/assets/javascripts/Components/Modals/send_lti_grades_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/send_lti_grades_modal.jsx
@@ -49,7 +49,7 @@ class LtiGradeModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >
diff --git a/app/assets/javascripts/Components/Result/feedback_file_panel.jsx b/app/assets/javascripts/Components/Result/feedback_file_panel.jsx
index 80c10944c9..ed560a6df1 100644
--- a/app/assets/javascripts/Components/Result/feedback_file_panel.jsx
+++ b/app/assets/javascripts/Components/Result/feedback_file_panel.jsx
@@ -80,7 +80,11 @@ export class FeedbackFilePanel extends React.Component {
           {feedbackSelector}
           {download_feedback_file}
         </div>
-        <div id="feedback_file_content" key={"feedback-file-view"}>
+        <div
+          id="feedback_file_content"
+          className="text-viewer-container"
+          key={"feedback-file-view"}
+        >
           <FileViewer
             assignment_id={this.props.assignment_id}
             submission_id={this.props.submission_id}
diff --git a/app/assets/javascripts/Components/Result/submission_file_panel.jsx b/app/assets/javascripts/Components/Result/submission_file_panel.jsx
index 3ac61c136d..c34c3fd53b 100644
--- a/app/assets/javascripts/Components/Result/submission_file_panel.jsx
+++ b/app/assets/javascripts/Components/Result/submission_file_panel.jsx
@@ -180,7 +180,7 @@ export class SubmissionFilePanel extends React.Component {
             />
           )}
         </div>
-        <div key="codeviewer" id="codeviewer">
+        <div key="codeviewer" className="text-viewer-container" id="codeviewer">
           <FileViewer
             ref={this.submissionFileViewer}
             handleFileTypeUpdate={this.handleFileTypeUpdate}
diff --git a/app/assets/javascripts/Components/Result/summary_panel.jsx b/app/assets/javascripts/Components/Result/summary_panel.jsx
index 4adc43eac7..21e0341766 100644
--- a/app/assets/javascripts/Components/Result/summary_panel.jsx
+++ b/app/assets/javascripts/Components/Result/summary_panel.jsx
@@ -299,7 +299,7 @@ export class SummaryPanel extends React.Component {
             {I18n.t("results.marks_chart")}
           </button>
         </p>
-        <aside className="dialog data-chart-container" id={"marks_chart"} style={style}>
+        <aside className="markus-dialog data-chart-container" id={"marks_chart"} style={style}>
           <DataChart
             labels={this.state.labels}
             datasets={this.state.datasets}
diff --git a/app/assets/javascripts/Components/submission_file_manager.jsx b/app/assets/javascripts/Components/submission_file_manager.jsx
index c495523263..91360c7909 100644
--- a/app/assets/javascripts/Components/submission_file_manager.jsx
+++ b/app/assets/javascripts/Components/submission_file_manager.jsx
@@ -265,7 +265,7 @@ class SubmissionFileManager extends React.Component {
         document.getElementById("content").getBoundingClientRect().width - 150 + "px";
       heading = this.state.viewFile;
       content = (
-        <div id="codeviewer" style={{maxWidth: withinSize}}>
+        <div id="codeviewer" className="text-viewer-container" style={{maxWidth: withinSize}}>
           <FileViewer
             assignment_id={this.props.assignment_id}
             grouping_id={this.props.grouping_id}
diff --git a/app/assets/javascripts/modals.js b/app/assets/javascripts/modals.js
index 25e8fcfb47..3b5e582f4a 100644
--- a/app/assets/javascripts/modals.js
+++ b/app/assets/javascripts/modals.js
@@ -44,7 +44,7 @@ export class ModalMarkus {
 
 (function () {
   const domContentLoadedCB = () => {
-    $(".dialog").each((_, dialog) => {
+    $(".markus-dialog").each((_, dialog) => {
       let open_link = dialog.getAttribute("data-open-link") || undefined;
       new ModalMarkus("#" + dialog.id, open_link);
       $("#" + dialog.id + "-close").click(function () {
diff --git a/app/assets/stylesheets/common/_markus.scss b/app/assets/stylesheets/common/_markus.scss
index 03c4644ea6..1231e0275e 100644
--- a/app/assets/stylesheets/common/_markus.scss
+++ b/app/assets/stylesheets/common/_markus.scss
@@ -874,7 +874,7 @@ ul.tags {
   z-index: 100;
 }
 
-.dialog {
+.markus-dialog {
   background: $background-main;
   border-radius: $radius;
   box-shadow: 0 0 10px $primary-two;
diff --git a/app/assets/stylesheets/common/_react_tabs.scss b/app/assets/stylesheets/common/_react_tabs.scss
index c115835d29..fde07fb696 100644
--- a/app/assets/stylesheets/common/_react_tabs.scss
+++ b/app/assets/stylesheets/common/_react_tabs.scss
@@ -1,9 +1,13 @@
 @import 'constants';
 
-.react-tabs__tab--disabled {
+.react-tabs__tab.react-tabs__tab--disabled {
   display: none;
 }
 
+.react-tabs__tab:focus::after {
+  display: none; // Hide default react-tabs style
+}
+
 .react-tabs {
   display: flex;
   flex-direction: column;
@@ -26,12 +30,12 @@
   }
 }
 
-.react-tabs__tab--selected {
+.react-tabs__tab.react-tabs__tab--selected {
   background-color: $background-support;
   color: $sharp-line;
 }
 
-.react-tabs__tab-panel--selected {
+.react-tabs__tab-panel.react-tabs__tab-panel--selected {
   display: flex;
   flex-direction: column;
 }
diff --git a/app/assets/stylesheets/common/codeviewer.scss b/app/assets/stylesheets/common/codeviewer.scss
index 41919ea9fc..d7e4ada00e 100644
--- a/app/assets/stylesheets/common/codeviewer.scss
+++ b/app/assets/stylesheets/common/codeviewer.scss
@@ -1,15 +1,14 @@
 @import 'mixins';
 @import 'constants';
 
-/* codeviewer */
-#codeviewer {
+.text-viewer-container {
   .toolbar {
     background: $primary-two;
     margin: 0 0 10px;
     padding: 2px;
   }
 
-  .tools {
+  .toolbar-actions {
     background-color: $background-main;
     font: 0.825em $fonts;
     padding: 5px 0;
diff --git a/app/assets/stylesheets/entrypoints/application.scss b/app/assets/stylesheets/entrypoints/application.scss
index fba0286ef2..79b5134540 100644
--- a/app/assets/stylesheets/entrypoints/application.scss
+++ b/app/assets/stylesheets/entrypoints/application.scss
@@ -4,6 +4,11 @@
 @use 'common/pdfjs_custom';
 @use 'common/core';
 
+// Stylesheets used in grading views
+@use 'grader';
+@use 'context_menu';
+@use 'common/codeviewer';
+
 @use 'flatpickr/dist/flatpickr.min';
 @use 'react-table/react-table';
 @use 'react-tabs/style/react-tabs';
diff --git a/app/assets/stylesheets/entrypoints/result_main.scss b/app/assets/stylesheets/entrypoints/result_main.scss
deleted file mode 100644
index 85018972b0..0000000000
--- a/app/assets/stylesheets/entrypoints/result_main.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@use 'common/codeviewer';
-@use 'context_menu';
-@use 'grader';
diff --git a/app/assets/stylesheets/grader.scss b/app/assets/stylesheets/grader.scss
index f3e1b58107..08c853ac44 100644
--- a/app/assets/stylesheets/grader.scss
+++ b/app/assets/stylesheets/grader.scss
@@ -41,36 +41,6 @@
   width: 100%;
 }
 
-/* codeviewer toolbar */
-#codeviewer {
-  .toolbar {
-    background: $primary-two;
-    margin: 0 0 10px;
-    padding: 2px;
-  }
-
-  .toolbar-actions {
-    background-color: $background-main;
-    font: 0.825em $fonts;
-    padding: 5px 0;
-    text-align: right;
-
-    a {
-      background-color: inherit;
-      color: $link;
-      font-size: 1.1em;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    a:hover {
-      background-color: inherit;
-      color: $darker-orange;
-      text-decoration: none;
-    }
-  }
-}
-
 /* Marks pane */
 
 .marks-list {
diff --git a/app/javascript/application_webpack.js b/app/javascript/application_webpack.js
index 70f1a80311..c3755e07f3 100644
--- a/app/javascript/application_webpack.js
+++ b/app/javascript/application_webpack.js
@@ -59,6 +59,16 @@ window.flatpickr = flatpickr;
 // prism
 window.Prism = window.Prism || {};
 window.Prism.manual = true;
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+
+// pdf.js
+import * as pdfjs from "pdfjs-dist";
+import * as pdfjsViewer from "pdfjs-dist/web/pdf_viewer.mjs";
+
+window.pdfjs = pdfjs;
+window.pdfjsViewer = pdfjsViewer;
+
+import "pdfjs-dist/web/pdf_viewer.css";
 
 window.Routes = require("./routes");
 
@@ -153,3 +163,5 @@ import {makeSubmitViewTokenModal} from "javascripts/Components/Modals/submit_vie
 window.makeSubmitViewTokenModal = makeSubmitViewTokenModal;
 import {makeLtiSettings} from "javascripts/Components/lti_settings";
 window.makeLtiSettings = makeLtiSettings;
+import {makeResult} from "javascripts/Components/Result/result";
+window.makeResult = makeResult;
diff --git a/app/javascript/result.js b/app/javascript/result.js
deleted file mode 100644
index a762a6d85c..0000000000
--- a/app/javascript/result.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// JavaScript files for the main result page (edit.html and view_marks.html).
-
-import "javascripts/react_config";
-
-import {makeResult} from "javascripts/Components/Result/result";
-window.makeResult = makeResult;
-
-import * as pdfjs from "pdfjs-dist";
-import * as pdfjsViewer from "pdfjs-dist/web/pdf_viewer.mjs";
-
-window.pdfjs = pdfjs;
-window.pdfjsViewer = pdfjsViewer;
-
-import "pdfjs-dist/web/pdf_viewer.css";
-import "prismjs/plugins/line-numbers/prism-line-numbers.css";
diff --git a/app/views/assignments/show.html.erb b/app/views/assignments/show.html.erb
index d9c7b8e429..8c2a692e3a 100644
--- a/app/views/assignments/show.html.erb
+++ b/app/views/assignments/show.html.erb
@@ -223,7 +223,7 @@
 
 <% # HTML for the invite dialog
    if !@grouping.nil? && @grouping.inviter == @current_role && @assignment.student_form_groups %>
-  <aside class='dialog' id='invite_dialog'>
+  <aside class='markus-dialog' id='invite_dialog'>
     <%= form_tag(invite_member_course_assignment_groups_path(course_id: @current_course.id, assignment_id: @assignment.id, grouping_id: @grouping.id),
                  { id: 'invite-student-form' }) do %>
       <h2><%= t('groups.members.invite') %></h2>
diff --git a/app/views/automated_tests/student_interface.html.erb b/app/views/automated_tests/student_interface.html.erb
index da783f61d6..876afb75af 100644
--- a/app/views/automated_tests/student_interface.html.erb
+++ b/app/views/automated_tests/student_interface.html.erb
@@ -1,7 +1,4 @@
 <% content_for :title, t('automated_tests.title') %>
-<%= stylesheet_link_tag 'result_main' %>
-<%= stylesheet_link_tag 'result' %>
-<%= javascript_include_tag 'result', nonce: true %>
 <%= javascript_include_tag 'Results/main', nonce: true %>
 
 <% if @assignment.enable_student_tests && !@grouping.nil? %>
diff --git a/app/views/exam_templates/_event_listeners.js.erb b/app/views/exam_templates/_event_listeners.js.erb
index 325b34baef..a5d7d1d3f9 100644
--- a/app/views/exam_templates/_event_listeners.js.erb
+++ b/app/views/exam_templates/_event_listeners.js.erb
@@ -1,5 +1,5 @@
 // Reload dialog event listeners
-$(".dialog").each((_, dialog) => {
+$(".markus-dialog").each((_, dialog) => {
   let open_link = dialog.getAttribute("data-open-link") || undefined;
   new ModalMarkus("#" + dialog.id, open_link);
   $("#" + dialog.id + "-close").click(function () {
diff --git a/app/views/exam_templates/assign_errors.html.erb b/app/views/exam_templates/assign_errors.html.erb
index ddc7dc1ecc..84e3ce9773 100644
--- a/app/views/exam_templates/assign_errors.html.erb
+++ b/app/views/exam_templates/assign_errors.html.erb
@@ -1,13 +1,3 @@
-<% content_for :head do %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
-
-  <%= javascript_include_tag 'result', nonce: true %>
-  <%= javascript_tag nonce: true do -%>
-    pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
-  <% end -%>
-<% end %>
-
 <%= javascript_tag nonce: true do %>
 <%= render partial: 'exam_templates/assign_errors',
            formats: [:js],
diff --git a/app/views/groups/assign_scans.html.erb b/app/views/groups/assign_scans.html.erb
index 01584f2ad4..fc7892e474 100644
--- a/app/views/groups/assign_scans.html.erb
+++ b/app/views/groups/assign_scans.html.erb
@@ -1,11 +1,4 @@
-<% content_for :head do %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
-  <%= javascript_include_tag 'result', nonce: true %>
-<% end %>
-
 <%= javascript_tag nonce: true do %>
-  pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
   (function(){
     const domContentLoadedCB = function() {
       $("#names").autocomplete({
diff --git a/app/views/groups/index.html.erb b/app/views/groups/index.html.erb
index 7a60f4b5dd..0bbbdde9f8 100644
--- a/app/views/groups/index.html.erb
+++ b/app/views/groups/index.html.erb
@@ -70,4 +70,4 @@
 <%= render partial: 'assignment_group_use_modal', layout: 'layouts/modal_dialog'  %>
 <%= render partial: 'create_group_modal', layout: 'layouts/modal_dialog'  %>
 <%= render partial: 'rename_group_modal', layout: 'layouts/modal_dialog'  %>
-<aside class='dialog' id='notes_dialog'></aside>
+<aside class='markus-dialog' id='notes_dialog'></aside>
diff --git a/app/views/layouts/_about.html.erb b/app/views/layouts/_about.html.erb
index 97db991dcc..00bde8d79e 100644
--- a/app/views/layouts/_about.html.erb
+++ b/app/views/layouts/_about.html.erb
@@ -1 +1 @@
-<aside class='dialog no-display' id='about_dialog'></aside>
+<aside class='markus-dialog no-display' id='about_dialog'></aside>
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 06a249fa51..917aceb778 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -5,6 +5,7 @@
 <%= csrf_meta_tags %>
 <%= csp_meta_tag %>
 <%= stylesheet_link_tag 'application' %>
+<%= stylesheet_link_tag 'application_webpack' %>
 <% if @current_user&.theme == 'dark' %>
   <%= stylesheet_link_tag 'dark_theme' %>
   <%= favicon_link_tag 'favicon_dark.svg' %>
diff --git a/app/views/layouts/_modal_dialog.html.erb b/app/views/layouts/_modal_dialog.html.erb
index a2114d41a2..c0116b673d 100644
--- a/app/views/layouts/_modal_dialog.html.erb
+++ b/app/views/layouts/_modal_dialog.html.erb
@@ -1,4 +1,4 @@
-<aside class='dialog no-display' id=<%= yield_content! :modal_id %>
+<aside class='markus-dialog no-display' id=<%= yield_content! :modal_id %>
        data-open-link='<%= yield_content! :modal_open_link %>'>
   <% if content_for? :modal_title %>
     <h2>
diff --git a/app/views/layouts/_pdfjs_config.html.erb b/app/views/layouts/_pdfjs_config.html.erb
new file mode 100644
index 0000000000..ae7efbd75b
--- /dev/null
+++ b/app/views/layouts/_pdfjs_config.html.erb
@@ -0,0 +1,3 @@
+<%= javascript_tag nonce: true do %>
+  pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
+<% end %>
diff --git a/app/views/layouts/_role_switch.html.erb b/app/views/layouts/_role_switch.html.erb
index cf431eafba..bd81910a91 100644
--- a/app/views/layouts/_role_switch.html.erb
+++ b/app/views/layouts/_role_switch.html.erb
@@ -1 +1 @@
-<aside class='dialog' id='role_switch_dialog'></aside>
+<aside class='markus-dialog' id='role_switch_dialog'></aside>
diff --git a/app/views/layouts/assignment_content.html.erb b/app/views/layouts/assignment_content.html.erb
index f7d79b9fcc..e598484f82 100644
--- a/app/views/layouts/assignment_content.html.erb
+++ b/app/views/layouts/assignment_content.html.erb
@@ -10,6 +10,7 @@
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
   <%= render partial: 'layouts/i18n_config' %>
+  <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>
 <body>
diff --git a/app/views/layouts/content.html.erb b/app/views/layouts/content.html.erb
index 486f031941..43a6fa31cf 100644
--- a/app/views/layouts/content.html.erb
+++ b/app/views/layouts/content.html.erb
@@ -10,6 +10,7 @@
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
   <%= render partial: 'layouts/i18n_config' %>
+  <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>
 <body>
diff --git a/app/views/layouts/result_content.erb b/app/views/layouts/result_content.erb
index 2b15d49925..5776e4dd1d 100644
--- a/app/views/layouts/result_content.erb
+++ b/app/views/layouts/result_content.erb
@@ -10,6 +10,7 @@
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
   <%= render partial: 'layouts/i18n_config' %>
+  <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>
 <body>
diff --git a/app/views/results/edit.html.erb b/app/views/results/edit.html.erb
index 62e225bed9..b91fc5e313 100644
--- a/app/views/results/edit.html.erb
+++ b/app/views/results/edit.html.erb
@@ -1,11 +1,6 @@
 <% content_for :head do %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
-  <%= javascript_include_tag 'result', nonce: true %>
   <%= javascript_include_tag 'Results/main', nonce: true %>
   <%= javascript_tag nonce: true do %>
-    pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
-
     document.addEventListener('DOMContentLoaded', () => {
       window.resultComponent = makeResult(document.getElementById('result-main'),
         {
@@ -38,10 +33,10 @@
 <% end %>
 
 <!-- Dialogs -->
-<aside class='dialog no-display' id='notes_dialog'></aside>
+<aside class='markus-dialog no-display' id='notes_dialog'></aside>
 <%= render partial: 'download_modal', layout: 'layouts/modal_dialog'  %>
 
-<aside class='dialog no-display' id='help_dialog'>
+<aside class='markus-dialog no-display' id='help_dialog'>
   <h2><%=t('results.keybinding.keyboard_help')%></h2>
   <table class="shortcuts-table">
     <tr>
@@ -100,4 +95,4 @@
 <div id='annotation_holder'></div>
 
 <!-- Modal element -->
-<aside class='dialog' id='annotation_dialog'></aside>
+<aside class='markus-dialog' id='annotation_dialog'></aside>
diff --git a/app/views/results/view_marks.html.erb b/app/views/results/view_marks.html.erb
index e6b4ab9b58..0542027918 100644
--- a/app/views/results/view_marks.html.erb
+++ b/app/views/results/view_marks.html.erb
@@ -1,11 +1,6 @@
 <% content_for :head do %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
-  <%= javascript_include_tag 'result', nonce: true %>
   <%= javascript_include_tag 'Results/main', nonce: true %>
   <%= javascript_tag nonce: true do %>
-    pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
-
     document.addEventListener('DOMContentLoaded', () => {
       window.resultComponent = makeResult(document.getElementById('result-main'),
         {
diff --git a/app/views/students/_student_form.html.erb b/app/views/students/_student_form.html.erb
index 8b245f7155..3e083a8c93 100644
--- a/app/views/students/_student_form.html.erb
+++ b/app/views/students/_student_form.html.erb
@@ -1,4 +1,4 @@
-<aside class='dialog' id='add_new_section_dialog'></aside>
+<aside class='markus-dialog' id='add_new_section_dialog'></aside>
 
 <%= form_for [@current_course, @role], as: :role do |f| %>
   <div class='inline-labels'>
diff --git a/app/views/students/index.html.erb b/app/views/students/index.html.erb
index 145833a8ef..cb4fe10bbd 100644
--- a/app/views/students/index.html.erb
+++ b/app/views/students/index.html.erb
@@ -52,4 +52,4 @@
 <!-- Modals -->
 <%= render partial: 'download_modal', layout: 'layouts/modal_dialog'  %>
 <%= render partial: 'upload_modal', layout: 'layouts/modal_dialog'  %>
-<aside class='dialog' id='notes_dialog'></aside>
+<aside class='markus-dialog' id='notes_dialog'></aside>
diff --git a/app/views/submissions/file_manager.html.erb b/app/views/submissions/file_manager.html.erb
index 199121c244..5dbf7a99e8 100644
--- a/app/views/submissions/file_manager.html.erb
+++ b/app/views/submissions/file_manager.html.erb
@@ -1,12 +1,7 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'result', nonce: true %>
   <%= javascript_include_tag 'Results/main', nonce: true %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
 
   <%= javascript_tag nonce: true do %>
-    pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
-
     document.addEventListener('DOMContentLoaded', () => {
       window.submissionFileManager = makeSubmissionFileManager(document.getElementById('file_manager'),
         {
diff --git a/app/views/submissions/repo_browser.html.erb b/app/views/submissions/repo_browser.html.erb
index f950292749..faf7434b28 100644
--- a/app/views/submissions/repo_browser.html.erb
+++ b/app/views/submissions/repo_browser.html.erb
@@ -1,12 +1,7 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'result', nonce: true %>
   <%= javascript_include_tag 'Results/main', nonce: true %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
 
   <%= javascript_tag nonce: true do %>
-    pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
-
     document.addEventListener('DOMContentLoaded', () => {
       makeRepoBrowser(document.getElementById('file_manager'),
         {
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index e8449ae098..13975f8665 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -33,4 +33,4 @@
 <%= render partial: 'download_modal', layout: 'layouts/modal_dialog'  %>
 <%= render partial: 'upload_modal', layout: 'layouts/modal_dialog'  %>
 
-<aside class='dialog' id='edit_tags_dialog'></aside>
+<aside class='markus-dialog' id='edit_tags_dialog'></aside>
diff --git a/webpack.common.js b/webpack.common.js
index 1c1da9751c..fe3acde2b7 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -9,7 +9,6 @@ module.exports = {
     light_theme: "./app/javascript/light_theme.js",
     markus_notebook: "./app/javascript/markus_notebook.js",
     "pdf.worker": "pdfjs-dist/build/pdf.worker.mjs",
-    result: "./app/javascript/result.js",
   },
   module: {
     rules: [