Modal refactor (#1335)

* Rename modal-container to modal

* Update how modal IDs are handled

* Fix invalid modal check

* Update modal IDs

1 files changed, 23 insertions, 23 deletions

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">