Use hidden HTML attribute instead of class

Fixes #520.

src/gui/html/css/style.css

@@ -38,9 +38,6 @@ html /deep/ ::-webkit-scrollbar-thumb {
 html /deep/ paper-button[autofocus] {
     color: #64B5F6;
 }
-.hidden {
-    display:none;
-}
 a {
     color: #2196F3;
     text-decoration: none;

src/gui/html/elements/loot-message-dialog.html

@@ -38,7 +38,7 @@ was pressed.
         },
 
         setDismissable: function(isDialogDismissable) {
-            this.shadowRoot.getElementById('dismiss').classList.toggle('hidden', !isDialogDismissable);
+            this.shadowRoot.getElementById('dismiss').hidden = !isDialogDismissable;
         },
 
         onButtonClick: function(evt) {

src/gui/html/elements/loot-plugin-card.html

@@ -116,8 +116,6 @@ loot-clear-metadata
             font-weight: 400;
             font-size: 1rem;
         }
-        .hidden,
-        content::content > .hidden,
         :host-context(#main[data-hide-crc]) content::content > .crc,
         :host-context(#main[data-hide-tag]) content::content > .tag,
         :host-context(#main[data-hide-version]) content::content > .version {
@@ -285,10 +283,10 @@ loot-clear-metadata
                 var cardContent = this.data.getCardContent(loot.filters);
                 var tagsAdded = this.getElementsByClassName('tag add')[0];
                 tagsAdded.textContent = cardContent.tags.added;
-                tagsAdded.classList.toggle('hidden', cardContent.tags.added.length == 0);
+                tagsAdded.hidden = cardContent.tags.added.length === 0;
                 var tagsRemoved = this.getElementsByClassName('tag remove')[0];
                 tagsRemoved.textContent = cardContent.tags.removed;
-                tagsRemoved.classList.toggle('hidden', cardContent.tags.removed.length == 0);
+                tagsRemoved.hidden = cardContent.tags.removed.length === 0;
             }
         },
 
@@ -308,7 +306,7 @@ loot-clear-metadata
                     messageLi.innerHTML = marked(message.content);
                     messageUL.appendChild(messageLi);
                 });
-                messageUL.classList.toggle('hidden', cardContent.messages.length == 0);
+                messageUL.hidden = cardContent.messages.length === 0;
             }
         },
 

src/gui/html/elements/loot-plugin-item.html

@@ -165,19 +165,14 @@
         onPriorityChange: function(oldValue, newValue) {
             if (this.data && this.data.priority) {
                 this.shadowRoot.getElementById('priority').textContent = this.data.priority;
-                this.shadowRoot.getElementById('secondary').classList.remove('hidden');
             } else {
                 this.shadowRoot.getElementById('priority').textContent = '';
-                this.shadowRoot.getElementById('secondary').classList.add('hidden');
             }
+            this.shadowRoot.getElementById('secondary').hidden = !(this.data && this.data.priority);
         },
 
         onPriorityIsGlobalChange: function(oldValue, newValue) {
-            if (this.data && this.data.isPriorityGlobal) {
-                this.shadowRoot.getElementById('secondary').firstElementChild.classList.remove('hidden');
-            } else {
-                this.shadowRoot.getElementById('secondary').firstElementChild.classList.add('hidden');
-            }
+            this.shadowRoot.getElementById('secondary').hidden = !(this.data && this.data.isPriorityGlobal);
         },
 
         onEditorStateChange: function(oldValue, newValue) {

src/gui/html/elements/loot-search.html

@@ -29,13 +29,10 @@ searchTarget is the ID of the core-list element to search the elements of.
             font-size: 0.857rem;
             color: rgba(255, 255, 255, 0.7);
         }
-        .hidden {
-            display: none;
-        }
         </style>
         <core-toolbar>
             <paper-input id="search" label="Search cards" flex></paper-input>
-            <div id="count" class="caption hidden">
+            <div id="count" class="caption" hidden>
                 {{currentResult + 1}}/{{numResults}}
             </div>
             <paper-icon-button id="prev" icon="expand-less" disabled></paper-icon-button>
@@ -125,7 +122,7 @@ searchTarget is the ID of the core-list element to search the elements of.
             var host = evt.target.parentElement.parentNode.host;
 
             host.resetResults();
-            host.shadowRoot.getElementById('count').classList.toggle('hidden', !evt.target.value);
+            host.shadowRoot.getElementById('count').hidden = !evt.target.value;
 
             if (!evt.target.value) {
                 return;
@@ -165,7 +162,7 @@ searchTarget is the ID of the core-list element to search the elements of.
         onClose: function(evt) {
             evt.target.parentElement.parentNode.host.resetResults();
             evt.target.parentElement.parentNode.getElementById('search').value = '';
-            evt.target.parentElement.parentNode.getElementById('count').classList.toggle('hidden', true);
+            evt.target.parentElement.parentNode.getElementById('count').hidden = true;
             evt.target.dispatchEvent(new CustomEvent('loot-search-close'));
         },
     });

src/gui/html/index.html

@@ -101,8 +101,8 @@
                 <core-tooltip label="Update Masterlist" noarrow>
                     <paper-icon-button id="updateMasterlistButton" icon="file-download"></paper-icon-button>
                 </core-tooltip>
-                <paper-button id="applySortButton" class="hidden">Apply</paper-button>
-                <paper-button id="cancelSortButton" class="hidden">Cancel</paper-button>
+                <paper-button id="applySortButton" hidden>Apply</paper-button>
+                <paper-button id="cancelSortButton" hidden>Cancel</paper-button>
                 <core-tooltip label="Search Cards" noarrow>
                     <paper-icon-button id="showSearch" icon="search"></paper-icon-button>
                 </core-tooltip>

src/gui/html/js/dom.js

@@ -19,11 +19,11 @@
     },
 
     show(elementId) {
-      document.getElementById(elementId).classList.toggle('hidden', false);
+      document.getElementById(elementId).hidden = false;
     },
 
     hide(elementId) {
-      document.getElementById(elementId).classList.toggle('hidden', true);
+      document.getElementById(elementId).hidden = true;
     },
 
     updateSelectedGame(gameFolder) {

src/gui/html/js/events.js

@@ -611,7 +611,7 @@ function handleUnappliedChangesClose(change) {
        cancelSort query for as many times as necessary. */
     const queries = [];
     let numQueries = 0;
-    if (!document.getElementById('applySortButton').classList.contains('hidden')) {
+    if (!document.getElementById('applySortButton').hidden) {
       numQueries += 1;
     }
     numQueries += document.body.getAttribute('data-editors');
@@ -624,7 +624,7 @@ function handleUnappliedChangesClose(change) {
   });
 }
 function onQuit() {
-  if (!document.getElementById('applySortButton').classList.contains('hidden')) {
+  if (!document.getElementById('applySortButton').hidden) {
     handleUnappliedChangesClose(loot.l10n.translate('sorted load order'));
   } else if (document.body.hasAttribute('data-editors')) {
     handleUnappliedChangesClose(loot.l10n.translate('metadata edits'));