Modal refactor (#1335)

* Rename modal-container to modal

* Update how modal IDs are handled

* Fix invalid modal check

* Update modal IDs

8 files changed, 51 insertions, 43 deletions

diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 46e859c1..01c19af4 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -677,7 +677,7 @@ select.short-height {
 
 
 /* Modal */
-.modal-container {
+.modal {
     position: fixed;
     left: 0;
     top: 0;
@@ -697,14 +697,14 @@ select.short-height {
         opacity var(--animation-duration2) ease-out,
         visibility 0s linear;
 }
-.modal-container[hidden] {
+.modal[hidden] {
     opacity: 0;
     visibility: hidden;
     transition:
         opacity var(--animation-duration2) ease-in,
         visibility 0s linear var(--animation-duration2);
 }
-.modal-container[hidden]:not(.hidden-animating) {
+.modal[hidden]:not(.hidden-animating) {
     display: none;
 }
 .modal-content {
@@ -726,7 +726,7 @@ select.short-height {
     flex-flow: column nowrap;
     overflow: hidden;
 }
-.modal-container[hidden] .modal-content {
+.modal[hidden] .modal-content {
     pointer-events: none;
 }
 .modal-content.modal-content-small {
@@ -741,7 +741,7 @@ select.short-height {
     transform: translate(0, 0);
     border-radius: 0;
 }
-.modal-container[hidden] .modal-content {
+.modal[hidden] .modal-content {
     transform: translate(0, var(--modal-transition-offset));
     transition:
         transform 0s linear var(--animation-duration2),
@@ -811,7 +811,7 @@ select.short-height {
     padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
 }
 
-.modal-container.modal-container-left {
+.modal.modal-left {
     display: flex;
     flex-flow: row nowrap;
     width: 100%;
@@ -819,7 +819,7 @@ select.short-height {
     background-color: transparent;
     pointer-events: none;
 }
-.modal-container.modal-container-left::after {
+.modal.modal-left::after {
     content: '';
     display: block;
     overflow-y: scroll;
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 57ec5bee..ea9f7503 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -443,7 +443,7 @@ class DictionaryController {
         const progressSelector = '.dictionary-delete-progress';
         const progressContainers = [
             ...node.querySelectorAll('.progress-container'),
-            ...document.querySelectorAll(`#dictionaries ${progressSelector}`)
+            ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
         ];
         const progressBars = [
             ...node.querySelectorAll('.progress-bar'),
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index 436a056c..c4ad9e59 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -128,7 +128,7 @@ class DictionaryImportController {
         const progressSelector = '.dictionary-import-progress';
         const progressContainers = [
             ...document.querySelectorAll('#dictionary-import-progress-container'),
-            ...document.querySelectorAll(`#dictionaries ${progressSelector}`)
+            ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
         ];
         const progressBars = [
             ...document.querySelectorAll('#dictionary-import-progress-container .progress-bar'),
diff --git a/ext/bg/js/settings/modal-controller.js b/ext/bg/js/settings/modal-controller.js
index 832ea437..fe4f911b 100644
--- a/ext/bg/js/settings/modal-controller.js
+++ b/ext/bg/js/settings/modal-controller.js
@@ -26,17 +26,25 @@ class ModalController {
     }
 
     prepare() {
-        for (const node of document.querySelectorAll('.modal,.modal-container')) {
-            const {id} = node;
+        const idSuffix = '-modal';
+        for (const node of document.querySelectorAll('.modal')) {
+            let {id} = node;
+            if (typeof id !== 'string') { continue; }
+
+            if (id.endsWith(idSuffix)) {
+                id = id.substring(0, id.length - idSuffix.length);
+            }
+
             const modal = new Modal(node);
             modal.prepare();
             this._modalMap.set(id, modal);
+            this._modalMap.set(node, modal);
             this._modals.push(modal);
         }
     }
 
-    getModal(name) {
-        const modal = this._modalMap.get(name);
+    getModal(nameOrNode) {
+        const modal = this._modalMap.get(nameOrNode);
         return (typeof modal !== 'undefined' ? modal : null);
     }
 
diff --git a/ext/bg/js/settings2/keyboard-shortcuts-controller.js b/ext/bg/js/settings2/keyboard-shortcuts-controller.js
index 30846a62..0dcfa2ee 100644
--- a/ext/bg/js/settings2/keyboard-shortcuts-controller.js
+++ b/ext/bg/js/settings2/keyboard-shortcuts-controller.js
@@ -45,7 +45,7 @@ class KeyboardShortcutController {
         this._resetButton = document.querySelector('#hotkey-list-reset');
         this._listContainer = document.querySelector('#hotkey-list');
         this._emptyIndicator = document.querySelector('#hotkey-list-empty');
-        this._scrollContainer = document.querySelector('#keyboard-shortcuts .modal-body');
+        this._scrollContainer = document.querySelector('#keyboard-shortcuts-modal .modal-body');
 
         this._addButton.addEventListener('click', this._onAddClick.bind(this));
         this._resetButton.addEventListener('click', this._onResetClick.bind(this));
diff --git a/ext/bg/js/settings2/settings-display-controller.js b/ext/bg/js/settings2/settings-display-controller.js
index 4dee0fab..75c147f2 100644
--- a/ext/bg/js/settings2/settings-display-controller.js
+++ b/ext/bg/js/settings2/settings-display-controller.js
@@ -162,13 +162,13 @@ class SettingsDisplayController {
 
         let [action, target] = modalAction.split(',');
         if (typeof target === 'undefined') {
-            const currentModal = node.closest('.modal-container');
+            const currentModal = node.closest('.modal');
             if (currentModal === null) { return; }
-            target = currentModal.id;
+            target = currentModal;
         }
 
         const modal = this._modalController.getModal(target);
-        if (typeof modal === 'undefined') { return; }
+        if (modal === null) { return; }
 
         switch (action) {
             case 'show':
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 2f1e2f73..7409541f 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1800,7 +1800,7 @@
 
 
 <!-- Profile modals -->
-<div id="profiles" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="profiles-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Profiles</div>
         <div class="modal-header-button-container">
@@ -1828,7 +1828,7 @@
     </div>
 </div></div>
 
-<div id="profile-conditions" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="profile-conditions-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Profile Conditions</div>
         <div class="modal-header-button-container">
@@ -1879,7 +1879,7 @@
     </div>
 </div></div>
 
-<div id="profile-copy" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="profile-copy-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header">
         <div class="modal-title">Copy Profile</div>
         <div class="modal-header-button-container">
@@ -1899,7 +1899,7 @@
     </div>
 </div></div>
 
-<div id="profile-remove" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="profile-remove-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Confirm Profile Deletion</div></div>
     <div class="modal-body">
         <p>
@@ -1965,7 +1965,7 @@
 
 
 <!-- Dictionary modals -->
-<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Dictionaries</div>
         <div class="modal-header-button-container">
@@ -2031,7 +2031,7 @@
     </div>
 </div></div>
 
-<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
     <div class="modal-body">
         <p>Are you sure you want to delete the dictionary:</p>
@@ -2044,7 +2044,7 @@
     </div>
 </div></div>
 
-<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-all-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
     <div class="modal-body">
         <p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>
@@ -2056,7 +2056,7 @@
     </div>
 </div></div>
 
-<div id="secondary-search-dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="secondary-search-dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Secondary Search Dictionaries</div>
         <div class="modal-header-button-container">
@@ -2172,7 +2172,7 @@
 
 
 <!-- Custom CSS modal -->
-<div id="custom-css" class="modal-container modal-container-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1">
+<div id="custom-css-modal" class="modal modal-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1">
     <div class="modal-content-container2 modal-content-dimmer"><div class="modal-content">
         <div class="modal-header">
             <div class="modal-title">Custom CSS</div>
@@ -2198,7 +2198,7 @@
 
 
 <!-- Audio sources modal -->
-<div id="audio-sources" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="audio-sources-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Audio Sources</div>
         <div class="modal-header-button-container">
@@ -2339,7 +2339,7 @@
 
 
 <!-- Scanning inputs modal -->
-<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="scanning-inputs-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Scanning Inputs</div>
         <div class="modal-header-button-container">
@@ -2481,7 +2481,7 @@
 
 
 <!-- Input action prevention modal -->
-<div id="input-action-prevention" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="input-action-prevention-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Input Action Prevention</div></div>
     <div class="modal-body">
         <strong>Prevent middle mouse button actions on:</strong>
@@ -2511,7 +2511,7 @@
 
 
 <!-- Anki cards modal -->
-<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="anki-cards-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Anki Cards</div>
         <div class="modal-header-button-container">
@@ -2562,7 +2562,7 @@
     </div>
 </div></div>
 
-<div id="anki-cards-info" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
+<div id="anki-cards-info-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
     <div class="modal-header">
         <div class="modal-title">Anki Card Information</div>
         <div class="modal-header-button-container">
@@ -2750,7 +2750,7 @@
 
 
 <!-- Anki field template modals -->
-<div id="anki-card-templates" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
+<div id="anki-card-templates-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
     <div class="modal-header"><div class="modal-title">Anki Card Templates</div></div>
     <div class="modal-body anki-card-templates-layout">
         <div class="anki-card-templates-info">
@@ -2789,7 +2789,7 @@
     </div>
 </div></div>
 
-<div id="anki-card-templates-reset" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="anki-card-templates-reset-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Reset Anki Card Templates</div></div>
     <div class="modal-body">
         <p class="danger-text">
@@ -2805,7 +2805,7 @@
 
 
 <!-- Import/export modals -->
-<div id="settings-import-error" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="settings-import-error-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Import Error</div></div>
     <div class="modal-body">
         <p>An error occurred while trying to import the settings file:</p>
@@ -2817,7 +2817,7 @@
     </div>
 </div></div>
 
-<div id="settings-import-warning" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="settings-import-warning-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Import Security Warning</div></div>
     <div class="modal-body">
         <p>
@@ -2833,7 +2833,7 @@
     </div>
 </div></div>
 
-<div id="settings-reset" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="settings-reset-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Reset Settings</div></div>
     <div class="modal-body">
         <p class="danger-text">
@@ -2858,7 +2858,7 @@
 
 
 <!-- Translation modals -->
-<div id="translation-text-replacement-patterns" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="translation-text-replacement-patterns-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Custom Text Replacement Patterns</div>
         <div class="modal-header-button-container">
@@ -2943,7 +2943,7 @@
 
 
 <!-- Sentence parsing modal -->
-<div id="sentence-termination-characters" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="sentence-termination-characters-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Sentence Termination Characters</div>
         <div class="modal-header-button-container">
@@ -3023,7 +3023,7 @@
 
 
 <!-- Keyboard shortcuts modal -->
-<div id="keyboard-shortcuts" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
+<div id="keyboard-shortcuts-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
     <div class="modal-header">
         <div class="modal-title">Keyboard Shortcuts</div>
         <div class="modal-header-button-container">
@@ -3046,7 +3046,7 @@
     </div>
 </div></div>
 
-<div id="extension-keyboard-shortcuts" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="extension-keyboard-shortcuts-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title">Native Keyboard Shortcuts</div>
         <div class="modal-header-button-container">
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index 44db4a77..c6cc7f24 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -208,7 +208,7 @@
 
 
 <!-- Dictionary modals -->
-<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header"><div class="modal-title">Dictionaries</div></div>
     <div class="modal-body">
         <div class="settings-item">
@@ -273,7 +273,7 @@
     </div>
 </div></div>
 
-<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
     <div class="modal-body">
         <p>Are you sure you want to delete the dictionary:</p>
@@ -286,7 +286,7 @@
     </div>
 </div></div>
 
-<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-all-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
     <div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
     <div class="modal-body">
         <p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>