Safer query selector (#364)

* Add querySelectorNotNull helper function

* Use querySelectorNotNull

* Updates

* Update settings

* Remove unused

* Update

* Update function calls

* More updates

* Update types

* Remove obsolete code

1 files changed, 19 insertions, 22 deletions

diff --git a/ext/js/pages/settings/profile-conditions-ui.js b/ext/js/pages/settings/profile-conditions-ui.js
index 96aef83f..e02d2585 100644
--- a/ext/js/pages/settings/profile-conditions-ui.js
+++ b/ext/js/pages/settings/profile-conditions-ui.js
@@ -18,6 +18,7 @@
 
 import {EventDispatcher, EventListenerCollection} from '../../core.js';
 import {DocumentUtil} from '../../dom/document-util.js';
+import {querySelectorNotNull} from '../../dom/query-selector.js';
 import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
 /**
@@ -33,10 +34,10 @@ export class ProfileConditionsUI extends EventDispatcher {
         this._settingsController = settingsController;
         /** @type {?import('environment').OperatingSystem} */
         this._os = null;
-        /** @type {?HTMLElement} */
-        this._conditionGroupsContainer = null;
-        /** @type {?HTMLElement} */
-        this._addConditionGroupButton = null;
+        /** @type {HTMLElement} */
+        this._conditionGroupsContainer = querySelectorNotNull(document, '#profile-condition-groups');
+        /** @type {HTMLElement} */
+        this._addConditionGroupButton = querySelectorNotNull(document, '#profile-add-condition-group');
         /** @type {ProfileConditionGroupUI[]} */
         this._children = [];
         /** @type {EventListenerCollection} */
@@ -139,8 +140,6 @@ export class ProfileConditionsUI extends EventDispatcher {
         const {conditionGroups} = profiles[profileIndex];
 
         this._profileIndex = profileIndex;
-        this._conditionGroupsContainer = /** @type {HTMLElement} */ (document.querySelector('#profile-condition-groups'));
-        this._addConditionGroupButton = /** @type {HTMLElement} */ (document.querySelector('#profile-add-condition-group'));
 
         for (let i = 0, ii = conditionGroups.length; i < ii; ++i) {
             this._addConditionGroup(conditionGroups[i], i);
@@ -157,9 +156,6 @@ export class ProfileConditionsUI extends EventDispatcher {
             child.cleanup();
         }
         this._children = [];
-
-        this._conditionGroupsContainer = null;
-        this._addConditionGroupButton = null;
     }
 
     /**
@@ -354,7 +350,7 @@ export class ProfileConditionsUI extends EventDispatcher {
         const child = new ProfileConditionGroupUI(this, index);
         child.prepare(conditionGroup);
         this._children.push(child);
-        /** @type {HTMLElement} */ (this._conditionGroupsContainer).appendChild(child.node);
+        this._conditionGroupsContainer.appendChild(child.node);
         return child;
     }
 
@@ -460,9 +456,9 @@ class ProfileConditionGroupUI {
         /** @type {HTMLElement} */
         this._node = /** @type {HTMLElement} */ (this._parent.instantiateTemplate('profile-condition-group'));
         /** @type {HTMLElement} */
-        this._conditionContainer = /** @type {HTMLElement} */ (this._node.querySelector('.profile-condition-list'));
+        this._conditionContainer = querySelectorNotNull(this._node, '.profile-condition-list');
         /** @type {HTMLElement} */
-        this._addConditionButton = /** @type {HTMLElement} */ (this._node.querySelector('.profile-condition-add-button'));
+        this._addConditionButton = querySelectorNotNull(this._node, '.profile-condition-add-button');
         /** @type {ProfileConditionUI[]} */
         this._children = [];
         /** @type {EventListenerCollection} */
@@ -621,23 +617,23 @@ class ProfileConditionUI {
         /** @type {HTMLElement} */
         this._node = this._parent.parent.instantiateTemplate('profile-condition');
         /** @type {HTMLSelectElement} */
-        this._typeInput = /** @type {HTMLSelectElement} */ (this._node.querySelector('.profile-condition-type'));
+        this._typeInput = querySelectorNotNull(this._node, '.profile-condition-type');
         /** @type {HTMLSelectElement} */
-        this._operatorInput = /** @type {HTMLSelectElement} */ (this._node.querySelector('.profile-condition-operator'));
+        this._operatorInput = querySelectorNotNull(this._node, '.profile-condition-operator');
         /** @type {HTMLButtonElement} */
-        this._removeButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.profile-condition-remove'));
+        this._removeButton = querySelectorNotNull(this._node, '.profile-condition-remove');
         /** @type {HTMLButtonElement} */
-        this._mouseButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.mouse-button'));
+        this._mouseButton = querySelectorNotNull(this._node, '.mouse-button');
         /** @type {HTMLElement} */
-        this._mouseButtonContainer = /** @type {HTMLElement} */ (this._node.querySelector('.mouse-button-container'));
+        this._mouseButtonContainer = querySelectorNotNull(this._node, '.mouse-button-container');
         /** @type {HTMLButtonElement} */
-        this._menuButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.profile-condition-menu-button'));
+        this._menuButton = querySelectorNotNull(this._node, '.profile-condition-menu-button');
         /** @type {HTMLElement} */
-        this._typeOptionContainer = /** @type {HTMLElement} */ (this._typeInput.querySelector('optgroup'));
+        this._typeOptionContainer = querySelectorNotNull(this._typeInput, 'optgroup');
         /** @type {HTMLElement} */
-        this._operatorOptionContainer = /** @type {HTMLElement} */ (this._operatorInput.querySelector('optgroup'));
+        this._operatorOptionContainer = querySelectorNotNull(this._operatorInput, 'optgroup');
         /** @type {HTMLInputElement} */
-        this._valueInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.profile-condition-input'));
+        this._valueInput = querySelectorNotNull(this._node, '.profile-condition-input');
         /** @type {string} */
         this._value = '';
         /** @type {?KeyboardMouseInputField} */
@@ -777,7 +773,8 @@ class ProfileConditionUI {
      */
     _onMenuOpen(e) {
         const bodyNode = e.detail.menu.bodyNode;
-        const deleteGroup = /** @type {HTMLElement} */ (bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]'));
+        /** @type {HTMLElement} */
+        const deleteGroup = querySelectorNotNull(bodyNode, '.popup-menu-item[data-menu-action="deleteGroup"]');
         if (deleteGroup !== null) {
             deleteGroup.hidden = (this._parent.childCount <= 1);
         }