Improve element hiding (#1171)

* Use multi-line definition for transition

* Update how PopupElement visibility is controlled

1 files changed, 20 insertions, 20 deletions

diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index ee2ae27e..a11383b5 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1491,7 +1491,7 @@
     </div>
 </div>
 
-<div class="status-footer-container"><div class="status-footer-container2">
+<div class="status-footer-container" hidden><div class="status-footer-container2">
     <div class="status-footer">
         <div class="status-footer-header"><div class="status-footer-header-label">Tasks in progress:</div><a class="status-footer-header-close">Close</a></div>
         <div class="status-footer-item dictionary-delete-progress" hidden>
@@ -1509,7 +1509,7 @@
 
 
 <!-- Profile modals -->
-<div id="profiles" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="profiles" class="modal-container" 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">
@@ -1537,7 +1537,7 @@
     </div>
 </div></div>
 
-<div id="profile-conditions" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="profile-conditions" class="modal-container" 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">
@@ -1588,7 +1588,7 @@
     </div>
 </div></div>
 
-<div id="profile-copy" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="profile-copy" class="modal-container" 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">
@@ -1608,7 +1608,7 @@
     </div>
 </div></div>
 
-<div id="profile-remove" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="profile-remove" class="modal-container" 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>
@@ -1623,7 +1623,7 @@
 
 
 <!-- Dictionary modals -->
-<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="dictionaries" class="modal-container" 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">
@@ -1689,7 +1689,7 @@
     </div>
 </div></div>
 
-<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete" class="modal-container" 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>
@@ -1702,7 +1702,7 @@
     </div>
 </div></div>
 
-<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-all" class="modal-container" 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>
@@ -1714,7 +1714,7 @@
     </div>
 </div></div>
 
-<div id="secondary-search-dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="secondary-search-dictionaries" class="modal-container" 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">
@@ -1738,7 +1738,7 @@
 
 
 <!-- Custom CSS modal -->
-<div id="custom-css" class="modal-container modal-container-left" tabindex="-1" role="dialog"><div class="modal-content-container1">
+<div id="custom-css" class="modal-container modal-container-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>
@@ -1764,7 +1764,7 @@
 
 
 <!-- Audio sources modal -->
-<div id="audio-sources" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="audio-sources" class="modal-container" 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">
@@ -1859,7 +1859,7 @@
 
 
 <!-- Scanning inputs modal -->
-<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="scanning-inputs" class="modal-container" 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">
@@ -1917,7 +1917,7 @@
 
 
 <!-- Input action prevention modal -->
-<div id="input-action-prevention" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="input-action-prevention" class="modal-container" 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>
@@ -1947,7 +1947,7 @@
 
 
 <!-- Anki cards modal -->
-<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+<div id="anki-cards" class="modal-container" 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">
@@ -2008,7 +2008,7 @@
     </div>
 </div></div>
 
-<div id="anki-cards-info" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
+<div id="anki-cards-info" class="modal-container" 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">
@@ -2174,7 +2174,7 @@
 
 
 <!-- Anki field template modals -->
-<div id="anki-card-templates" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
+<div id="anki-card-templates" class="modal-container" 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">
@@ -2213,7 +2213,7 @@
     </div>
 </div></div>
 
-<div id="anki-card-templates-reset" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="anki-card-templates-reset" class="modal-container" 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">
@@ -2229,7 +2229,7 @@
 
 
 <!-- Import/export modals -->
-<div id="settings-import-error" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="settings-import-error" class="modal-container" 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>
@@ -2241,7 +2241,7 @@
     </div>
 </div></div>
 
-<div id="settings-import-warning" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="settings-import-warning" class="modal-container" 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>
@@ -2257,7 +2257,7 @@
     </div>
 </div></div>
 
-<div id="settings-reset" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
+<div id="settings-reset" class="modal-container" 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">