Modal refactor (#1335)

* Rename modal-container to modal

* Update how modal IDs are handled

* Fix invalid modal check

* Update modal IDs

5 files changed, 18 insertions, 10 deletions

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':