Improve element hiding (#1171)

* Use multi-line definition for transition

* Update how PopupElement visibility is controlled

3 files changed, 65 insertions, 64 deletions

diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 42201174..89359309 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -1447,18 +1447,22 @@ button.icon-button:active {
     background-color: var(--dim-background-color);
     outline: none;
     z-index: 100;
+    opacity: 1;
+    visibility: visible;
+    transition:
+        opacity var(--animation-duration2) ease-out,
+        visibility 0s linear;
+}
+.modal-container[hidden] {
     opacity: 0;
     visibility: hidden;
-    transition: opacity var(--animation-duration2) ease-in, visibility 0s linear var(--animation-duration2);
+    transition:
+        opacity var(--animation-duration2) ease-in,
+        visibility 0s linear var(--animation-duration2);
 }
-.modal-container:not(.modal-container-open):not(.modal-container-opening):not(.modal-container-closing) {
+.modal-container[hidden]:not(.hidden-animating) {
     display: none;
 }
-.modal-container.modal-container-open {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity var(--animation-duration2) ease-out, visibility 0s linear;
-}
 .modal-content {
     max-width: 100%;
     max-height: 100%;
@@ -1467,9 +1471,9 @@ button.icon-button:active {
     background-color: var(--background-color-light);
     flex: 0 1 auto;
     border-radius: 0.5em;
-    transform: translate(0, var(--modal-transition-offset));
+    transform: translate(0, 0);
     transition:
-        transform 0s linear var(--animation-duration2),
+        transform var(--animation-duration2) ease-out,
         width var(--animation-duration2) ease-in-out,
         height var(--animation-duration2) ease-in-out,
         border-radius var(--animation-duration2) ease-in-out;
@@ -1478,7 +1482,7 @@ button.icon-button:active {
     flex-flow: column nowrap;
     overflow: hidden;
 }
-.modal-container:not(.modal-container-open) .modal-content {
+.modal-container[hidden] .modal-content {
     pointer-events: none;
 }
 .modal-content.modal-content-small {
@@ -1493,10 +1497,10 @@ button.icon-button:active {
     transform: translate(0, 0);
     border-radius: 0;
 }
-.modal-container.modal-container-open .modal-content {
-    transform: translate(0, 0);
+.modal-container[hidden] .modal-content {
+    transform: translate(0, var(--modal-transition-offset));
     transition:
-        transform var(--animation-duration2) ease-out,
+        transform 0s linear var(--animation-duration2),
         width var(--animation-duration2) ease-in-out,
         height var(--animation-duration2) ease-in-out,
         border-radius var(--animation-duration2) ease-in-out;
@@ -1756,14 +1760,18 @@ button.popup-menu-item:disabled {
     border-radius: var(--settings-group-border-radius) var(--settings-group-border-radius) 0 0;
     transform: none;
     opacity: 1;
-    transition: transform var(--animation-duration) ease-out, opacity var(--animation-duration) ease-out;
+    transition:
+        transform var(--animation-duration) ease-out,
+        opacity var(--animation-duration) ease-out;
 }
-.status-footer-container:not(.status-footer-container-open) .status-footer {
+.status-footer-container[hidden] .status-footer {
     transform: translate(0, 100%);
     opacity: 0;
-    transition: transform var(--animation-duration) ease-in, opacity var(--animation-duration) ease-in;
+    transition:
+        transform var(--animation-duration) ease-in,
+        opacity var(--animation-duration) ease-in;
 }
-.status-footer-container:not(.status-footer-container-open):not(.status-footer-container-opening):not(.status-footer-container-closing) {
+.status-footer-container[hidden]:not(.hidden-animating) {
     display: none;
 }
 .status-footer-header {
diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js
index 930f02cd..21a557bb 100644
--- a/ext/bg/js/settings/popup-elements.js
+++ b/ext/bg/js/settings/popup-elements.js
@@ -16,13 +16,11 @@
  */
 
 class PopupElement extends EventDispatcher {
-    constructor({node, visibleClassName, openingClassName, closingClassName, closingAnimationDuration}) {
+    constructor({node, closingAnimationDuration}) {
         super();
         this._node = node;
-        this._visibleClassName = visibleClassName;
-        this._openingClassName = openingClassName;
-        this._closingClassName = closingClassName;
         this._closingAnimationDuration = closingAnimationDuration;
+        this._hiddenAnimatingClass = 'hidden-animating';
         this._mutationObserver = null;
         this._visible = false;
         this._closeTimer = null;
@@ -33,30 +31,31 @@ class PopupElement extends EventDispatcher {
     }
 
     isVisible() {
-        return this._node.classList.contains(this._visibleClassName);
+        return !this._node.hidden;
     }
 
     setVisible(value, animate=true) {
         value = !!value;
-        const {classList} = this._node;
-        if (classList.contains(this._visibleClassName) === value) { return; }
+        if (this.isVisible() === value) { return; }
 
         if (this._closeTimer !== null) {
             clearTimeout(this._closeTimer);
-            this._completeClose(classList, true);
+            this._completeClose(true);
         }
 
+        const node = this._node;
+        const {classList} = node;
         if (value) {
-            if (animate) { classList.add(this._openingClassName); }
-            getComputedStyle(this._node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
-            classList.add(this._visibleClassName);
-            if (animate) { classList.remove(this._openingClassName); }
-            this._node.focus();
+            if (animate) { classList.add(this._hiddenAnimatingClass); }
+            getComputedStyle(node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
+            classList.remove(this._hiddenAnimatingClass);
+            node.hidden = false;
+            node.focus();
         } else {
-            if (animate) { classList.add(this._closingClassName); }
-            classList.remove(this._visibleClassName);
+            if (animate) { classList.add(this._hiddenAnimatingClass); }
+            node.hidden = true;
             if (animate) {
-                this._closeTimer = setTimeout(() => this._completeClose(classList, false), this._closingAnimationDuration);
+                this._closeTimer = setTimeout(() => this._completeClose(false), this._closingAnimationDuration);
             }
         }
     }
@@ -64,11 +63,11 @@ class PopupElement extends EventDispatcher {
     on(eventName, callback) {
         if (eventName === 'visibilityChanged') {
             if (this._mutationObserver === null) {
-                this._visible = this._node.classList.contains(this._visibleClassName);
+                this._visible = this.isVisible();
                 this._mutationObserver = new MutationObserver(this._onMutation.bind(this));
                 this._mutationObserver.observe(this._node, {
                     attributes: true,
-                    attributeFilter: ['class'],
+                    attributeFilter: ['hidden'],
                     attributeOldValue: true
                 });
             }
@@ -90,15 +89,15 @@ class PopupElement extends EventDispatcher {
     // Private
 
     _onMutation() {
-        const visible = this._node.classList.contains(this._visibleClassName);
+        const visible = this.isVisible();
         if (this._visible === visible) { return; }
         this._visible = visible;
         this.trigger('visibilityChanged', {visible});
     }
 
-    _completeClose(classList, reopening) {
+    _completeClose(reopening) {
         this._closeTimer = null;
-        classList.remove(this._closingClassName);
+        this._node.classList.remove(this._hiddenAnimatingClass);
         this.trigger('closeCompleted', {reopening});
     }
 }
@@ -107,9 +106,6 @@ class Modal extends PopupElement {
     constructor(node) {
         super({
             node,
-            visibleClassName: 'modal-container-open',
-            openingClassName: 'modal-container-opening',
-            closingClassName: 'modal-container-closing',
             closingAnimationDuration: 375 // Milliseconds; includes buffer
         });
         this._contentNode = null;
@@ -170,9 +166,6 @@ class StatusFooter extends PopupElement {
     constructor(node) {
         super({
             node,
-            visibleClassName: 'status-footer-container-open',
-            openingClassName: 'status-footer-container-opening',
-            closingClassName: 'status-footer-container-closing',
             closingAnimationDuration: 375 // Milliseconds; includes buffer
         });
         this._body = node.querySelector('.status-footer');
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">