diff --git a/grade/grading/form/rubric/lang/en/gradingform_rubric.php b/grade/grading/form/rubric/lang/en/gradingform_rubric.php
index 5fb170ab708c7..766960a8bf8de 100644
--- a/grade/grading/form/rubric/lang/en/gradingform_rubric.php
+++ b/grade/grading/form/rubric/lang/en/gradingform_rubric.php
@@ -72,6 +72,7 @@
 $string['regradeoption0'] = 'Do not mark for regrade';
 $string['regradeoption1'] = 'Mark for regrade';
 $string['restoredfromdraft'] = 'NOTE: The last attempt to grade this person was not saved properly so draft grades have been restored. If you want to cancel these changes use the \'Cancel\' button below.';
+$string['remark'] = '{$a} remark';
 $string['rubric'] = 'Rubric';
 $string['rubricmapping'] = 'Score to grade mapping rules';
 $string['rubricmappingexplained'] = 'The minimum possible score for this rubric is <b>{$a->minscore} points</b>. It will be converted to the minimum grade available for the activity (which is 0 unless a scale is used). The maximum score of <b>{$a->maxscore} points</b> will be converted to the maximum grade. Intermediate scores will be converted respectively.
diff --git a/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache b/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
index 56a495e018d9f..c491a8163346b 100644
--- a/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
+++ b/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
@@ -85,12 +85,10 @@
                                    id="advancedgrading-criteria-{{criterionid}}-levels-{{id}}-definition"
                                    value="{{id}}"
                                     {{#checked}}
-                                        aria-checked="true"
                                         tabindex="0"
                                         checked
                                     {{/checked}}
                                     {{^checked}}
-                                        aria-checked="false"
                                         tabindex="-1"
                                     {{/checked}}
                             >
@@ -107,6 +105,7 @@
                     <div class="mb-3">
                         <label class="text-muted" for="advancedgrading-criteria-{{id}}-remark">{{#str}} additionalfeedback, core_grades {{/str}}</label>
                         <textarea class="form-control"
+                                  aria-label="{{#str}}remark, gradingform_rubric, {{description}}{{/str}}"
                                   name="advancedgrading[criteria][{{id}}][remark]"
                                   id="advancedgrading-criteria-{{id}}-remark"
                                   cols="10"
diff --git a/lib/behat/classes/partial_named_selector.php b/lib/behat/classes/partial_named_selector.php
index 89dcc36772ed1..ca9bdc0611a2e 100644
--- a/lib/behat/classes/partial_named_selector.php
+++ b/lib/behat/classes/partial_named_selector.php
@@ -81,6 +81,7 @@ public function __construct() {
         'autocomplete' => 'autocomplete',
         'iframe' => 'iframe',
         'option_role' => 'option_role',
+        'Fullscreen interface' => 'fullscreen_interface',
     );
 
     /**
@@ -133,6 +134,7 @@ public function __construct() {
         'autocomplete_suggestions' => 'autocomplete_suggestions',
         'autocomplete' => 'autocomplete',
         'iframe' => 'iframe',
+        'Fullscreen interface' => 'fullscreen_interface',
     );
 
     /**
@@ -293,6 +295,9 @@ public function __construct() {
 XPATH
         , 'iframe' => <<<XPATH
 .//iframe[(%idOrNameMatch% or (contains(concat(' ', normalize-space(@class), ' '), %locator% )))]
+XPATH
+        , 'fullscreen_interface' => <<<XPATH
+.//div[contains(concat(' ', normalize-space(@class), ' '), ' fullscreen ')][%ariaLabelMatch%]
 XPATH
     );
 
diff --git a/mod/forum/amd/build/grader.min.js b/mod/forum/amd/build/grader.min.js
new file mode 100644
index 0000000000000..26b6c6e407ecd
--- /dev/null
+++ b/mod/forum/amd/build/grader.min.js
@@ -0,0 +1,10 @@
+define("mod_forum/grader",["exports","./local/grader/selectors","core/templates","core/local/layout/fullscreen","core_grades/grades/grader/user_picker","core_grades/grades/grader/gradingpanel","core_grades/grades/grader/gradingpanel/normalise","core_grades/grades/grader/gradingpanel/comparison","core/toast","core/notification","core/str","core/loadingicon","core/utils","core/modal_cancel","core/pubsub","core/drawer_events","core/pending"],(function(_exports,_selectors,_templates,_fullscreen,_user_picker,_gradingpanel,_normalise,_comparison,_toast,_notification,_str,_loadingicon,_utils,_modal_cancel,_pubsub,_drawer_events,_pending){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+/**
+   * This module will tie together all of the different calls the gradable module will make.
+   *
+   * @module     mod_forum/local/grades/grader
+   * @copyright  2019 Mathew May <mathew.solutions>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),Object.defineProperty(_exports,"getGradingPanelFunctions",{enumerable:!0,get:function(){return _gradingpanel.default}}),_exports.view=_exports.launch=void 0,_selectors=_interopRequireDefault(_selectors),_templates=_interopRequireDefault(_templates),_user_picker=_interopRequireDefault(_user_picker),_gradingpanel=_interopRequireDefault(_gradingpanel),_modal_cancel=_interopRequireDefault(_modal_cancel),_drawer_events=_interopRequireDefault(_drawer_events),_pending=_interopRequireDefault(_pending);const templateNames_grader={app:"mod_forum/local/grades/grader",gradingPanel:{error:"mod_forum/local/grades/local/grader/gradingpanel/error"},searchResults:"mod_forum/local/grades/local/grader/user_picker/user_search",status:"mod_forum/local/grades/local/grader/status"},displayUserPicker=(root,html)=>{const pickerRegion=root.querySelector(_selectors.default.regions.pickerRegion);_templates.default.replaceNodeContents(pickerRegion,html,"")},fetchContentFromRender=(html,js)=>[html,js],getUpdateUserContentFunction=(root,getContentForUser,getGradeForUser,saveGradeForUser)=>{let firstLoad=!0;return async user=>{const spinner=firstLoad?null:(0,_loadingicon.addIconToContainerWithPromise)(root),[[html,js],userGrade]=await Promise.all([getContentForUser(user.id).then(fetchContentFromRender),getGradeForUser(user.id)]);await _templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.moduleReplace),html,js);const[gradingPanelHtml,gradingPanelJS]=await _templates.default.render(userGrade.templatename,userGrade.grade).then(fetchContentFromRender),panelContainer=root.querySelector(_selectors.default.regions.gradingPanelContainer),panel=panelContainer.querySelector(_selectors.default.regions.gradingPanel);await _templates.default.replaceNodeContents(panel,gradingPanelHtml,gradingPanelJS);const form=panel.querySelector("form");return(0,_comparison.fillInitialValues)(form),form.addEventListener("submit",(event=>{saveGradeForUser(user),event.preventDefault()})),panelContainer.scrollTop=0,firstLoad=!1,spinner&&spinner.resolve(),userGrade}},hideSearchResultContainer=(bodyContainer,userPickerContainer,searchResultsContainer)=>{bodyContainer.classList.remove("hidden"),userPickerContainer.classList.remove("hidden"),searchResultsContainer.classList.add("hidden")},hideUserSearchInput=(toggleSearchButton,searchContainer,searchInput)=>{searchContainer.classList.add("collapsed"),toggleSearchButton.setAttribute("aria-expanded","false"),toggleSearchButton.classList.add("collapse"),toggleSearchButton.classList.remove("expand"),toggleSearchButton.focus();searchContainer.parentElement.querySelector(_selectors.default.regions.gradingInfoContainer).removeAttribute("aria-hidden");const collapseGradingDrawer=searchContainer.parentElement.querySelector(_selectors.default.buttons.collapseGradingDrawer);collapseGradingDrawer.removeAttribute("aria-hidden"),collapseGradingDrawer.setAttribute("tabindex","0"),searchInput.value=""},renderSearchResults=async(searchResultsContainer,users)=>{const{html:html,js:js}=await _templates.default.renderForPromise(templateNames_grader.searchResults,{users:users});await _templates.default.replaceNodeContents(searchResultsContainer,html,js)},registerStaticEventListeners=graderLayout=>{graderLayout.getContainer().addEventListener("click",(e=>e.target.closest(_selectors.default.buttons.toggleFullscreen)?(e.stopImmediatePropagation(),e.preventDefault(),void graderLayout.toggleFullscreen()):e.target.closest(_selectors.default.buttons.closeGrader)?(e.stopImmediatePropagation(),e.preventDefault(),void graderLayout.close()):void 0))},registerDynamicEventListeners=(graderLayout,userPicker,saveGradeFunction,userList)=>{const graderContainer=graderLayout.getContainer(),toggleSearchButton=graderContainer.querySelector(_selectors.default.buttons.toggleSearch),searchInputContainer=graderContainer.querySelector(_selectors.default.regions.userSearchContainer),searchInput=searchInputContainer.querySelector(_selectors.default.regions.userSearchInput),bodyContainer=graderContainer.querySelector(_selectors.default.regions.bodyContainer),userPickerContainer=graderContainer.querySelector(_selectors.default.regions.pickerRegion),searchResultsContainer=graderContainer.querySelector(_selectors.default.regions.searchResultsContainer);graderContainer.addEventListener("click",(e=>{if(e.target.closest(_selectors.default.buttons.saveGrade)&&saveGradeFunction(userPicker.currentUser),e.target.closest(_selectors.default.buttons.toggleSearch))return void("true"===toggleSearchButton.getAttribute("aria-expanded")?(hideUserSearchInput(toggleSearchButton,searchInputContainer,searchInput),hideSearchResultContainer(bodyContainer,userPickerContainer,searchResultsContainer),searchResultsContainer.innerHTML=""):(((toggleSearchButton,searchContainer,searchInput)=>{searchContainer.classList.remove("collapsed"),toggleSearchButton.setAttribute("aria-expanded","true"),toggleSearchButton.classList.add("expand"),toggleSearchButton.classList.remove("collapse"),searchContainer.parentElement.querySelector(_selectors.default.regions.gradingInfoContainer).setAttribute("aria-hidden","true");const collapseGradingDrawer=searchContainer.parentElement.querySelector(_selectors.default.buttons.collapseGradingDrawer);collapseGradingDrawer.setAttribute("aria-hidden","true"),collapseGradingDrawer.setAttribute("tabindex","-1"),searchInput.focus()})(toggleSearchButton,searchInputContainer,searchInput),((bodyContainer,userPickerContainer,searchResultsContainer)=>{bodyContainer.classList.add("hidden"),userPickerContainer.classList.add("hidden"),searchResultsContainer.classList.remove("hidden")})(bodyContainer,userPickerContainer,searchResultsContainer),renderSearchResults(searchResultsContainer,userList)));const selectUserButton=e.target.closest(_selectors.default.buttons.selectUser);if(selectUserButton){const userId=selectUserButton.getAttribute("data-userid"),user=userList.find((user=>user.id==userId));userPicker.setUserId(userId),userPicker.showUser(user),hideUserSearchInput(toggleSearchButton,searchInputContainer,searchInput),hideSearchResultContainer(bodyContainer,userPickerContainer,searchResultsContainer),searchResultsContainer.innerHTML=""}})),searchInput.addEventListener("input",(0,_utils.debounce)((()=>{const users=((userList,searchTerm)=>""===searchTerm?userList:(searchTerm=searchTerm.toLowerCase(),userList.filter((user=>user.fullname.toLowerCase().includes(searchTerm)))))(userList,searchInput.value);renderSearchResults(searchResultsContainer,users)}),300)),(0,_pubsub.subscribe)(_drawer_events.default.DRAWER_HIDDEN,(drawerRoot=>{drawerRoot[0].querySelector(_selectors.default.regions.gradingPanel)&&setContentContainerMargin(graderContainer,0)})),(0,_pubsub.subscribe)(_drawer_events.default.DRAWER_SHOWN,(drawerRoot=>{const gradingPanel=drawerRoot[0];gradingPanel.querySelector(_selectors.default.regions.gradingPanel)&&setContentContainerMargin(graderContainer,gradingPanel.offsetWidth)}))},setContentContainerMargin=(graderContainer,rightMargin)=>{const contentContainer=graderContainer.querySelector(_selectors.default.regions.moduleContainer);contentContainer&&(contentContainer.style.marginRight="".concat(rightMargin,"px"))},getSaveUserGradeFunction=(root,setGradeForUser)=>async user=>{try{root.querySelector(_selectors.default.regions.gradingPanelErrors).innerHTML="";const result=await setGradeForUser(user.id,root.querySelector(_selectors.default.values.sendStudentNotifications).value,root.querySelector(_selectors.default.regions.gradingPanel));return result.success&&(0,_toast.add)(await(0,_str.getString)("grades:gradesavedfor","mod_forum",user)),result.failed&&displayGradingError(root,user,result.error),result}catch(err){return displayGradingError(root,user,err),(0,_normalise.failedUpdate)(err)}},displayGradingError=async(root,user,err)=>{const[{html:html,js:js},errorString]=await Promise.all([_templates.default.renderForPromise(templateNames_grader.gradingPanel.error,{error:err}),await(0,_str.getString)("grades:gradesavefailed","mod_forum",{error:err.message,...user})]);await _templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.gradingPanelErrors),html,js),(0,_toast.add)(errorString,{type:"warning"})};_exports.launch=async function(getListOfUsers,getContentForUser,getGradeForUser,setGradeForUser){let{initialUserId:initialUserId=null,moduleName:moduleName,courseName:courseName,courseUrl:courseUrl,sendStudentNotifications:sendStudentNotifications,focusOnClose:focusOnClose=null}=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};const userList=await getListOfUsers();if(!userList.length)return void(0,_notification.addNotification)({message:await(0,_str.getString)("nouserstograde","core_grades"),type:"error"});const pendingPromise=new _pending.default,[graderLayout,{html:html,js:js}]=await Promise.all([(0,_fullscreen.createLayout)({fullscreen:!1,showLoader:!1,focusOnClose:focusOnClose,callerName:await(0,_str.getString)("forumgrader","mod_forum")}),_templates.default.renderForPromise(templateNames_grader.app,{moduleName:moduleName,courseName:courseName,courseUrl:courseUrl,drawer:{show:!0},defaultsendnotifications:sendStudentNotifications})]);registerStaticEventListeners(graderLayout);const graderContainer=graderLayout.getContainer(),saveGradeFunction=getSaveUserGradeFunction(graderContainer,setGradeForUser);await _templates.default.replaceNodeContents(graderContainer,html,js);const updateUserContent=getUpdateUserContentFunction(graderContainer,getContentForUser,getGradeForUser,saveGradeFunction),userIds=userList.map((user=>user.id)),statusContainer=graderContainer.querySelector(_selectors.default.regions.statusContainer),userPicker=await(0,_user_picker.default)(userList,(async user=>{const renderContext={status:(await updateUserContent(user)).hasgrade,index:userIds.indexOf(user.id)+1,total:userList.length};await _templates.default.render(templateNames_grader.status,renderContext).then((html=>(statusContainer.innerHTML=html,html))).catch()}),saveGradeFunction,{initialUserId:initialUserId});pendingPromise.resolve(),registerDynamicEventListeners(graderLayout,userPicker,saveGradeFunction,userList),displayUserPicker(graderContainer,userPicker.rootNode)};_exports.view=async function(getGradeForUser,userid,moduleName){let{focusOnClose:focusOnClose=null}=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const[userGrade,modal]=await Promise.all([getGradeForUser(userid),_modal_cancel.default.create({title:moduleName,large:!0,removeOnClose:!0,returnElement:focusOnClose,show:!0,body:(0,_loadingicon.getIcon)()})]);modal.setBodyContent(_templates.default.renderForPromise("mod_forum/local/grades/view_grade",userGrade));const[{html:html,js:js}]=await Promise.all([modal.getBodyPromise(),renderGradeTemplate(userGrade)]),gradeReplace=modal.getRoot()[0].querySelector('[data-region="grade-template"]');await _templates.default.replaceNodeContents(gradeReplace,html,js)};const renderGradeTemplate=userGrade=>_templates.default.renderForPromise(userGrade.templatename,userGrade.grade)}));
+
+//# sourceMappingURL=grader.min.js.map
\ No newline at end of file
diff --git a/mod/forum/amd/build/grader.min.js.map b/mod/forum/amd/build/grader.min.js.map
new file mode 100644
index 0000000000000..f7099f1e3b81a
--- /dev/null
+++ b/mod/forum/amd/build/grader.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"grader.min.js","sources":["../src/grader.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * This module will tie together all of the different calls the gradable module will make.\n *\n * @module     mod_forum/local/grades/grader\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Selectors from './local/grader/selectors';\nimport Templates from 'core/templates';\nimport {createLayout as createFullScreenWindow} from 'core/local/layout/fullscreen';\nimport getUserPicker from 'core_grades/grades/grader/user_picker';\nimport getGradingPanelFunctions from 'core_grades/grades/grader/gradingpanel';\nimport {failedUpdate} from 'core_grades/grades/grader/gradingpanel/normalise';\nimport {fillInitialValues} from 'core_grades/grades/grader/gradingpanel/comparison';\nimport {add as addToast} from 'core/toast';\nimport {addNotification} from 'core/notification';\nimport {getString} from 'core/str';\nimport {addIconToContainerWithPromise, getIcon as getSpinner} from 'core/loadingicon';\nimport {debounce} from 'core/utils';\nimport Modal from 'core/modal_cancel';\nimport {subscribe} from 'core/pubsub';\nimport DrawerEvents from 'core/drawer_events';\nimport Pending from 'core/pending';\n\nconst templateNames = {\n    grader: {\n        app: 'mod_forum/local/grades/grader',\n        gradingPanel: {\n            error: 'mod_forum/local/grades/local/grader/gradingpanel/error',\n        },\n        searchResults: 'mod_forum/local/grades/local/grader/user_picker/user_search',\n        status: 'mod_forum/local/grades/local/grader/status',\n    },\n};\n\n/**\n * Helper function that replaces the user picker placeholder with what we get back from the user picker class.\n *\n * @param {HTMLElement} root\n * @param {String} html\n */\nconst displayUserPicker = (root, html) => {\n    const pickerRegion = root.querySelector(Selectors.regions.pickerRegion);\n    Templates.replaceNodeContents(pickerRegion, html, '');\n};\n\n/**\n * To be removed, this is now done as a part of Templates.renderForPromise()\n *\n * @param {String} html\n * @param {String} js\n * @returns {array} An array containing the HTML, and JS.\n */\nconst fetchContentFromRender = (html, js) => {\n    return [html, js];\n};\n\n/**\n * Here we build the function that is passed to the user picker that'll handle updating the user content area\n * of the grading interface.\n *\n * @param {HTMLElement} root\n * @param {Function} getContentForUser\n * @param {Function} getGradeForUser\n * @param {Function} saveGradeForUser\n * @return {Function}\n */\nconst getUpdateUserContentFunction = (root, getContentForUser, getGradeForUser, saveGradeForUser) => {\n    let firstLoad = true;\n\n    return async(user) => {\n        const spinner = firstLoad ? null : addIconToContainerWithPromise(root);\n        const [\n            [html, js],\n            userGrade,\n        ] = await Promise.all([\n            getContentForUser(user.id).then(fetchContentFromRender),\n            getGradeForUser(user.id),\n        ]);\n        await Templates.replaceNodeContents(root.querySelector(Selectors.regions.moduleReplace), html, js);\n\n        const [\n            gradingPanelHtml,\n            gradingPanelJS\n        ] = await Templates.render(userGrade.templatename, userGrade.grade).then(fetchContentFromRender);\n        const panelContainer = root.querySelector(Selectors.regions.gradingPanelContainer);\n        const panel = panelContainer.querySelector(Selectors.regions.gradingPanel);\n        await Templates.replaceNodeContents(panel, gradingPanelHtml, gradingPanelJS);\n\n        const form = panel.querySelector('form');\n        fillInitialValues(form);\n\n        form.addEventListener('submit', event => {\n            saveGradeForUser(user);\n            event.preventDefault();\n        });\n\n        panelContainer.scrollTop = 0;\n        firstLoad = false;\n\n        if (spinner) {\n            spinner.resolve();\n        }\n        return userGrade;\n    };\n};\n\n/**\n * Show the search results container and hide the user picker and body content.\n *\n * @param {HTMLElement} bodyContainer The container element for the body content\n * @param {HTMLElement} userPickerContainer The container element for the user picker\n * @param {HTMLElement} searchResultsContainer The container element for the search results\n */\nconst showSearchResultContainer = (bodyContainer, userPickerContainer, searchResultsContainer) => {\n    bodyContainer.classList.add('hidden');\n    userPickerContainer.classList.add('hidden');\n    searchResultsContainer.classList.remove('hidden');\n};\n\n/**\n * Hide the search results container and show the user picker and body content.\n *\n * @param {HTMLElement} bodyContainer The container element for the body content\n * @param {HTMLElement} userPickerContainer The container element for the user picker\n * @param {HTMLElement} searchResultsContainer The container element for the search results\n */\nconst hideSearchResultContainer = (bodyContainer, userPickerContainer, searchResultsContainer) => {\n    bodyContainer.classList.remove('hidden');\n    userPickerContainer.classList.remove('hidden');\n    searchResultsContainer.classList.add('hidden');\n};\n\n/**\n * Toggles the visibility of the user search.\n *\n * @param {HTMLElement} toggleSearchButton The button that toggles the search\n * @param {HTMLElement} searchContainer The container element for the user search\n * @param {HTMLElement} searchInput The input element for searching\n */\nconst showUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {\n    searchContainer.classList.remove('collapsed');\n    toggleSearchButton.setAttribute('aria-expanded', 'true');\n    toggleSearchButton.classList.add('expand');\n    toggleSearchButton.classList.remove('collapse');\n\n    // Hide the grading info container from screen reader.\n    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);\n    gradingInfoContainer.setAttribute('aria-hidden', 'true');\n\n    // Hide the collapse grading drawer button from screen reader.\n    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);\n    collapseGradingDrawer.setAttribute('aria-hidden', 'true');\n    collapseGradingDrawer.setAttribute('tabindex', '-1');\n\n    searchInput.focus();\n};\n\n/**\n * Toggles the visibility of the user search.\n *\n * @param {HTMLElement} toggleSearchButton The button that toggles the search\n * @param {HTMLElement} searchContainer The container element for the user search\n * @param {HTMLElement} searchInput The input element for searching\n */\nconst hideUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {\n    searchContainer.classList.add('collapsed');\n    toggleSearchButton.setAttribute('aria-expanded', 'false');\n    toggleSearchButton.classList.add('collapse');\n    toggleSearchButton.classList.remove('expand');\n    toggleSearchButton.focus();\n\n    // Show the grading info container to screen reader.\n    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);\n    gradingInfoContainer.removeAttribute('aria-hidden');\n\n    // Show the collapse grading drawer button from screen reader.\n    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);\n    collapseGradingDrawer.removeAttribute('aria-hidden');\n    collapseGradingDrawer.setAttribute('tabindex', '0');\n\n    searchInput.value = '';\n};\n\n/**\n * Find the list of users who's names include the given search term.\n *\n * @param {Array} userList List of users for the grader\n * @param {String} searchTerm The search term to match\n * @return {Array}\n */\nconst searchForUsers = (userList, searchTerm) => {\n    if (searchTerm === '') {\n        return userList;\n    }\n\n    searchTerm = searchTerm.toLowerCase();\n\n    return userList.filter((user) => {\n        return user.fullname.toLowerCase().includes(searchTerm);\n    });\n};\n\n/**\n * Render the list of users in the search results area.\n *\n * @param {HTMLElement} searchResultsContainer The container element for search results\n * @param {Array} users The list of users to display\n */\nconst renderSearchResults = async(searchResultsContainer, users) => {\n    const {html, js} = await Templates.renderForPromise(templateNames.grader.searchResults, {users});\n    await Templates.replaceNodeContents(searchResultsContainer, html, js);\n};\n\n/**\n * Add click handlers to the buttons in the header of the grading interface.\n *\n * @param {HTMLElement} graderLayout\n */\nconst registerStaticEventListeners = (graderLayout) => {\n    const graderContainer = graderLayout.getContainer();\n    graderContainer.addEventListener('click', (e) => {\n        if (e.target.closest(Selectors.buttons.toggleFullscreen)) {\n            e.stopImmediatePropagation();\n            e.preventDefault();\n            graderLayout.toggleFullscreen();\n\n            return;\n        }\n\n        if (e.target.closest(Selectors.buttons.closeGrader)) {\n            e.stopImmediatePropagation();\n            e.preventDefault();\n\n            graderLayout.close();\n\n            return;\n        }\n    });\n};\n\n/**\n * Add click handlers to the buttons that often have their content changed.\n *\n * @param {HTMLElement} graderLayout\n * @param {Object} userPicker\n * @param {Function} saveGradeFunction\n * @param {Array} userList List of users for the grader.\n */\nconst registerDynamicEventListeners = (graderLayout, userPicker, saveGradeFunction, userList) => {\n    const graderContainer = graderLayout.getContainer();\n    const toggleSearchButton = graderContainer.querySelector(Selectors.buttons.toggleSearch);\n    const searchInputContainer = graderContainer.querySelector(Selectors.regions.userSearchContainer);\n    const searchInput = searchInputContainer.querySelector(Selectors.regions.userSearchInput);\n    const bodyContainer = graderContainer.querySelector(Selectors.regions.bodyContainer);\n    const userPickerContainer = graderContainer.querySelector(Selectors.regions.pickerRegion);\n    const searchResultsContainer = graderContainer.querySelector(Selectors.regions.searchResultsContainer);\n\n    graderContainer.addEventListener('click', (e) => {\n\n        if (e.target.closest(Selectors.buttons.saveGrade)) {\n            saveGradeFunction(userPicker.currentUser);\n        }\n\n        if (e.target.closest(Selectors.buttons.toggleSearch)) {\n            if (toggleSearchButton.getAttribute('aria-expanded') === 'true') {\n                // Search is open so let's close it.\n                hideUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n                hideSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n                searchResultsContainer.innerHTML = '';\n            } else {\n                // Search is closed so let's open it.\n                showUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n                showSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n                renderSearchResults(searchResultsContainer, userList);\n            }\n\n            return;\n        }\n\n        const selectUserButton = e.target.closest(Selectors.buttons.selectUser);\n        if (selectUserButton) {\n            const userId = selectUserButton.getAttribute('data-userid');\n            const user = userList.find(user => user.id == userId);\n            userPicker.setUserId(userId);\n            userPicker.showUser(user);\n            hideUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n            hideSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n            searchResultsContainer.innerHTML = '';\n        }\n    });\n\n    // Debounce the search input so that it only executes 300 milliseconds after the user has finished typing.\n    searchInput.addEventListener('input', debounce(() => {\n        const users = searchForUsers(userList, searchInput.value);\n        renderSearchResults(searchResultsContainer, users);\n    }, 300));\n\n    // Remove the right margin of the content container when the grading panel is hidden so that it expands to full-width.\n    subscribe(DrawerEvents.DRAWER_HIDDEN, (drawerRoot) => {\n        const gradingPanel = drawerRoot[0];\n        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {\n            setContentContainerMargin(graderContainer, 0);\n        }\n    });\n\n    // Bring back the right margin of the content container when the grading panel is shown to give space for the grading panel.\n    subscribe(DrawerEvents.DRAWER_SHOWN, (drawerRoot) => {\n        const gradingPanel = drawerRoot[0];\n        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {\n            setContentContainerMargin(graderContainer, gradingPanel.offsetWidth);\n        }\n    });\n};\n\n/**\n * Adjusts the right margin of the content container.\n *\n * @param {HTMLElement} graderContainer The container for the grader app.\n * @param {Number} rightMargin The right margin value.\n */\nconst setContentContainerMargin = (graderContainer, rightMargin) => {\n    const contentContainer = graderContainer.querySelector(Selectors.regions.moduleContainer);\n    if (contentContainer) {\n        contentContainer.style.marginRight = `${rightMargin}px`;\n    }\n};\n\n/**\n * Get the function used to save a user grade.\n *\n * @param {HTMLElement} root The container for the grader\n * @param {Function} setGradeForUser The function that will be called.\n * @return {Function}\n */\nconst getSaveUserGradeFunction = (root, setGradeForUser) => {\n    return async(user) => {\n        try {\n            root.querySelector(Selectors.regions.gradingPanelErrors).innerHTML = '';\n            const result = await setGradeForUser(\n                user.id,\n                root.querySelector(Selectors.values.sendStudentNotifications).value,\n                root.querySelector(Selectors.regions.gradingPanel)\n            );\n            if (result.success) {\n                addToast(await getString('grades:gradesavedfor', 'mod_forum', user));\n            }\n            if (result.failed) {\n                displayGradingError(root, user, result.error);\n            }\n\n            return result;\n        } catch (err) {\n            displayGradingError(root, user, err);\n\n            return failedUpdate(err);\n        }\n    };\n};\n\n/**\n * Display a grading error, typically from a failed save.\n *\n * @param {HTMLElement} root The container for the grader\n * @param {Object} user The user who was errored\n * @param {Object} err The details of the error\n */\nconst displayGradingError = async(root, user, err) => {\n    const [\n        {html, js},\n        errorString\n    ] = await Promise.all([\n        Templates.renderForPromise(templateNames.grader.gradingPanel.error, {error: err}),\n        await getString('grades:gradesavefailed', 'mod_forum', {error: err.message, ...user}),\n    ]);\n\n    await Templates.replaceNodeContents(root.querySelector(Selectors.regions.gradingPanelErrors), html, js);\n    addToast(errorString, {type: 'warning'});\n};\n\n/**\n * Launch the grader interface with the specified parameters.\n *\n * @param {Function} getListOfUsers A function to get the list of users\n * @param {Function} getContentForUser A function to get the content for a specific user\n * @param {Function} getGradeForUser A function get the grade details for a specific user\n * @param {Function} setGradeForUser A function to set the grade for a specific user\n * @param {Object} preferences Preferences for the launch function\n * @param {Number} preferences.initialUserId\n * @param {string} preferences.moduleName\n * @param {string} preferences.courseName\n * @param {string} preferences.courseUrl\n * @param {boolean} preferences.sendStudentNotifications\n * @param {null|HTMLElement} preferences.focusOnClose\n */\nexport const launch = async(getListOfUsers, getContentForUser, getGradeForUser, setGradeForUser, {\n    initialUserId = null,\n    moduleName,\n    courseName,\n    courseUrl,\n    sendStudentNotifications,\n    focusOnClose = null,\n} = {}) => {\n\n    // We need all of these functions to be executed in series, if one step runs before another the interface\n    // will not work.\n\n    // We need this promise to resolve separately so that we can avoid loading the whole interface if there are no users.\n    const userList = await getListOfUsers();\n    if (!userList.length) {\n        addNotification({\n            message: await getString('nouserstograde', 'core_grades'),\n            type: \"error\",\n        });\n        return;\n    }\n\n    const pendingPromise = new Pending();\n    // Now that we have confirmed there are at least some users let's boot up the grader interface.\n    const [\n        graderLayout,\n        {html, js},\n    ] = await Promise.all([\n        createFullScreenWindow({\n            fullscreen: false,\n            showLoader: false,\n            focusOnClose,\n            callerName: await getString('forumgrader', 'mod_forum'),\n        }),\n        Templates.renderForPromise(templateNames.grader.app, {\n            moduleName,\n            courseName,\n            courseUrl,\n            drawer: {show: true},\n            defaultsendnotifications: sendStudentNotifications,\n        }),\n    ]);\n\n    registerStaticEventListeners(graderLayout);\n\n    const graderContainer = graderLayout.getContainer();\n\n    const saveGradeFunction = getSaveUserGradeFunction(graderContainer, setGradeForUser);\n\n    await Templates.replaceNodeContents(graderContainer, html, js);\n    const updateUserContent = getUpdateUserContentFunction(graderContainer, getContentForUser, getGradeForUser, saveGradeFunction);\n\n    const userIds = userList.map(user => user.id);\n    const statusContainer = graderContainer.querySelector(Selectors.regions.statusContainer);\n    // Fetch the userpicker for display.\n    const userPicker = await getUserPicker(\n        userList,\n        async(user) => {\n            const userGrade = await updateUserContent(user);\n            const renderContext = {\n                status: userGrade.hasgrade,\n                index: userIds.indexOf(user.id) + 1,\n                total: userList.length\n            };\n            await Templates.render(templateNames.grader.status, renderContext).then(html => {\n                statusContainer.innerHTML = html;\n                return html;\n            }).catch();\n        },\n        saveGradeFunction,\n        {\n            initialUserId,\n        },\n    );\n\n    pendingPromise.resolve();\n    // Register all event listeners.\n    registerDynamicEventListeners(graderLayout, userPicker, saveGradeFunction, userList);\n\n    // Display the newly created user picker.\n    displayUserPicker(graderContainer, userPicker.rootNode);\n};\n\n/**\n * Show the grade for a specific user.\n *\n * @param {Function} getGradeForUser A function get the grade details for a specific user\n * @param {Number} userid The ID of a specific user\n * @param {String} moduleName the name of the module\n * @param {object} param\n * @param {null|HTMLElement} param.focusOnClose\n */\nexport const view = async(getGradeForUser, userid, moduleName, {\n    focusOnClose = null,\n} = {}) => {\n\n    const [\n        userGrade,\n        modal,\n    ] = await Promise.all([\n        getGradeForUser(userid),\n        Modal.create({\n            title: moduleName,\n            large: true,\n            removeOnClose: true,\n            returnElement: focusOnClose,\n            show: true,\n            body: getSpinner(),\n        }),\n    ]);\n\n    modal.setBodyContent(Templates.renderForPromise('mod_forum/local/grades/view_grade', userGrade));\n\n    // Note: We do not use await here because it messes with the Modal transitions.\n    const [{html, js}] = await Promise.all([modal.getBodyPromise(), renderGradeTemplate(userGrade)]);\n    const gradeReplace = modal.getRoot()[0].querySelector('[data-region=\"grade-template\"]');\n    await Templates.replaceNodeContents(gradeReplace, html, js);\n};\n\nconst renderGradeTemplate = (userGrade) => Templates.renderForPromise(userGrade.templatename, userGrade.grade);\n\nexport {getGradingPanelFunctions};\n"],"names":["templateNames","app","gradingPanel","error","searchResults","status","displayUserPicker","root","html","pickerRegion","querySelector","Selectors","regions","replaceNodeContents","fetchContentFromRender","js","getUpdateUserContentFunction","getContentForUser","getGradeForUser","saveGradeForUser","firstLoad","async","spinner","userGrade","Promise","all","user","id","then","Templates","moduleReplace","gradingPanelHtml","gradingPanelJS","render","templatename","grade","panelContainer","gradingPanelContainer","panel","form","addEventListener","event","preventDefault","scrollTop","resolve","hideSearchResultContainer","bodyContainer","userPickerContainer","searchResultsContainer","classList","remove","add","hideUserSearchInput","toggleSearchButton","searchContainer","searchInput","setAttribute","focus","parentElement","gradingInfoContainer","removeAttribute","collapseGradingDrawer","buttons","value","renderSearchResults","users","renderForPromise","registerStaticEventListeners","graderLayout","getContainer","e","target","closest","toggleFullscreen","stopImmediatePropagation","closeGrader","close","registerDynamicEventListeners","userPicker","saveGradeFunction","userList","graderContainer","toggleSearch","searchInputContainer","userSearchContainer","userSearchInput","saveGrade","currentUser","getAttribute","innerHTML","showUserSearchInput","showSearchResultContainer","selectUserButton","selectUser","userId","find","setUserId","showUser","searchTerm","toLowerCase","filter","fullname","includes","searchForUsers","DrawerEvents","DRAWER_HIDDEN","drawerRoot","setContentContainerMargin","DRAWER_SHOWN","offsetWidth","rightMargin","contentContainer","moduleContainer","style","marginRight","getSaveUserGradeFunction","setGradeForUser","gradingPanelErrors","result","values","sendStudentNotifications","success","failed","displayGradingError","err","errorString","message","type","getListOfUsers","initialUserId","moduleName","courseName","courseUrl","focusOnClose","length","pendingPromise","Pending","fullscreen","showLoader","callerName","drawer","show","defaultsendnotifications","updateUserContent","userIds","map","statusContainer","renderContext","hasgrade","index","indexOf","total","catch","rootNode","userid","modal","Modal","create","title","large","removeOnClose","returnElement","body","setBodyContent","getBodyPromise","renderGradeTemplate","gradeReplace","getRoot"],"mappings":"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"}
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/grader/selectors.min.js b/mod/forum/amd/build/local/grader/selectors.min.js
new file mode 100644
index 0000000000000..1b24d2094ba6b
--- /dev/null
+++ b/mod/forum/amd/build/local/grader/selectors.min.js
@@ -0,0 +1,11 @@
+define("mod_forum/local/grader/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;
+/**
+   * Define all of the selectors we will be using on the grading interface.
+   *
+   * @module     mod_forum/local/grades/local/grader/selectors
+   * @copyright  2019 Mathew May <mathew.solutions>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+const getDataSelector=(name,value)=>"[data-".concat(name,'="').concat(value,'"]');var _default={buttons:{toggleFullscreen:getDataSelector("action","togglefullscreen"),closeGrader:getDataSelector("action","closegrader"),collapseGradingDrawer:getDataSelector("action","collapse-grading-drawer"),saveGrade:getDataSelector("action","savegrade"),selectUser:getDataSelector("action","select-user"),toggleSearch:getDataSelector("action","toggle-search")},regions:{bodyContainer:getDataSelector("region","body-container"),moduleContainer:getDataSelector("region","module_content_container"),moduleReplace:getDataSelector("region","module_content"),pickerRegion:getDataSelector("region","user_picker"),gradingInfoContainer:getDataSelector("region","grading-info-container"),gradingPanel:getDataSelector("region","grade"),gradingPanelContainer:getDataSelector("region","grading-panel-container"),gradingPanelErrors:getDataSelector("region","grade-errors"),searchResultsContainer:getDataSelector("region","search-results-container"),statusContainer:getDataSelector("region","status-container"),userSearchContainer:getDataSelector("region","user-search-container"),userSearchInput:getDataSelector("region","user-search-input")},values:{sendStudentNotifications:'[data-region="notification"] input[type="radio"]:checked'}};return _exports.default=_default,_exports.default}));
+
+//# sourceMappingURL=selectors.min.js.map
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/grader/selectors.min.js.map b/mod/forum/amd/build/local/grader/selectors.min.js.map
new file mode 100644
index 0000000000000..b5173b9f15566
--- /dev/null
+++ b/mod/forum/amd/build/local/grader/selectors.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"selectors.min.js","sources":["../../../src/local/grader/selectors.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the grading interface.\n *\n * @module     mod_forum/local/grades/local/grader/selectors\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * A small helper function to build queryable data selectors.\n * @param {String} name\n * @param {String} value\n * @return {string}\n */\nconst getDataSelector = (name, value) => {\n    return `[data-${name}=\"${value}\"]`;\n};\n\nexport default {\n    buttons: {\n        toggleFullscreen: getDataSelector('action', 'togglefullscreen'),\n        closeGrader: getDataSelector('action', 'closegrader'),\n        collapseGradingDrawer: getDataSelector('action', 'collapse-grading-drawer'),\n        saveGrade: getDataSelector('action', 'savegrade'),\n        selectUser: getDataSelector('action', 'select-user'),\n        toggleSearch: getDataSelector('action', 'toggle-search')\n    },\n    regions: {\n        bodyContainer: getDataSelector('region', 'body-container'),\n        moduleContainer: getDataSelector('region', 'module_content_container'),\n        moduleReplace: getDataSelector('region', 'module_content'),\n        pickerRegion: getDataSelector('region', 'user_picker'),\n        gradingInfoContainer: getDataSelector('region', 'grading-info-container'),\n        gradingPanel: getDataSelector('region', 'grade'),\n        gradingPanelContainer: getDataSelector('region', 'grading-panel-container'),\n        gradingPanelErrors: getDataSelector('region', 'grade-errors'),\n        searchResultsContainer: getDataSelector('region', 'search-results-container'),\n        statusContainer: getDataSelector('region', 'status-container'),\n        userSearchContainer: getDataSelector('region', 'user-search-container'),\n        userSearchInput: getDataSelector('region', 'user-search-input')\n    },\n    values: {\n        sendStudentNotifications: '[data-region=\"notification\"] input[type=\"radio\"]:checked',\n    }\n};\n\n"],"names":["getDataSelector","name","value","buttons","toggleFullscreen","closeGrader","collapseGradingDrawer","saveGrade","selectUser","toggleSearch","regions","bodyContainer","moduleContainer","moduleReplace","pickerRegion","gradingInfoContainer","gradingPanel","gradingPanelContainer","gradingPanelErrors","searchResultsContainer","statusContainer","userSearchContainer","userSearchInput","values","sendStudentNotifications"],"mappings":";;;;;;;;MA6BMA,gBAAkB,CAACC,KAAMC,wBACXD,kBAASC,yBAGd,CACXC,QAAS,CACLC,iBAAkBJ,gBAAgB,SAAU,oBAC5CK,YAAaL,gBAAgB,SAAU,eACvCM,sBAAuBN,gBAAgB,SAAU,2BACjDO,UAAWP,gBAAgB,SAAU,aACrCQ,WAAYR,gBAAgB,SAAU,eACtCS,aAAcT,gBAAgB,SAAU,kBAE5CU,QAAS,CACLC,cAAeX,gBAAgB,SAAU,kBACzCY,gBAAiBZ,gBAAgB,SAAU,4BAC3Ca,cAAeb,gBAAgB,SAAU,kBACzCc,aAAcd,gBAAgB,SAAU,eACxCe,qBAAsBf,gBAAgB,SAAU,0BAChDgB,aAAchB,gBAAgB,SAAU,SACxCiB,sBAAuBjB,gBAAgB,SAAU,2BACjDkB,mBAAoBlB,gBAAgB,SAAU,gBAC9CmB,uBAAwBnB,gBAAgB,SAAU,4BAClDoB,gBAAiBpB,gBAAgB,SAAU,oBAC3CqB,oBAAqBrB,gBAAgB,SAAU,yBAC/CsB,gBAAiBtB,gBAAgB,SAAU,sBAE/CuB,OAAQ,CACJC,yBAA0B"}
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/grades/grader.min.js b/mod/forum/amd/build/local/grades/grader.min.js
index 1389248dacfac..dd1af3cded69b 100644
--- a/mod/forum/amd/build/local/grades/grader.min.js
+++ b/mod/forum/amd/build/local/grades/grader.min.js
@@ -1,10 +1,10 @@
-define("mod_forum/local/grades/grader",["exports","core/templates","./local/grader/selectors","./local/grader/user_picker","mod_forum/local/layout/fullscreen","./local/grader/gradingpanel","core/toast","core/notification","core/str","core_grades/grades/grader/gradingpanel/normalise","core/loadingicon","core/utils","core_grades/grades/grader/gradingpanel/comparison","core/modal_cancel","core/pubsub","core/drawer_events"],(function(_exports,_templates,_selectors,_user_picker,_fullscreen,_gradingpanel,_toast,_notification,_str,_normalise,_loadingicon,_utils,_comparison,_modal_cancel,_pubsub,_drawer_events){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+define("mod_forum/local/grades/grader",["exports","core/templates","./local/grader/selectors","./local/grader/user_picker","mod_forum/local/layout/fullscreen","./local/grader/gradingpanel","core/toast","core/notification","core/str","core_grades/grades/grader/gradingpanel/normalise","core/loadingicon","core/utils","core_grades/grades/grader/gradingpanel/comparison","core/modal_cancel","core/pubsub","core/drawer_events","core/pending"],(function(_exports,_templates,_selectors,_user_picker,_fullscreen,_gradingpanel,_toast,_notification,_str,_normalise,_loadingicon,_utils,_comparison,_modal_cancel,_pubsub,_drawer_events,_pending){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
 /**
    * This module will tie together all of the different calls the gradable module will make.
    *
    * @module     mod_forum/local/grades/grader
    * @copyright  2019 Mathew May <mathew.solutions>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),Object.defineProperty(_exports,"getGradingPanelFunctions",{enumerable:!0,get:function(){return _gradingpanel.default}}),_exports.view=_exports.launch=void 0,_templates=_interopRequireDefault(_templates),_selectors=_interopRequireDefault(_selectors),_user_picker=_interopRequireDefault(_user_picker),_gradingpanel=_interopRequireDefault(_gradingpanel),_modal_cancel=_interopRequireDefault(_modal_cancel),_drawer_events=_interopRequireDefault(_drawer_events);const templateNames_grader={app:"mod_forum/local/grades/grader",gradingPanel:{error:"mod_forum/local/grades/local/grader/gradingpanel/error"},searchResults:"mod_forum/local/grades/local/grader/user_picker/user_search",status:"mod_forum/local/grades/local/grader/status"},displayUserPicker=(root,html)=>{const pickerRegion=root.querySelector(_selectors.default.regions.pickerRegion);_templates.default.replaceNodeContents(pickerRegion,html,"")},fetchContentFromRender=(html,js)=>[html,js],getUpdateUserContentFunction=(root,getContentForUser,getGradeForUser,saveGradeForUser)=>{let firstLoad=!0;return async user=>{const spinner=firstLoad?null:(0,_loadingicon.addIconToContainerWithPromise)(root),[[html,js],userGrade]=await Promise.all([getContentForUser(user.id).then(fetchContentFromRender),getGradeForUser(user.id)]);_templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.moduleReplace),html,js);const[gradingPanelHtml,gradingPanelJS]=await _templates.default.render(userGrade.templatename,userGrade.grade).then(fetchContentFromRender),panelContainer=root.querySelector(_selectors.default.regions.gradingPanelContainer),panel=panelContainer.querySelector(_selectors.default.regions.gradingPanel);_templates.default.replaceNodeContents(panel,gradingPanelHtml,gradingPanelJS);const form=panel.querySelector("form");return(0,_comparison.fillInitialValues)(form),form.addEventListener("submit",(event=>{saveGradeForUser(user),event.preventDefault()})),panelContainer.scrollTop=0,firstLoad=!1,spinner&&spinner.resolve(),userGrade}},hideSearchResultContainer=(bodyContainer,userPickerContainer,searchResultsContainer)=>{bodyContainer.classList.remove("hidden"),userPickerContainer.classList.remove("hidden"),searchResultsContainer.classList.add("hidden")},hideUserSearchInput=(toggleSearchButton,searchContainer,searchInput)=>{searchContainer.classList.add("collapsed"),toggleSearchButton.setAttribute("aria-expanded","false"),toggleSearchButton.classList.add("collapse"),toggleSearchButton.classList.remove("expand"),toggleSearchButton.focus();searchContainer.parentElement.querySelector(_selectors.default.regions.gradingInfoContainer).removeAttribute("aria-hidden");const collapseGradingDrawer=searchContainer.parentElement.querySelector(_selectors.default.buttons.collapseGradingDrawer);collapseGradingDrawer.removeAttribute("aria-hidden"),collapseGradingDrawer.setAttribute("tabindex","0"),searchInput.value=""},renderSearchResults=async(searchResultsContainer,users)=>{const{html:html,js:js}=await _templates.default.renderForPromise(templateNames_grader.searchResults,{users:users});_templates.default.replaceNodeContents(searchResultsContainer,html,js)},registerEventListeners=(graderLayout,userPicker,saveGradeFunction,userList)=>{const graderContainer=graderLayout.getContainer(),toggleSearchButton=graderContainer.querySelector(_selectors.default.buttons.toggleSearch),searchInputContainer=graderContainer.querySelector(_selectors.default.regions.userSearchContainer),searchInput=searchInputContainer.querySelector(_selectors.default.regions.userSearchInput),bodyContainer=graderContainer.querySelector(_selectors.default.regions.bodyContainer),userPickerContainer=graderContainer.querySelector(_selectors.default.regions.pickerRegion),searchResultsContainer=graderContainer.querySelector(_selectors.default.regions.searchResultsContainer);graderContainer.addEventListener("click",(e=>{if(e.target.closest(_selectors.default.buttons.toggleFullscreen))return e.stopImmediatePropagation(),e.preventDefault(),void graderLayout.toggleFullscreen();if(e.target.closest(_selectors.default.buttons.closeGrader))return e.stopImmediatePropagation(),e.preventDefault(),void graderLayout.close();if(e.target.closest(_selectors.default.buttons.saveGrade)&&saveGradeFunction(userPicker.currentUser),e.target.closest(_selectors.default.buttons.toggleSearch))return void("true"===toggleSearchButton.getAttribute("aria-expanded")?(hideUserSearchInput(toggleSearchButton,searchInputContainer,searchInput),hideSearchResultContainer(bodyContainer,userPickerContainer,searchResultsContainer),searchResultsContainer.innerHTML=""):(((toggleSearchButton,searchContainer,searchInput)=>{searchContainer.classList.remove("collapsed"),toggleSearchButton.setAttribute("aria-expanded","true"),toggleSearchButton.classList.add("expand"),toggleSearchButton.classList.remove("collapse"),searchContainer.parentElement.querySelector(_selectors.default.regions.gradingInfoContainer).setAttribute("aria-hidden","true");const collapseGradingDrawer=searchContainer.parentElement.querySelector(_selectors.default.buttons.collapseGradingDrawer);collapseGradingDrawer.setAttribute("aria-hidden","true"),collapseGradingDrawer.setAttribute("tabindex","-1"),searchInput.focus()})(toggleSearchButton,searchInputContainer,searchInput),((bodyContainer,userPickerContainer,searchResultsContainer)=>{bodyContainer.classList.add("hidden"),userPickerContainer.classList.add("hidden"),searchResultsContainer.classList.remove("hidden")})(bodyContainer,userPickerContainer,searchResultsContainer),renderSearchResults(searchResultsContainer,userList)));const selectUserButton=e.target.closest(_selectors.default.buttons.selectUser);if(selectUserButton){const userId=selectUserButton.getAttribute("data-userid"),user=userList.find((user=>user.id==userId));userPicker.setUserId(userId),userPicker.showUser(user),hideUserSearchInput(toggleSearchButton,searchInputContainer,searchInput),hideSearchResultContainer(bodyContainer,userPickerContainer,searchResultsContainer),searchResultsContainer.innerHTML=""}})),searchInput.addEventListener("input",(0,_utils.debounce)((()=>{const users=((userList,searchTerm)=>""===searchTerm?userList:(searchTerm=searchTerm.toLowerCase(),userList.filter((user=>user.fullname.toLowerCase().includes(searchTerm)))))(userList,searchInput.value);renderSearchResults(searchResultsContainer,users)}),300)),(0,_pubsub.subscribe)(_drawer_events.default.DRAWER_HIDDEN,(drawerRoot=>{drawerRoot[0].querySelector(_selectors.default.regions.gradingPanel)&&setContentContainerMargin(graderContainer,0)})),(0,_pubsub.subscribe)(_drawer_events.default.DRAWER_SHOWN,(drawerRoot=>{const gradingPanel=drawerRoot[0];gradingPanel.querySelector(_selectors.default.regions.gradingPanel)&&setContentContainerMargin(graderContainer,gradingPanel.offsetWidth)}))},setContentContainerMargin=(graderContainer,rightMargin)=>{const contentContainer=graderContainer.querySelector(_selectors.default.regions.moduleContainer);contentContainer&&(contentContainer.style.marginRight="".concat(rightMargin,"px"))},getSaveUserGradeFunction=(root,setGradeForUser)=>async user=>{try{root.querySelector(_selectors.default.regions.gradingPanelErrors).innerHTML="";const result=await setGradeForUser(user.id,root.querySelector(_selectors.default.values.sendStudentNotifications).value,root.querySelector(_selectors.default.regions.gradingPanel));return result.success&&(0,_toast.add)(await(0,_str.getString)("grades:gradesavedfor","mod_forum",user)),result.failed&&displayGradingError(root,user,result.error),result}catch(err){return displayGradingError(root,user,err),(0,_normalise.failedUpdate)(err)}},displayGradingError=async(root,user,err)=>{const[{html:html,js:js},errorString]=await Promise.all([_templates.default.renderForPromise(templateNames_grader.gradingPanel.error,{error:err}),await(0,_str.getString)("grades:gradesavefailed","mod_forum",{error:err.message,...user})]);_templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.gradingPanelErrors),html,js),(0,_toast.add)(errorString,{type:"warning"})};_exports.launch=async function(getListOfUsers,getContentForUser,getGradeForUser,setGradeForUser){let{initialUserId:initialUserId=null,moduleName:moduleName,courseName:courseName,courseUrl:courseUrl,sendStudentNotifications:sendStudentNotifications,focusOnClose:focusOnClose=null}=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};const userList=await getListOfUsers();if(!userList.length)return void(0,_notification.addNotification)({message:await(0,_str.getString)("nouserstograde","core_grades"),type:"error"});const[graderLayout,{html:html,js:js}]=await Promise.all([(0,_fullscreen.createLayout)({fullscreen:!1,showLoader:!1,focusOnClose:focusOnClose}),_templates.default.renderForPromise(templateNames_grader.app,{moduleName:moduleName,courseName:courseName,courseUrl:courseUrl,drawer:{show:!0},defaultsendnotifications:sendStudentNotifications})]),graderContainer=graderLayout.getContainer(),saveGradeFunction=getSaveUserGradeFunction(graderContainer,setGradeForUser);_templates.default.replaceNodeContents(graderContainer,html,js);const updateUserContent=getUpdateUserContentFunction(graderContainer,getContentForUser,getGradeForUser,saveGradeFunction),userIds=userList.map((user=>user.id)),statusContainer=graderContainer.querySelector(_selectors.default.regions.statusContainer),userPicker=await(0,_user_picker.default)(userList,(async user=>{const renderContext={status:(await updateUserContent(user)).hasgrade,index:userIds.indexOf(user.id)+1,total:userList.length};_templates.default.render(templateNames_grader.status,renderContext).then((html=>(statusContainer.innerHTML=html,html))).catch()}),saveGradeFunction,{initialUserId:initialUserId});registerEventListeners(graderLayout,userPicker,saveGradeFunction,userList),displayUserPicker(graderContainer,userPicker.rootNode)};_exports.view=async function(getGradeForUser,userid,moduleName){let{focusOnClose:focusOnClose=null}=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const userGrade=await getGradeForUser(userid),[modal,gradeTemplateData]=await Promise.all([_modal_cancel.default.create({title:moduleName,large:!0,removeOnClose:!0,returnElement:focusOnClose,show:!0,body:_templates.default.render("mod_forum/local/grades/view_grade",userGrade)}),renderGradeTemplate(userGrade)]),bodyPromise=await modal.getBodyPromise(),gradeReplace=bodyPromise[0].querySelector('[data-region="grade-template"]');_templates.default.replaceNodeContents(gradeReplace,gradeTemplateData.html,gradeTemplateData.js)};const renderGradeTemplate=userGrade=>_templates.default.renderForPromise(userGrade.templatename,userGrade.grade)}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),Object.defineProperty(_exports,"getGradingPanelFunctions",{enumerable:!0,get:function(){return _gradingpanel.default}}),_exports.view=_exports.launch=void 0,_templates=_interopRequireDefault(_templates),_selectors=_interopRequireDefault(_selectors),_user_picker=_interopRequireDefault(_user_picker),_gradingpanel=_interopRequireDefault(_gradingpanel),_modal_cancel=_interopRequireDefault(_modal_cancel),_drawer_events=_interopRequireDefault(_drawer_events),_pending=_interopRequireDefault(_pending);const templateNames_grader={app:"mod_forum/local/grades/grader",gradingPanel:{error:"mod_forum/local/grades/local/grader/gradingpanel/error"},searchResults:"mod_forum/local/grades/local/grader/user_picker/user_search",status:"mod_forum/local/grades/local/grader/status"},displayUserPicker=(root,html)=>{const pickerRegion=root.querySelector(_selectors.default.regions.pickerRegion);_templates.default.replaceNodeContents(pickerRegion,html,"")},fetchContentFromRender=(html,js)=>[html,js],getUpdateUserContentFunction=(root,getContentForUser,getGradeForUser,saveGradeForUser)=>{let firstLoad=!0;return async user=>{const spinner=firstLoad?null:(0,_loadingicon.addIconToContainerWithPromise)(root),[[html,js],userGrade]=await Promise.all([getContentForUser(user.id).then(fetchContentFromRender),getGradeForUser(user.id)]);await _templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.moduleReplace),html,js);const[gradingPanelHtml,gradingPanelJS]=await _templates.default.render(userGrade.templatename,userGrade.grade).then(fetchContentFromRender),panelContainer=root.querySelector(_selectors.default.regions.gradingPanelContainer),panel=panelContainer.querySelector(_selectors.default.regions.gradingPanel);await _templates.default.replaceNodeContents(panel,gradingPanelHtml,gradingPanelJS);const form=panel.querySelector("form");return(0,_comparison.fillInitialValues)(form),form.addEventListener("submit",(event=>{saveGradeForUser(user),event.preventDefault()})),panelContainer.scrollTop=0,firstLoad=!1,spinner&&spinner.resolve(),userGrade}},hideSearchResultContainer=(bodyContainer,userPickerContainer,searchResultsContainer)=>{bodyContainer.classList.remove("hidden"),userPickerContainer.classList.remove("hidden"),searchResultsContainer.classList.add("hidden")},hideUserSearchInput=(toggleSearchButton,searchContainer,searchInput)=>{searchContainer.classList.add("collapsed-box"),toggleSearchButton.setAttribute("aria-expanded","false"),toggleSearchButton.classList.add("collapsed"),toggleSearchButton.classList.remove("expanded"),toggleSearchButton.focus();searchContainer.parentElement.querySelector(_selectors.default.regions.gradingInfoContainer).removeAttribute("aria-hidden");const collapseGradingDrawer=searchContainer.parentElement.querySelector(_selectors.default.buttons.collapseGradingDrawer);collapseGradingDrawer.removeAttribute("aria-hidden"),collapseGradingDrawer.setAttribute("tabindex","0"),searchInput.value=""},renderSearchResults=async(searchResultsContainer,users)=>{const{html:html,js:js}=await _templates.default.renderForPromise(templateNames_grader.searchResults,{users:users});await _templates.default.replaceNodeContents(searchResultsContainer,html,js)},registerStaticEventListeners=graderLayout=>{graderLayout.getContainer().addEventListener("click",(e=>e.target.closest(_selectors.default.buttons.toggleFullscreen)?(e.stopImmediatePropagation(),e.preventDefault(),void graderLayout.toggleFullscreen()):e.target.closest(_selectors.default.buttons.closeGrader)?(e.stopImmediatePropagation(),e.preventDefault(),void graderLayout.close()):void 0))},registerDynamicEventListeners=(graderLayout,userPicker,saveGradeFunction,userList)=>{const graderContainer=graderLayout.getContainer(),toggleSearchButton=graderContainer.querySelector(_selectors.default.buttons.toggleSearch),searchInputContainer=graderContainer.querySelector(_selectors.default.regions.userSearchContainer),searchInput=searchInputContainer.querySelector(_selectors.default.regions.userSearchInput),bodyContainer=graderContainer.querySelector(_selectors.default.regions.bodyContainer),userPickerContainer=graderContainer.querySelector(_selectors.default.regions.pickerRegion),searchResultsContainer=graderContainer.querySelector(_selectors.default.regions.searchResultsContainer);graderContainer.addEventListener("click",(e=>{if(e.target.closest(_selectors.default.buttons.saveGrade)&&saveGradeFunction(userPicker.currentUser),e.target.closest(_selectors.default.buttons.toggleSearch))return void("true"===toggleSearchButton.getAttribute("aria-expanded")?(hideUserSearchInput(toggleSearchButton,searchInputContainer,searchInput),hideSearchResultContainer(bodyContainer,userPickerContainer,searchResultsContainer),searchResultsContainer.innerHTML=""):(((toggleSearchButton,searchContainer,searchInput)=>{searchContainer.classList.remove("collapsed-box"),toggleSearchButton.setAttribute("aria-expanded","true"),toggleSearchButton.classList.add("expanded"),toggleSearchButton.classList.remove("collapsed"),searchContainer.parentElement.querySelector(_selectors.default.regions.gradingInfoContainer).setAttribute("aria-hidden","true");const collapseGradingDrawer=searchContainer.parentElement.querySelector(_selectors.default.buttons.collapseGradingDrawer);collapseGradingDrawer.setAttribute("aria-hidden","true"),collapseGradingDrawer.setAttribute("tabindex","-1"),searchInput.focus()})(toggleSearchButton,searchInputContainer,searchInput),((bodyContainer,userPickerContainer,searchResultsContainer)=>{bodyContainer.classList.add("hidden"),userPickerContainer.classList.add("hidden"),searchResultsContainer.classList.remove("hidden")})(bodyContainer,userPickerContainer,searchResultsContainer),renderSearchResults(searchResultsContainer,userList)));const selectUserButton=e.target.closest(_selectors.default.buttons.selectUser);if(selectUserButton){const userId=selectUserButton.getAttribute("data-userid"),user=userList.find((user=>user.id==userId));userPicker.setUserId(userId),userPicker.showUser(user),hideUserSearchInput(toggleSearchButton,searchInputContainer,searchInput),hideSearchResultContainer(bodyContainer,userPickerContainer,searchResultsContainer),searchResultsContainer.innerHTML=""}})),searchInput.addEventListener("input",(0,_utils.debounce)((()=>{const users=((userList,searchTerm)=>""===searchTerm?userList:(searchTerm=searchTerm.toLowerCase(),userList.filter((user=>user.fullname.toLowerCase().includes(searchTerm)))))(userList,searchInput.value);renderSearchResults(searchResultsContainer,users)}),300)),(0,_pubsub.subscribe)(_drawer_events.default.DRAWER_HIDDEN,(drawerRoot=>{drawerRoot[0].querySelector(_selectors.default.regions.gradingPanel)&&setContentContainerMargin(graderContainer,0)})),(0,_pubsub.subscribe)(_drawer_events.default.DRAWER_SHOWN,(drawerRoot=>{const gradingPanel=drawerRoot[0];gradingPanel.querySelector(_selectors.default.regions.gradingPanel)&&setContentContainerMargin(graderContainer,gradingPanel.offsetWidth)}))},setContentContainerMargin=(graderContainer,rightMargin)=>{const contentContainer=graderContainer.querySelector(_selectors.default.regions.moduleContainer);contentContainer&&(contentContainer.style.marginRight="".concat(rightMargin,"px"))},getSaveUserGradeFunction=(root,setGradeForUser)=>async user=>{try{root.querySelector(_selectors.default.regions.gradingPanelErrors).innerHTML="";const result=await setGradeForUser(user.id,root.querySelector(_selectors.default.values.sendStudentNotifications).value,root.querySelector(_selectors.default.regions.gradingPanel));return result.success&&(0,_toast.add)(await(0,_str.getString)("grades:gradesavedfor","mod_forum",user)),result.failed&&displayGradingError(root,user,result.error),result}catch(err){return displayGradingError(root,user,err),(0,_normalise.failedUpdate)(err)}},displayGradingError=async(root,user,err)=>{const[{html:html,js:js},errorString]=await Promise.all([_templates.default.renderForPromise(templateNames_grader.gradingPanel.error,{error:err}),await(0,_str.getString)("grades:gradesavefailed","mod_forum",{error:err.message,...user})]);await _templates.default.replaceNodeContents(root.querySelector(_selectors.default.regions.gradingPanelErrors),html,js),(0,_toast.add)(errorString,{type:"warning"})};_exports.launch=async function(getListOfUsers,getContentForUser,getGradeForUser,setGradeForUser){let{initialUserId:initialUserId=null,moduleName:moduleName,courseName:courseName,courseUrl:courseUrl,sendStudentNotifications:sendStudentNotifications,focusOnClose:focusOnClose=null}=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};const userList=await getListOfUsers();if(!userList.length)return void(0,_notification.addNotification)({message:await(0,_str.getString)("nouserstograde","core_grades"),type:"error"});const pendingPromise=new _pending.default,[graderLayout,{html:html,js:js}]=await Promise.all([(0,_fullscreen.createLayout)({fullscreen:!1,showLoader:!1,focusOnClose:focusOnClose,callerName:await(0,_str.getString)("forumgrader","mod_forum")}),_templates.default.renderForPromise(templateNames_grader.app,{moduleName:moduleName,courseName:courseName,courseUrl:courseUrl,drawer:{show:!0},defaultsendnotifications:sendStudentNotifications})]);registerStaticEventListeners(graderLayout);const graderContainer=graderLayout.getContainer(),saveGradeFunction=getSaveUserGradeFunction(graderContainer,setGradeForUser);await _templates.default.replaceNodeContents(graderContainer,html,js);const updateUserContent=await getUpdateUserContentFunction(graderContainer,getContentForUser,getGradeForUser,saveGradeFunction),userIds=userList.map((user=>user.id)),statusContainer=graderContainer.querySelector(_selectors.default.regions.statusContainer),userPicker=await(0,_user_picker.default)(userList,(async user=>{const pendingPromise=new _pending.default,renderContext={status:(await updateUserContent(user)).hasgrade,index:userIds.indexOf(user.id)+1,total:userList.length};await _templates.default.render(templateNames_grader.status,renderContext).then((html=>(statusContainer.innerHTML=html,html))).catch(),pendingPromise.resolve()}),saveGradeFunction,{initialUserId:initialUserId});pendingPromise.resolve(),registerDynamicEventListeners(graderLayout,userPicker,saveGradeFunction,userList),displayUserPicker(graderContainer,userPicker.rootNode)};_exports.view=async function(getGradeForUser,userid,moduleName){let{focusOnClose:focusOnClose=null}=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const userGrade=await getGradeForUser(userid),[modal,gradeTemplateData]=await Promise.all([_modal_cancel.default.create({title:moduleName,large:!0,removeOnClose:!0,returnElement:focusOnClose,show:!0,body:_templates.default.render("mod_forum/local/grades/view_grade",userGrade)}),renderGradeTemplate(userGrade)]),bodyPromise=await modal.getBodyPromise(),gradeReplace=bodyPromise[0].querySelector('[data-region="grade-template"]');_templates.default.replaceNodeContents(gradeReplace,gradeTemplateData.html,gradeTemplateData.js)};const renderGradeTemplate=userGrade=>_templates.default.renderForPromise(userGrade.templatename,userGrade.grade)}));
 
 //# sourceMappingURL=grader.min.js.map
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/grades/grader.min.js.map b/mod/forum/amd/build/local/grades/grader.min.js.map
index 8c63830a456a1..1245cc2ff84ce 100644
--- a/mod/forum/amd/build/local/grades/grader.min.js.map
+++ b/mod/forum/amd/build/local/grades/grader.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"grader.min.js","sources":["../../../src/local/grades/grader.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * This module will tie together all of the different calls the gradable module will make.\n *\n * @module     mod_forum/local/grades/grader\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Templates from 'core/templates';\nimport Selectors from './local/grader/selectors';\nimport getUserPicker from './local/grader/user_picker';\nimport {createLayout as createFullScreenWindow} from 'mod_forum/local/layout/fullscreen';\nimport getGradingPanelFunctions from './local/grader/gradingpanel';\nimport {add as addToast} from 'core/toast';\nimport {addNotification} from 'core/notification';\nimport {getString} from 'core/str';\nimport {failedUpdate} from 'core_grades/grades/grader/gradingpanel/normalise';\nimport {addIconToContainerWithPromise} from 'core/loadingicon';\nimport {debounce} from 'core/utils';\nimport {fillInitialValues} from 'core_grades/grades/grader/gradingpanel/comparison';\nimport Modal from 'core/modal_cancel';\nimport {subscribe} from 'core/pubsub';\nimport DrawerEvents from 'core/drawer_events';\n\nconst templateNames = {\n    grader: {\n        app: 'mod_forum/local/grades/grader',\n        gradingPanel: {\n            error: 'mod_forum/local/grades/local/grader/gradingpanel/error',\n        },\n        searchResults: 'mod_forum/local/grades/local/grader/user_picker/user_search',\n        status: 'mod_forum/local/grades/local/grader/status',\n    },\n};\n\n/**\n * Helper function that replaces the user picker placeholder with what we get back from the user picker class.\n *\n * @param {HTMLElement} root\n * @param {String} html\n */\nconst displayUserPicker = (root, html) => {\n    const pickerRegion = root.querySelector(Selectors.regions.pickerRegion);\n    Templates.replaceNodeContents(pickerRegion, html, '');\n};\n\n/**\n * To be removed, this is now done as a part of Templates.renderForPromise()\n *\n * @param {String} html\n * @param {String} js\n * @returns {array} An array containing the HTML, and JS.\n */\nconst fetchContentFromRender = (html, js) => {\n    return [html, js];\n};\n\n/**\n * Here we build the function that is passed to the user picker that'll handle updating the user content area\n * of the grading interface.\n *\n * @param {HTMLElement} root\n * @param {Function} getContentForUser\n * @param {Function} getGradeForUser\n * @param {Function} saveGradeForUser\n * @return {Function}\n */\nconst getUpdateUserContentFunction = (root, getContentForUser, getGradeForUser, saveGradeForUser) => {\n    let firstLoad = true;\n\n    return async(user) => {\n        const spinner = firstLoad ? null : addIconToContainerWithPromise(root);\n        const [\n            [html, js],\n            userGrade,\n        ] = await Promise.all([\n            getContentForUser(user.id).then(fetchContentFromRender),\n            getGradeForUser(user.id),\n        ]);\n        Templates.replaceNodeContents(root.querySelector(Selectors.regions.moduleReplace), html, js);\n\n        const [\n            gradingPanelHtml,\n            gradingPanelJS\n        ] = await Templates.render(userGrade.templatename, userGrade.grade).then(fetchContentFromRender);\n        const panelContainer = root.querySelector(Selectors.regions.gradingPanelContainer);\n        const panel = panelContainer.querySelector(Selectors.regions.gradingPanel);\n        Templates.replaceNodeContents(panel, gradingPanelHtml, gradingPanelJS);\n\n        const form = panel.querySelector('form');\n        fillInitialValues(form);\n\n        form.addEventListener('submit', event => {\n            saveGradeForUser(user);\n            event.preventDefault();\n        });\n\n        panelContainer.scrollTop = 0;\n        firstLoad = false;\n\n        if (spinner) {\n            spinner.resolve();\n        }\n        return userGrade;\n    };\n};\n\n/**\n * Show the search results container and hide the user picker and body content.\n *\n * @param {HTMLElement} bodyContainer The container element for the body content\n * @param {HTMLElement} userPickerContainer The container element for the user picker\n * @param {HTMLElement} searchResultsContainer The container element for the search results\n */\nconst showSearchResultContainer = (bodyContainer, userPickerContainer, searchResultsContainer) => {\n    bodyContainer.classList.add('hidden');\n    userPickerContainer.classList.add('hidden');\n    searchResultsContainer.classList.remove('hidden');\n};\n\n/**\n * Hide the search results container and show the user picker and body content.\n *\n * @param {HTMLElement} bodyContainer The container element for the body content\n * @param {HTMLElement} userPickerContainer The container element for the user picker\n * @param {HTMLElement} searchResultsContainer The container element for the search results\n */\nconst hideSearchResultContainer = (bodyContainer, userPickerContainer, searchResultsContainer) => {\n    bodyContainer.classList.remove('hidden');\n    userPickerContainer.classList.remove('hidden');\n    searchResultsContainer.classList.add('hidden');\n};\n\n/**\n * Toggles the visibility of the user search.\n *\n * @param {HTMLElement} toggleSearchButton The button that toggles the search\n * @param {HTMLElement} searchContainer The container element for the user search\n * @param {HTMLElement} searchInput The input element for searching\n */\nconst showUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {\n    searchContainer.classList.remove('collapsed');\n    toggleSearchButton.setAttribute('aria-expanded', 'true');\n    toggleSearchButton.classList.add('expand');\n    toggleSearchButton.classList.remove('collapse');\n\n    // Hide the grading info container from screen reader.\n    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);\n    gradingInfoContainer.setAttribute('aria-hidden', 'true');\n\n    // Hide the collapse grading drawer button from screen reader.\n    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);\n    collapseGradingDrawer.setAttribute('aria-hidden', 'true');\n    collapseGradingDrawer.setAttribute('tabindex', '-1');\n\n    searchInput.focus();\n};\n\n/**\n * Toggles the visibility of the user search.\n *\n * @param {HTMLElement} toggleSearchButton The button that toggles the search\n * @param {HTMLElement} searchContainer The container element for the user search\n * @param {HTMLElement} searchInput The input element for searching\n */\nconst hideUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {\n    searchContainer.classList.add('collapsed');\n    toggleSearchButton.setAttribute('aria-expanded', 'false');\n    toggleSearchButton.classList.add('collapse');\n    toggleSearchButton.classList.remove('expand');\n    toggleSearchButton.focus();\n\n    // Show the grading info container to screen reader.\n    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);\n    gradingInfoContainer.removeAttribute('aria-hidden');\n\n    // Show the collapse grading drawer button from screen reader.\n    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);\n    collapseGradingDrawer.removeAttribute('aria-hidden');\n    collapseGradingDrawer.setAttribute('tabindex', '0');\n\n    searchInput.value = '';\n};\n\n/**\n * Find the list of users who's names include the given search term.\n *\n * @param {Array} userList List of users for the grader\n * @param {String} searchTerm The search term to match\n * @return {Array}\n */\nconst searchForUsers = (userList, searchTerm) => {\n    if (searchTerm === '') {\n        return userList;\n    }\n\n    searchTerm = searchTerm.toLowerCase();\n\n    return userList.filter((user) => {\n        return user.fullname.toLowerCase().includes(searchTerm);\n    });\n};\n\n/**\n * Render the list of users in the search results area.\n *\n * @param {HTMLElement} searchResultsContainer The container element for search results\n * @param {Array} users The list of users to display\n */\nconst renderSearchResults = async(searchResultsContainer, users) => {\n    const {html, js} = await Templates.renderForPromise(templateNames.grader.searchResults, {users});\n    Templates.replaceNodeContents(searchResultsContainer, html, js);\n};\n\n/**\n * Add click handlers to the buttons in the header of the grading interface.\n *\n * @param {HTMLElement} graderLayout\n * @param {Object} userPicker\n * @param {Function} saveGradeFunction\n * @param {Array} userList List of users for the grader.\n */\nconst registerEventListeners = (graderLayout, userPicker, saveGradeFunction, userList) => {\n    const graderContainer = graderLayout.getContainer();\n    const toggleSearchButton = graderContainer.querySelector(Selectors.buttons.toggleSearch);\n    const searchInputContainer = graderContainer.querySelector(Selectors.regions.userSearchContainer);\n    const searchInput = searchInputContainer.querySelector(Selectors.regions.userSearchInput);\n    const bodyContainer = graderContainer.querySelector(Selectors.regions.bodyContainer);\n    const userPickerContainer = graderContainer.querySelector(Selectors.regions.pickerRegion);\n    const searchResultsContainer = graderContainer.querySelector(Selectors.regions.searchResultsContainer);\n\n    graderContainer.addEventListener('click', (e) => {\n        if (e.target.closest(Selectors.buttons.toggleFullscreen)) {\n            e.stopImmediatePropagation();\n            e.preventDefault();\n            graderLayout.toggleFullscreen();\n\n            return;\n        }\n\n        if (e.target.closest(Selectors.buttons.closeGrader)) {\n            e.stopImmediatePropagation();\n            e.preventDefault();\n\n            graderLayout.close();\n\n            return;\n        }\n\n        if (e.target.closest(Selectors.buttons.saveGrade)) {\n            saveGradeFunction(userPicker.currentUser);\n        }\n\n        if (e.target.closest(Selectors.buttons.toggleSearch)) {\n            if (toggleSearchButton.getAttribute('aria-expanded') === 'true') {\n                // Search is open so let's close it.\n                hideUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n                hideSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n                searchResultsContainer.innerHTML = '';\n            } else {\n                // Search is closed so let's open it.\n                showUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n                showSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n                renderSearchResults(searchResultsContainer, userList);\n            }\n\n            return;\n        }\n\n        const selectUserButton = e.target.closest(Selectors.buttons.selectUser);\n        if (selectUserButton) {\n            const userId = selectUserButton.getAttribute('data-userid');\n            const user = userList.find(user => user.id == userId);\n            userPicker.setUserId(userId);\n            userPicker.showUser(user);\n            hideUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n            hideSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n            searchResultsContainer.innerHTML = '';\n        }\n    });\n\n    // Debounce the search input so that it only executes 300 milliseconds after the user has finished typing.\n    searchInput.addEventListener('input', debounce(() => {\n        const users = searchForUsers(userList, searchInput.value);\n        renderSearchResults(searchResultsContainer, users);\n    }, 300));\n\n    // Remove the right margin of the content container when the grading panel is hidden so that it expands to full-width.\n    subscribe(DrawerEvents.DRAWER_HIDDEN, (drawerRoot) => {\n        const gradingPanel = drawerRoot[0];\n        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {\n            setContentContainerMargin(graderContainer, 0);\n        }\n    });\n\n    // Bring back the right margin of the content container when the grading panel is shown to give space for the grading panel.\n    subscribe(DrawerEvents.DRAWER_SHOWN, (drawerRoot) => {\n        const gradingPanel = drawerRoot[0];\n        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {\n            setContentContainerMargin(graderContainer, gradingPanel.offsetWidth);\n        }\n    });\n};\n\n/**\n * Adjusts the right margin of the content container.\n *\n * @param {HTMLElement} graderContainer The container for the grader app.\n * @param {Number} rightMargin The right margin value.\n */\nconst setContentContainerMargin = (graderContainer, rightMargin) => {\n    const contentContainer = graderContainer.querySelector(Selectors.regions.moduleContainer);\n    if (contentContainer) {\n        contentContainer.style.marginRight = `${rightMargin}px`;\n    }\n};\n\n/**\n * Get the function used to save a user grade.\n *\n * @param {HTMLElement} root The container for the grader\n * @param {Function} setGradeForUser The function that will be called.\n * @return {Function}\n */\nconst getSaveUserGradeFunction = (root, setGradeForUser) => {\n    return async(user) => {\n        try {\n            root.querySelector(Selectors.regions.gradingPanelErrors).innerHTML = '';\n            const result = await setGradeForUser(\n                user.id,\n                root.querySelector(Selectors.values.sendStudentNotifications).value,\n                root.querySelector(Selectors.regions.gradingPanel)\n            );\n            if (result.success) {\n                addToast(await getString('grades:gradesavedfor', 'mod_forum', user));\n            }\n            if (result.failed) {\n                displayGradingError(root, user, result.error);\n            }\n\n            return result;\n        } catch (err) {\n            displayGradingError(root, user, err);\n\n            return failedUpdate(err);\n        }\n    };\n};\n\n/**\n * Display a grading error, typically from a failed save.\n *\n * @param {HTMLElement} root The container for the grader\n * @param {Object} user The user who was errored\n * @param {Object} err The details of the error\n */\nconst displayGradingError = async(root, user, err) => {\n    const [\n        {html, js},\n        errorString\n    ] = await Promise.all([\n        Templates.renderForPromise(templateNames.grader.gradingPanel.error, {error: err}),\n        await getString('grades:gradesavefailed', 'mod_forum', {error: err.message, ...user}),\n    ]);\n\n    Templates.replaceNodeContents(root.querySelector(Selectors.regions.gradingPanelErrors), html, js);\n    addToast(errorString, {type: 'warning'});\n};\n\n/**\n * Launch the grader interface with the specified parameters.\n *\n * @param {Function} getListOfUsers A function to get the list of users\n * @param {Function} getContentForUser A function to get the content for a specific user\n * @param {Function} getGradeForUser A function get the grade details for a specific user\n * @param {Function} setGradeForUser A function to set the grade for a specific user\n * @param {Object} preferences Preferences for the launch function\n * @param {Number} preferences.initialUserId\n * @param {string} preferences.moduleName\n * @param {string} preferences.courseName\n * @param {string} preferences.courseUrl\n * @param {boolean} preferences.sendStudentNotifications\n * @param {null|HTMLElement} preferences.focusOnClose\n */\nexport const launch = async(getListOfUsers, getContentForUser, getGradeForUser, setGradeForUser, {\n    initialUserId = null,\n    moduleName,\n    courseName,\n    courseUrl,\n    sendStudentNotifications,\n    focusOnClose = null,\n} = {}) => {\n\n    // We need all of these functions to be executed in series, if one step runs before another the interface\n    // will not work.\n\n    // We need this promise to resolve separately so that we can avoid loading the whole interface if there are no users.\n    const userList = await getListOfUsers();\n    if (!userList.length) {\n        addNotification({\n            message: await getString('nouserstograde', 'core_grades'),\n            type: \"error\",\n        });\n        return;\n    }\n\n    // Now that we have confirmed there are at least some users let's boot up the grader interface.\n    const [\n        graderLayout,\n        {html, js},\n    ] = await Promise.all([\n        createFullScreenWindow({\n            fullscreen: false,\n            showLoader: false,\n            focusOnClose,\n        }),\n        Templates.renderForPromise(templateNames.grader.app, {\n            moduleName,\n            courseName,\n            courseUrl,\n            drawer: {show: true},\n            defaultsendnotifications: sendStudentNotifications,\n        }),\n    ]);\n\n    const graderContainer = graderLayout.getContainer();\n\n    const saveGradeFunction = getSaveUserGradeFunction(graderContainer, setGradeForUser);\n\n    Templates.replaceNodeContents(graderContainer, html, js);\n    const updateUserContent = getUpdateUserContentFunction(graderContainer, getContentForUser, getGradeForUser, saveGradeFunction);\n\n    const userIds = userList.map(user => user.id);\n    const statusContainer = graderContainer.querySelector(Selectors.regions.statusContainer);\n    // Fetch the userpicker for display.\n    const userPicker = await getUserPicker(\n        userList,\n        async(user) => {\n            const userGrade = await updateUserContent(user);\n            const renderContext = {\n                status: userGrade.hasgrade,\n                index: userIds.indexOf(user.id) + 1,\n                total: userList.length\n            };\n            Templates.render(templateNames.grader.status, renderContext).then(html => {\n                statusContainer.innerHTML = html;\n                return html;\n            }).catch();\n        },\n        saveGradeFunction,\n        {\n            initialUserId,\n        },\n    );\n\n    // Register all event listeners.\n    registerEventListeners(graderLayout, userPicker, saveGradeFunction, userList);\n\n    // Display the newly created user picker.\n    displayUserPicker(graderContainer, userPicker.rootNode);\n};\n\n/**\n * Show the grade for a specific user.\n *\n * @param {Function} getGradeForUser A function get the grade details for a specific user\n * @param {Number} userid The ID of a specific user\n * @param {String} moduleName the name of the module\n * @param {object} param\n * @param {null|HTMLElement} param.focusOnClose\n */\nexport const view = async(getGradeForUser, userid, moduleName, {\n    focusOnClose = null,\n} = {}) => {\n\n    const userGrade = await getGradeForUser(userid);\n\n    const [\n        modal,\n        gradeTemplateData\n    ] = await Promise.all([\n        Modal.create({\n            title: moduleName,\n            large: true,\n            removeOnClose: true,\n            returnElement: focusOnClose,\n            show: true,\n            body: Templates.render('mod_forum/local/grades/view_grade', userGrade),\n        }),\n        renderGradeTemplate(userGrade)\n    ]);\n\n    const bodyPromise = await modal.getBodyPromise();\n    const gradeReplace = bodyPromise[0].querySelector('[data-region=\"grade-template\"]');\n    Templates.replaceNodeContents(gradeReplace, gradeTemplateData.html, gradeTemplateData.js);\n};\n\nconst renderGradeTemplate = (userGrade) => Templates.renderForPromise(userGrade.templatename, userGrade.grade);\n\nexport {getGradingPanelFunctions};\n"],"names":["templateNames","app","gradingPanel","error","searchResults","status","displayUserPicker","root","html","pickerRegion","querySelector","Selectors","regions","replaceNodeContents","fetchContentFromRender","js","getUpdateUserContentFunction","getContentForUser","getGradeForUser","saveGradeForUser","firstLoad","async","spinner","userGrade","Promise","all","user","id","then","moduleReplace","gradingPanelHtml","gradingPanelJS","Templates","render","templatename","grade","panelContainer","gradingPanelContainer","panel","form","addEventListener","event","preventDefault","scrollTop","resolve","hideSearchResultContainer","bodyContainer","userPickerContainer","searchResultsContainer","classList","remove","add","hideUserSearchInput","toggleSearchButton","searchContainer","searchInput","setAttribute","focus","parentElement","gradingInfoContainer","removeAttribute","collapseGradingDrawer","buttons","value","renderSearchResults","users","renderForPromise","registerEventListeners","graderLayout","userPicker","saveGradeFunction","userList","graderContainer","getContainer","toggleSearch","searchInputContainer","userSearchContainer","userSearchInput","e","target","closest","toggleFullscreen","stopImmediatePropagation","closeGrader","close","saveGrade","currentUser","getAttribute","innerHTML","showUserSearchInput","showSearchResultContainer","selectUserButton","selectUser","userId","find","setUserId","showUser","searchTerm","toLowerCase","filter","fullname","includes","searchForUsers","DrawerEvents","DRAWER_HIDDEN","drawerRoot","setContentContainerMargin","DRAWER_SHOWN","offsetWidth","rightMargin","contentContainer","moduleContainer","style","marginRight","getSaveUserGradeFunction","setGradeForUser","gradingPanelErrors","result","values","sendStudentNotifications","success","failed","displayGradingError","err","errorString","message","type","getListOfUsers","initialUserId","moduleName","courseName","courseUrl","focusOnClose","length","fullscreen","showLoader","drawer","show","defaultsendnotifications","updateUserContent","userIds","map","statusContainer","renderContext","hasgrade","index","indexOf","total","catch","rootNode","userid","modal","gradeTemplateData","Modal","create","title","large","removeOnClose","returnElement","body","renderGradeTemplate","bodyPromise","getBodyPromise","gradeReplace"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"grader.min.js","sources":["../../../src/local/grades/grader.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * This module will tie together all of the different calls the gradable module will make.\n *\n * @module     mod_forum/local/grades/grader\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Templates from 'core/templates';\nimport Selectors from './local/grader/selectors';\nimport getUserPicker from './local/grader/user_picker';\nimport {createLayout as createFullScreenWindow} from 'mod_forum/local/layout/fullscreen';\nimport getGradingPanelFunctions from './local/grader/gradingpanel';\nimport {add as addToast} from 'core/toast';\nimport {addNotification} from 'core/notification';\nimport {getString} from 'core/str';\nimport {failedUpdate} from 'core_grades/grades/grader/gradingpanel/normalise';\nimport {addIconToContainerWithPromise} from 'core/loadingicon';\nimport {debounce} from 'core/utils';\nimport {fillInitialValues} from 'core_grades/grades/grader/gradingpanel/comparison';\nimport Modal from 'core/modal_cancel';\nimport {subscribe} from 'core/pubsub';\nimport DrawerEvents from 'core/drawer_events';\nimport Pending from 'core/pending';\n\nconst templateNames = {\n    grader: {\n        app: 'mod_forum/local/grades/grader',\n        gradingPanel: {\n            error: 'mod_forum/local/grades/local/grader/gradingpanel/error',\n        },\n        searchResults: 'mod_forum/local/grades/local/grader/user_picker/user_search',\n        status: 'mod_forum/local/grades/local/grader/status',\n    },\n};\n\n/**\n * Helper function that replaces the user picker placeholder with what we get back from the user picker class.\n *\n * @param {HTMLElement} root\n * @param {String} html\n */\nconst displayUserPicker = (root, html) => {\n    const pickerRegion = root.querySelector(Selectors.regions.pickerRegion);\n    Templates.replaceNodeContents(pickerRegion, html, '');\n};\n\n/**\n * To be removed, this is now done as a part of Templates.renderForPromise()\n *\n * @param {String} html\n * @param {String} js\n * @returns {array} An array containing the HTML, and JS.\n */\nconst fetchContentFromRender = (html, js) => {\n    return [html, js];\n};\n\n/**\n * Here we build the function that is passed to the user picker that'll handle updating the user content area\n * of the grading interface.\n *\n * @param {HTMLElement} root\n * @param {Function} getContentForUser\n * @param {Function} getGradeForUser\n * @param {Function} saveGradeForUser\n * @return {Function}\n */\nconst getUpdateUserContentFunction = (root, getContentForUser, getGradeForUser, saveGradeForUser) => {\n    let firstLoad = true;\n\n    return async(user) => {\n        const spinner = firstLoad ? null : addIconToContainerWithPromise(root);\n        const [\n            [html, js],\n            userGrade,\n        ] = await Promise.all([\n            getContentForUser(user.id).then(fetchContentFromRender),\n            getGradeForUser(user.id),\n        ]);\n        await Templates.replaceNodeContents(root.querySelector(Selectors.regions.moduleReplace), html, js);\n\n        const [\n            gradingPanelHtml,\n            gradingPanelJS\n        ] = await Templates.render(userGrade.templatename, userGrade.grade).then(fetchContentFromRender);\n        const panelContainer = root.querySelector(Selectors.regions.gradingPanelContainer);\n        const panel = panelContainer.querySelector(Selectors.regions.gradingPanel);\n        await Templates.replaceNodeContents(panel, gradingPanelHtml, gradingPanelJS);\n\n        const form = panel.querySelector('form');\n        fillInitialValues(form);\n\n        form.addEventListener('submit', event => {\n            saveGradeForUser(user);\n            event.preventDefault();\n        });\n\n        panelContainer.scrollTop = 0;\n        firstLoad = false;\n\n        if (spinner) {\n            spinner.resolve();\n        }\n        return userGrade;\n    };\n};\n\n/**\n * Show the search results container and hide the user picker and body content.\n *\n * @param {HTMLElement} bodyContainer The container element for the body content\n * @param {HTMLElement} userPickerContainer The container element for the user picker\n * @param {HTMLElement} searchResultsContainer The container element for the search results\n */\nconst showSearchResultContainer = (bodyContainer, userPickerContainer, searchResultsContainer) => {\n    bodyContainer.classList.add('hidden');\n    userPickerContainer.classList.add('hidden');\n    searchResultsContainer.classList.remove('hidden');\n};\n\n/**\n * Hide the search results container and show the user picker and body content.\n *\n * @param {HTMLElement} bodyContainer The container element for the body content\n * @param {HTMLElement} userPickerContainer The container element for the user picker\n * @param {HTMLElement} searchResultsContainer The container element for the search results\n */\nconst hideSearchResultContainer = (bodyContainer, userPickerContainer, searchResultsContainer) => {\n    bodyContainer.classList.remove('hidden');\n    userPickerContainer.classList.remove('hidden');\n    searchResultsContainer.classList.add('hidden');\n};\n\n/**\n * Toggles the visibility of the user search.\n *\n * @param {HTMLElement} toggleSearchButton The button that toggles the search\n * @param {HTMLElement} searchContainer The container element for the user search\n * @param {HTMLElement} searchInput The input element for searching\n */\nconst showUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {\n    searchContainer.classList.remove('collapsed-box');\n    toggleSearchButton.setAttribute('aria-expanded', 'true');\n    toggleSearchButton.classList.add('expanded');\n    toggleSearchButton.classList.remove('collapsed');\n\n    // Hide the grading info container from screen reader.\n    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);\n    gradingInfoContainer.setAttribute('aria-hidden', 'true');\n\n    // Hide the collapse grading drawer button from screen reader.\n    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);\n    collapseGradingDrawer.setAttribute('aria-hidden', 'true');\n    collapseGradingDrawer.setAttribute('tabindex', '-1');\n\n    searchInput.focus();\n};\n\n/**\n * Toggles the visibility of the user search.\n *\n * @param {HTMLElement} toggleSearchButton The button that toggles the search\n * @param {HTMLElement} searchContainer The container element for the user search\n * @param {HTMLElement} searchInput The input element for searching\n */\nconst hideUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {\n    searchContainer.classList.add('collapsed-box');\n    toggleSearchButton.setAttribute('aria-expanded', 'false');\n    toggleSearchButton.classList.add('collapsed');\n    toggleSearchButton.classList.remove('expanded');\n    toggleSearchButton.focus();\n\n    // Show the grading info container to screen reader.\n    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);\n    gradingInfoContainer.removeAttribute('aria-hidden');\n\n    // Show the collapse grading drawer button from screen reader.\n    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);\n    collapseGradingDrawer.removeAttribute('aria-hidden');\n    collapseGradingDrawer.setAttribute('tabindex', '0');\n\n    searchInput.value = '';\n};\n\n/**\n * Find the list of users who's names include the given search term.\n *\n * @param {Array} userList List of users for the grader\n * @param {String} searchTerm The search term to match\n * @return {Array}\n */\nconst searchForUsers = (userList, searchTerm) => {\n    if (searchTerm === '') {\n        return userList;\n    }\n\n    searchTerm = searchTerm.toLowerCase();\n\n    return userList.filter((user) => {\n        return user.fullname.toLowerCase().includes(searchTerm);\n    });\n};\n\n/**\n * Render the list of users in the search results area.\n *\n * @param {HTMLElement} searchResultsContainer The container element for search results\n * @param {Array} users The list of users to display\n */\nconst renderSearchResults = async(searchResultsContainer, users) => {\n    const {html, js} = await Templates.renderForPromise(templateNames.grader.searchResults, {users});\n    await Templates.replaceNodeContents(searchResultsContainer, html, js);\n};\n\n/**\n * Add click handlers to the buttons in the header of the grading interface.\n *\n * @param {HTMLElement} graderLayout\n */\nconst registerStaticEventListeners = (graderLayout) => {\n    const graderContainer = graderLayout.getContainer();\n    graderContainer.addEventListener('click', (e) => {\n        if (e.target.closest(Selectors.buttons.toggleFullscreen)) {\n            e.stopImmediatePropagation();\n            e.preventDefault();\n            graderLayout.toggleFullscreen();\n\n            return;\n        }\n\n        if (e.target.closest(Selectors.buttons.closeGrader)) {\n            e.stopImmediatePropagation();\n            e.preventDefault();\n\n            graderLayout.close();\n\n            return;\n        }\n    });\n};\n\n/**\n * Add click handlers to the buttons that often have their content changed.\n *\n * @param {HTMLElement} graderLayout\n * @param {Object} userPicker\n * @param {Function} saveGradeFunction\n * @param {Array} userList List of users for the grader.\n */\nconst registerDynamicEventListeners = (graderLayout, userPicker, saveGradeFunction, userList) => {\n    const graderContainer = graderLayout.getContainer();\n    const toggleSearchButton = graderContainer.querySelector(Selectors.buttons.toggleSearch);\n    const searchInputContainer = graderContainer.querySelector(Selectors.regions.userSearchContainer);\n    const searchInput = searchInputContainer.querySelector(Selectors.regions.userSearchInput);\n    const bodyContainer = graderContainer.querySelector(Selectors.regions.bodyContainer);\n    const userPickerContainer = graderContainer.querySelector(Selectors.regions.pickerRegion);\n    const searchResultsContainer = graderContainer.querySelector(Selectors.regions.searchResultsContainer);\n\n    graderContainer.addEventListener('click', (e) => {\n\n        if (e.target.closest(Selectors.buttons.saveGrade)) {\n            saveGradeFunction(userPicker.currentUser);\n        }\n\n        if (e.target.closest(Selectors.buttons.toggleSearch)) {\n            if (toggleSearchButton.getAttribute('aria-expanded') === 'true') {\n                // Search is open so let's close it.\n                hideUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n                hideSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n                searchResultsContainer.innerHTML = '';\n            } else {\n                // Search is closed so let's open it.\n                showUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n                showSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n                renderSearchResults(searchResultsContainer, userList);\n            }\n\n            return;\n        }\n\n        const selectUserButton = e.target.closest(Selectors.buttons.selectUser);\n        if (selectUserButton) {\n            const userId = selectUserButton.getAttribute('data-userid');\n            const user = userList.find(user => user.id == userId);\n            userPicker.setUserId(userId);\n            userPicker.showUser(user);\n            hideUserSearchInput(toggleSearchButton, searchInputContainer, searchInput);\n            hideSearchResultContainer(bodyContainer, userPickerContainer, searchResultsContainer);\n            searchResultsContainer.innerHTML = '';\n        }\n    });\n\n    // Debounce the search input so that it only executes 300 milliseconds after the user has finished typing.\n    searchInput.addEventListener('input', debounce(() => {\n        const users = searchForUsers(userList, searchInput.value);\n        renderSearchResults(searchResultsContainer, users);\n    }, 300));\n\n    // Remove the right margin of the content container when the grading panel is hidden so that it expands to full-width.\n    subscribe(DrawerEvents.DRAWER_HIDDEN, (drawerRoot) => {\n        const gradingPanel = drawerRoot[0];\n        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {\n            setContentContainerMargin(graderContainer, 0);\n        }\n    });\n\n    // Bring back the right margin of the content container when the grading panel is shown to give space for the grading panel.\n    subscribe(DrawerEvents.DRAWER_SHOWN, (drawerRoot) => {\n        const gradingPanel = drawerRoot[0];\n        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {\n            setContentContainerMargin(graderContainer, gradingPanel.offsetWidth);\n        }\n    });\n};\n\n/**\n * Adjusts the right margin of the content container.\n *\n * @param {HTMLElement} graderContainer The container for the grader app.\n * @param {Number} rightMargin The right margin value.\n */\nconst setContentContainerMargin = (graderContainer, rightMargin) => {\n    const contentContainer = graderContainer.querySelector(Selectors.regions.moduleContainer);\n    if (contentContainer) {\n        contentContainer.style.marginRight = `${rightMargin}px`;\n    }\n};\n\n/**\n * Get the function used to save a user grade.\n *\n * @param {HTMLElement} root The container for the grader\n * @param {Function} setGradeForUser The function that will be called.\n * @return {Function}\n */\nconst getSaveUserGradeFunction = (root, setGradeForUser) => {\n    return async(user) => {\n        try {\n            root.querySelector(Selectors.regions.gradingPanelErrors).innerHTML = '';\n            const result = await setGradeForUser(\n                user.id,\n                root.querySelector(Selectors.values.sendStudentNotifications).value,\n                root.querySelector(Selectors.regions.gradingPanel)\n            );\n            if (result.success) {\n                addToast(await getString('grades:gradesavedfor', 'mod_forum', user));\n            }\n            if (result.failed) {\n                displayGradingError(root, user, result.error);\n            }\n\n            return result;\n        } catch (err) {\n            displayGradingError(root, user, err);\n\n            return failedUpdate(err);\n        }\n    };\n};\n\n/**\n * Display a grading error, typically from a failed save.\n *\n * @param {HTMLElement} root The container for the grader\n * @param {Object} user The user who was errored\n * @param {Object} err The details of the error\n */\nconst displayGradingError = async(root, user, err) => {\n    const [\n        {html, js},\n        errorString\n    ] = await Promise.all([\n        Templates.renderForPromise(templateNames.grader.gradingPanel.error, {error: err}),\n        await getString('grades:gradesavefailed', 'mod_forum', {error: err.message, ...user}),\n    ]);\n\n    await Templates.replaceNodeContents(root.querySelector(Selectors.regions.gradingPanelErrors), html, js);\n    addToast(errorString, {type: 'warning'});\n};\n\n/**\n * Launch the grader interface with the specified parameters.\n *\n * @param {Function} getListOfUsers A function to get the list of users\n * @param {Function} getContentForUser A function to get the content for a specific user\n * @param {Function} getGradeForUser A function get the grade details for a specific user\n * @param {Function} setGradeForUser A function to set the grade for a specific user\n * @param {Object} preferences Preferences for the launch function\n * @param {Number} preferences.initialUserId\n * @param {string} preferences.moduleName\n * @param {string} preferences.courseName\n * @param {string} preferences.courseUrl\n * @param {boolean} preferences.sendStudentNotifications\n * @param {null|HTMLElement} preferences.focusOnClose\n */\nexport const launch = async(getListOfUsers, getContentForUser, getGradeForUser, setGradeForUser, {\n    initialUserId = null,\n    moduleName,\n    courseName,\n    courseUrl,\n    sendStudentNotifications,\n    focusOnClose = null,\n} = {}) => {\n\n    // We need all of these functions to be executed in series, if one step runs before another the interface\n    // will not work.\n\n    // We need this promise to resolve separately so that we can avoid loading the whole interface if there are no users.\n    const userList = await getListOfUsers();\n    if (!userList.length) {\n        addNotification({\n            message: await getString('nouserstograde', 'core_grades'),\n            type: \"error\",\n        });\n        return;\n    }\n\n    const pendingPromise = new Pending();\n    // Now that we have confirmed there are at least some users let's boot up the grader interface.\n    const [\n        graderLayout,\n        {html, js},\n    ] = await Promise.all([\n        createFullScreenWindow({\n            fullscreen: false,\n            showLoader: false,\n            focusOnClose,\n            callerName: await getString('forumgrader', 'mod_forum'),\n        }),\n        Templates.renderForPromise(templateNames.grader.app, {\n            moduleName,\n            courseName,\n            courseUrl,\n            drawer: {show: true},\n            defaultsendnotifications: sendStudentNotifications,\n        }),\n    ]);\n\n    registerStaticEventListeners(graderLayout);\n\n    const graderContainer = graderLayout.getContainer();\n\n    const saveGradeFunction = getSaveUserGradeFunction(graderContainer, setGradeForUser);\n\n    await Templates.replaceNodeContents(graderContainer, html, js);\n    const updateUserContent = await getUpdateUserContentFunction(\n        graderContainer,\n        getContentForUser,\n        getGradeForUser,\n        saveGradeFunction\n    );\n\n    const userIds = userList.map(user => user.id);\n    const statusContainer = graderContainer.querySelector(Selectors.regions.statusContainer);\n    // Fetch the userpicker for display.\n    const userPicker = await getUserPicker(\n        userList,\n        async(user) => {\n            const pendingPromise = new Pending();\n            const userGrade = await updateUserContent(user);\n            const renderContext = {\n                status: userGrade.hasgrade,\n                index: userIds.indexOf(user.id) + 1,\n                total: userList.length\n            };\n            await Templates.render(templateNames.grader.status, renderContext).then(html => {\n                statusContainer.innerHTML = html;\n                return html;\n            }).catch();\n            pendingPromise.resolve();\n        },\n        saveGradeFunction,\n        {\n            initialUserId,\n        },\n    );\n\n    pendingPromise.resolve();\n    // Register all event listeners.\n    registerDynamicEventListeners(graderLayout, userPicker, saveGradeFunction, userList);\n\n    // Display the newly created user picker.\n    displayUserPicker(graderContainer, userPicker.rootNode);\n};\n\n/**\n * Show the grade for a specific user.\n *\n * @param {Function} getGradeForUser A function get the grade details for a specific user\n * @param {Number} userid The ID of a specific user\n * @param {String} moduleName the name of the module\n * @param {object} param\n * @param {null|HTMLElement} param.focusOnClose\n */\nexport const view = async(getGradeForUser, userid, moduleName, {\n    focusOnClose = null,\n} = {}) => {\n\n    const userGrade = await getGradeForUser(userid);\n\n    const [\n        modal,\n        gradeTemplateData\n    ] = await Promise.all([\n        Modal.create({\n            title: moduleName,\n            large: true,\n            removeOnClose: true,\n            returnElement: focusOnClose,\n            show: true,\n            body: Templates.render('mod_forum/local/grades/view_grade', userGrade),\n        }),\n        renderGradeTemplate(userGrade)\n    ]);\n\n    const bodyPromise = await modal.getBodyPromise();\n    const gradeReplace = bodyPromise[0].querySelector('[data-region=\"grade-template\"]');\n    Templates.replaceNodeContents(gradeReplace, gradeTemplateData.html, gradeTemplateData.js);\n};\n\nconst renderGradeTemplate = (userGrade) => Templates.renderForPromise(userGrade.templatename, userGrade.grade);\n\nexport {getGradingPanelFunctions};\n"],"names":["templateNames","app","gradingPanel","error","searchResults","status","displayUserPicker","root","html","pickerRegion","querySelector","Selectors","regions","replaceNodeContents","fetchContentFromRender","js","getUpdateUserContentFunction","getContentForUser","getGradeForUser","saveGradeForUser","firstLoad","async","spinner","userGrade","Promise","all","user","id","then","Templates","moduleReplace","gradingPanelHtml","gradingPanelJS","render","templatename","grade","panelContainer","gradingPanelContainer","panel","form","addEventListener","event","preventDefault","scrollTop","resolve","hideSearchResultContainer","bodyContainer","userPickerContainer","searchResultsContainer","classList","remove","add","hideUserSearchInput","toggleSearchButton","searchContainer","searchInput","setAttribute","focus","parentElement","gradingInfoContainer","removeAttribute","collapseGradingDrawer","buttons","value","renderSearchResults","users","renderForPromise","registerStaticEventListeners","graderLayout","getContainer","e","target","closest","toggleFullscreen","stopImmediatePropagation","closeGrader","close","registerDynamicEventListeners","userPicker","saveGradeFunction","userList","graderContainer","toggleSearch","searchInputContainer","userSearchContainer","userSearchInput","saveGrade","currentUser","getAttribute","innerHTML","showUserSearchInput","showSearchResultContainer","selectUserButton","selectUser","userId","find","setUserId","showUser","searchTerm","toLowerCase","filter","fullname","includes","searchForUsers","DrawerEvents","DRAWER_HIDDEN","drawerRoot","setContentContainerMargin","DRAWER_SHOWN","offsetWidth","rightMargin","contentContainer","moduleContainer","style","marginRight","getSaveUserGradeFunction","setGradeForUser","gradingPanelErrors","result","values","sendStudentNotifications","success","failed","displayGradingError","err","errorString","message","type","getListOfUsers","initialUserId","moduleName","courseName","courseUrl","focusOnClose","length","pendingPromise","Pending","fullscreen","showLoader","callerName","drawer","show","defaultsendnotifications","updateUserContent","userIds","map","statusContainer","renderContext","hasgrade","index","indexOf","total","catch","rootNode","userid","modal","gradeTemplateData","Modal","create","title","large","removeOnClose","returnElement","body","renderGradeTemplate","bodyPromise","getBodyPromise","gradeReplace"],"mappings":"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"}
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js
index e3f6cf4615c9a..f20f851007a7a 100644
--- a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js
+++ b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js
@@ -5,6 +5,6 @@ define("mod_forum/local/grades/local/grader/user_picker",["exports","core/templa
    * @module     mod_forum/local/grades/local/grader/user_picker
    * @copyright  2019 Mathew May <mathew.solutions>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_templates=_interopRequireDefault(_templates),_selectors=_interopRequireDefault(_selectors);class UserPicker{constructor(userList,showUserCallback,preChangeUserCallback){this.userList=userList,this.showUserCallback=showUserCallback,this.preChangeUserCallback=preChangeUserCallback,this.currentUserIndex=0,this.render=this.render.bind(this),this.setUserId=this.setUserId.bind(this)}setUserId(userId){const userIndex=this.userList.findIndex((user=>user.id===parseInt(userId)));if(-1===userIndex)throw Error("User with id ".concat(userId," not found"));this.currentUserIndex=userIndex}async render(){this.root=document.createElement("div");const{html:html,js:js}=await this.renderNavigator();_templates.default.replaceNodeContents(this.root,html,js),await this.showUser(this.currentUser),this.registerEventListeners()}renderNavigator(){return _templates.default.renderForPromise("".concat("mod_forum/local/grades/local/grader","/user_picker"),{})}renderUserChange(context){return _templates.default.renderForPromise("".concat("mod_forum/local/grades/local/grader","/user_picker/user"),context)}async showUser(user){const[{html:html,js:js}]=await Promise.all([this.renderUserChange(user),this.showUserCallback(user)]),userRegion=this.root.querySelector(_selectors.default.regions.userRegion);_templates.default.replaceNodeContents(userRegion,html,js);this.root.querySelector(_selectors.default.regions.currentUser).textContent=await(0,_str.getString)("nowgradinguser","mod_forum",user.fullname)}registerEventListeners(){this.root.addEventListener("click",(async e=>{const button=e.target.closest(_selectors.default.actions.changeUser);if(button){(await this.preChangeUserCallback(this.currentUser)).failed||(this.updateIndex(parseInt(button.dataset.direction)),await this.showUser(this.currentUser))}}))}updateIndex(direction){return this.currentUserIndex+=direction,this.currentUserIndex<0?this.currentUserIndex=this.userList.length-1:this.currentUserIndex>this.userList.length-1&&(this.currentUserIndex=0),this.currentUserIndex}get currentUser(){return{...this.userList[this.currentUserIndex],total:this.userList.length,displayIndex:this.currentUserIndex+1}}get rootNode(){return this.root}}return _exports.default=async function(users,showUserCallback,preChangeUserCallback){let{initialUserId:initialUserId=null}=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const userPicker=new UserPicker(users,showUserCallback,preChangeUserCallback);return initialUserId&&userPicker.setUserId(initialUserId),await userPicker.render(),userPicker},_exports.default}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_templates=_interopRequireDefault(_templates),_selectors=_interopRequireDefault(_selectors);class UserPicker{constructor(userList,showUserCallback,preChangeUserCallback){this.userList=userList,this.showUserCallback=showUserCallback,this.preChangeUserCallback=preChangeUserCallback,this.currentUserIndex=0,this.render=this.render.bind(this),this.setUserId=this.setUserId.bind(this)}setUserId(userId){const userIndex=this.userList.findIndex((user=>user.id===parseInt(userId)));if(-1===userIndex)throw Error("User with id ".concat(userId," not found"));this.currentUserIndex=userIndex}async render(){this.root=document.createElement("div");const{html:html,js:js}=await this.renderNavigator();await _templates.default.replaceNodeContents(this.root,html,js),await this.showUser(this.currentUser),this.registerEventListeners()}renderNavigator(){return _templates.default.renderForPromise("".concat("mod_forum/local/grades/local/grader","/user_picker"),{})}renderUserChange(context){return _templates.default.renderForPromise("".concat("mod_forum/local/grades/local/grader","/user_picker/user"),context)}async showUser(user){const[{html:html,js:js}]=await Promise.all([this.renderUserChange(user),this.showUserCallback(user)]),userRegion=this.root.querySelector(_selectors.default.regions.userRegion);await _templates.default.replaceNodeContents(userRegion,html,js);this.root.querySelector(_selectors.default.regions.currentUser).textContent=await(0,_str.getString)("nowgradinguser","mod_forum",user.fullname)}registerEventListeners(){this.root.addEventListener("click",(async e=>{const button=e.target.closest(_selectors.default.actions.changeUser);if(button){(await this.preChangeUserCallback(this.currentUser)).failed||(this.updateIndex(parseInt(button.dataset.direction)),await this.showUser(this.currentUser))}}))}updateIndex(direction){return this.currentUserIndex+=direction,this.currentUserIndex<0?this.currentUserIndex=this.userList.length-1:this.currentUserIndex>this.userList.length-1&&(this.currentUserIndex=0),this.currentUserIndex}get currentUser(){return{...this.userList[this.currentUserIndex],total:this.userList.length,displayIndex:this.currentUserIndex+1}}get rootNode(){return this.root}}return _exports.default=async function(users,showUserCallback,preChangeUserCallback){let{initialUserId:initialUserId=null}=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const userPicker=new UserPicker(users,showUserCallback,preChangeUserCallback);return initialUserId&&userPicker.setUserId(initialUserId),await userPicker.render(),userPicker},_exports.default}));
 
 //# sourceMappingURL=user_picker.min.js.map
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map
index a989152612ed2..a723810157dc8 100644
--- a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map
+++ b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"user_picker.min.js","sources":["../../../../../src/local/grades/local/grader/user_picker.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * This module will tie together all of the different calls the gradable module will make.\n *\n * @module     mod_forum/local/grades/local/grader/user_picker\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport Selectors from './user_picker/selectors';\nimport {getString} from 'core/str';\n\nconst templatePath = 'mod_forum/local/grades/local/grader';\n\n/**\n * The Grader User Picker.\n *\n * @class mod_forum/local/grades/local/grader/user_picker\n */\nclass UserPicker {\n\n    /**\n     * Constructor for the User Picker.\n     *\n     * @constructor mod_forum/local/grades/local/grader/user_picker\n     * @param {Array} userList List of users\n     * @param {Function} showUserCallback The callback used to display the user\n     * @param {Function} preChangeUserCallback The callback to use before changing user\n     */\n    constructor(userList, showUserCallback, preChangeUserCallback) {\n        this.userList = userList;\n        this.showUserCallback = showUserCallback;\n        this.preChangeUserCallback = preChangeUserCallback;\n        this.currentUserIndex = 0;\n\n        // Ensure that render is bound correctly.\n        this.render = this.render.bind(this);\n        this.setUserId = this.setUserId.bind(this);\n    }\n\n    /**\n     * Set the current userid without rendering the change.\n     * To show the user, call showUser too.\n     *\n     * @param {Number} userId\n     */\n    setUserId(userId) {\n        // Determine the current index based on the user ID.\n        const userIndex = this.userList.findIndex(user => {\n            return user.id === parseInt(userId);\n        });\n\n        if (userIndex === -1) {\n            throw Error(`User with id ${userId} not found`);\n        }\n\n        this.currentUserIndex = userIndex;\n    }\n\n    /**\n     * Render the user picker.\n     */\n    async render() {\n        // Create the root node.\n        this.root = document.createElement('div');\n\n        const {html, js} = await this.renderNavigator();\n        Templates.replaceNodeContents(this.root, html, js);\n\n        // Call the showUser function to show the first user immediately.\n        await this.showUser(this.currentUser);\n\n        // Ensure that the event listeners are all bound.\n        this.registerEventListeners();\n    }\n\n    /**\n     * Render the navigator itself.\n     *\n     * @returns {Promise}\n     */\n    renderNavigator() {\n        return Templates.renderForPromise(`${templatePath}/user_picker`, {});\n    }\n\n    /**\n     * Render the current user details for the picker.\n     *\n     * @param {Object} context The data used to render the user picker.\n     * @returns {Promise}\n     */\n    renderUserChange(context) {\n        return Templates.renderForPromise(`${templatePath}/user_picker/user`, context);\n    }\n\n    /**\n     * Show the specified user in the picker.\n     *\n     * @param {Object} user\n     */\n    async showUser(user) {\n        const [{html, js}] = await Promise.all([this.renderUserChange(user), this.showUserCallback(user)]);\n        const userRegion = this.root.querySelector(Selectors.regions.userRegion);\n        Templates.replaceNodeContents(userRegion, html, js);\n\n        // Update the hidden now-grading region so screen readers can announce the user that's currently being graded.\n        const currentUserRegion = this.root.querySelector(Selectors.regions.currentUser);\n        currentUserRegion.textContent = await getString('nowgradinguser', 'mod_forum', user.fullname);\n    }\n\n    /**\n     * Register the event listeners for the user picker.\n     */\n    registerEventListeners() {\n        this.root.addEventListener('click', async(e) => {\n            const button = e.target.closest(Selectors.actions.changeUser);\n\n            if (button) {\n                const result = await this.preChangeUserCallback(this.currentUser);\n\n                if (!result.failed) {\n                    this.updateIndex(parseInt(button.dataset.direction));\n                    await this.showUser(this.currentUser);\n                }\n            }\n        });\n    }\n\n    /**\n     * Update the current user index.\n     *\n     * @param {Number} direction\n     * @returns {Number}}\n     */\n    updateIndex(direction) {\n        this.currentUserIndex += direction;\n\n        // Loop around the edges.\n        if (this.currentUserIndex < 0) {\n            this.currentUserIndex = this.userList.length - 1;\n        } else if (this.currentUserIndex > this.userList.length - 1) {\n            this.currentUserIndex = 0;\n        }\n\n        return this.currentUserIndex;\n    }\n\n    /**\n     * Get the details of the user currently shown with the total number of users, and the 1-indexed count of the\n     * current user.\n     *\n     * @returns {Object}\n     */\n    get currentUser() {\n        return {\n            ...this.userList[this.currentUserIndex],\n            total: this.userList.length,\n            displayIndex: this.currentUserIndex + 1,\n        };\n    }\n\n    /**\n     * Get the root node for the User Picker.\n     *\n     * @returns {HTMLElement}\n     */\n    get rootNode() {\n        return this.root;\n    }\n}\n\n/**\n * Create a new user picker.\n *\n * @param {Array} users The list of users\n * @param {Function} showUserCallback The function to call to show a specific user\n * @param {Function} preChangeUserCallback The fucntion to call to save the grade for the current user\n * @param {Number} [currentUserID] The userid of the current user\n * @returns {UserPicker}\n */\nexport default async(\n    users,\n    showUserCallback,\n    preChangeUserCallback,\n    {\n        initialUserId = null,\n    } = {}\n) => {\n    const userPicker = new UserPicker(users, showUserCallback, preChangeUserCallback);\n    if (initialUserId) {\n        userPicker.setUserId(initialUserId);\n    }\n    await userPicker.render();\n\n    return userPicker;\n};\n"],"names":["UserPicker","constructor","userList","showUserCallback","preChangeUserCallback","currentUserIndex","render","this","bind","setUserId","userId","userIndex","findIndex","user","id","parseInt","Error","root","document","createElement","html","js","renderNavigator","replaceNodeContents","showUser","currentUser","registerEventListeners","Templates","renderForPromise","renderUserChange","context","Promise","all","userRegion","querySelector","Selectors","regions","textContent","fullname","addEventListener","async","button","e","target","closest","actions","changeUser","failed","updateIndex","dataset","direction","length","total","displayIndex","rootNode","users","initialUserId","userPicker"],"mappings":";;;;;;;uLAkCMA,WAUFC,YAAYC,SAAUC,iBAAkBC,4BAC/BF,SAAWA,cACXC,iBAAmBA,sBACnBC,sBAAwBA,2BACxBC,iBAAmB,OAGnBC,OAASC,KAAKD,OAAOE,KAAKD,WAC1BE,UAAYF,KAAKE,UAAUD,KAAKD,MASzCE,UAAUC,cAEAC,UAAYJ,KAAKL,SAASU,WAAUC,MAC/BA,KAAKC,KAAOC,SAASL,cAGb,IAAfC,gBACMK,6BAAsBN,2BAG3BL,iBAAmBM,8BAQnBM,KAAOC,SAASC,cAAc,aAE7BC,KAACA,KAADC,GAAOA,UAAYd,KAAKe,qCACpBC,oBAAoBhB,KAAKU,KAAMG,KAAMC,UAGzCd,KAAKiB,SAASjB,KAAKkB,kBAGpBC,yBAQTJ,yBACWK,mBAAUC,2BAtEJ,sDAsEoD,IASrEC,iBAAiBC,gBACNH,mBAAUC,2BAhFJ,2DAgFyDE,wBAQ3DjB,aACJO,KAACA,KAADC,GAAOA,WAAaU,QAAQC,IAAI,CAACzB,KAAKsB,iBAAiBhB,MAAON,KAAKJ,iBAAiBU,QACrFoB,WAAa1B,KAAKU,KAAKiB,cAAcC,mBAAUC,QAAQH,+BACnDV,oBAAoBU,WAAYb,KAAMC,IAGtBd,KAAKU,KAAKiB,cAAcC,mBAAUC,QAAQX,aAClDY,kBAAoB,kBAAU,iBAAkB,YAAaxB,KAAKyB,UAMxFZ,8BACST,KAAKsB,iBAAiB,SAASC,MAAAA,UAC1BC,OAASC,EAAEC,OAAOC,QAAQT,mBAAUU,QAAQC,eAE9CL,OAAQ,QACalC,KAAKH,sBAAsBG,KAAKkB,cAEzCsB,cACHC,YAAYjC,SAAS0B,OAAOQ,QAAQC,kBACnC3C,KAAKiB,SAASjB,KAAKkB,kBAYzCuB,YAAYE,uBACH7C,kBAAoB6C,UAGrB3C,KAAKF,iBAAmB,OACnBA,iBAAmBE,KAAKL,SAASiD,OAAS,EACxC5C,KAAKF,iBAAmBE,KAAKL,SAASiD,OAAS,SACjD9C,iBAAmB,GAGrBE,KAAKF,iBASZoB,wBACO,IACAlB,KAAKL,SAASK,KAAKF,kBACtB+C,MAAO7C,KAAKL,SAASiD,OACrBE,aAAc9C,KAAKF,iBAAmB,GAS1CiD,sBACO/C,KAAKU,8BAaLuB,eACXe,MACApD,iBACAC,2BACAoD,cACIA,cAAgB,6DAChB,SAEEC,WAAa,IAAIzD,WAAWuD,MAAOpD,iBAAkBC,8BACvDoD,eACAC,WAAWhD,UAAU+C,qBAEnBC,WAAWnD,SAEVmD"}
\ No newline at end of file
+{"version":3,"file":"user_picker.min.js","sources":["../../../../../src/local/grades/local/grader/user_picker.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * This module will tie together all of the different calls the gradable module will make.\n *\n * @module     mod_forum/local/grades/local/grader/user_picker\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport Selectors from './user_picker/selectors';\nimport {getString} from 'core/str';\n\nconst templatePath = 'mod_forum/local/grades/local/grader';\n\n/**\n * The Grader User Picker.\n *\n * @class mod_forum/local/grades/local/grader/user_picker\n */\nclass UserPicker {\n\n    /**\n     * Constructor for the User Picker.\n     *\n     * @constructor mod_forum/local/grades/local/grader/user_picker\n     * @param {Array} userList List of users\n     * @param {Function} showUserCallback The callback used to display the user\n     * @param {Function} preChangeUserCallback The callback to use before changing user\n     */\n    constructor(userList, showUserCallback, preChangeUserCallback) {\n        this.userList = userList;\n        this.showUserCallback = showUserCallback;\n        this.preChangeUserCallback = preChangeUserCallback;\n        this.currentUserIndex = 0;\n\n        // Ensure that render is bound correctly.\n        this.render = this.render.bind(this);\n        this.setUserId = this.setUserId.bind(this);\n    }\n\n    /**\n     * Set the current userid without rendering the change.\n     * To show the user, call showUser too.\n     *\n     * @param {Number} userId\n     */\n    setUserId(userId) {\n        // Determine the current index based on the user ID.\n        const userIndex = this.userList.findIndex(user => {\n            return user.id === parseInt(userId);\n        });\n\n        if (userIndex === -1) {\n            throw Error(`User with id ${userId} not found`);\n        }\n\n        this.currentUserIndex = userIndex;\n    }\n\n    /**\n     * Render the user picker.\n     */\n    async render() {\n        // Create the root node.\n        this.root = document.createElement('div');\n\n        const {html, js} = await this.renderNavigator();\n        await Templates.replaceNodeContents(this.root, html, js);\n\n        // Call the showUser function to show the first user immediately.\n        await this.showUser(this.currentUser);\n\n        // Ensure that the event listeners are all bound.\n        this.registerEventListeners();\n    }\n\n    /**\n     * Render the navigator itself.\n     *\n     * @returns {Promise}\n     */\n    renderNavigator() {\n        return Templates.renderForPromise(`${templatePath}/user_picker`, {});\n    }\n\n    /**\n     * Render the current user details for the picker.\n     *\n     * @param {Object} context The data used to render the user picker.\n     * @returns {Promise}\n     */\n    renderUserChange(context) {\n        return Templates.renderForPromise(`${templatePath}/user_picker/user`, context);\n    }\n\n    /**\n     * Show the specified user in the picker.\n     *\n     * @param {Object} user\n     */\n    async showUser(user) {\n        const [{html, js}] = await Promise.all([this.renderUserChange(user), this.showUserCallback(user)]);\n        const userRegion = this.root.querySelector(Selectors.regions.userRegion);\n        await Templates.replaceNodeContents(userRegion, html, js);\n\n        // Update the hidden now-grading region so screen readers can announce the user that's currently being graded.\n        const currentUserRegion = this.root.querySelector(Selectors.regions.currentUser);\n        currentUserRegion.textContent = await getString('nowgradinguser', 'mod_forum', user.fullname);\n    }\n\n    /**\n     * Register the event listeners for the user picker.\n     */\n    registerEventListeners() {\n        this.root.addEventListener('click', async(e) => {\n            const button = e.target.closest(Selectors.actions.changeUser);\n\n            if (button) {\n                const result = await this.preChangeUserCallback(this.currentUser);\n\n                if (!result.failed) {\n                    this.updateIndex(parseInt(button.dataset.direction));\n                    await this.showUser(this.currentUser);\n                }\n            }\n        });\n    }\n\n    /**\n     * Update the current user index.\n     *\n     * @param {Number} direction\n     * @returns {Number}}\n     */\n    updateIndex(direction) {\n        this.currentUserIndex += direction;\n\n        // Loop around the edges.\n        if (this.currentUserIndex < 0) {\n            this.currentUserIndex = this.userList.length - 1;\n        } else if (this.currentUserIndex > this.userList.length - 1) {\n            this.currentUserIndex = 0;\n        }\n\n        return this.currentUserIndex;\n    }\n\n    /**\n     * Get the details of the user currently shown with the total number of users, and the 1-indexed count of the\n     * current user.\n     *\n     * @returns {Object}\n     */\n    get currentUser() {\n        return {\n            ...this.userList[this.currentUserIndex],\n            total: this.userList.length,\n            displayIndex: this.currentUserIndex + 1,\n        };\n    }\n\n    /**\n     * Get the root node for the User Picker.\n     *\n     * @returns {HTMLElement}\n     */\n    get rootNode() {\n        return this.root;\n    }\n}\n\n/**\n * Create a new user picker.\n *\n * @param {Array} users The list of users\n * @param {Function} showUserCallback The function to call to show a specific user\n * @param {Function} preChangeUserCallback The fucntion to call to save the grade for the current user\n * @param {Number} [currentUserID] The userid of the current user\n * @returns {UserPicker}\n */\nexport default async(\n    users,\n    showUserCallback,\n    preChangeUserCallback,\n    {\n        initialUserId = null,\n    } = {}\n) => {\n    const userPicker = new UserPicker(users, showUserCallback, preChangeUserCallback);\n    if (initialUserId) {\n        userPicker.setUserId(initialUserId);\n    }\n    await userPicker.render();\n\n    return userPicker;\n};\n"],"names":["UserPicker","constructor","userList","showUserCallback","preChangeUserCallback","currentUserIndex","render","this","bind","setUserId","userId","userIndex","findIndex","user","id","parseInt","Error","root","document","createElement","html","js","renderNavigator","Templates","replaceNodeContents","showUser","currentUser","registerEventListeners","renderForPromise","renderUserChange","context","Promise","all","userRegion","querySelector","Selectors","regions","textContent","fullname","addEventListener","async","button","e","target","closest","actions","changeUser","failed","updateIndex","dataset","direction","length","total","displayIndex","rootNode","users","initialUserId","userPicker"],"mappings":";;;;;;;uLAkCMA,WAUFC,YAAYC,SAAUC,iBAAkBC,4BAC/BF,SAAWA,cACXC,iBAAmBA,sBACnBC,sBAAwBA,2BACxBC,iBAAmB,OAGnBC,OAASC,KAAKD,OAAOE,KAAKD,WAC1BE,UAAYF,KAAKE,UAAUD,KAAKD,MASzCE,UAAUC,cAEAC,UAAYJ,KAAKL,SAASU,WAAUC,MAC/BA,KAAKC,KAAOC,SAASL,cAGb,IAAfC,gBACMK,6BAAsBN,2BAG3BL,iBAAmBM,8BAQnBM,KAAOC,SAASC,cAAc,aAE7BC,KAACA,KAADC,GAAOA,UAAYd,KAAKe,wBACxBC,mBAAUC,oBAAoBjB,KAAKU,KAAMG,KAAMC,UAG/Cd,KAAKkB,SAASlB,KAAKmB,kBAGpBC,yBAQTL,yBACWC,mBAAUK,2BAtEJ,sDAsEoD,IASrEC,iBAAiBC,gBACNP,mBAAUK,2BAhFJ,2DAgFyDE,wBAQ3DjB,aACJO,KAACA,KAADC,GAAOA,WAAaU,QAAQC,IAAI,CAACzB,KAAKsB,iBAAiBhB,MAAON,KAAKJ,iBAAiBU,QACrFoB,WAAa1B,KAAKU,KAAKiB,cAAcC,mBAAUC,QAAQH,kBACvDV,mBAAUC,oBAAoBS,WAAYb,KAAMC,IAG5Bd,KAAKU,KAAKiB,cAAcC,mBAAUC,QAAQV,aAClDW,kBAAoB,kBAAU,iBAAkB,YAAaxB,KAAKyB,UAMxFX,8BACSV,KAAKsB,iBAAiB,SAASC,MAAAA,UAC1BC,OAASC,EAAEC,OAAOC,QAAQT,mBAAUU,QAAQC,eAE9CL,OAAQ,QACalC,KAAKH,sBAAsBG,KAAKmB,cAEzCqB,cACHC,YAAYjC,SAAS0B,OAAOQ,QAAQC,kBACnC3C,KAAKkB,SAASlB,KAAKmB,kBAYzCsB,YAAYE,uBACH7C,kBAAoB6C,UAGrB3C,KAAKF,iBAAmB,OACnBA,iBAAmBE,KAAKL,SAASiD,OAAS,EACxC5C,KAAKF,iBAAmBE,KAAKL,SAASiD,OAAS,SACjD9C,iBAAmB,GAGrBE,KAAKF,iBASZqB,wBACO,IACAnB,KAAKL,SAASK,KAAKF,kBACtB+C,MAAO7C,KAAKL,SAASiD,OACrBE,aAAc9C,KAAKF,iBAAmB,GAS1CiD,sBACO/C,KAAKU,8BAaLuB,eACXe,MACApD,iBACAC,2BACAoD,cACIA,cAAgB,6DAChB,SAEEC,WAAa,IAAIzD,WAAWuD,MAAOpD,iBAAkBC,8BACvDoD,eACAC,WAAWhD,UAAU+C,qBAEnBC,WAAWnD,SAEVmD"}
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/layout/fullscreen.min.js b/mod/forum/amd/build/local/layout/fullscreen.min.js
index 1ba6fcce9db03..f17fa7f8c109a 100644
--- a/mod/forum/amd/build/local/layout/fullscreen.min.js
+++ b/mod/forum/amd/build/local/layout/fullscreen.min.js
@@ -5,6 +5,6 @@ define("mod_forum/local/layout/fullscreen",["exports","core/loadingicon","core/t
    * @module mod_forum/local/layout/fullscreen
    * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */(FocusLockManager);_exports.createLayout=function(){let{fullscreen:fullscreen=!0,showLoader:showLoader=!1,focusOnClose:focusOnClose=null}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const container=document.createElement("div");document.body.append(container),container.classList.add("layout"),container.classList.add("fullscreen"),container.setAttribute("role","application"),(0,_toast.addToastRegion)(container),lockBodyScroll(),FocusLockManager.trapFocus(container);const helpers=getLayoutHelpers(container,FocusLockManager,focusOnClose);return showLoader&&helpers.showLoadingIcon(),fullscreen&&helpers.requestFullscreen(),helpers};const getLayoutHelpers=(layoutNode,FocusLockManager,focusOnClose)=>{const contentNode=document.createElement("div");layoutNode.append(contentNode);const loadingNode=document.createElement("div");layoutNode.append(loadingNode);const requestFullscreen=()=>{layoutNode.requestFullscreen?layoutNode.requestFullscreen():layoutNode.msRequestFullscreen?layoutNode.msRequestFullscreen():layoutNode.mozRequestFullscreen?layoutNode.mozRequestFullscreen():layoutNode.webkitRequestFullscreen?layoutNode.webkitRequestFullscreen():layoutNode.setTop(0)},exitFullscreen=()=>{if(document.exitRequestFullScreen){if(document.fullScreenElement!==layoutNode)return;document.exitRequestFullScreen()}else if(document.msExitFullscreen){if(document.msFullscreenElement!==layoutNode)return;document.msExitFullscreen()}else if(document.mozCancelFullScreen){if(document.mozFullScreenElement!==layoutNode)return;document.mozCancelFullScreen()}else if(document.webkitExitFullscreen){if(document.webkitFullscreenElement!==layoutNode)return;document.webkitExitFullscreen()}},hideLoadingIcon=()=>{let child=loadingNode.lastElementChild;for(;child;)loadingNode.removeChild(child),child=loadingNode.lastElementChild};return{close:()=>{if(exitFullscreen(),unlockBodyScroll(),FocusLockManager.untrapFocus(),layoutNode.remove(),focusOnClose)try{focusOnClose.focus()}catch(e){}},toggleFullscreen:()=>{document.exitRequestFullScreen?document.fullScreenElement===layoutNode?exitFullscreen():requestFullscreen():document.msExitFullscreen?document.msFullscreenElement===layoutNode?exitFullscreen():requestFullscreen():document.mozCancelFullScreen?document.mozFullScreenElement===layoutNode?exitFullscreen():requestFullscreen():document.webkitExitFullscreen&&(document.webkitFullscreenElement===layoutNode?exitFullscreen():requestFullscreen())},requestFullscreen:requestFullscreen,exitFullscreen:exitFullscreen,getContainer:()=>contentNode,setContent:content=>{hideLoadingIcon();let child=contentNode.lastElementChild;for(;child;)contentNode.removeChild(child),child=contentNode.lastElementChild;contentNode.append(content)},showLoadingIcon:()=>{(0,_loadingicon.addIconToContainer)(loadingNode)},hideLoadingIcon:hideLoadingIcon}},lockBodyScroll=()=>{document.querySelector("body").classList.add("overflow-hidden")},unlockBodyScroll=()=>{document.querySelector("body").classList.remove("overflow-hidden")}}));
+   */(FocusLockManager);_exports.createLayout=function(){let{fullscreen:fullscreen=!0,showLoader:showLoader=!1,focusOnClose:focusOnClose=null,callerName:callerName="Fullscreen application"}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const container=document.createElement("div");document.body.append(container),container.classList.add("layout"),container.classList.add("fullscreen"),container.setAttribute("role","application"),container.setAttribute("aria-label",callerName),(0,_toast.addToastRegion)(container),lockBodyScroll(),FocusLockManager.trapFocus(container);const helpers=getLayoutHelpers(container,FocusLockManager,focusOnClose);return showLoader&&helpers.showLoadingIcon(),fullscreen&&helpers.requestFullscreen(),helpers};const getLayoutHelpers=(layoutNode,FocusLockManager,focusOnClose)=>{const contentNode=document.createElement("div");layoutNode.append(contentNode);const loadingNode=document.createElement("div");layoutNode.append(loadingNode);const requestFullscreen=()=>{layoutNode.requestFullscreen?layoutNode.requestFullscreen():layoutNode.msRequestFullscreen?layoutNode.msRequestFullscreen():layoutNode.mozRequestFullscreen?layoutNode.mozRequestFullscreen():layoutNode.webkitRequestFullscreen?layoutNode.webkitRequestFullscreen():layoutNode.setTop(0)},exitFullscreen=()=>{if(document.exitRequestFullScreen){if(document.fullScreenElement!==layoutNode)return;document.exitRequestFullScreen()}else if(document.msExitFullscreen){if(document.msFullscreenElement!==layoutNode)return;document.msExitFullscreen()}else if(document.mozCancelFullScreen){if(document.mozFullScreenElement!==layoutNode)return;document.mozCancelFullScreen()}else if(document.webkitExitFullscreen){if(document.webkitFullscreenElement!==layoutNode)return;document.webkitExitFullscreen()}},hideLoadingIcon=()=>{let child=loadingNode.lastElementChild;for(;child;)loadingNode.removeChild(child),child=loadingNode.lastElementChild};return{close:()=>{if(exitFullscreen(),unlockBodyScroll(),FocusLockManager.untrapFocus(),layoutNode.remove(),focusOnClose)try{focusOnClose.focus()}catch(e){}},toggleFullscreen:()=>{document.exitRequestFullScreen?document.fullScreenElement===layoutNode?exitFullscreen():requestFullscreen():document.msExitFullscreen?document.msFullscreenElement===layoutNode?exitFullscreen():requestFullscreen():document.mozCancelFullScreen?document.mozFullScreenElement===layoutNode?exitFullscreen():requestFullscreen():document.webkitExitFullscreen&&(document.webkitFullscreenElement===layoutNode?exitFullscreen():requestFullscreen())},requestFullscreen:requestFullscreen,exitFullscreen:exitFullscreen,getContainer:()=>contentNode,setContent:content=>{hideLoadingIcon();let child=contentNode.lastElementChild;for(;child;)contentNode.removeChild(child),child=contentNode.lastElementChild;contentNode.append(content)},showLoadingIcon:()=>{(0,_loadingicon.addIconToContainer)(loadingNode)},hideLoadingIcon:hideLoadingIcon}},lockBodyScroll=()=>{document.querySelector("body").classList.add("overflow-hidden")},unlockBodyScroll=()=>{document.querySelector("body").classList.remove("overflow-hidden")}}));
 
 //# sourceMappingURL=fullscreen.min.js.map
\ No newline at end of file
diff --git a/mod/forum/amd/build/local/layout/fullscreen.min.js.map b/mod/forum/amd/build/local/layout/fullscreen.min.js.map
index beb771e27d07e..f36faa31c6355 100644
--- a/mod/forum/amd/build/local/layout/fullscreen.min.js.map
+++ b/mod/forum/amd/build/local/layout/fullscreen.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"fullscreen.min.js","sources":["../../../src/local/layout/fullscreen.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Full screen window layout.\n *\n * @module mod_forum/local/layout/fullscreen\n * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {addIconToContainer} from 'core/loadingicon';\nimport {addToastRegion} from 'core/toast';\nimport * as FocusLockManager from 'core/local/aria/focuslock';\n\n/**\n * Get the composed layout.\n *\n * @method\n * @param {string} templateName\n * @param {object} context\n * @returns {LayoutHelper}\n */\n\nexport const createLayout = ({\n    fullscreen = true,\n    showLoader = false,\n    focusOnClose = null,\n} = {}) => {\n    const container = document.createElement('div');\n    document.body.append(container);\n    container.classList.add('layout');\n    container.classList.add('fullscreen');\n    container.setAttribute('role', 'application');\n    addToastRegion(container);\n\n    // Lock scrolling on the document body.\n    lockBodyScroll();\n\n    // Lock tab control.\n    FocusLockManager.trapFocus(container);\n\n    const helpers = getLayoutHelpers(container, FocusLockManager, focusOnClose);\n\n    if (showLoader) {\n        helpers.showLoadingIcon();\n    }\n\n    if (fullscreen) {\n        helpers.requestFullscreen();\n    }\n\n    return helpers;\n};\n\n/**\n * LayoutHelper A helper object containing functions for managing the current fullscreen layout\n *\n * @typedef {object}\n * @property {Function} close A function to close the fullscreen layout\n * @property {Function} toggleFullscreen A function to toggle the fullscreen from active to disabled and back\n * @property {Function} requestFullscreen Make a request to the browser to make the window full screen.\n * Note: This must be called in response to a direct user action\n * @property {Function} exitFullscreen Exit the fullscreen mode\n * @property {Function} getContainer Get the container of the fullscreen layout\n * @property {Function} setContent Set the content of the fullscreen layout\n * @property {Function} showLoadingIcon Display the loading icon\n * @property {Function} hideLoadingIcon Hide the loading icon\n */\n\n/**\n * Get the layout helpers.\n *\n * @method\n * @private\n * @param {HTMLElement} layoutNode\n * @param {FocusLockManager} FocusLockManager\n * @param {Boolean} focusOnClose\n * @returns {LayoutHelper}\n */\nconst getLayoutHelpers = (layoutNode, FocusLockManager, focusOnClose) => {\n    const contentNode = document.createElement('div');\n    layoutNode.append(contentNode);\n\n    const loadingNode = document.createElement('div');\n    layoutNode.append(loadingNode);\n\n    /**\n     * Close and destroy the window container.\n     */\n    const close = () => {\n        exitFullscreen();\n        unlockBodyScroll();\n        FocusLockManager.untrapFocus();\n\n        layoutNode.remove();\n\n        if (focusOnClose) {\n            try {\n                focusOnClose.focus();\n            } catch (e) {\n                // eslint-disable-line\n            }\n        }\n    };\n\n    /**\n     * Attempt to make the conatiner full screen.\n     */\n    const requestFullscreen = () => {\n        if (layoutNode.requestFullscreen) {\n            layoutNode.requestFullscreen();\n        } else if (layoutNode.msRequestFullscreen) {\n            layoutNode.msRequestFullscreen();\n        } else if (layoutNode.mozRequestFullscreen) {\n            layoutNode.mozRequestFullscreen();\n        } else if (layoutNode.webkitRequestFullscreen) {\n            layoutNode.webkitRequestFullscreen();\n        } else {\n            // Not supported.\n            // Hack to make this act like full-screen as much as possible.\n            layoutNode.setTop(0);\n        }\n    };\n\n    /**\n     * Exit full screen but do not close the container fully.\n     */\n    const exitFullscreen = () => {\n        if (document.exitRequestFullScreen) {\n            if (document.fullScreenElement !== layoutNode) {\n                return;\n            }\n            document.exitRequestFullScreen();\n        } else if (document.msExitFullscreen) {\n            if (document.msFullscreenElement !== layoutNode) {\n                return;\n            }\n            document.msExitFullscreen();\n        } else if (document.mozCancelFullScreen) {\n            if (document.mozFullScreenElement !== layoutNode) {\n                return;\n            }\n            document.mozCancelFullScreen();\n        } else if (document.webkitExitFullscreen) {\n            if (document.webkitFullscreenElement !== layoutNode) {\n                return;\n            }\n            document.webkitExitFullscreen();\n        }\n    };\n\n    const toggleFullscreen = () => {\n        if (document.exitRequestFullScreen) {\n            if (document.fullScreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        } else if (document.msExitFullscreen) {\n            if (document.msFullscreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        } else if (document.mozCancelFullScreen) {\n            if (document.mozFullScreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        } else if (document.webkitExitFullscreen) {\n            if (document.webkitFullscreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        }\n    };\n\n    /**\n     * Get the Node which is fullscreen.\n     *\n     * @return {Element}\n     */\n    const getContainer = () => {\n        return contentNode;\n    };\n\n    const setContent = (content) => {\n        hideLoadingIcon();\n\n        // Note: It would be better to use replaceWith, but this is not compatible with IE.\n        let child = contentNode.lastElementChild;\n        while (child) {\n            contentNode.removeChild(child);\n            child = contentNode.lastElementChild;\n        }\n        contentNode.append(content);\n    };\n\n    const showLoadingIcon = () => {\n        addIconToContainer(loadingNode);\n    };\n\n    const hideLoadingIcon = () => {\n        // Hide the loading container.\n        let child = loadingNode.lastElementChild;\n        while (child) {\n            loadingNode.removeChild(child);\n            child = loadingNode.lastElementChild;\n        }\n    };\n\n    /**\n     * @return {Object}\n     */\n    return {\n        close,\n\n        toggleFullscreen,\n        requestFullscreen,\n        exitFullscreen,\n\n        getContainer,\n        setContent,\n\n        showLoadingIcon,\n        hideLoadingIcon,\n    };\n};\n\nconst lockBodyScroll = () => {\n    document.querySelector('body').classList.add('overflow-hidden');\n};\n\nconst unlockBodyScroll = () => {\n    document.querySelector('body').classList.remove('overflow-hidden');\n};\n"],"names":["fullscreen","showLoader","focusOnClose","container","document","createElement","body","append","classList","add","setAttribute","lockBodyScroll","FocusLockManager","trapFocus","helpers","getLayoutHelpers","showLoadingIcon","requestFullscreen","layoutNode","contentNode","loadingNode","msRequestFullscreen","mozRequestFullscreen","webkitRequestFullscreen","setTop","exitFullscreen","exitRequestFullScreen","fullScreenElement","msExitFullscreen","msFullscreenElement","mozCancelFullScreen","mozFullScreenElement","webkitExitFullscreen","webkitFullscreenElement","hideLoadingIcon","child","lastElementChild","removeChild","close","unlockBodyScroll","untrapFocus","remove","focus","e","toggleFullscreen","getContainer","setContent","content","querySelector"],"mappings":";;;;;;;8CAoC4B,eAACA,WACzBA,YAAa,EADYC,WAEzBA,YAAa,EAFYC,aAGzBA,aAAe,6DACf,SACMC,UAAYC,SAASC,cAAc,OACzCD,SAASE,KAAKC,OAAOJ,WACrBA,UAAUK,UAAUC,IAAI,UACxBN,UAAUK,UAAUC,IAAI,cACxBN,UAAUO,aAAa,OAAQ,yCAChBP,WAGfQ,iBAGAC,iBAAiBC,UAAUV,iBAErBW,QAAUC,iBAAiBZ,UAAWS,iBAAkBV,qBAE1DD,YACAa,QAAQE,kBAGRhB,YACAc,QAAQG,oBAGLH,eA4BLC,iBAAmB,CAACG,WAAYN,iBAAkBV,sBAC9CiB,YAAcf,SAASC,cAAc,OAC3Ca,WAAWX,OAAOY,mBAEZC,YAAchB,SAASC,cAAc,OAC3Ca,WAAWX,OAAOa,mBAwBZH,kBAAoB,KAClBC,WAAWD,kBACXC,WAAWD,oBACJC,WAAWG,oBAClBH,WAAWG,sBACJH,WAAWI,qBAClBJ,WAAWI,uBACJJ,WAAWK,wBAClBL,WAAWK,0BAIXL,WAAWM,OAAO,IAOpBC,eAAiB,QACfrB,SAASsB,sBAAuB,IAC5BtB,SAASuB,oBAAsBT,kBAGnCd,SAASsB,6BACN,GAAItB,SAASwB,iBAAkB,IAC9BxB,SAASyB,sBAAwBX,kBAGrCd,SAASwB,wBACN,GAAIxB,SAAS0B,oBAAqB,IACjC1B,SAAS2B,uBAAyBb,kBAGtCd,SAAS0B,2BACN,GAAI1B,SAAS4B,qBAAsB,IAClC5B,SAAS6B,0BAA4Bf,kBAGzCd,SAAS4B,yBAyDXE,gBAAkB,SAEhBC,MAAQf,YAAYgB,sBACjBD,OACHf,YAAYiB,YAAYF,OACxBA,MAAQf,YAAYgB,wBAOrB,CACHE,MAhIU,QACVb,iBACAc,mBACA3B,iBAAiB4B,cAEjBtB,WAAWuB,SAEPvC,iBAEIA,aAAawC,QACf,MAAOC,MAwHbC,iBApEqB,KACjBxC,SAASsB,sBACLtB,SAASuB,oBAAsBT,WAC/BO,iBAEAR,oBAEGb,SAASwB,iBACZxB,SAASyB,sBAAwBX,WACjCO,iBAEAR,oBAEGb,SAAS0B,oBACZ1B,SAAS2B,uBAAyBb,WAClCO,iBAEAR,oBAEGb,SAAS4B,uBACZ5B,SAAS6B,0BAA4Bf,WACrCO,iBAEAR,sBA8CRA,kBAAAA,kBACAQ,eAAAA,eAEAoB,aAvCiB,IACV1B,YAuCP2B,WApCgBC,UAChBb,sBAGIC,MAAQhB,YAAYiB,sBACjBD,OACHhB,YAAYkB,YAAYF,OACxBA,MAAQhB,YAAYiB,iBAExBjB,YAAYZ,OAAOwC,UA6BnB/B,gBA1BoB,yCACDI,cA0BnBc,gBAAAA,kBAIFvB,eAAiB,KACnBP,SAAS4C,cAAc,QAAQxC,UAAUC,IAAI,oBAG3C8B,iBAAmB,KACrBnC,SAAS4C,cAAc,QAAQxC,UAAUiC,OAAO"}
\ No newline at end of file
+{"version":3,"file":"fullscreen.min.js","sources":["../../../src/local/layout/fullscreen.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Full screen window layout.\n *\n * @module mod_forum/local/layout/fullscreen\n * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {addIconToContainer} from 'core/loadingicon';\nimport {addToastRegion} from 'core/toast';\nimport * as FocusLockManager from 'core/local/aria/focuslock';\n\n/**\n * Get the composed layout.\n *\n * @method\n * @param {string} templateName\n * @param {object} context\n * @returns {LayoutHelper}\n */\n\nexport const createLayout = ({\n    fullscreen = true,\n    showLoader = false,\n    focusOnClose = null,\n    callerName = 'Fullscreen application'\n} = {}) => {\n    const container = document.createElement('div');\n    document.body.append(container);\n    container.classList.add('layout');\n    container.classList.add('fullscreen');\n    container.setAttribute('role', 'application');\n    container.setAttribute('aria-label', callerName);\n    addToastRegion(container);\n\n    // Lock scrolling on the document body.\n    lockBodyScroll();\n\n    // Lock tab control.\n    FocusLockManager.trapFocus(container);\n\n    const helpers = getLayoutHelpers(container, FocusLockManager, focusOnClose);\n\n    if (showLoader) {\n        helpers.showLoadingIcon();\n    }\n\n    if (fullscreen) {\n        helpers.requestFullscreen();\n    }\n\n    return helpers;\n};\n\n/**\n * LayoutHelper A helper object containing functions for managing the current fullscreen layout\n *\n * @typedef {object}\n * @property {Function} close A function to close the fullscreen layout\n * @property {Function} toggleFullscreen A function to toggle the fullscreen from active to disabled and back\n * @property {Function} requestFullscreen Make a request to the browser to make the window full screen.\n * Note: This must be called in response to a direct user action\n * @property {Function} exitFullscreen Exit the fullscreen mode\n * @property {Function} getContainer Get the container of the fullscreen layout\n * @property {Function} setContent Set the content of the fullscreen layout\n * @property {Function} showLoadingIcon Display the loading icon\n * @property {Function} hideLoadingIcon Hide the loading icon\n */\n\n/**\n * Get the layout helpers.\n *\n * @method\n * @private\n * @param {HTMLElement} layoutNode\n * @param {FocusLockManager} FocusLockManager\n * @param {Boolean} focusOnClose\n * @returns {LayoutHelper}\n */\nconst getLayoutHelpers = (layoutNode, FocusLockManager, focusOnClose) => {\n    const contentNode = document.createElement('div');\n    layoutNode.append(contentNode);\n\n    const loadingNode = document.createElement('div');\n    layoutNode.append(loadingNode);\n\n    /**\n     * Close and destroy the window container.\n     */\n    const close = () => {\n        exitFullscreen();\n        unlockBodyScroll();\n        FocusLockManager.untrapFocus();\n\n        layoutNode.remove();\n\n        if (focusOnClose) {\n            try {\n                focusOnClose.focus();\n            } catch (e) {\n                // eslint-disable-line\n            }\n        }\n    };\n\n    /**\n     * Attempt to make the conatiner full screen.\n     */\n    const requestFullscreen = () => {\n        if (layoutNode.requestFullscreen) {\n            layoutNode.requestFullscreen();\n        } else if (layoutNode.msRequestFullscreen) {\n            layoutNode.msRequestFullscreen();\n        } else if (layoutNode.mozRequestFullscreen) {\n            layoutNode.mozRequestFullscreen();\n        } else if (layoutNode.webkitRequestFullscreen) {\n            layoutNode.webkitRequestFullscreen();\n        } else {\n            // Not supported.\n            // Hack to make this act like full-screen as much as possible.\n            layoutNode.setTop(0);\n        }\n    };\n\n    /**\n     * Exit full screen but do not close the container fully.\n     */\n    const exitFullscreen = () => {\n        if (document.exitRequestFullScreen) {\n            if (document.fullScreenElement !== layoutNode) {\n                return;\n            }\n            document.exitRequestFullScreen();\n        } else if (document.msExitFullscreen) {\n            if (document.msFullscreenElement !== layoutNode) {\n                return;\n            }\n            document.msExitFullscreen();\n        } else if (document.mozCancelFullScreen) {\n            if (document.mozFullScreenElement !== layoutNode) {\n                return;\n            }\n            document.mozCancelFullScreen();\n        } else if (document.webkitExitFullscreen) {\n            if (document.webkitFullscreenElement !== layoutNode) {\n                return;\n            }\n            document.webkitExitFullscreen();\n        }\n    };\n\n    const toggleFullscreen = () => {\n        if (document.exitRequestFullScreen) {\n            if (document.fullScreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        } else if (document.msExitFullscreen) {\n            if (document.msFullscreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        } else if (document.mozCancelFullScreen) {\n            if (document.mozFullScreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        } else if (document.webkitExitFullscreen) {\n            if (document.webkitFullscreenElement === layoutNode) {\n                exitFullscreen();\n            } else {\n                requestFullscreen();\n            }\n        }\n    };\n\n    /**\n     * Get the Node which is fullscreen.\n     *\n     * @return {Element}\n     */\n    const getContainer = () => {\n        return contentNode;\n    };\n\n    const setContent = (content) => {\n        hideLoadingIcon();\n\n        // Note: It would be better to use replaceWith, but this is not compatible with IE.\n        let child = contentNode.lastElementChild;\n        while (child) {\n            contentNode.removeChild(child);\n            child = contentNode.lastElementChild;\n        }\n        contentNode.append(content);\n    };\n\n    const showLoadingIcon = () => {\n        addIconToContainer(loadingNode);\n    };\n\n    const hideLoadingIcon = () => {\n        // Hide the loading container.\n        let child = loadingNode.lastElementChild;\n        while (child) {\n            loadingNode.removeChild(child);\n            child = loadingNode.lastElementChild;\n        }\n    };\n\n    /**\n     * @return {Object}\n     */\n    return {\n        close,\n\n        toggleFullscreen,\n        requestFullscreen,\n        exitFullscreen,\n\n        getContainer,\n        setContent,\n\n        showLoadingIcon,\n        hideLoadingIcon,\n    };\n};\n\nconst lockBodyScroll = () => {\n    document.querySelector('body').classList.add('overflow-hidden');\n};\n\nconst unlockBodyScroll = () => {\n    document.querySelector('body').classList.remove('overflow-hidden');\n};\n"],"names":["fullscreen","showLoader","focusOnClose","callerName","container","document","createElement","body","append","classList","add","setAttribute","lockBodyScroll","FocusLockManager","trapFocus","helpers","getLayoutHelpers","showLoadingIcon","requestFullscreen","layoutNode","contentNode","loadingNode","msRequestFullscreen","mozRequestFullscreen","webkitRequestFullscreen","setTop","exitFullscreen","exitRequestFullScreen","fullScreenElement","msExitFullscreen","msFullscreenElement","mozCancelFullScreen","mozFullScreenElement","webkitExitFullscreen","webkitFullscreenElement","hideLoadingIcon","child","lastElementChild","removeChild","close","unlockBodyScroll","untrapFocus","remove","focus","e","toggleFullscreen","getContainer","setContent","content","querySelector"],"mappings":";;;;;;;8CAoC4B,eAACA,WACzBA,YAAa,EADYC,WAEzBA,YAAa,EAFYC,aAGzBA,aAAe,KAHUC,WAIzBA,WAAa,iFACb,SACMC,UAAYC,SAASC,cAAc,OACzCD,SAASE,KAAKC,OAAOJ,WACrBA,UAAUK,UAAUC,IAAI,UACxBN,UAAUK,UAAUC,IAAI,cACxBN,UAAUO,aAAa,OAAQ,eAC/BP,UAAUO,aAAa,aAAcR,sCACtBC,WAGfQ,iBAGAC,iBAAiBC,UAAUV,iBAErBW,QAAUC,iBAAiBZ,UAAWS,iBAAkBX,qBAE1DD,YACAc,QAAQE,kBAGRjB,YACAe,QAAQG,oBAGLH,eA4BLC,iBAAmB,CAACG,WAAYN,iBAAkBX,sBAC9CkB,YAAcf,SAASC,cAAc,OAC3Ca,WAAWX,OAAOY,mBAEZC,YAAchB,SAASC,cAAc,OAC3Ca,WAAWX,OAAOa,mBAwBZH,kBAAoB,KAClBC,WAAWD,kBACXC,WAAWD,oBACJC,WAAWG,oBAClBH,WAAWG,sBACJH,WAAWI,qBAClBJ,WAAWI,uBACJJ,WAAWK,wBAClBL,WAAWK,0BAIXL,WAAWM,OAAO,IAOpBC,eAAiB,QACfrB,SAASsB,sBAAuB,IAC5BtB,SAASuB,oBAAsBT,kBAGnCd,SAASsB,6BACN,GAAItB,SAASwB,iBAAkB,IAC9BxB,SAASyB,sBAAwBX,kBAGrCd,SAASwB,wBACN,GAAIxB,SAAS0B,oBAAqB,IACjC1B,SAAS2B,uBAAyBb,kBAGtCd,SAAS0B,2BACN,GAAI1B,SAAS4B,qBAAsB,IAClC5B,SAAS6B,0BAA4Bf,kBAGzCd,SAAS4B,yBAyDXE,gBAAkB,SAEhBC,MAAQf,YAAYgB,sBACjBD,OACHf,YAAYiB,YAAYF,OACxBA,MAAQf,YAAYgB,wBAOrB,CACHE,MAhIU,QACVb,iBACAc,mBACA3B,iBAAiB4B,cAEjBtB,WAAWuB,SAEPxC,iBAEIA,aAAayC,QACf,MAAOC,MAwHbC,iBApEqB,KACjBxC,SAASsB,sBACLtB,SAASuB,oBAAsBT,WAC/BO,iBAEAR,oBAEGb,SAASwB,iBACZxB,SAASyB,sBAAwBX,WACjCO,iBAEAR,oBAEGb,SAAS0B,oBACZ1B,SAAS2B,uBAAyBb,WAClCO,iBAEAR,oBAEGb,SAAS4B,uBACZ5B,SAAS6B,0BAA4Bf,WACrCO,iBAEAR,sBA8CRA,kBAAAA,kBACAQ,eAAAA,eAEAoB,aAvCiB,IACV1B,YAuCP2B,WApCgBC,UAChBb,sBAGIC,MAAQhB,YAAYiB,sBACjBD,OACHhB,YAAYkB,YAAYF,OACxBA,MAAQhB,YAAYiB,iBAExBjB,YAAYZ,OAAOwC,UA6BnB/B,gBA1BoB,yCACDI,cA0BnBc,gBAAAA,kBAIFvB,eAAiB,KACnBP,SAAS4C,cAAc,QAAQxC,UAAUC,IAAI,oBAG3C8B,iBAAmB,KACrBnC,SAAS4C,cAAc,QAAQxC,UAAUiC,OAAO"}
\ No newline at end of file
diff --git a/mod/forum/amd/src/local/grades/grader.js b/mod/forum/amd/src/local/grades/grader.js
index a7948f2048a87..ca3866dcbdc31 100644
--- a/mod/forum/amd/src/local/grades/grader.js
+++ b/mod/forum/amd/src/local/grades/grader.js
@@ -35,6 +35,7 @@ import {fillInitialValues} from 'core_grades/grades/grader/gradingpanel/comparis
 import Modal from 'core/modal_cancel';
 import {subscribe} from 'core/pubsub';
 import DrawerEvents from 'core/drawer_events';
+import Pending from 'core/pending';
 
 const templateNames = {
     grader: {
@@ -91,7 +92,7 @@ const getUpdateUserContentFunction = (root, getContentForUser, getGradeForUser,
             getContentForUser(user.id).then(fetchContentFromRender),
             getGradeForUser(user.id),
         ]);
-        Templates.replaceNodeContents(root.querySelector(Selectors.regions.moduleReplace), html, js);
+        await Templates.replaceNodeContents(root.querySelector(Selectors.regions.moduleReplace), html, js);
 
         const [
             gradingPanelHtml,
@@ -99,7 +100,7 @@ const getUpdateUserContentFunction = (root, getContentForUser, getGradeForUser,
         ] = await Templates.render(userGrade.templatename, userGrade.grade).then(fetchContentFromRender);
         const panelContainer = root.querySelector(Selectors.regions.gradingPanelContainer);
         const panel = panelContainer.querySelector(Selectors.regions.gradingPanel);
-        Templates.replaceNodeContents(panel, gradingPanelHtml, gradingPanelJS);
+        await Templates.replaceNodeContents(panel, gradingPanelHtml, gradingPanelJS);
 
         const form = panel.querySelector('form');
         fillInitialValues(form);
@@ -153,10 +154,10 @@ const hideSearchResultContainer = (bodyContainer, userPickerContainer, searchRes
  * @param {HTMLElement} searchInput The input element for searching
  */
 const showUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {
-    searchContainer.classList.remove('collapsed');
+    searchContainer.classList.remove('collapsed-box');
     toggleSearchButton.setAttribute('aria-expanded', 'true');
-    toggleSearchButton.classList.add('expand');
-    toggleSearchButton.classList.remove('collapse');
+    toggleSearchButton.classList.add('expanded');
+    toggleSearchButton.classList.remove('collapsed');
 
     // Hide the grading info container from screen reader.
     const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);
@@ -178,10 +179,10 @@ const showUserSearchInput = (toggleSearchButton, searchContainer, searchInput) =
  * @param {HTMLElement} searchInput The input element for searching
  */
 const hideUserSearchInput = (toggleSearchButton, searchContainer, searchInput) => {
-    searchContainer.classList.add('collapsed');
+    searchContainer.classList.add('collapsed-box');
     toggleSearchButton.setAttribute('aria-expanded', 'false');
-    toggleSearchButton.classList.add('collapse');
-    toggleSearchButton.classList.remove('expand');
+    toggleSearchButton.classList.add('collapsed');
+    toggleSearchButton.classList.remove('expanded');
     toggleSearchButton.focus();
 
     // Show the grading info container to screen reader.
@@ -223,26 +224,16 @@ const searchForUsers = (userList, searchTerm) => {
  */
 const renderSearchResults = async(searchResultsContainer, users) => {
     const {html, js} = await Templates.renderForPromise(templateNames.grader.searchResults, {users});
-    Templates.replaceNodeContents(searchResultsContainer, html, js);
+    await Templates.replaceNodeContents(searchResultsContainer, html, js);
 };
 
 /**
  * Add click handlers to the buttons in the header of the grading interface.
  *
  * @param {HTMLElement} graderLayout
- * @param {Object} userPicker
- * @param {Function} saveGradeFunction
- * @param {Array} userList List of users for the grader.
  */
-const registerEventListeners = (graderLayout, userPicker, saveGradeFunction, userList) => {
+const registerStaticEventListeners = (graderLayout) => {
     const graderContainer = graderLayout.getContainer();
-    const toggleSearchButton = graderContainer.querySelector(Selectors.buttons.toggleSearch);
-    const searchInputContainer = graderContainer.querySelector(Selectors.regions.userSearchContainer);
-    const searchInput = searchInputContainer.querySelector(Selectors.regions.userSearchInput);
-    const bodyContainer = graderContainer.querySelector(Selectors.regions.bodyContainer);
-    const userPickerContainer = graderContainer.querySelector(Selectors.regions.pickerRegion);
-    const searchResultsContainer = graderContainer.querySelector(Selectors.regions.searchResultsContainer);
-
     graderContainer.addEventListener('click', (e) => {
         if (e.target.closest(Selectors.buttons.toggleFullscreen)) {
             e.stopImmediatePropagation();
@@ -260,6 +251,27 @@ const registerEventListeners = (graderLayout, userPicker, saveGradeFunction, use
 
             return;
         }
+    });
+};
+
+/**
+ * Add click handlers to the buttons that often have their content changed.
+ *
+ * @param {HTMLElement} graderLayout
+ * @param {Object} userPicker
+ * @param {Function} saveGradeFunction
+ * @param {Array} userList List of users for the grader.
+ */
+const registerDynamicEventListeners = (graderLayout, userPicker, saveGradeFunction, userList) => {
+    const graderContainer = graderLayout.getContainer();
+    const toggleSearchButton = graderContainer.querySelector(Selectors.buttons.toggleSearch);
+    const searchInputContainer = graderContainer.querySelector(Selectors.regions.userSearchContainer);
+    const searchInput = searchInputContainer.querySelector(Selectors.regions.userSearchInput);
+    const bodyContainer = graderContainer.querySelector(Selectors.regions.bodyContainer);
+    const userPickerContainer = graderContainer.querySelector(Selectors.regions.pickerRegion);
+    const searchResultsContainer = graderContainer.querySelector(Selectors.regions.searchResultsContainer);
+
+    graderContainer.addEventListener('click', (e) => {
 
         if (e.target.closest(Selectors.buttons.saveGrade)) {
             saveGradeFunction(userPicker.currentUser);
@@ -377,7 +389,7 @@ const displayGradingError = async(root, user, err) => {
         await getString('grades:gradesavefailed', 'mod_forum', {error: err.message, ...user}),
     ]);
 
-    Templates.replaceNodeContents(root.querySelector(Selectors.regions.gradingPanelErrors), html, js);
+    await Templates.replaceNodeContents(root.querySelector(Selectors.regions.gradingPanelErrors), html, js);
     addToast(errorString, {type: 'warning'});
 };
 
@@ -418,6 +430,7 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
         return;
     }
 
+    const pendingPromise = new Pending();
     // Now that we have confirmed there are at least some users let's boot up the grader interface.
     const [
         graderLayout,
@@ -427,6 +440,7 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
             fullscreen: false,
             showLoader: false,
             focusOnClose,
+            callerName: await getString('forumgrader', 'mod_forum'),
         }),
         Templates.renderForPromise(templateNames.grader.app, {
             moduleName,
@@ -437,12 +451,19 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
         }),
     ]);
 
+    registerStaticEventListeners(graderLayout);
+
     const graderContainer = graderLayout.getContainer();
 
     const saveGradeFunction = getSaveUserGradeFunction(graderContainer, setGradeForUser);
 
-    Templates.replaceNodeContents(graderContainer, html, js);
-    const updateUserContent = getUpdateUserContentFunction(graderContainer, getContentForUser, getGradeForUser, saveGradeFunction);
+    await Templates.replaceNodeContents(graderContainer, html, js);
+    const updateUserContent = await getUpdateUserContentFunction(
+        graderContainer,
+        getContentForUser,
+        getGradeForUser,
+        saveGradeFunction
+    );
 
     const userIds = userList.map(user => user.id);
     const statusContainer = graderContainer.querySelector(Selectors.regions.statusContainer);
@@ -450,16 +471,18 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
     const userPicker = await getUserPicker(
         userList,
         async(user) => {
+            const pendingPromise = new Pending();
             const userGrade = await updateUserContent(user);
             const renderContext = {
                 status: userGrade.hasgrade,
                 index: userIds.indexOf(user.id) + 1,
                 total: userList.length
             };
-            Templates.render(templateNames.grader.status, renderContext).then(html => {
+            await Templates.render(templateNames.grader.status, renderContext).then(html => {
                 statusContainer.innerHTML = html;
                 return html;
             }).catch();
+            pendingPromise.resolve();
         },
         saveGradeFunction,
         {
@@ -467,8 +490,9 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
         },
     );
 
+    pendingPromise.resolve();
     // Register all event listeners.
-    registerEventListeners(graderLayout, userPicker, saveGradeFunction, userList);
+    registerDynamicEventListeners(graderLayout, userPicker, saveGradeFunction, userList);
 
     // Display the newly created user picker.
     displayUserPicker(graderContainer, userPicker.rootNode);
diff --git a/mod/forum/amd/src/local/grades/local/grader/user_picker.js b/mod/forum/amd/src/local/grades/local/grader/user_picker.js
index 6ec6fa3bd2bfc..47a8f6b0e9793 100644
--- a/mod/forum/amd/src/local/grades/local/grader/user_picker.js
+++ b/mod/forum/amd/src/local/grades/local/grader/user_picker.js
@@ -80,7 +80,7 @@ class UserPicker {
         this.root = document.createElement('div');
 
         const {html, js} = await this.renderNavigator();
-        Templates.replaceNodeContents(this.root, html, js);
+        await Templates.replaceNodeContents(this.root, html, js);
 
         // Call the showUser function to show the first user immediately.
         await this.showUser(this.currentUser);
@@ -116,7 +116,7 @@ class UserPicker {
     async showUser(user) {
         const [{html, js}] = await Promise.all([this.renderUserChange(user), this.showUserCallback(user)]);
         const userRegion = this.root.querySelector(Selectors.regions.userRegion);
-        Templates.replaceNodeContents(userRegion, html, js);
+        await Templates.replaceNodeContents(userRegion, html, js);
 
         // Update the hidden now-grading region so screen readers can announce the user that's currently being graded.
         const currentUserRegion = this.root.querySelector(Selectors.regions.currentUser);
diff --git a/mod/forum/amd/src/local/layout/fullscreen.js b/mod/forum/amd/src/local/layout/fullscreen.js
index 2e3984bf269e4..388370a1a7011 100644
--- a/mod/forum/amd/src/local/layout/fullscreen.js
+++ b/mod/forum/amd/src/local/layout/fullscreen.js
@@ -38,12 +38,14 @@ export const createLayout = ({
     fullscreen = true,
     showLoader = false,
     focusOnClose = null,
+    callerName = 'Fullscreen application'
 } = {}) => {
     const container = document.createElement('div');
     document.body.append(container);
     container.classList.add('layout');
     container.classList.add('fullscreen');
     container.setAttribute('role', 'application');
+    container.setAttribute('aria-label', callerName);
     addToastRegion(container);
 
     // Lock scrolling on the document body.
diff --git a/mod/forum/templates/local/grades/local/grader/grading.mustache b/mod/forum/templates/local/grades/local/grader/grading.mustache
index a4280de722287..b90f94a9bda8c 100644
--- a/mod/forum/templates/local/grades/local/grader/grading.mustache
+++ b/mod/forum/templates/local/grades/local/grader/grading.mustache
@@ -57,7 +57,7 @@
                     </div>
                     <div
                         id="searchbox-{{uniqid}}"
-                        class="user-search-container d-flex flex-grow-1 align-items-center collapsed"
+                        class="user-search-container d-flex flex-grow-1 align-items-center collapsed-box"
                         data-region="user-search-container"
                     >
                         <div class="search-input-container w-100">
@@ -73,17 +73,18 @@
                             >
                             <span id="user-search-input-{{uniqid}}-label" class="sr-only">{{#str}}searchusers, mod_forum{{/str}}</span>
                             <button
-                                class="toggle-search-button btn btn-icon icon-no-margin"
+                                class="toggle-search-button btn btn-icon icon-no-margin p-0 justify-content-center icons-collapse-expand collapsed"
                                 aria-expanded="false"
                                 aria-controls="searchbox-{{uniqid}}"
                                 data-action="toggle-search"
+                                title="{{#str}}searchusers, mod_forum{{/str}}"
                             >
-                                <div class="expanded-icon" data-region="user-search-icon-hide">
-                                    <span>{{#pix}} e/cancel, core, {{#str}} hideusersearch, mod_forum {{/str}} {{/pix}}</span>
-                                </div>
-                                <div class="collapsed-icon" data-region="user-search-icon-show">
-                                    <span>{{#pix}} i/search, core, {{#str}} showusersearch, mod_forum {{/str}} {{/pix}}</span>
-                                </div>
+                                <span class="expanded-icon" data-region="user-search-icon-hide">
+                                    {{#pix}} e/cancel, core, {{#str}} hideusersearch, mod_forum {{/str}} {{/pix}}
+                                </span>
+                                <span class="collapsed-icon" data-region="user-search-icon-show">
+                                    {{#pix}} i/search, core, {{#str}} showusersearch, mod_forum {{/str}} {{/pix}}
+                                </span>
                             </button>
                         </div>
                     </div>
@@ -105,11 +106,11 @@
                     </h4>
                     <div data-region="notification" class="pt-3 px-3" role="radiogroup" aria-labelledby="send-student-notifications-setting">
                         <label class="form-check">
-                            <input class="form-check-input" type="radio" name="sendstudentnotifications" value="1"{{#defaultsendnotifications}} checked{{/defaultsendnotifications}}/>
+                            <input class="form-check-input" type="radio" name="sendstudentnotifications" value="1"{{#defaultsendnotifications}} checked{{/defaultsendnotifications}}>
                             {{#str}}sendstudentnotificationsyes, mod_forum{{/str}}
                         </label>
                         <label class="form-check">
-                            <input class="form-check-input" type="radio" name="sendstudentnotifications" value="0"{{^defaultsendnotifications}} checked{{/defaultsendnotifications}}/>
+                            <input class="form-check-input" type="radio" name="sendstudentnotifications" value="0"{{^defaultsendnotifications}} checked{{/defaultsendnotifications}}>
                             {{#str}}sendstudentnotificationsno, mod_forum{{/str}}
                         </label>
                         {{#helpicon}}
@@ -122,6 +123,6 @@
             <div class="hidden overflow-auto" data-region="search-results-container"></div>
         </div>
         <div data-region="grade-errors" role="alert" aria-live="assertive"></div>
-        <hr/>
+        <hr>
     {{/drawercontent}}
 {{/core/drawer}}
diff --git a/mod/forum/templates/local/grades/local/grader/navigation.mustache b/mod/forum/templates/local/grades/local/grader/navigation.mustache
index b1746d658b790..be37413e17fb3 100644
--- a/mod/forum/templates/local/grades/local/grader/navigation.mustache
+++ b/mod/forum/templates/local/grades/local/grader/navigation.mustache
@@ -41,9 +41,9 @@
                 <h5 class="d-inline px-0 mb-0">{{courseName}}</h5>
             </a>
             <span class="text-muted icon-no-margin">{{#pix}} i/breadcrumbdivider, core {{/pix}}</span>
-            <button class="btn btn-link px-2 colour-inherit" data-action="closegrader">
+            <a href="#" class="btn btn-link px-2 colour-inherit" data-action="closegrader">
                 <h5 class="d-inline px-0 mb-0">{{moduleName}}</h5>
-            </button>
+            </a>
             <span class="text-muted icon-no-margin">{{#pix}} i/breadcrumbdivider, core {{/pix}}</span>
             <h5 class="d-inline px-2 mb-0 font-weight-bold">{{#str}}grading, forum{{/str}}</h5>
         </div>
@@ -94,6 +94,7 @@
                     aria-haspopup="true"
                     aria-expanded="false"
                     aria-label="{{#str}} actionsforgraderinterface, mod_forum {{/str}}"
+                    data-action="togglefullscreen"
                 >
                     {{#pix}} i/menu, core {{/pix}}
                 </button>
@@ -102,7 +103,6 @@
                         class="dropdown-item"
                         type="button"
                         data-action="togglefullscreen"
-                        type="button"
                     >
                         {{#str}} togglefullscreen, mod_forum {{/str}}
                     </button>
diff --git a/mod/forum/tests/behat/forum_activity_completion.feature b/mod/forum/tests/behat/forum_activity_completion.feature
index 1b566755ab148..9ff5166b9badc 100644
--- a/mod/forum/tests/behat/forum_activity_completion.feature
+++ b/mod/forum/tests/behat/forum_activity_completion.feature
@@ -78,7 +78,8 @@ Feature: View activity completion in the forum activity
     And I press "Grade users"
     And I set the field "grade" to "33"
     And I press "Save"
-    And I press "Close grader"
+    And I click on "Close grader" "button" in the "Forum grader" "Fullscreen interface"
+    And I log out
     # All conditions should now be completed.
     When I am on the "Music history" "forum activity" page logged in as student1
     Then the "View" completion condition of "Music history" is displayed as "done"
diff --git a/mod/forum/tests/behat/forum_activity_completion_pass_grade.feature b/mod/forum/tests/behat/forum_activity_completion_pass_grade.feature
index 9e9f4e613d24c..ba62a24a53591 100644
--- a/mod/forum/tests/behat/forum_activity_completion_pass_grade.feature
+++ b/mod/forum/tests/behat/forum_activity_completion_pass_grade.feature
@@ -1,5 +1,5 @@
 @mod @mod_forum @core_completion
-Feature: Completion pass grade  view activity completion in the forum activity
+Feature: Completion pass grade view activity completion in the forum activity
   In order to have visibility of forum completion requirements
   As a student
   I need to be able to view my forum completion progress
@@ -82,7 +82,8 @@ Feature: Completion pass grade  view activity completion in the forum activity
     And I press "Grade users"
     And I set the field "grade" to "33"
     And I press "Save"
-    And I press "Close grader"
+    And I click on "Close grader" "button" in the "Forum grader" "Fullscreen interface"
+    And I log out
     # All conditions should now be completed.
     When I am on the "Music history" "forum activity" page logged in as student1
     Then the "View" completion condition of "Music history" is displayed as "done"
@@ -126,7 +127,8 @@ Feature: Completion pass grade  view activity completion in the forum activity
     And I press "Grade users"
     And I set the field "grade" to "60"
     And I press "Save"
-    And I press "Close grader"
+    And I click on "Close grader" "button" in the "Forum grader" "Fullscreen interface"
+    And I log out
     # All conditions should now be completed.
     When I am on the "Music history" "forum activity" page logged in as student1
     Then the "View" completion condition of "Music history" is displayed as "done"
diff --git a/mod/forum/tests/behat/forum_grading_interface.feature b/mod/forum/tests/behat/forum_grading_interface.feature
new file mode 100644
index 0000000000000..40c6dae189ac4
--- /dev/null
+++ b/mod/forum/tests/behat/forum_grading_interface.feature
@@ -0,0 +1,117 @@
+@mod @mod_forum @core_grades @javascript @mod_forum_grading
+Feature: I can set up & perform basic operations
+  with the forum grading interface, whilst manually confirming
+  required fields exist.
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+      | student2 | Student   | 2        | student2@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | format | numsections |
+      | Course 1 | C1        | weeks  | 5           |
+    And the following "grade categories" exist:
+      | fullname | course |
+      | Tutor    | C1     |
+      | Peers    | C1     |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
+      | student2 | C1     | student        |
+    And the following "activities" exist:
+      | activity | course | name         |
+      | forum    | C1     | Test Forum 1 |
+    And I am on the "Test Forum 1" "forum activity editing" page logged in as teacher1
+    And I set the following fields to these values:
+      | grade_forum[modgrade_type]  | Point                 |
+      | grade_forum[modgrade_point] | 10                    |
+      | gradecat_forum              | Tutor                 |
+      | gradepass_forum             | 4                     |
+      | advancedgradingmethod_forum | Simple direct grading |
+    And I press "Save and display"
+    And I change window size to "large"
+
+  Scenario: Test setting up forum grading and test some of the basic functionality.
+    Given I click on "Grade users" "button"
+    # Breadcrumb items
+    And I should see "C1"
+    And I should see "Test Forum 1"
+    And I should see "Grading"
+    # Check that we have the grading panel
+    And I should see "Grading (Test Forum 1)"
+    # Close the grader interface back to the course
+    And I click on "C1" "link" in the "Forum grader" "Fullscreen interface"
+    And I wait to be redirected
+    And I should see "Course 1"
+    And I follow "Test Forum 1"
+    And I click on "Grade users" "button"
+    # Close the grader interface back to the forum / Waits in place till event handlers moved
+    And I click on "Test Forum 1" "link" in the "Forum grader" "Fullscreen interface"
+    And I should not see "Grading (Test Forum 1)"
+    And I click on "Grade users" "button"
+    And I should see "Grading (Test Forum 1)"
+    And I click on "Close grader" "button" in the "Forum grader" "Fullscreen interface"
+    And I should not see "Grading (Test Forum 1)"
+    And I click on "Grade users" "button"
+    # Collapse the grading panel
+    And I should see "Grading (Test Forum 1)"
+    And I click on "Hide grader panel" "button"
+    And I should not see "Grading (Test Forum 1)"
+    And I click on "Show grader panel" "button"
+    And I should see "Grading (Test Forum 1)"
+    # Navigate between users. / Could add graded status when it is rolled in
+    And I should see "Student 1"
+    And I should see "1 out of 2"
+    And I set the field "Grade" to "6"
+    And I click on "Save changes and proceed to the next user" "button"
+    And I should see "Student 2"
+    And I should not see "1 out of 2"
+    And I click on "Save changes and proceed to the previous user" "button"
+    And I should see "Student 1"
+    And I should not see "2 out of 2"
+    And the field "Grade" matches value "6"
+    # Search for a user
+    And I click on "Search users" "button" in the "Forum grader" "Fullscreen interface"
+    And I click on "Student 2" "button"
+    And I should see "Student 2"
+    And I should see "2 out of 2"
+    And I click on "Search users" "button" in the "Forum grader" "Fullscreen interface"
+    And I click on "Student 1" "button"
+    And I should see "Student 1"
+    And I should see "1 out of 2"
+    # Forum discussions
+    And I am on "Course 1" course homepage
+    And I add a new discussion to "Test Forum 1" forum with:
+      | Subject | Photosynthesis discussion |
+      | Message | Lets discuss our learning about Photosynthesis this week in this thread. |
+    And I log out
+    And I am on the "C1" "Course" page logged in as "student1"
+    And I reply "Photosynthesis discussion" post from "Test Forum 1" forum with:
+      | Message | Can anyone tell me which number is the mass number in the periodic table? |
+    And I log out
+    And I am on the "C1" "Course" page logged in as "student2"
+    And I reply "Photosynthesis discussion" post from "Test Forum 1" forum with:
+      | Message | What does Photosynthesis mean? |
+    And I log out
+    And I am on the "C1" "Course" page logged in as "teacher1"
+    And I click on "Test Forum 1" "link"
+    And I click on "Grade users" "button"
+    # Parent post
+    And I should see "Discussion started by Teacher 1"
+    And I should see "Photosynthesis discussion"
+    And I should see "View parent post"
+    And I click on "View parent post" "button"
+    And I should see "Lets discuss our learning about Photosynthesis this week in this thread."
+    # User post
+    And I should see "Re: Photosynthesis discussion"
+    And I should see "by Student 1"
+    And I should see "Can anyone tell me which number is the mass number in the periodic table?"
+    And I should see "View discussion"
+    # View post in context
+    And I click on "View discussion" "button"
+    And I should see "Photosynthesis discussion"
+    And I should see "by Student 2"
+    And I should see "What does Photosynthesis mean?"
diff --git a/mod/forum/tests/behat/forum_grading_interface_marking_guide.feature b/mod/forum/tests/behat/forum_grading_interface_marking_guide.feature
new file mode 100644
index 0000000000000..4bc595fc56b80
--- /dev/null
+++ b/mod/forum/tests/behat/forum_grading_interface_marking_guide.feature
@@ -0,0 +1,85 @@
+@mod @mod_forum @core_grades @javascript @mod_forum_grading
+Feature: I can grade a students interaction across a marking guide forum
+  As a teacher using the grading interface
+  I can assign grades to a student based on their contributions
+  Using Marking Guide based advanced grading guide
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+      | student2 | Student   | 2        | student2@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | format | numsections |
+      | Course 1 | C1        | weeks  | 5           |
+    And the following "grade categories" exist:
+      | fullname | course |
+      | Tutor    | C1     |
+      | Peers    | C1     |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
+      | student2 | C1     | student        |
+    And the following "activities" exist:
+      | activity | course | name                |
+      | forum    | C1     | Marking Guide Forum |
+    And I am on the "Marking Guide Forum" "forum activity editing" page logged in as teacher1
+    And I set the following fields to these values:
+      | grade_forum[modgrade_type]  | Point         |
+      | grade_forum[modgrade_point] | 100           |
+      | gradecat_forum              | Tutor         |
+      | gradepass_forum             | 70            |
+      | advancedgradingmethod_forum | Marking guide |
+    And I press "Save and display"
+    And I change window size to "large"
+
+  Scenario: Confirm as a teacher I can use a marking guide.
+    # Defining a marking guide
+    Given I go to "Marking Guide Forum" advanced grading definition page
+    And I set the following fields to these values:
+      | Name        | Forum marking guide            |
+      | Description | Marking guide test description |
+    And I define the following marking guide:
+      | Criterion name    | Description for students         | Description for markers         | Maximum score |
+      | Guide criterion A | Guide A description for students | Guide A description for markers | 30            |
+      | Guide criterion B | Guide B description for students | Guide B description for markers | 30            |
+      | Guide criterion C | Guide C description for students | Guide C description for markers | 40            |
+    And I define the following frequently used comments:
+      | Comment 1   |
+      | Comment 2   |
+      | Comment 3   |
+      | Comment "4" |
+    When I press "Save marking guide and make it ready"
+    Then I should see "Ready for use"
+    And I should see "Guide criterion A"
+    And I should see "Guide criterion B"
+    And I should see "Guide criterion C"
+    And I should see "Comment 1"
+    And I should see "Comment 2"
+    And I should see "Comment 3"
+    And I should see "Comment \"4\""
+    And I navigate to "Forum" in current page administration
+    # Open the grader interface.
+    And I click on "Grade users" "button"
+    And I wait until "Student 1" "text" exists
+    # Xpaths used to get around the name needing to be a very specific dynamic name.
+    And I set the field with xpath "//input[contains(@aria-label,'Guide criterion A score')]" to "25"
+    And I set the field with xpath "//textarea[contains(@aria-label,'Additional comments for criterion, Guide criterion A')]" to "Very good"
+    And I set the field with xpath "//input[contains(@aria-label,'Guide criterion B score')]" to "20"
+    And I set the field with xpath "//input[contains(@aria-label,'Guide criterion C score')]" to "35"
+    And I set the field with xpath "//textarea[contains(@aria-label,'Additional comments for criterion, Guide criterion C')]" to "Nice!"
+    And I click on "Save changes and proceed to the next user" "button"
+    And the field with xpath "//textarea[contains(@aria-label,'Additional comments for criterion, Guide criterion A')]" does not match value "Very good"
+    And I click on "Save changes and proceed to the previous user" "button"
+    And I wait until "Student 1" "text" exists
+    And the field with xpath "//textarea[contains(@aria-label,'Additional comments for criterion, Guide criterion A')]" matches value "Very good"
+    # Confirm the grade is now in the grading report.
+    And I am on "Course 1" course homepage
+    And I navigate to "View > User report" in the course gradebook
+    And I click on "Student 1" in the "user" search widget
+    And the following should exist in the "user-grade" table:
+      | Grade item                      | Calculated weight | Grade | Range | Percentage | Contribution to course total |
+      | Marking Guide Forum whole forum | 100.00 %          | 80    | 0–100 | 80.00 %    | 80.00 %                      |
+      | Course total                    | -                 | 80.00 | 0–100 | 80.00 %    | -                            |
diff --git a/mod/forum/tests/behat/forum_grading_interface_point.feature b/mod/forum/tests/behat/forum_grading_interface_point.feature
new file mode 100644
index 0000000000000..d22d378ffc249
--- /dev/null
+++ b/mod/forum/tests/behat/forum_grading_interface_point.feature
@@ -0,0 +1,57 @@
+@mod @mod_forum @core_grades @javascript @mod_forum_grading
+Feature: I can grade a students interaction across a basic point based forum
+  As a teacher using the grading interface
+  I can assign grades to a student based on their contributions
+  Using point based simple grading
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+      | student2 | Student   | 2        | student2@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | format | numsections |
+      | Course 1 | C1        | weeks  | 5           |
+    And the following "grade categories" exist:
+      | fullname | course |
+      | Tutor    | C1     |
+      | Peers    | C1     |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
+      | student2 | C1     | student        |
+    And the following "activities" exist:
+      | activity | course | name        |
+      | forum    | C1     | Point Forum |
+    And I am on the "Point Forum" "forum activity editing" page logged in as teacher1
+    And I set the following fields to these values:
+      | grade_forum[modgrade_type]  | Point                 |
+      | grade_forum[modgrade_point] | 10                    |
+      | gradecat_forum              | Tutor                 |
+      | gradepass_forum             | 4                     |
+      | advancedgradingmethod_forum | Simple direct grading |
+    And I press "Save and display"
+    And I change window size to "large"
+
+  Scenario: Grade a forum using point marking.
+    # Open the grader interface.
+    Given I click on "Grade users" "button"
+    And I should see "Grading (Point Forum)"
+    When I set the field "grade" to "6"
+    # Save the grade & Check it shows on user navigation
+    And I click on "Save changes and proceed to the next user" "button"
+    And I should see "Student 2"
+    And the field "grade" does not match value "6"
+    And I click on "Save changes and proceed to the previous user" "button"
+    And I should see "Student 1"
+    And the field "grade" matches value "6"
+    # Confirm the grade is now in the grading report.
+    And I am on "Course 1" course homepage
+    And I navigate to "View > User report" in the course gradebook
+    And I click on "Student 1" in the "user" search widget
+    Then the following should exist in the "user-grade" table:
+      | Grade item              | Calculated weight | Grade | Range | Percentage | Contribution to course total |
+      | Point Forum whole forum | 100.00 %          | 6.00  | 0–10  | 60.00 %    | 60.00 %                      |
+      | Course total            | -                 | 6.00  | 0–10  | 60.00 %    | -                            |
diff --git a/mod/forum/tests/behat/forum_grading_interface_rubric.feature b/mod/forum/tests/behat/forum_grading_interface_rubric.feature
new file mode 100644
index 0000000000000..73f0d2a4d92a5
--- /dev/null
+++ b/mod/forum/tests/behat/forum_grading_interface_rubric.feature
@@ -0,0 +1,76 @@
+@mod @mod_forum @core_grades @javascript @mod_forum_grading
+Feature: I can grade a students interaction across a rubric forum
+  As a teacher using the grading interface
+  I can assign grades to a student based on their contributions
+  Using rubric based advanced grading rubric
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+      | student2 | Student   | 2        | student2@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | format | numsections |
+      | Course 1 | C1        | weeks  | 5           |
+    And the following "grade categories" exist:
+      | fullname | course |
+      | Tutor    | C1     |
+      | Peers    | C1     |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
+      | student2 | C1     | student        |
+    And the following "activities" exist:
+      | activity | course | name         |
+      | forum    | C1     | Rubric Forum |
+    And I am on the "Rubric Forum" "forum activity editing" page logged in as teacher1
+    And I set the following fields to these values:
+      | grade_forum[modgrade_type]  | Point  |
+      | grade_forum[modgrade_point] | 100    |
+      | gradecat_forum              | Tutor  |
+      | gradepass_forum             | 70     |
+      | advancedgradingmethod_forum | Rubric |
+    And I press "Save and display"
+    And I change window size to "large"
+
+  Scenario: Confirm as a teacher I can grade using a rubric.
+    Given I go to "Rubric Forum" advanced grading definition page
+    # Defining a rubric.
+    And I set the following fields to these values:
+      | Name        | Rubric Forum rubric     |
+      | Description | Rubric test description |
+    And I define the following rubric:
+      | Criterion 1 | Level 11 | 1  | Level 12 | 20 | Level 13 | 40 | Level 14 | 50 |
+      | Criterion 2 | Level 21 | 10 | Level 22 | 20 | Level 23 | 30 |          |    |
+      | Criterion 3 | Level 31 | 5  | Level 32 | 20 |          |    |          |    |
+    And I press "Save as draft"
+    And I go to "Rubric Forum" advanced grading definition page
+    When I press "Save rubric and make it ready"
+    Then I should see "Ready for use"
+    And I click on "Rubric Forum" "link"
+    # Open the grader interface.
+    And I click on "Grade users" "button"
+    And I wait until "Student 1" "text" exists
+    And I click on "Level 14" "radio"
+    And I click on "Level 21" "radio"
+    And I click on "Level 31" "radio"
+    # Xpaths used to get around the name needing to be a very specific dynamic name.
+    And I set the field with xpath "//textarea[contains(@aria-label,'Criterion 1 remark')]" to "Well done"
+    And I set the field with xpath "//textarea[contains(@aria-label,'Criterion 2 remark')]" to "Nice effort"
+    And I set the field with xpath "//textarea[contains(@aria-label,'Criterion 3 remark')]" to "A lot of room to grow"
+    And I click on "Save changes and proceed to the next user" "button"
+    And I wait until "Student 2" "text" exists
+    And the field with xpath "//textarea[contains(@aria-label,'Criterion 1 remark')]" does not match value "Well done"
+    And I click on "Save changes and proceed to the previous user" "button"
+    And I wait until "Student 1" "text" exists
+    And the field with xpath "//textarea[contains(@aria-label,'Criterion 1 remark')]" matches value "Well done"
+    # Confirm the grade is now in the grading report.
+    And I am on "Course 1" course homepage
+    And I navigate to "View > User report" in the course gradebook
+    And I click on "Student 1" in the "user" search widget
+    And the following should exist in the "user-grade" table:
+      | Grade item               | Calculated weight | Grade | Range | Percentage | Contribution to course total |
+      | Rubric Forum whole forum | 100.00 %          | 65.00 | 0–100 | 65.00 %    | 65.00 %                      |
+      | Course total             | -                 | 65.00 | 0–100 | 65.00 %    | -                            |
diff --git a/mod/forum/tests/behat/forum_grading_interface_scale.feature b/mod/forum/tests/behat/forum_grading_interface_scale.feature
new file mode 100644
index 0000000000000..d1aded380af12
--- /dev/null
+++ b/mod/forum/tests/behat/forum_grading_interface_scale.feature
@@ -0,0 +1,60 @@
+@mod @mod_forum @core_grades @javascript @mod_forum_grading
+Feature: I can grade a students interaction across a scale forum
+  As a teacher using the grading interface
+  I can assign grades to a student based on their contributions
+  Using scale based simple grading
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+      | student2 | Student   | 2        | student2@example.com |
+    And the following "courses" exist:
+      | fullname | shortname | format | numsections |
+      | Course 1 | C1        | weeks  | 5           |
+    And the following "grade categories" exist:
+      | fullname | course |
+      | Tutor    | C1     |
+      | Peers    | C1     |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
+      | student2 | C1     | student        |
+    And the following "scales" exist:
+      | name         | scale                                     |
+      | Test Scale 1 | Disappointing, Good, Very good, Excellent |
+    And the following "activities" exist:
+      | activity | course | name        |
+      | forum    | C1     | Scale Forum |
+    And I am on the "Scale Forum" "forum activity editing" page logged in as teacher1
+    And I set the following fields to these values:
+      | grade_forum[modgrade_type]  | Scale                 |
+      | grade_forum[modgrade_scale] | Test Scale 1          |
+      | gradecat_forum              | Tutor                 |
+      | gradepass_forum             | 2                     |
+      | advancedgradingmethod_forum | Simple direct grading |
+    And I press "Save and display"
+    And I change window size to "large"
+
+  Scenario: Grade a learners activity using a scale.
+    # Open the grader interface.
+    Given I click on "Grade users" "button"
+    And I should see "Grading (Scale Forum)"
+    When I set the field "Grade" to "Very good"
+    # Save the grade & Check it shows on user navigation
+    And I click on "Save changes and proceed to the next user" "button"
+    And I should see "Student 2"
+    And the field "Grade" does not match value "Very good"
+    And I click on "Save changes and proceed to the previous user" "button"
+    And I should see "Student 1"
+    And the field "Grade" matches value "Very good"
+    # Confirm the grade is now in the grading report.
+    And I am on "Course 1" course homepage
+    And I navigate to "View > User report" in the course gradebook
+    And I click on "Student 1" in the "user" search widget
+    Then the following should exist in the "user-grade" table:
+      | Grade item              | Calculated weight | Grade     | Range                   | Percentage | Contribution to course total |
+      | Scale Forum whole forum | 100.00 %          | Very good | Disappointing–Excellent | 66.67 %    | 75.00 %                      |
+      | Course total            | -                 | 3.00      | 0–4                     | 75.00 %    | -                            |
diff --git a/mod/forum/tests/behat/grade_view_discussion.feature b/mod/forum/tests/behat/grade_view_discussion.feature
index eaf1a18f018d6..7ccc245f4fbc6 100644
--- a/mod/forum/tests/behat/grade_view_discussion.feature
+++ b/mod/forum/tests/behat/grade_view_discussion.feature
@@ -27,7 +27,7 @@ Feature: View discussion while grading in a forum
       | grade_forum | 100                        |
       | scale       | 100                        |
     # If there is more than one pots for Student 1 the test will not be able to select the
-    # correct View discussion link, as there is no selector for thier container.
+    # correct View discussion link, as there is no selector for their container.
     And the following forum discussions exist in course "Course 1":
       | forum          | user     | name     | message                          |
       | Gradable forum | student1 | My topic | This is the thing I posted about |
@@ -46,8 +46,7 @@ Feature: View discussion while grading in a forum
   Scenario: Viewing a discussion while grading is fullscreen
     Given I am on the "Gradable forum" "forum activity" page logged in as teacher
     And I press "Grade users"
-    # Uses the aria-label for the menu in in the grading interface.
-    And I press "Actions for the grader interface"
+    And I click on "Actions for the grader interface" "button" in the "Forum grader" "Fullscreen interface"
     And I press "Toggle full screen"
     When I press "View discussion"
     Then I should see "I disagree" in the "My topic" "dialogue"
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 5ae0c605d82fa..38bb06936d2bb 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -588,16 +588,16 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
             }
 
             .toggle-search-button {
-                &.expand {
+                &.expanded {
                     animation-name: expandSearchButton;
                     animation-duration: $grading-animation-duration;
                     animation-timing-function: ease-in-out;
                 }
 
-                &.collapse {
-                    display: block;
+                &.collapsed {
                     animation-name: collapseSearchButton;
                     animation-duration: $grading-animation-duration;
+                    animation-timing-function: ease-in-out;
                 }
             }
 
@@ -681,7 +681,7 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
                     }
                 }
 
-                &.collapsed {
+                &.collapsed-box {
                     width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
                     transition: width $grading-animation-duration ease-in-out;
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index bba2e639d67df..972b04b41f244 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -33920,15 +33920,15 @@ select {
   transition: left 0.3s ease-in-out;
   z-index: 1;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.expand {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.expanded {
   animation-name: expandSearchButton;
   animation-duration: 0.3s;
   animation-timing-function: ease-in-out;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.collapse {
-  display: block;
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.collapsed {
   animation-name: collapseSearchButton;
   animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
 }
 .path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container {
   overflow: hidden;
@@ -33992,24 +33992,24 @@ select {
   overflow: hidden;
   transition: opacity 0s linear 0.3s, max-height 0s linear 0.3s, max-width 0s linear 0.3s, visibility 0s linear 0.3s;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box {
   width: calc(36px + 0.5rem + 0.5rem);
   transition: width 0.3s ease-in-out;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container {
   flex-wrap: nowrap;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container input,
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container .search-icon {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container input,
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container .search-icon {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0s linear, visibility 0s linear;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container input {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container input {
   padding-left: 0;
   padding-right: 0;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container .toggle-search-button .expanded-icon {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container .toggle-search-button .expanded-icon {
   opacity: 0;
   visibility: hidden;
   max-height: 0;
@@ -34017,7 +34017,7 @@ select {
   overflow: hidden;
   transition: opacity 0s linear, max-height 0s linear, max-width 0s linear, visibility 0s linear;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container .toggle-search-button .collapsed-icon {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container .toggle-search-button .collapsed-icon {
   opacity: 1;
   visibility: visible;
   max-width: 50px;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 6607b1a5b66ca..0bd05a33bed9b 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -33920,15 +33920,15 @@ select {
   transition: left 0.3s ease-in-out;
   z-index: 1;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.expand {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.expanded {
   animation-name: expandSearchButton;
   animation-duration: 0.3s;
   animation-timing-function: ease-in-out;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.collapse {
-  display: block;
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .toggle-search-button.collapsed {
   animation-name: collapseSearchButton;
   animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
 }
 .path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container {
   overflow: hidden;
@@ -33992,24 +33992,24 @@ select {
   overflow: hidden;
   transition: opacity 0s linear 0.3s, max-height 0s linear 0.3s, max-width 0s linear 0.3s, visibility 0s linear 0.3s;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box {
   width: calc(36px + 0.5rem + 0.5rem);
   transition: width 0.3s ease-in-out;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container {
   flex-wrap: nowrap;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container input,
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container .search-icon {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container input,
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container .search-icon {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0s linear, visibility 0s linear;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container input {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container input {
   padding-left: 0;
   padding-right: 0;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container .toggle-search-button .expanded-icon {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container .toggle-search-button .expanded-icon {
   opacity: 0;
   visibility: hidden;
   max-height: 0;
@@ -34017,7 +34017,7 @@ select {
   overflow: hidden;
   transition: opacity 0s linear, max-height 0s linear, max-width 0s linear, visibility 0s linear;
 }
-.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed .search-input-container .toggle-search-button .collapsed-icon {
+.path-mod-forum .unified-grader .grader-grading-panel .header-container .user-search-container.collapsed-box .search-input-container .toggle-search-button .collapsed-icon {
   opacity: 1;
   visibility: visible;
   max-width: 50px;