add select/clear all buttons to entity type dropdown

scripts/system/html/css/edit-style.css

@@ -1210,6 +1210,26 @@ div#grid-section, body#entity-list-body {
     width: 200px;
     padding-top: 1px;
 }
+#filter-type-options-buttons {
+    top: -20px;
+    width: 224px;
+    z-index: 2;
+    background-color: #afafaf;
+}
+#filter-type-options input[type=button] {
+    position: relative;
+    top: 5px;
+    left: 15px;
+    z-index: 3;
+    height: 14px;
+    min-width: 60px;
+    font-size: 10px;
+    color: #000;
+    background: linear-gradient(#afafaf 20%, #808080 100%);
+}
+#filter-type-options input[type=button]:enabled:hover {
+    background: linear-gradient(#afafaf 20%, #575757 100%);
+}
 
 #filter-search-and-icon {
     position: relative;

scripts/system/html/entityList.html

@@ -43,6 +43,10 @@
                         <div class="over-select"></div>
                     </div>
                     <div id="filter-type-options" class="multiselect-options">
+                        <div id="filter-type-options-buttons">
+                            <input type="button" id="filter-type-select-all" value="Select All"/>
+                            <input type="button" id="filter-type-clear-all" value="Clear All"/>
+                        </div>
                         <!-- type options with checkbox, icon, and label are added at runtime in entityList -->
                     </div>
                 </div>

scripts/system/html/js/entityList.js

@@ -188,6 +188,7 @@ let renameTimeout = null;
 let renameLastBlur = null;
 let renameLastEntityID = null;
 let isRenameFieldBeingMoved = false;
+let elFilterTypeInputs = {};
 
 let elEntityTable,
     elEntityTableHeader,
@@ -201,6 +202,8 @@ let elEntityTable,
     elFilterTypeMultiselectBox,
     elFilterTypeText,
     elFilterTypeOptions,
+    elFilterTypeSelectAll,
+    elFilterTypeClearAll,
     elFilterSearch,
     elFilterInView,
     elFilterRadius,
@@ -243,6 +246,8 @@ function loaded() {
         elFilterTypeMultiselectBox = document.getElementById("filter-type-multiselect-box");
         elFilterTypeText = document.getElementById("filter-type-text");
         elFilterTypeOptions = document.getElementById("filter-type-options");
+        elFilterTypeSelectAll = document.getElementById('filter-type-select-all');
+        elFilterTypeClearAll = document.getElementById('filter-type-clear-all');
         elFilterSearch = document.getElementById("filter-search");
         elFilterInView = document.getElementById("filter-in-view");
         elFilterRadius = document.getElementById("filter-radius");
@@ -276,6 +281,8 @@ function loaded() {
         };
         elRefresh.onclick = refreshEntities;
         elFilterTypeMultiselectBox.onclick = onToggleTypeDropdown;
+        elFilterTypeSelectAll.onclick = onSelectAllTypes;
+        elFilterTypeClearAll.onclick = onClearAllTypes;
         elFilterSearch.onkeyup = refreshEntityList;
         elFilterSearch.onsearch = refreshEntityList;
         elFilterInView.onclick = onToggleFilterInView;
@@ -297,6 +304,7 @@ function loaded() {
             elInput.setAttribute("id", typeFilterID);
             elInput.setAttribute("filterType", type);
             elInput.checked = true; // all types are checked initially
+            elFilterTypeInputs[type] = elInput;
             elDiv.appendChild(elInput);
             
             let elLabel = document.createElement('label');
@@ -1065,7 +1073,21 @@ function loaded() {
             event.stopPropagation();
         }
         
-        function toggleTypeFilter(elInput, refresh) {
+        function refreshTypeFilter(refreshList) {
+            if (typeFilters.length === 0) {
+                elFilterTypeText.innerText = "No Types";
+            } else if (typeFilters.length === FILTER_TYPES.length) {
+                elFilterTypeText.innerText = "All Types";
+            } else {
+                elFilterTypeText.innerText = "Types...";
+            }
+            
+            if (refreshList) {
+                refreshEntityList();
+            }
+        }
+        
+        function toggleTypeFilter(elInput, refreshList) {
             let type = elInput.getAttribute("filterType");
             let typeChecked = elInput.checked;
             
@@ -1076,17 +1098,7 @@ function loaded() {
                 typeFilters.push(type);
             }
             
-            if (typeFilters.length === 0) {
+            refreshTypeFilter(refreshList);
-                elFilterTypeText.innerText = "No Types";
-            } else if (typeFilters.length === FILTER_TYPES.length) {
-                elFilterTypeText.innerText = "All Types";
-            } else {
-                elFilterTypeText.innerText = "Types...";
-            }
-            
-            if (refresh) {
-                refreshEntityList();
-            }
         }
         
         function onToggleTypeFilter(event) {
@@ -1097,6 +1109,24 @@ function loaded() {
             event.stopPropagation();
         }
         
+        function onSelectAllTypes(event) {
+            for (let type in elFilterTypeInputs) {
+                elFilterTypeInputs[type].checked = true;
+            }
+            typeFilters = FILTER_TYPES;
+            refreshTypeFilter(true);
+            event.stopPropagation();
+        }
+        
+        function onClearAllTypes(event) {
+            for (let type in elFilterTypeInputs) {
+                elFilterTypeInputs[type].checked = false;
+            }
+            typeFilters = [];
+            refreshTypeFilter(true);
+            event.stopPropagation();
+        }
+        
         function onBodyClick(event) {
             // if clicking anywhere outside of the multiselect dropdowns (since click event bubbled up to onBodyClick and
             // propagation wasn't stopped in the toggle type/column callbacks) and the dropdown is open then close it