diff options
42 files changed, 609 insertions, 498 deletions
diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js index 574e90ee..81791285 100644 --- a/ext/js/display/display-anki.js +++ b/ext/js/display/display-anki.js @@ -20,6 +20,7 @@ import {EventListenerCollection, deferPromise} from '../core.js'; import {AnkiNoteBuilder} from '../data/anki-note-builder.js'; import {AnkiUtil} from '../data/anki-util.js'; import {PopupMenu} from '../dom/popup-menu.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {yomitan} from '../yomitan.js'; export class DisplayAnki { @@ -91,7 +92,7 @@ export class DisplayAnki { ['term', ['term-kanji', 'term-kana']] ]); /** @type {HTMLElement} */ - this._menuContainer = /** @type {HTMLElement} */ (document.querySelector('#popup-menus')); + this._menuContainer = querySelectorNotNull(document, '#popup-menus'); /** @type {(event: MouseEvent) => void} */ this._onShowTagsBind = this._onShowTags.bind(this); /** @type {(event: MouseEvent) => void} */ @@ -827,7 +828,8 @@ export class DisplayAnki { button.hidden = disabled; button.dataset.noteIds = allNoteIds.join(' '); - const badge = /** @type {?HTMLElement} */ (button.querySelector('.action-button-badge')); + /** @type {?HTMLElement} */ + const badge = button.querySelector('.action-button-badge'); if (badge !== null) { const badgeData = badge.dataset; if (allNoteIds.length > 1) { @@ -866,13 +868,17 @@ export class DisplayAnki { const noteIds = this._getNodeNoteIds(node); if (noteIds.length === 0) { return; } - const menuContainerNode = /** @type {HTMLElement} */ (this._display.displayGenerator.instantiateTemplate('view-note-button-popup-menu')); - const menuBodyNode = /** @type {HTMLElement} */ (menuContainerNode.querySelector('.popup-menu-body')); + /** @type {HTMLElement} */ + const menuContainerNode = this._display.displayGenerator.instantiateTemplate('view-note-button-popup-menu'); + /** @type {HTMLElement} */ + const menuBodyNode = querySelectorNotNull(menuContainerNode, '.popup-menu-body'); for (let i = 0, ii = noteIds.length; i < ii; ++i) { const noteId = noteIds[i]; - const item = /** @type {HTMLElement} */ (this._display.displayGenerator.instantiateTemplate('view-note-button-popup-menu-item')); - const label = /** @type {Element} */ (item.querySelector('.popup-menu-item-label')); + /** @type {HTMLElement} */ + const item = this._display.displayGenerator.instantiateTemplate('view-note-button-popup-menu-item'); + /** @type {Element} */ + const label = querySelectorNotNull(item, '.popup-menu-item-label'); label.textContent = `Note ${i + 1}: ${noteId}`; item.dataset.menuAction = 'viewNote'; item.dataset.noteIds = `${noteId}`; diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js index 3576decb..1f279030 100644 --- a/ext/js/display/display-audio.js +++ b/ext/js/display/display-audio.js @@ -18,6 +18,7 @@ import {EventListenerCollection} from '../core.js'; import {PopupMenu} from '../dom/popup-menu.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {AudioSystem} from '../media/audio-system.js'; import {yomitan} from '../yomitan.js'; @@ -45,7 +46,7 @@ export class DisplayAudio { /** @type {Map<string, import('display-audio').CacheItem>} */ this._cache = new Map(); /** @type {Element} */ - this._menuContainer = /** @type {Element} */ (document.querySelector('#popup-menus')); + this._menuContainer = querySelectorNotNull(document, '#popup-menus'); /** @type {import('core').TokenObject} */ this._entriesToken = {}; /** @type {Set<PopupMenu>} */ @@ -715,7 +716,8 @@ export class DisplayAudio { button.dataset.potentialAvailableAudioCount = `${potentialAvailableAudioCount}`; } - const badge = /** @type {?HTMLElement} */ (button.querySelector('.action-button-badge')); + /** @type {?HTMLElement} */ + const badge = button.querySelector('.action-button-badge'); if (badge === null) { return; } const badgeData = badge.dataset; @@ -804,7 +806,8 @@ export class DisplayAudio { _createMenu(sourceButton, term, reading) { // Create menu const menuContainerNode = /** @type {HTMLElement} */ (this._display.displayGenerator.instantiateTemplate('audio-button-popup-menu')); - const menuBodyNode = /** @type {HTMLElement} */ (menuContainerNode.querySelector('.popup-menu-body')); + /** @type {HTMLElement} */ + const menuBodyNode = querySelectorNotNull(menuContainerNode, '.popup-menu-body'); menuContainerNode.dataset.term = term; menuContainerNode.dataset.reading = reading; @@ -837,7 +840,8 @@ export class DisplayAudio { const existingNode = this._getOrCreateMenuItem(currentItems, index, subIndex); const node = existingNode !== null ? existingNode : /** @type {HTMLElement} */ (displayGenerator.instantiateTemplate('audio-button-popup-menu-item')); - const labelNode = /** @type {HTMLElement} */ (node.querySelector('.popup-menu-item-audio-button .popup-menu-item-label')); + /** @type {HTMLElement} */ + const labelNode = querySelectorNotNull(node, '.popup-menu-item-audio-button .popup-menu-item-label'); let label = name; if (!nameUnique) { label = `${label} ${nameIndex + 1}`; @@ -847,11 +851,13 @@ export class DisplayAudio { if (typeof subName === 'string' && subName.length > 0) { label += `: ${subName}`; } labelNode.textContent = label; - const cardButton = /** @type {HTMLElement} */ (node.querySelector('.popup-menu-item-set-primary-audio-button')); + /** @type {HTMLElement} */ + const cardButton = querySelectorNotNull(node, '.popup-menu-item-set-primary-audio-button'); cardButton.hidden = !downloadable; if (valid !== null) { - const icon = /** @type {HTMLElement} */ (node.querySelector('.popup-menu-item-audio-button .popup-menu-item-icon')); + /** @type {HTMLElement} */ + const icon = querySelectorNotNull(node, '.popup-menu-item-audio-button .popup-menu-item-icon'); icon.dataset.icon = valid ? 'checkmark' : 'cross'; showIcons = true; } diff --git a/ext/js/display/display-notification.js b/ext/js/display/display-notification.js index d1cfa537..a0e9e35c 100644 --- a/ext/js/display/display-notification.js +++ b/ext/js/display/display-notification.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../core.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; export class DisplayNotification { /** @@ -29,9 +30,9 @@ export class DisplayNotification { /** @type {HTMLElement} */ this._node = node; /** @type {HTMLElement} */ - this._body = /** @type {HTMLElement} */ (node.querySelector('.footer-notification-body')); + this._body = querySelectorNotNull(node, '.footer-notification-body'); /** @type {HTMLElement} */ - this._closeButton = /** @type {HTMLElement} */ (node.querySelector('.footer-notification-close-button')); + this._closeButton = querySelectorNotNull(node, '.footer-notification-close-button'); /** @type {EventListenerCollection} */ this._eventListeners = new EventListenerCollection(); /** @type {?import('core').Timeout} */ diff --git a/ext/js/display/display-profile-selection.js b/ext/js/display/display-profile-selection.js index c5cb7d06..f2ebd3e4 100644 --- a/ext/js/display/display-profile-selection.js +++ b/ext/js/display/display-profile-selection.js @@ -18,6 +18,7 @@ import {EventListenerCollection, generateId} from '../core.js'; import {PanelElement} from '../dom/panel-element.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {yomitan} from '../yomitan.js'; export class DisplayProfileSelection { @@ -28,12 +29,14 @@ export class DisplayProfileSelection { /** @type {import('./display.js').Display} */ this._display = display; /** @type {HTMLElement} */ - this._profielList = /** @type {HTMLElement} */ (document.querySelector('#profile-list')); + this._profielList = querySelectorNotNull(document, '#profile-list'); /** @type {HTMLButtonElement} */ - this._profileButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-button')); + this._profileButton = querySelectorNotNull(document, '#profile-button'); + /** @type {HTMLElement} */ + const profilePanelElement = querySelectorNotNull(document, '#profile-panel'); /** @type {PanelElement} */ this._profilePanel = new PanelElement({ - node: /** @type {HTMLElement} */ (document.querySelector('#profile-panel')), + node: profilePanelElement, closingAnimationDuration: 375 // Milliseconds; includes buffer }); /** @type {boolean} */ @@ -98,9 +101,11 @@ export class DisplayProfileSelection { for (let i = 0, ii = profiles.length; i < ii; ++i) { const {name} = profiles[i]; const entry = displayGenerator.createProfileListItem(); - const radio = /** @type {HTMLInputElement} */ (entry.querySelector('.profile-entry-is-default-radio')); + /** @type {HTMLInputElement} */ + const radio = querySelectorNotNull(entry, '.profile-entry-is-default-radio'); radio.checked = (i === profileCurrent); - const nameNode = /** @type {Element} */ (entry.querySelector('.profile-list-item-name')); + /** @type {Element} */ + const nameNode = querySelectorNotNull(entry, '.profile-list-item-name'); nameNode.textContent = name; fragment.appendChild(entry); this._eventListeners.addEventListener(radio, 'change', this._onProfileRadioChange.bind(this, i), false); diff --git a/ext/js/display/display.js b/ext/js/display/display.js index 9c2d97f2..b6a818ba 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -22,6 +22,7 @@ import {ThemeController} from '../app/theme-controller.js'; import {FrameEndpoint} from '../comm/frame-endpoint.js'; import {DynamicProperty, EventDispatcher, EventListenerCollection, clone, deepEqual, invokeMessageHandler, log, promiseTimeout} from '../core.js'; import {PopupMenu} from '../dom/popup-menu.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {ScrollElement} from '../dom/scroll-element.js'; import {HotkeyHelpController} from '../input/hotkey-help-controller.js'; import {TextScanner} from '../language/text-scanner.js'; @@ -62,7 +63,7 @@ export class Display extends EventDispatcher { /** @type {import('../input/hotkey-handler.js').HotkeyHandler} */ this._hotkeyHandler = hotkeyHandler; /** @type {HTMLElement} */ - this._container = /** @type {HTMLElement} */ (document.querySelector('#dictionary-entries')); + this._container = querySelectorNotNull(document, '#dictionary-entries'); /** @type {import('dictionary').DictionaryEntry[]} */ this._dictionaryEntries = []; /** @type {HTMLElement[]} */ @@ -116,7 +117,7 @@ export class Display extends EventDispatcher { /** @type {number} */ this._queryOffset = 0; /** @type {HTMLElement} */ - this._progressIndicator = /** @type {HTMLElement} */ (document.querySelector('#progress-indicator')); + this._progressIndicator = querySelectorNotNull(document, '#progress-indicator'); /** @type {?import('core').Timeout} */ this._progressIndicatorTimer = null; /** @type {DynamicProperty<boolean>} */ @@ -126,24 +127,24 @@ export class Display extends EventDispatcher { /** @type {?boolean} */ this._queryParserVisibleOverride = null; /** @type {HTMLElement} */ - this._queryParserContainer = /** @type {HTMLElement} */ (document.querySelector('#query-parser-container')); + this._queryParserContainer = querySelectorNotNull(document, '#query-parser-container'); /** @type {QueryParser} */ this._queryParser = new QueryParser({ getSearchContext: this._getSearchContext.bind(this), japaneseUtil }); /** @type {HTMLElement} */ - this._contentScrollElement = /** @type {HTMLElement} */ (document.querySelector('#content-scroll')); + this._contentScrollElement = querySelectorNotNull(document, '#content-scroll'); /** @type {HTMLElement} */ - this._contentScrollBodyElement = /** @type {HTMLElement} */ (document.querySelector('#content-body')); + this._contentScrollBodyElement = querySelectorNotNull(document, '#content-body'); /** @type {ScrollElement} */ this._windowScroll = new ScrollElement(this._contentScrollElement); - /** @type {HTMLButtonElement} */ - this._closeButton = /** @type {HTMLButtonElement} */ (document.querySelector('#close-button')); - /** @type {HTMLButtonElement} */ - this._navigationPreviousButton = /** @type {HTMLButtonElement} */ (document.querySelector('#navigate-previous-button')); - /** @type {HTMLButtonElement} */ - this._navigationNextButton = /** @type {HTMLButtonElement} */ (document.querySelector('#navigate-next-button')); + /** @type {?HTMLButtonElement} */ + this._closeButton = document.querySelector('#close-button'); + /** @type {?HTMLButtonElement} */ + this._navigationPreviousButton = document.querySelector('#navigate-previous-button'); + /** @type {?HTMLButtonElement} */ + this._navigationNextButton = document.querySelector('#navigate-next-button'); /** @type {?Frontend} */ this._frontend = null; /** @type {?Promise<void>} */ @@ -171,7 +172,7 @@ export class Display extends EventDispatcher { /** @type {?import('./display-notification.js').DisplayNotification} */ this._tagNotification = null; /** @type {HTMLElement} */ - this._footerNotificationContainer = /** @type {HTMLElement} */ (document.querySelector('#content-footer')); + this._footerNotificationContainer = querySelectorNotNull(document, '#content-footer'); /** @type {OptionToggleHotkeyHandler} */ this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this); /** @type {ElementOverflowController} */ @@ -179,7 +180,7 @@ export class Display extends EventDispatcher { /** @type {boolean} */ this._frameVisible = (pageType === 'search'); /** @type {HTMLElement} */ - this._menuContainer = /** @type {HTMLElement} */ (document.querySelector('#popup-menus')); + this._menuContainer = querySelectorNotNull(document, '#popup-menus'); /** @type {(event: MouseEvent) => void} */ this._onEntryClickBind = this._onEntryClick.bind(this); /** @type {(event: MouseEvent) => void} */ @@ -1041,7 +1042,8 @@ export class Display extends EventDispatcher { const node = /** @type {HTMLElement} */ (e.currentTarget); const menuContainerNode = /** @type {HTMLElement} */ (this._displayGenerator.instantiateTemplate('dictionary-entry-popup-menu')); - const menuBodyNode = /** @type {HTMLElement} */ (menuContainerNode.querySelector('.popup-menu-body')); + /** @type {HTMLElement} */ + const menuBodyNode = querySelectorNotNull(menuContainerNode, '.popup-menu-body'); /** * @param {string} menuAction @@ -1049,7 +1051,9 @@ export class Display extends EventDispatcher { */ const addItem = (menuAction, label) => { const item = /** @type {HTMLElement} */ (this._displayGenerator.instantiateTemplate('dictionary-entry-popup-menu-item')); - /** @type {HTMLElement} */ (item.querySelector('.popup-menu-item-label')).textContent = label; + /** @type {HTMLElement} */ + const labelElement = querySelectorNotNull(item, '.popup-menu-item-label'); + labelElement.textContent = label; item.dataset.menuAction = menuAction; menuBodyNode.appendChild(item); }; @@ -1291,7 +1295,8 @@ export class Display extends EventDispatcher { /** */ _setContentExtensionUnloaded() { - const errorExtensionUnloaded = /** @type {?HTMLElement} */ (document.querySelector('#error-extension-unloaded')); + /** @type {?HTMLElement} */ + const errorExtensionUnloaded = document.querySelector('#error-extension-unloaded'); if (this._container !== null) { this._container.hidden = true; @@ -1323,7 +1328,8 @@ export class Display extends EventDispatcher { * @param {boolean} visible */ _setNoContentVisible(visible) { - const noResults = /** @type {?HTMLElement} */ (document.querySelector('#no-results')); + /** @type {?HTMLElement} */ + const noResults = document.querySelector('#no-results'); if (noResults !== null) { noResults.hidden = !visible; diff --git a/ext/js/display/query-parser.js b/ext/js/display/query-parser.js index 03b54fd5..e71c7251 100644 --- a/ext/js/display/query-parser.js +++ b/ext/js/display/query-parser.js @@ -17,6 +17,7 @@ */ import {EventDispatcher, log} from '../core.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {TextScanner} from '../language/text-scanner.js'; import {yomitan} from '../yomitan.js'; @@ -50,11 +51,11 @@ export class QueryParser extends EventDispatcher { /** @type {import('api').ParseTextResult} */ this._parseResults = []; /** @type {HTMLElement} */ - this._queryParser = /** @type {HTMLElement} */ (document.querySelector('#query-parser-content')); + this._queryParser = querySelectorNotNull(document, '#query-parser-content'); /** @type {HTMLElement} */ - this._queryParserModeContainer = /** @type {HTMLElement} */ (document.querySelector('#query-parser-mode-container')); + this._queryParserModeContainer = querySelectorNotNull(document, '#query-parser-mode-container'); /** @type {HTMLSelectElement} */ - this._queryParserModeSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#query-parser-mode-select')); + this._queryParserModeSelect = querySelectorNotNull(document, '#query-parser-mode-select'); /** @type {TextScanner} */ this._textScanner = new TextScanner({ node: this._queryParser, diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js index 2778c4cd..b512a16d 100644 --- a/ext/js/display/search-display-controller.js +++ b/ext/js/display/search-display-controller.js @@ -19,6 +19,7 @@ import * as wanakana from '../../lib/wanakana.js'; import {ClipboardMonitor} from '../comm/clipboard-monitor.js'; import {EventListenerCollection, invokeMessageHandler} from '../core.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {yomitan} from '../yomitan.js'; export class SearchDisplayController { @@ -42,17 +43,17 @@ export class SearchDisplayController { /** @type {import('./search-persistent-state-controller.js').SearchPersistentStateController} */ this._searchPersistentStateController = searchPersistentStateController; /** @type {HTMLButtonElement} */ - this._searchButton = /** @type {HTMLButtonElement} */ (document.querySelector('#search-button')); + this._searchButton = querySelectorNotNull(document, '#search-button'); /** @type {HTMLButtonElement} */ - this._searchBackButton = /** @type {HTMLButtonElement} */ (document.querySelector('#search-back-button')); + this._searchBackButton = querySelectorNotNull(document, '#search-back-button'); /** @type {HTMLTextAreaElement} */ - this._queryInput = /** @type {HTMLTextAreaElement} */ (document.querySelector('#search-textbox')); + this._queryInput = querySelectorNotNull(document, '#search-textbox'); /** @type {HTMLElement} */ - this._introElement = /** @type {HTMLElement} */ (document.querySelector('#intro')); + this._introElement = querySelectorNotNull(document, '#intro'); /** @type {HTMLInputElement} */ - this._clipboardMonitorEnableCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#clipboard-monitor-enable')); + this._clipboardMonitorEnableCheckbox = querySelectorNotNull(document, '#clipboard-monitor-enable'); /** @type {HTMLInputElement} */ - this._wanakanaEnableCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#wanakana-enable')); + this._wanakanaEnableCheckbox = querySelectorNotNull(document, '#wanakana-enable'); /** @type {EventListenerCollection} */ this._queryInputEvents = new EventListenerCollection(); /** @type {boolean} */ diff --git a/ext/js/dom/popup-menu.js b/ext/js/dom/popup-menu.js index 78394c93..33cdd1ae 100644 --- a/ext/js/dom/popup-menu.js +++ b/ext/js/dom/popup-menu.js @@ -17,6 +17,7 @@ */ import {EventDispatcher, EventListenerCollection} from '../core.js'; +import {querySelectorNotNull} from './query-selector.js'; /** * @augments EventDispatcher<import('popup-menu').EventType> @@ -33,9 +34,9 @@ export class PopupMenu extends EventDispatcher { /** @type {HTMLElement} */ this._containerNode = containerNode; /** @type {HTMLElement} */ - this._node = /** @type {HTMLElement} */ (containerNode.querySelector('.popup-menu')); + this._node = querySelectorNotNull(containerNode, '.popup-menu'); /** @type {HTMLElement} */ - this._bodyNode = /** @type {HTMLElement} */ (containerNode.querySelector('.popup-menu-body')); + this._bodyNode = querySelectorNotNull(containerNode, '.popup-menu-body'); /** @type {boolean} */ this._isClosed = false; /** @type {EventListenerCollection} */ diff --git a/ext/js/dom/query-selector.js b/ext/js/dom/query-selector.js new file mode 100644 index 00000000..e881211d --- /dev/null +++ b/ext/js/dom/query-selector.js @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2023 Yomitan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +import {ExtensionError} from '../core/extension-error.js'; + +/** + * @param {Element|Document|DocumentFragment} element + * @param {string} selector + * @returns {ExtensionError} + */ +function createError(element, selector) { + const error = new ExtensionError(`Performing querySelectorNotNull(element, ${JSON.stringify(selector)}) returned null`); + error.data = {element, selector}; + return error; +} + +/** + * @template {Element} T + * @param {Element|Document|DocumentFragment} element + * @param {string} selector + * @returns {T} + * @throws {Error} + */ +export function querySelectorNotNull(element, selector) { + /** @type {?T} */ + const result = element.querySelector(selector); + if (result === null) { throw createError(element, selector); } + return result; +} diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js index 94b9b356..f8dd865f 100644 --- a/ext/js/pages/action-popup-main.js +++ b/ext/js/pages/action-popup-main.js @@ -17,6 +17,7 @@ */ import {PermissionsUtil} from '../data/permissions-util.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {HotkeyHelpController} from '../input/hotkey-help-controller.js'; import {yomitan} from '../yomitan.js'; @@ -57,7 +58,9 @@ export class DisplayController { this._setupOptions(primaryProfile); } - /** @type {HTMLElement} */ (document.querySelector('.action-select-profile')).hidden = (profiles.length <= 1); + /** @type {HTMLElement} */ + const profileSelect = querySelectorNotNull(document, '.action-select-profile'); + profileSelect.hidden = (profiles.length <= 1); this._updateProfileSelect(profiles, profileCurrent); @@ -207,8 +210,10 @@ export class DisplayController { * @param {number} profileCurrent */ _updateProfileSelect(profiles, profileCurrent) { - const select = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-select')); - const optionGroup = /** @type {HTMLElement} */ (document.querySelector('#profile-select-option-group')); + /** @type {HTMLSelectElement} */ + const select = querySelectorNotNull(document, '#profile-select'); + /** @type {HTMLElement} */ + const optionGroup = querySelectorNotNull(document, '#profile-select-option-group'); const fragment = document.createDocumentFragment(); for (let i = 0, ii = profiles.length; i < ii; ++i) { const {name} = profiles[i]; diff --git a/ext/js/pages/info-main.js b/ext/js/pages/info-main.js index f71d64c3..7445354f 100644 --- a/ext/js/pages/info-main.js +++ b/ext/js/pages/info-main.js @@ -18,6 +18,7 @@ import {log, promiseTimeout} from '../core.js'; import {DocumentFocusController} from '../dom/document-focus-controller.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {yomitan} from '../yomitan.js'; import {BackupController} from './settings/backup-controller.js'; import {SettingsController} from './settings/settings-controller.js'; @@ -69,15 +70,27 @@ function getOperatingSystemDisplayName(os) { const {name, version} = manifest; const {browser, platform: {os}} = await yomitan.api.getEnvironmentInfo(); - const thisVersionLink = /** @type {HTMLLinkElement} */ (document.querySelector('#release-notes-this-version-link')); + /** @type {HTMLLinkElement} */ + const thisVersionLink = querySelectorNotNull(document, '#release-notes-this-version-link'); const {hrefFormat} = thisVersionLink.dataset; thisVersionLink.href = typeof hrefFormat === 'string' ? hrefFormat.replace(/\{version\}/g, version) : ''; - /** @type {HTMLElement} */ (document.querySelector('#version')).textContent = `${name} ${version}`; - /** @type {HTMLElement} */ (document.querySelector('#browser')).textContent = getBrowserDisplayName(browser); - /** @type {HTMLElement} */ (document.querySelector('#platform')).textContent = getOperatingSystemDisplayName(os); - /** @type {HTMLElement} */ (document.querySelector('#language')).textContent = `${language}`; - /** @type {HTMLElement} */ (document.querySelector('#user-agent')).textContent = userAgent; + /** @type {HTMLElement} */ + const versionElement = querySelectorNotNull(document, '#version'); + /** @type {HTMLElement} */ + const browserElement = querySelectorNotNull(document, '#browser'); + /** @type {HTMLElement} */ + const platformElement = querySelectorNotNull(document, '#platform'); + /** @type {HTMLElement} */ + const languageElement = querySelectorNotNull(document, '#language'); + /** @type {HTMLElement} */ + const userAgentElement = querySelectorNotNull(document, '#user-agent'); + + versionElement.textContent = `${name} ${version}`; + browserElement.textContent = getBrowserDisplayName(browser); + platformElement.textContent = getOperatingSystemDisplayName(os); + languageElement.textContent = `${language}`; + userAgentElement.textContent = userAgent; (async () => { let ankiConnectVersion = null; @@ -87,9 +100,16 @@ function getOperatingSystemDisplayName(os) { // NOP } - /** @type {HTMLElement} */ (document.querySelector('#anki-connect-version')).textContent = (ankiConnectVersion !== null ? `${ankiConnectVersion}` : 'Unknown'); - /** @type {HTMLElement} */ (document.querySelector('#anki-connect-version-container')).dataset.hasError = `${ankiConnectVersion === null}`; - /** @type {HTMLElement} */ (document.querySelector('#anki-connect-version-unknown-message')).hidden = (ankiConnectVersion !== null); + /** @type {HTMLElement} */ + const ankiVersionElement = querySelectorNotNull(document, '#anki-connect-version'); + /** @type {HTMLElement} */ + const ankiVersionContainerElement = querySelectorNotNull(document, '#anki-connect-version-container'); + /** @type {HTMLElement} */ + const ankiVersionUnknownElement = querySelectorNotNull(document, '#anki-connect-version-unknown-message'); + + ankiVersionElement.textContent = (ankiConnectVersion !== null ? `${ankiConnectVersion}` : 'Unknown'); + ankiVersionContainerElement.dataset.hasError = `${ankiConnectVersion === null}`; + ankiVersionUnknownElement.hidden = (ankiConnectVersion !== null); })(); (async () => { @@ -115,8 +135,12 @@ function getOperatingSystemDisplayName(os) { fragment.appendChild(node); } - /** @type {HTMLElement} */ (document.querySelector('#installed-dictionaries-none')).hidden = (dictionaryInfos.length !== 0); - const container = /** @type {HTMLElement} */ (document.querySelector('#installed-dictionaries')); + /** @type {HTMLElement} */ + const noneElement = querySelectorNotNull(document, '#installed-dictionaries-none'); + + noneElement.hidden = (dictionaryInfos.length !== 0); + /** @type {HTMLElement} */ + const container = querySelectorNotNull(document, '#installed-dictionaries'); container.textContent = ''; container.appendChild(fragment); })(); diff --git a/ext/js/pages/permissions-main.js b/ext/js/pages/permissions-main.js index 064e9240..58dae310 100644 --- a/ext/js/pages/permissions-main.js +++ b/ext/js/pages/permissions-main.js @@ -18,6 +18,7 @@ import {log, promiseTimeout} from '../core.js'; import {DocumentFocusController} from '../dom/document-focus-controller.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {yomitan} from '../yomitan.js'; import {ExtensionContentController} from './common/extension-content-controller.js'; import {ModalController} from './settings/modal-controller.js'; @@ -99,11 +100,12 @@ function setupPermissionsToggles() { setupEnvironmentInfo(); - /** @type {[HTMLInputElement, HTMLInputElement]} */ - const permissionsCheckboxes = [ - /** @type {HTMLInputElement} */ (document.querySelector('#permission-checkbox-allow-in-private-windows')), - /** @type {HTMLInputElement} */ (document.querySelector('#permission-checkbox-allow-file-url-access')) - ]; + /** @type {HTMLInputElement} */ + const permissionCheckbox1 = querySelectorNotNull(document, '#permission-checkbox-allow-in-private-windows'); + /** @type {HTMLInputElement} */ + const permissionCheckbox2 = querySelectorNotNull(document, '#permission-checkbox-allow-file-url-access'); + /** @type {HTMLInputElement[]} */ + const permissionsCheckboxes = [permissionCheckbox1, permissionCheckbox2]; const permissions = await Promise.all([ isAllowedIncognitoAccess(), diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js index 737cc04a..f470d9fa 100644 --- a/ext/js/pages/settings/anki-controller.js +++ b/ext/js/pages/settings/anki-controller.js @@ -20,6 +20,7 @@ import {AnkiConnect} from '../../comm/anki-connect.js'; import {EventListenerCollection, log} from '../../core.js'; import {ExtensionError} from '../../core/extension-error.js'; import {AnkiUtil} from '../../data/anki-util.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {SelectorObserver} from '../../dom/selector-observer.js'; import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js'; import {yomitan} from '../../yomitan.js'; @@ -45,26 +46,27 @@ export class AnkiController { this._stringComparer = new Intl.Collator(); // Locale does not matter /** @type {?Promise<import('anki-controller').AnkiData>} */ this._getAnkiDataPromise = null; - /** @type {?HTMLElement} */ - this._ankiErrorContainer = null; - /** @type {?HTMLElement} */ - this._ankiErrorMessageNode = null; + /** @type {HTMLElement} */ + this._ankiErrorMessageNode = querySelectorNotNull(document, '#anki-error-message'); + const ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent; /** @type {string} */ - this._ankiErrorMessageNodeDefaultContent = ''; - /** @type {?HTMLElement} */ - this._ankiErrorMessageDetailsNode = null; - /** @type {?HTMLElement} */ - this._ankiErrorMessageDetailsContainer = null; - /** @type {?HTMLElement} */ - this._ankiErrorMessageDetailsToggle = null; - /** @type {?HTMLElement} */ - this._ankiErrorInvalidResponseInfo = null; - /** @type {?HTMLElement} */ - this._ankiCardPrimary = null; + this._ankiErrorMessageNodeDefaultContent = typeof ankiErrorMessageNodeDefaultContent === 'string' ? ankiErrorMessageNodeDefaultContent : ''; + /** @type {HTMLElement} */ + this._ankiErrorMessageDetailsNode = querySelectorNotNull(document, '#anki-error-message-details'); + /** @type {HTMLElement} */ + this._ankiErrorMessageDetailsContainer = querySelectorNotNull(document, '#anki-error-message-details-container'); + /** @type {HTMLElement} */ + this._ankiErrorMessageDetailsToggle = querySelectorNotNull(document, '#anki-error-message-details-toggle'); + /** @type {HTMLElement} */ + this._ankiErrorInvalidResponseInfo = querySelectorNotNull(document, '#anki-error-invalid-response-info'); + /** @type {HTMLElement} */ + this._ankiCardPrimary = querySelectorNotNull(document, '#anki-card-primary'); /** @type {?Error} */ this._ankiError = null; /** @type {?import('core').TokenObject} */ this._validateFieldsToken = null; + /** @type {?HTMLInputElement} */ + this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]'); } /** @type {import('./settings-controller.js').SettingsController} */ @@ -74,19 +76,11 @@ export class AnkiController { /** */ async prepare() { - this._ankiErrorContainer = /** @type {HTMLElement} */ (document.querySelector('#anki-error')); - this._ankiErrorMessageNode = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message')); - const ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent; - this._ankiErrorMessageNodeDefaultContent = typeof ankiErrorMessageNodeDefaultContent === 'string' ? ankiErrorMessageNodeDefaultContent : ''; - this._ankiErrorMessageDetailsNode = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message-details')); - this._ankiErrorMessageDetailsContainer = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message-details-container')); - this._ankiErrorMessageDetailsToggle = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message-details-toggle')); - this._ankiErrorInvalidResponseInfo = /** @type {HTMLElement} */ (document.querySelector('#anki-error-invalid-response-info')); - this._ankiEnableCheckbox = /** @type {?HTMLInputElement} */ (document.querySelector('[data-setting="anki.enable"]')); - this._ankiCardPrimary = /** @type {HTMLElement} */ (document.querySelector('#anki-card-primary')); - const ankiApiKeyInput = /** @type {HTMLElement} */ (document.querySelector('#anki-api-key-input')); + /** @type {HTMLElement} */ + const ankiApiKeyInput = querySelectorNotNull(document, '#anki-api-key-input'); const ankiCardPrimaryTypeRadios = /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('input[type=radio][name=anki-card-primary-type]')); - const ankiErrorLog = /** @type {HTMLElement} */ (document.querySelector('#anki-error-log')); + /** @type {HTMLElement} */ + const ankiErrorLog = querySelectorNotNull(document, '#anki-error-log'); this._setupFieldMenus(); @@ -439,9 +433,6 @@ export class AnkiController { /** */ _hideAnkiError() { const ankiErrorMessageNode = /** @type {HTMLElement} */ (this._ankiErrorMessageNode); - if (this._ankiErrorContainer !== null) { - this._ankiErrorContainer.hidden = true; - } /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsContainer).hidden = true; /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsToggle).hidden = true; /** @type {HTMLElement} */ (this._ankiErrorInvalidResponseInfo).hidden = true; @@ -472,9 +463,6 @@ export class AnkiController { details += `${error.stack}`.trimRight(); /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsNode).textContent = details; - if (this._ankiErrorContainer !== null) { - this._ankiErrorContainer.hidden = false; - } /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsContainer).hidden = true; /** @type {HTMLElement} */ (this._ankiErrorInvalidResponseInfo).hidden = (errorString.indexOf('Invalid response') < 0); /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsToggle).hidden = false; @@ -534,7 +522,8 @@ export class AnkiController { * @param {?Error} error */ _setAnkiNoteViewerStatus(visible, error) { - const node = /** @type {HTMLElement} */ (document.querySelector('#test-anki-note-viewer-results')); + /** @type {HTMLElement} */ + const node = querySelectorNotNull(document, '#test-anki-note-viewer-results'); if (visible) { const success = (error === null); node.textContent = success ? 'Success!' : error.message; @@ -608,8 +597,12 @@ class AnkiCardController { const cardOptions = this._getCardOptions(ankiOptions, this._cardType); if (cardOptions === null) { return; } const {deck, model, fields} = cardOptions; - this._deckController.prepare(/** @type {HTMLSelectElement} */ (this._node.querySelector('.anki-card-deck')), deck); - this._modelController.prepare(/** @type {HTMLSelectElement} */ (this._node.querySelector('.anki-card-model')), model); + /** @type {HTMLSelectElement} */ + const deckControllerSelect = querySelectorNotNull(this._node, '.anki-card-deck'); + /** @type {HTMLSelectElement} */ + const modelControllerSelect = querySelectorNotNull(this._node, '.anki-card-model'); + this._deckController.prepare(deckControllerSelect, deck); + this._modelController.prepare(modelControllerSelect, model); this._fields = fields; this._ankiCardFieldsContainer = this._node.querySelector('.anki-card-fields'); @@ -752,7 +745,8 @@ class AnkiCardController { _setFieldMarker(element, marker) { const container = element.closest('.anki-card-field-value-container'); if (container === null) { return; } - const input = /** @type {HTMLInputElement} */ (container.querySelector('.anki-card-field-value')); + /** @type {HTMLInputElement} */ + const input = querySelectorNotNull(container, '.anki-card-field-value'); input.value = `{${marker}}`; input.dispatchEvent(new Event('change')); } @@ -780,15 +774,19 @@ class AnkiCardController { for (const [fieldName, fieldValue] of Object.entries(this._fields)) { const content = this._settingsController.instantiateTemplateFragment('anki-card-field'); - const fieldNameContainerNode = /** @type {HTMLElement} */ (content.querySelector('.anki-card-field-name-container')); + /** @type {HTMLElement} */ + const fieldNameContainerNode = querySelectorNotNull(content, '.anki-card-field-name-container'); fieldNameContainerNode.dataset.index = `${index}`; - const fieldNameNode = /** @type {HTMLElement} */ (content.querySelector('.anki-card-field-name')); + /** @type {HTMLElement} */ + const fieldNameNode = querySelectorNotNull(content, '.anki-card-field-name'); fieldNameNode.textContent = fieldName; - const valueContainer = /** @type {HTMLElement} */ (content.querySelector('.anki-card-field-value-container')); + /** @type {HTMLElement} */ + const valueContainer = querySelectorNotNull(content, '.anki-card-field-value-container'); valueContainer.dataset.index = `${index}`; - const inputField = /** @type {HTMLInputElement} */ (content.querySelector('.anki-card-field-value')); + /** @type {HTMLInputElement} */ + const inputField = querySelectorNotNull(content, '.anki-card-field-value'); inputField.value = fieldValue; inputField.dataset.setting = ObjectPropertyAccessor.getPathString(['anki', this._cardType, 'fields', fieldName]); this._validateFieldPermissions(inputField, index, false); @@ -798,7 +796,8 @@ class AnkiCardController { this._fieldEventListeners.addEventListener(inputField, 'settingChanged', this._onFieldSettingChanged.bind(this, index), false); this._validateField(inputField, index); - const menuButton = /** @type {?HTMLElement} */ (content.querySelector('.anki-card-field-value-menu-button')); + /** @type {?HTMLElement} */ + const menuButton = content.querySelector('.anki-card-field-value-menu-button'); if (menuButton !== null) { if (typeof this._cardMenu !== 'undefined') { menuButton.dataset.menu = this._cardMenu; diff --git a/ext/js/pages/settings/anki-templates-controller.js b/ext/js/pages/settings/anki-templates-controller.js index 89848ef3..03fda9ca 100644 --- a/ext/js/pages/settings/anki-templates-controller.js +++ b/ext/js/pages/settings/anki-templates-controller.js @@ -18,6 +18,7 @@ import {ExtensionError} from '../../core/extension-error.js'; import {AnkiNoteBuilder} from '../../data/anki-note-builder.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {JapaneseUtil} from '../../language/sandbox/japanese-util.js'; import {yomitan} from '../../yomitan.js'; @@ -40,14 +41,16 @@ export class AnkiTemplatesController { this._cachedDictionaryEntryText = null; /** @type {?string} */ this._defaultFieldTemplates = null; - /** @type {?HTMLTextAreaElement} */ - this._fieldTemplatesTextarea = null; - /** @type {?HTMLElement} */ - this._compileResultInfo = null; - /** @type {?HTMLInputElement} */ - this._renderFieldInput = null; - /** @type {?HTMLElement} */ - this._renderResult = null; + /** @type {HTMLTextAreaElement} */ + this._fieldTemplatesTextarea = querySelectorNotNull(document, '#anki-card-templates-textarea'); + /** @type {HTMLElement} */ + this._compileResultInfo = querySelectorNotNull(document, '#anki-card-templates-compile-result'); + /** @type {HTMLInputElement} */ + this._renderFieldInput = querySelectorNotNull(document, '#anki-card-templates-test-field-input'); + /** @type {HTMLInputElement} */ + this._renderTextInput = querySelectorNotNull(document, '#anki-card-templates-test-text-input'); + /** @type {HTMLElement} */ + this._renderResult = querySelectorNotNull(document, '#anki-card-templates-render-result'); /** @type {?import('./modal.js').Modal} */ this._fieldTemplateResetModal = null; /** @type {AnkiNoteBuilder} */ @@ -58,15 +61,14 @@ export class AnkiTemplatesController { async prepare() { this._defaultFieldTemplates = await yomitan.api.getDefaultAnkiFieldTemplates(); - this._fieldTemplatesTextarea = /** @type {HTMLTextAreaElement} */ (document.querySelector('#anki-card-templates-textarea')); - this._compileResultInfo = /** @type {HTMLElement} */ (document.querySelector('#anki-card-templates-compile-result')); - this._renderFieldInput = /** @type {HTMLInputElement} */ (document.querySelector('#anki-card-templates-test-field-input')); - this._renderTextInput = /** @type {HTMLInputElement} */ (document.querySelector('#anki-card-templates-test-text-input')); - this._renderResult = /** @type {HTMLElement} */ (document.querySelector('#anki-card-templates-render-result')); - const menuButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-test-field-menu-button')); - const testRenderButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-test-render-button')); - const resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-reset-button')); - const resetConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-reset-button-confirm')); + /** @type {HTMLButtonElement} */ + const menuButton = querySelectorNotNull(document, '#anki-card-templates-test-field-menu-button'); + /** @type {HTMLButtonElement} */ + const testRenderButton = querySelectorNotNull(document, '#anki-card-templates-test-render-button'); + /** @type {HTMLButtonElement} */ + const resetButton = querySelectorNotNull(document, '#anki-card-templates-reset-button'); + /** @type {HTMLButtonElement} */ + const resetConfirmButton = querySelectorNotNull(document, '#anki-card-templates-reset-button-confirm'); this._fieldTemplateResetModal = this._modalController.getModal('anki-card-templates-reset'); this._fieldTemplatesTextarea.addEventListener('change', this._onChanged.bind(this), false); diff --git a/ext/js/pages/settings/audio-controller.js b/ext/js/pages/settings/audio-controller.js index 0a3f9454..af05ee70 100644 --- a/ext/js/pages/settings/audio-controller.js +++ b/ext/js/pages/settings/audio-controller.js @@ -17,6 +17,7 @@ */ import {EventDispatcher, EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {AudioSystem} from '../../media/audio-system.js'; /** @@ -35,14 +36,14 @@ export class AudioController extends EventDispatcher { this._modalController = modalController; /** @type {AudioSystem} */ this._audioSystem = new AudioSystem(); - /** @type {?HTMLElement} */ - this._audioSourceContainer = null; - /** @type {?HTMLButtonElement} */ - this._audioSourceAddButton = null; + /** @type {HTMLElement} */ + this._audioSourceContainer = querySelectorNotNull(document, '#audio-source-list'); + /** @type {HTMLButtonElement} */ + this._audioSourceAddButton = querySelectorNotNull(document, '#audio-source-add'); /** @type {AudioSourceEntry[]} */ this._audioSourceEntries = []; - /** @type {?HTMLInputElement} */ - this._voiceTestTextInput = null; + /** @type {HTMLInputElement} */ + this._voiceTestTextInput = querySelectorNotNull(document, '#text-to-speech-voice-test-text'); /** @type {import('audio-controller').VoiceInfo[]} */ this._voices = []; } @@ -61,11 +62,9 @@ export class AudioController extends EventDispatcher { async prepare() { this._audioSystem.prepare(); - this._voiceTestTextInput = /** @type {HTMLInputElement} */ (document.querySelector('#text-to-speech-voice-test-text')); - this._audioSourceContainer = /** @type {HTMLElement} */ (document.querySelector('#audio-source-list')); - this._audioSourceAddButton = /** @type {HTMLButtonElement} */ (document.querySelector('#audio-source-add')); this._audioSourceContainer.textContent = ''; - const testButton = /** @type {HTMLButtonElement} */ (document.querySelector('#text-to-speech-voice-test')); + /** @type {HTMLButtonElement} */ + const testButton = querySelectorNotNull(document, '#text-to-speech-voice-test'); this._audioSourceAddButton.addEventListener('click', this._onAddAudioSource.bind(this), false); @@ -270,12 +269,12 @@ class AudioSourceEntry { this._node = node; /** @type {EventListenerCollection} */ this._eventListeners = new EventListenerCollection(); - /** @type {?HTMLSelectElement} */ - this._typeSelect = null; - /** @type {?HTMLInputElement} */ - this._urlInput = null; - /** @type {?HTMLSelectElement} */ - this._voiceSelect = null; + /** @type {HTMLSelectElement} */ + this._typeSelect = querySelectorNotNull(this._node, '.audio-source-type-select'); + /** @type {HTMLInputElement} */ + this._urlInput = querySelectorNotNull(this._node, '.audio-source-parameter-container[data-field=url] .audio-source-parameter'); + /** @type {HTMLSelectElement} */ + this._voiceSelect = querySelectorNotNull(this._node, '.audio-source-parameter-container[data-field=voice] .audio-source-parameter'); } /** @type {number} */ @@ -296,10 +295,8 @@ class AudioSourceEntry { prepare() { this._updateTypeParameter(); - const menuButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.audio-source-menu-button')); - this._typeSelect = /** @type {HTMLSelectElement} */ (this._node.querySelector('.audio-source-type-select')); - this._urlInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.audio-source-parameter-container[data-field=url] .audio-source-parameter')); - this._voiceSelect = /** @type {HTMLSelectElement} */ (this._node.querySelector('.audio-source-parameter-container[data-field=voice] .audio-source-parameter')); + /** @type {HTMLButtonElement} */ + const menuButton = querySelectorNotNull(this._node, '.audio-source-menu-button'); this._typeSelect.value = this._type; this._urlInput.value = this._url; @@ -389,7 +386,8 @@ class AudioSourceEntry { break; } - const helpNode = /** @type {?HTMLElement} */ (menu.bodyNode.querySelector('.popup-menu-item[data-menu-action=help]')); + /** @type {?HTMLElement} */ + const helpNode = menu.bodyNode.querySelector('.popup-menu-item[data-menu-action=help]'); if (helpNode !== null) { helpNode.hidden = !hasHelp; } diff --git a/ext/js/pages/settings/backup-controller.js b/ext/js/pages/settings/backup-controller.js index 95433d1c..94f85416 100644 --- a/ext/js/pages/settings/backup-controller.js +++ b/ext/js/pages/settings/backup-controller.js @@ -20,6 +20,7 @@ import {Dexie} from '../../../lib/dexie.js'; import {isObject, log} from '../../core.js'; import {OptionsUtil} from '../../data/options-util.js'; import {ArrayBufferUtil} from '../../data/sandbox/array-buffer-util.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; import {DictionaryController} from './dictionary-controller.js'; @@ -243,7 +244,8 @@ export class BackupController { */ _showSettingsImportError(error) { log.error(error); - const element = /** @type {HTMLElement} */ (document.querySelector('#settings-import-error-message')); + /** @type {HTMLElement} */ + const element = querySelectorNotNull(document, '#settings-import-error-message'); element.textContent = `${error}`; if (this._settingsImportErrorModal !== null) { this._settingsImportErrorModal.setVisible(true); @@ -480,7 +482,8 @@ export class BackupController { /** */ _onSettingsImportClick() { - const element = /** @type {HTMLElement} */ (document.querySelector('#settings-import-file')); + /** @type {HTMLElement} */ + const element = querySelectorNotNull(document, '#settings-import-file'); element.click(); } @@ -538,7 +541,8 @@ export class BackupController { * @param {boolean} [isWarning] */ _databaseExportImportErrorMessage(message, isWarning=false) { - const errorMessageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-error-report')); + /** @type {HTMLElement} */ + const errorMessageContainer = querySelectorNotNull(document, '#db-ops-error-report'); errorMessageContainer.style.display = 'block'; errorMessageContainer.textContent = message; @@ -557,7 +561,8 @@ export class BackupController { _databaseExportProgressCallback({totalRows, completedRows, done}) { // eslint-disable-next-line no-console console.log(`Progress: ${completedRows} of ${totalRows} rows completed`); - const messageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-progress-report')); + /** @type {HTMLElement} */ + const messageContainer = querySelectorNotNull(document, '#db-ops-progress-report'); messageContainer.style.display = 'block'; messageContainer.textContent = `Export Progress: ${completedRows} of ${totalRows} rows completed`; @@ -589,7 +594,8 @@ export class BackupController { return; } - const errorMessageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-error-report')); + /** @type {HTMLElement} */ + const errorMessageContainer = querySelectorNotNull(document, '#db-ops-error-report'); errorMessageContainer.style.display = 'none'; const date = new Date(Date.now()); @@ -619,7 +625,8 @@ export class BackupController { _databaseImportProgressCallback({totalRows, completedRows, done}) { // eslint-disable-next-line no-console console.log(`Progress: ${completedRows} of ${totalRows} rows completed`); - const messageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-progress-report')); + /** @type {HTMLElement} */ + const messageContainer = querySelectorNotNull(document, '#db-ops-progress-report'); messageContainer.style.display = 'block'; messageContainer.style.color = '#4169e1'; messageContainer.textContent = `Import Progress: ${completedRows} of ${totalRows} rows completed`; @@ -645,7 +652,9 @@ export class BackupController { /** */ _onSettingsImportDatabaseClick() { - /** @type {HTMLElement} */ (document.querySelector('#settings-import-db')).click(); + /** @type {HTMLElement} */ + const element = querySelectorNotNull(document, '#settings-import-db'); + element.click(); } /** @@ -658,7 +667,8 @@ export class BackupController { return; } - const errorMessageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-error-report')); + /** @type {HTMLElement} */ + const errorMessageContainer = querySelectorNotNull(document, '#db-ops-error-report'); errorMessageContainer.style.display = 'none'; const element = /** @type {HTMLInputElement} */ (e.currentTarget); @@ -675,7 +685,8 @@ export class BackupController { } catch (error) { // eslint-disable-next-line no-console console.log(error); - const messageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-progress-report')); + /** @type {HTMLElement} */ + const messageContainer = querySelectorNotNull(document, '#db-ops-progress-report'); messageContainer.style.color = 'red'; this._databaseExportImportErrorMessage('Encountered errors when importing. Please restart the browser and try again. If it continues to fail, reinstall Yomitan and import dictionaries one-by-one.'); } finally { diff --git a/ext/js/pages/settings/collapsible-dictionary-controller.js b/ext/js/pages/settings/collapsible-dictionary-controller.js index 355292ad..cff3ad20 100644 --- a/ext/js/pages/settings/collapsible-dictionary-controller.js +++ b/ext/js/pages/settings/collapsible-dictionary-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class CollapsibleDictionaryController { @@ -32,8 +33,8 @@ export class CollapsibleDictionaryController { this._dictionaryInfoMap = new Map(); /** @type {EventListenerCollection} */ this._eventListeners = new EventListenerCollection(); - /** @type {?HTMLElement} */ - this._container = null; + /** @type {HTMLElement} */ + this._container = querySelectorNotNull(document, '#collapsible-dictionary-list'); /** @type {HTMLSelectElement[]} */ this._selects = []; /** @type {?HTMLSelectElement} */ @@ -42,8 +43,6 @@ export class CollapsibleDictionaryController { /** */ async prepare() { - this._container = /** @type {HTMLElement} */ (document.querySelector('#collapsible-dictionary-list')); - await this._onDatabaseUpdated(); yomitan.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); @@ -150,13 +149,17 @@ export class CollapsibleDictionaryController { const node = this._settingsController.instantiateTemplate('collapsible-dictionary-item'); fragment.appendChild(node); - const nameNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-title')); + /** @type {HTMLElement} */ + const nameNode = querySelectorNotNull(node, '.dictionary-title'); nameNode.textContent = dictionary; - const versionNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-version')); + /** @type {HTMLElement} */ + const versionNode = querySelectorNotNull(node, '.dictionary-version'); versionNode.textContent = version; - return /** @type {HTMLSelectElement} */ (node.querySelector('.definitions-collapsible')); + /** @type {HTMLSelectElement} */ + const select = querySelectorNotNull(node, '.definitions-collapsible'); + return select; } /** */ diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js index de63b200..0d84ccbf 100644 --- a/ext/js/pages/settings/dictionary-controller.js +++ b/ext/js/pages/settings/dictionary-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection, log} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {DictionaryWorker} from '../../language/dictionary-worker.js'; import {yomitan} from '../../yomitan.js'; @@ -41,21 +42,21 @@ class DictionaryEntry { /** @type {ChildNode[]} */ this._nodes = [...fragment.childNodes]; /** @type {HTMLInputElement} */ - this._enabledCheckbox = /** @type {HTMLInputElement} */ (fragment.querySelector('.dictionary-enabled')); + this._enabledCheckbox = querySelectorNotNull(fragment, '.dictionary-enabled'); /** @type {HTMLInputElement} */ - this._priorityInput = /** @type {HTMLInputElement} */ (fragment.querySelector('.dictionary-priority')); + this._priorityInput = querySelectorNotNull(fragment, '.dictionary-priority'); /** @type {HTMLButtonElement} */ - this._menuButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-menu-button')); + this._menuButton = querySelectorNotNull(fragment, '.dictionary-menu-button'); /** @type {HTMLButtonElement} */ - this._outdatedButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-outdated-button')); + this._outdatedButton = querySelectorNotNull(fragment, '.dictionary-outdated-button'); /** @type {HTMLButtonElement} */ - this._integrityButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-integrity-button')); + this._integrityButton = querySelectorNotNull(fragment, '.dictionary-integrity-button'); /** @type {HTMLElement} */ - this._titleNode = /** @type {HTMLElement} */ (fragment.querySelector('.dictionary-title')); + this._titleNode = querySelectorNotNull(fragment, '.dictionary-title'); /** @type {HTMLElement} */ - this._versionNode = /** @type {HTMLElement} */ (fragment.querySelector('.dictionary-version')); + this._versionNode = querySelectorNotNull(fragment, '.dictionary-version'); /** @type {HTMLElement} */ - this._titleContainer = /** @type {HTMLElement} */ (fragment.querySelector('.dictionary-item-title-container')); + this._titleContainer = querySelectorNotNull(fragment, '.dictionary-item-title-container'); } /** @type {string} */ @@ -168,12 +169,25 @@ class DictionaryEntry { const modal = this._dictionaryController.modalController.getModal('dictionary-details'); if (modal === null) { return; } - /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-title')).textContent = title; - /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-version')).textContent = `rev.${revision}`; - /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-outdated-notification')).hidden = (version >= 3); - /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-counts')).textContent = this._counts !== null ? JSON.stringify(this._counts, null, 4) : ''; - /** @type {HTMLInputElement} */ (modal.node.querySelector('.dictionary-prefix-wildcard-searches-supported')).checked = prefixWildcardsSupported; - this._setupDetails(/** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-details-table'))); + /** @type {HTMLElement} */ + const titleElement = querySelectorNotNull(modal.node, '.dictionary-title'); + /** @type {HTMLElement} */ + const versionElement = querySelectorNotNull(modal.node, '.dictionary-version'); + /** @type {HTMLElement} */ + const outdateElement = querySelectorNotNull(modal.node, '.dictionary-outdated-notification'); + /** @type {HTMLElement} */ + const countsElement = querySelectorNotNull(modal.node, '.dictionary-counts'); + /** @type {HTMLInputElement} */ + const wildcardSupportedElement = querySelectorNotNull(modal.node, '.dictionary-prefix-wildcard-searches-supported'); + /** @type {HTMLElement} */ + const detailsTableElement = querySelectorNotNull(modal.node, '.dictionary-details-table'); + + titleElement.textContent = title; + versionElement.textContent = `rev.${revision}`; + outdateElement.hidden = (version >= 3); + countsElement.textContent = this._counts !== null ? JSON.stringify(this._counts, null, 4) : ''; + wildcardSupportedElement.checked = prefixWildcardsSupported; + this._setupDetails(detailsTableElement); modal.setVisible(true); } @@ -200,8 +214,14 @@ class DictionaryEntry { const details = /** @type {HTMLElement} */ (this._dictionaryController.instantiateTemplate('dictionary-details-entry')); details.dataset.type = key; - /** @type {HTMLElement} */ (details.querySelector('.dictionary-details-entry-label')).textContent = `${label}:`; - /** @type {HTMLElement} */ (details.querySelector('.dictionary-details-entry-info')).textContent = info; + + /** @type {HTMLElement} */ + const labelElement = querySelectorNotNull(details, '.dictionary-details-entry-label'); + /** @type {HTMLElement} */ + const infoElement = querySelectorNotNull(details, '.dictionary-details-entry-info'); + + labelElement.textContent = `${label}:`; + infoElement.textContent = info; fragment.appendChild(details); any = true; @@ -241,8 +261,10 @@ class DictionaryEntry { const count = this._dictionaryController.dictionaryOptionCount; const modal = this._dictionaryController.modalController.getModal('dictionary-move-location'); if (modal === null) { return; } - const input = /** @type {HTMLInputElement} */ (modal.node.querySelector('#dictionary-move-location')); - const titleNode = /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-title')); + /** @type {HTMLInputElement} */ + const input = querySelectorNotNull(modal.node, '#dictionary-move-location'); + /** @type {HTMLElement} */ + const titleNode = querySelectorNotNull(modal.node, '.dictionary-title'); modal.node.dataset.index = `${this._index}`; titleNode.textContent = title; @@ -284,9 +306,11 @@ class DictionaryExtraInfo { this._nodes.push(node); } - const dictionaryIntegrityButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-integrity-button')); + /** @type {HTMLButtonElement} */ + const dictionaryIntegrityButton = querySelectorNotNull(fragment, '.dictionary-integrity-button'); - this._setTitle(fragment.querySelector('.dictionary-total-count')); + const titleNode = fragment.querySelector('.dictionary-total-count'); + this._setTitle(titleNode); this._eventListeners.addEventListener(dictionaryIntegrityButton, 'click', this._onIntegrityButtonClick.bind(this), false); container.appendChild(fragment); @@ -315,11 +339,13 @@ class DictionaryExtraInfo { const modal = this._parent.modalController.getModal('dictionary-extra-data'); if (modal === null) { return; } - const dictionaryCounts = /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-counts')); + /** @type {HTMLElement} */ + const dictionaryCounts = querySelectorNotNull(modal.node, '.dictionary-counts'); const info = {counts: this._totalCounts, remainders: this._remainders}; dictionaryCounts.textContent = JSON.stringify(info, null, 4); - this._setTitle(modal.node.querySelector('.dictionary-total-count')); + const titleNode = modal.node.querySelector('.dictionary-total-count'); + this._setTitle(titleNode); modal.setVisible(true); } @@ -354,22 +380,22 @@ export class DictionaryController { this._databaseStateToken = null; /** @type {boolean} */ this._checkingIntegrity = false; - /** @type {?HTMLButtonElement} */ - this._checkIntegrityButton = null; - /** @type {?HTMLElement} */ - this._dictionaryEntryContainer = null; - /** @type {?HTMLElement} */ - this._dictionaryInstallCountNode = null; - /** @type {?HTMLElement} */ - this._dictionaryEnabledCountNode = null; + /** @type {HTMLButtonElement} */ + this._checkIntegrityButton = querySelectorNotNull(document, '#dictionary-check-integrity'); + /** @type {HTMLElement} */ + this._dictionaryEntryContainer = querySelectorNotNull(document, '#dictionary-list'); + /** @type {HTMLElement} */ + this._dictionaryInstallCountNode = querySelectorNotNull(document, '#dictionary-install-count'); + /** @type {HTMLElement} */ + this._dictionaryEnabledCountNode = querySelectorNotNull(document, '#dictionary-enabled-count'); /** @type {?NodeListOf<HTMLElement>} */ this._noDictionariesInstalledWarnings = null; /** @type {?NodeListOf<HTMLElement>} */ this._noDictionariesEnabledWarnings = null; /** @type {?import('./modal.js').Modal} */ this._deleteDictionaryModal = null; - /** @type {?HTMLInputElement} */ - this._allCheckbox = null; + /** @type {HTMLInputElement} */ + this._allCheckbox = querySelectorNotNull(document, '#all-dictionaries-enabled'); /** @type {?DictionaryExtraInfo} */ this._extraInfo = null; /** @type {boolean} */ @@ -388,16 +414,13 @@ export class DictionaryController { /** */ async prepare() { - this._checkIntegrityButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-check-integrity')); - this._dictionaryEntryContainer = /** @type {HTMLElement} */ (document.querySelector('#dictionary-list')); - this._dictionaryInstallCountNode = /** @type {HTMLElement} */ (document.querySelector('#dictionary-install-count')); - this._dictionaryEnabledCountNode = /** @type {HTMLElement} */ (document.querySelector('#dictionary-enabled-count')); this._noDictionariesInstalledWarnings = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.no-dictionaries-installed-warning')); this._noDictionariesEnabledWarnings = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.no-dictionaries-enabled-warning')); this._deleteDictionaryModal = this._modalController.getModal('dictionary-confirm-delete'); - this._allCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#all-dictionaries-enabled')); - const dictionaryDeleteButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-confirm-delete-button')); - const dictionaryMoveButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-move-button')); + /** @type {HTMLButtonElement} */ + const dictionaryDeleteButton = querySelectorNotNull(document, '#dictionary-confirm-delete-button'); + /** @type {HTMLButtonElement} */ + const dictionaryMoveButton = querySelectorNotNull(document, '#dictionary-move-button'); yomitan.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); @@ -420,7 +443,8 @@ export class DictionaryController { if (this._isDeleting) { return; } const modal = /** @type {import('./modal.js').Modal} */ (this._deleteDictionaryModal); modal.node.dataset.dictionaryTitle = dictionaryTitle; - const nameElement = /** @type {Element} */ (modal.node.querySelector('#dictionary-confirm-delete-name')); + /** @type {Element} */ + const nameElement = querySelectorNotNull(modal.node, '#dictionary-confirm-delete-name'); nameElement.textContent = dictionaryTitle; modal.setVisible(true); } @@ -696,7 +720,9 @@ export class DictionaryController { if (typeof index !== 'number') { return; } const indexNumber = Number.parseInt(index, 10); - const targetString = /** @type {HTMLInputElement} */ (document.querySelector('#dictionary-move-location')).value; + /** @type {HTMLInputElement} */ + const targetStringInput = querySelectorNotNull(document, '#dictionary-move-location'); + const targetString = targetStringInput.value; const target = Number.parseInt(targetString, 10) - 1; if (!Number.isFinite(target) || !Number.isFinite(indexNumber) || indexNumber === target) { return; } diff --git a/ext/js/pages/settings/dictionary-import-controller.js b/ext/js/pages/settings/dictionary-import-controller.js index d1255e11..35b7c461 100644 --- a/ext/js/pages/settings/dictionary-import-controller.js +++ b/ext/js/pages/settings/dictionary-import-controller.js @@ -18,6 +18,7 @@ import {log} from '../../core.js'; import {ExtensionError} from '../../core/extension-error.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {DictionaryWorker} from '../../language/dictionary-worker.js'; import {yomitan} from '../../yomitan.js'; import {DictionaryController} from './dictionary-controller.js'; @@ -37,22 +38,18 @@ export class DictionaryImportController { this._statusFooter = statusFooter; /** @type {boolean} */ this._modifying = false; - /** @type {?HTMLButtonElement} */ - this._purgeButton = null; - /** @type {?HTMLButtonElement} */ - this._purgeConfirmButton = null; - /** @type {?HTMLButtonElement} */ - this._importFileButton = null; - /** @type {?HTMLInputElement} */ - this._importFileInput = null; + /** @type {HTMLButtonElement} */ + this._purgeButton = querySelectorNotNull(document, '#dictionary-delete-all-button'); + /** @type {HTMLButtonElement} */ + this._purgeConfirmButton = querySelectorNotNull(document, '#dictionary-confirm-delete-all-button'); + /** @type {HTMLButtonElement} */ + this._importFileButton = querySelectorNotNull(document, '#dictionary-import-file-button'); + /** @type {HTMLInputElement} */ + this._importFileInput = querySelectorNotNull(document, '#dictionary-import-file-input'); /** @type {?import('./modal.js').Modal} */ this._purgeConfirmModal = null; - /** @type {?HTMLElement} */ - this._errorContainer = null; - /** @type {?HTMLElement} */ - this._spinner = null; - /** @type {?HTMLElement} */ - this._purgeNotification = null; + /** @type {HTMLElement} */ + this._errorContainer = querySelectorNotNull(document, '#dictionary-error'); /** @type {[originalMessage: string, newMessage: string][]} */ this._errorToStringOverrides = [ [ @@ -68,14 +65,7 @@ export class DictionaryImportController { /** */ async prepare() { - this._purgeButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-delete-all-button')); - this._purgeConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-confirm-delete-all-button')); - this._importFileButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-import-file-button')); - this._importFileInput = /** @type {HTMLInputElement} */ (document.querySelector('#dictionary-import-file-input')); this._purgeConfirmModal = this._modalController.getModal('dictionary-confirm-delete-all'); - this._errorContainer = /** @type {HTMLElement} */ (document.querySelector('#dictionary-error')); - this._spinner = /** @type {HTMLElement} */ (document.querySelector('#dictionary-spinner')); - this._purgeNotification = /** @type {HTMLElement} */ (document.querySelector('#dictionary-delete-all-status')); this._purgeButton.addEventListener('click', this._onPurgeButtonClick.bind(this), false); this._purgeConfirmButton.addEventListener('click', this._onPurgeConfirmButtonClick.bind(this), false); @@ -123,14 +113,11 @@ export class DictionaryImportController { async _purgeDatabase() { if (this._modifying) { return; } - const purgeNotification = this._purgeNotification; const prevention = this._preventPageExit(); try { this._setModifying(true); this._hideErrors(); - this._setSpinnerVisible(true); - if (purgeNotification !== null) { purgeNotification.hidden = false; } await yomitan.api.purgeDatabase(); const errors = await this._clearDictionarySettings(); @@ -142,8 +129,6 @@ export class DictionaryImportController { this._showErrors([error instanceof Error ? error : new Error(`${error}`)]); } finally { prevention.end(); - if (purgeNotification !== null) { purgeNotification.hidden = true; } - this._setSpinnerVisible(false); this._setModifying(false); this._triggerStorageChanged(); } @@ -156,7 +141,6 @@ export class DictionaryImportController { if (this._modifying) { return; } const statusFooter = this._statusFooter; - const importInfo = /** @type {HTMLElement} */ (document.querySelector('#dictionary-import-info')); const progressSelector = '.dictionary-import-progress'; const progressContainers = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)); const progressBars = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-bar`)); @@ -168,7 +152,6 @@ export class DictionaryImportController { try { this._setModifying(true); this._hideErrors(); - this._setSpinnerVisible(true); for (const progress of progressContainers) { progress.hidden = false; } @@ -204,11 +187,6 @@ export class DictionaryImportController { const fileCount = files.length; for (let i = 0; i < fileCount; ++i) { - if (importInfo !== null && fileCount > 1) { - importInfo.hidden = false; - importInfo.textContent = `(${i + 1} of ${fileCount})`; - } - statusPrefix = `Importing dictionary${fileCount > 1 ? ` (${i + 1} of ${fileCount})` : ''}`; onProgress({ stepIndex: -1, @@ -226,11 +204,6 @@ export class DictionaryImportController { prevention.end(); for (const progress of progressContainers) { progress.hidden = true; } if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, false); } - if (importInfo !== null) { - importInfo.textContent = ''; - importInfo.hidden = true; - } - this._setSpinnerVisible(false); this._setModifying(false); this._triggerStorageChanged(); } @@ -313,15 +286,6 @@ export class DictionaryImportController { } /** - * @param {boolean} visible - */ - _setSpinnerVisible(visible) { - if (this._spinner !== null) { - this._spinner.hidden = !visible; - } - } - - /** * @returns {import('settings-controller').PageExitPrevention} */ _preventPageExit() { diff --git a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js index d36d965a..e92d9e93 100644 --- a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js +++ b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection, isObject} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {HotkeyUtil} from '../../input/hotkey-util.js'; import {yomitan} from '../../yomitan.js'; import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js'; @@ -28,12 +29,12 @@ export class ExtensionKeyboardShortcutController { constructor(settingsController) { /** @type {import('./settings-controller.js').SettingsController} */ this._settingsController = settingsController; - /** @type {?HTMLButtonElement} */ - this._resetButton = null; - /** @type {?HTMLButtonElement} */ - this._clearButton = null; - /** @type {?HTMLElement} */ - this._listContainer = null; + /** @type {HTMLButtonElement} */ + this._resetButton = querySelectorNotNull(document, '#extension-hotkey-list-reset-all'); + /** @type {HTMLButtonElement} */ + this._clearButton = querySelectorNotNull(document, '#extension-hotkey-list-clear-all'); + /** @type {HTMLElement} */ + this._listContainer = querySelectorNotNull(document, '#extension-hotkey-list'); /** @type {HotkeyUtil} */ this._hotkeyUtil = new HotkeyUtil(); /** @type {?import('environment').OperatingSystem} */ @@ -49,10 +50,6 @@ export class ExtensionKeyboardShortcutController { /** */ async prepare() { - this._resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#extension-hotkey-list-reset-all')); - this._clearButton = /** @type {HTMLButtonElement} */ (document.querySelector('#extension-hotkey-list-clear-all')); - this._listContainer = /** @type {HTMLElement} */ (document.querySelector('#extension-hotkey-list')); - const canResetCommands = this.canResetCommands(); const canModifyCommands = this.canModifyCommands(); this._resetButton.hidden = !canResetCommands; @@ -277,11 +274,14 @@ class ExtensionKeyboardShortcutHotkeyEntry { /** */ prepare() { - const label = /** @type {HTMLElement} */ (this._node.querySelector('.settings-item-label')); + /** @type {HTMLElement} */ + const label = querySelectorNotNull(this._node, '.settings-item-label'); label.textContent = this._description || this._name; - const button = /** @type {HTMLButtonElement} */ (this._node.querySelector('.extension-hotkey-list-item-button')); - const input = /** @type {HTMLInputElement} */ (this._node.querySelector('input')); + /** @type {HTMLButtonElement} */ + const button = querySelectorNotNull(this._node, '.extension-hotkey-list-item-button'); + /** @type {HTMLInputElement} */ + const input = querySelectorNotNull(this._node, 'input'); this._input = input; diff --git a/ext/js/pages/settings/keyboard-shortcuts-controller.js b/ext/js/pages/settings/keyboard-shortcuts-controller.js index ad16b0e9..0734faa1 100644 --- a/ext/js/pages/settings/keyboard-shortcuts-controller.js +++ b/ext/js/pages/settings/keyboard-shortcuts-controller.js @@ -18,6 +18,7 @@ import {EventListenerCollection} from '../../core.js'; import {DocumentUtil} from '../../dom/document-util.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js'; import {yomitan} from '../../yomitan.js'; import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js'; @@ -33,18 +34,18 @@ export class KeyboardShortcutController { this._entries = []; /** @type {?import('environment').OperatingSystem} */ this._os = null; - /** @type {?HTMLButtonElement} */ - this._addButton = null; - /** @type {?HTMLButtonElement} */ - this._resetButton = null; - /** @type {?HTMLElement} */ - this._listContainer = null; - /** @type {?HTMLElement} */ - this._emptyIndicator = null; + /** @type {HTMLButtonElement} */ + this._addButton = querySelectorNotNull(document, '#hotkey-list-add'); + /** @type {HTMLButtonElement} */ + this._resetButton = querySelectorNotNull(document, '#hotkey-list-reset'); + /** @type {HTMLElement} */ + this._listContainer = querySelectorNotNull(document, '#hotkey-list'); + /** @type {HTMLElement} */ + this._emptyIndicator = querySelectorNotNull(document, '#hotkey-list-empty'); /** @type {Intl.Collator} */ this._stringComparer = new Intl.Collator('en-US'); // Invariant locale - /** @type {?HTMLElement} */ - this._scrollContainer = null; + /** @type {HTMLElement} */ + this._scrollContainer = querySelectorNotNull(document, '#keyboard-shortcuts-modal .modal-body'); /** @type {Map<string, import('keyboard-shortcut-controller').ActionDetails>} */ this._actionDetails = new Map([ ['', {scopes: new Set()}], @@ -81,12 +82,6 @@ export class KeyboardShortcutController { const {platform: {os}} = await yomitan.api.getEnvironmentInfo(); this._os = os; - this._addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#hotkey-list-add')); - this._resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#hotkey-list-reset')); - this._listContainer = /** @type {HTMLElement} */ (document.querySelector('#hotkey-list')); - this._emptyIndicator = /** @type {HTMLElement} */ (document.querySelector('#hotkey-list-empty')); - this._scrollContainer = /** @type {HTMLElement} */ (document.querySelector('#keyboard-shortcuts-modal .modal-body')); - this._addButton.addEventListener('click', this._onAddClick.bind(this)); this._resetButton.addEventListener('click', this._onResetClick.bind(this)); this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); @@ -283,12 +278,18 @@ class KeyboardShortcutHotkeyEntry { prepare() { const node = this._node; - const menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.hotkey-list-item-button')); - const input = /** @type {HTMLInputElement} */ (node.querySelector('.hotkey-list-item-input')); - const action = /** @type {HTMLSelectElement} */ (node.querySelector('.hotkey-list-item-action')); - const enabledToggle = /** @type {HTMLInputElement} */ (node.querySelector('.hotkey-list-item-enabled')); - const scopesButton = /** @type {HTMLButtonElement} */ (node.querySelector('.hotkey-list-item-scopes-button')); - const enabledButton = /** @type {HTMLButtonElement} */ (node.querySelector('.hotkey-list-item-enabled-button')); + /** @type {HTMLButtonElement} */ + const menuButton = querySelectorNotNull(node, '.hotkey-list-item-button'); + /** @type {HTMLInputElement} */ + const input = querySelectorNotNull(node, '.hotkey-list-item-input'); + /** @type {HTMLSelectElement} */ + const action = querySelectorNotNull(node, '.hotkey-list-item-action'); + /** @type {HTMLInputElement} */ + const enabledToggle = querySelectorNotNull(node, '.hotkey-list-item-enabled'); + /** @type {HTMLButtonElement} */ + const scopesButton = querySelectorNotNull(node, '.hotkey-list-item-scopes-button'); + /** @type {HTMLButtonElement} */ + const enabledButton = querySelectorNotNull(node, '.hotkey-list-item-enabled-button'); this._actionSelect = action; this._enabledButton = enabledButton; @@ -333,7 +334,8 @@ class KeyboardShortcutHotkeyEntry { const {action} = this._data; const {menu} = e.detail; - const resetArgument = /** @type {HTMLElement} */ (menu.bodyNode.querySelector('.popup-menu-item[data-menu-action="resetArgument"]')); + /** @type {HTMLElement} */ + const resetArgument = querySelectorNotNull(menu.bodyNode, '.popup-menu-item[data-menu-action="resetArgument"]'); const details = this._parent.getActionDetails(action); const argumentDetails = typeof details !== 'undefined' ? details.argument : void 0; @@ -646,7 +648,8 @@ class KeyboardShortcutHotkeyEntry { if (scope === null) { continue; } menuItem.hidden = !(validScopes === null || validScopes.has(scope)); - const checkbox = /** @type {HTMLInputElement} */ (menuItem.querySelector('.hotkey-scope-checkbox')); + /** @type {HTMLInputElement} */ + const checkbox = querySelectorNotNull(menuItem, '.hotkey-scope-checkbox'); if (checkbox !== null) { checkbox.checked = scopes.includes(scope); this._scopeMenuEventListeners.addEventListener(checkbox, 'change', this._onScopeCheckboxChange.bind(this), false); diff --git a/ext/js/pages/settings/mecab-controller.js b/ext/js/pages/settings/mecab-controller.js index 4e2b02c6..9c55c9a0 100644 --- a/ext/js/pages/settings/mecab-controller.js +++ b/ext/js/pages/settings/mecab-controller.js @@ -16,23 +16,21 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class MecabController { constructor() { - /** @type {?HTMLButtonElement} */ - this._testButton = null; - /** @type {?HTMLElement} */ - this._resultsContainer = null; + /** @type {HTMLButtonElement} */ + this._testButton = querySelectorNotNull(document, '#test-mecab-button'); + /** @type {HTMLElement} */ + this._resultsContainer = querySelectorNotNull(document, '#test-mecab-results'); /** @type {boolean} */ this._testActive = false; } /** */ prepare() { - this._testButton = /** @type {HTMLButtonElement} */ (document.querySelector('#test-mecab-button')); - this._resultsContainer = /** @type {HTMLElement} */ (document.querySelector('#test-mecab-results')); - this._testButton.addEventListener('click', this._onTestButtonClick.bind(this), false); } diff --git a/ext/js/pages/settings/modal.js b/ext/js/pages/settings/modal.js index 21a6e705..17a4605d 100644 --- a/ext/js/pages/settings/modal.js +++ b/ext/js/pages/settings/modal.js @@ -37,7 +37,8 @@ export class Modal extends PanelElement { prepare() { const node = this.node; this._contentNode = node.querySelector('.modal-content'); - let dimmerNode = /** @type {?HTMLElement} */ (node.querySelector('.modal-content-dimmer')); + /** @type {?HTMLElement} */ + let dimmerNode = node.querySelector('.modal-content-dimmer'); if (dimmerNode === null) { dimmerNode = node; } dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false); dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false); diff --git a/ext/js/pages/settings/nested-popups-controller.js b/ext/js/pages/settings/nested-popups-controller.js index c01986ab..7eb78148 100644 --- a/ext/js/pages/settings/nested-popups-controller.js +++ b/ext/js/pages/settings/nested-popups-controller.js @@ -17,6 +17,7 @@ */ import {DocumentUtil} from '../../dom/document-util.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; export class NestedPopupsController { /** @@ -27,20 +28,16 @@ export class NestedPopupsController { this._settingsController = settingsController; /** @type {number} */ this._popupNestingMaxDepth = 0; - /** @type {?HTMLInputElement} */ - this._nestedPopupsEnabled = null; - /** @type {?HTMLInputElement} */ - this._nestedPopupsCount = null; - /** @type {?HTMLElement} */ - this._nestedPopupsEnabledMoreOptions = null; + /** @type {HTMLInputElement} */ + this._nestedPopupsEnabled = querySelectorNotNull(document, '#nested-popups-enabled'); + /** @type {HTMLInputElement} */ + this._nestedPopupsCount = querySelectorNotNull(document, '#nested-popups-count'); + /** @type {HTMLElement} */ + this._nestedPopupsEnabledMoreOptions = querySelectorNotNull(document, '#nested-popups-enabled-more-options'); } /** */ async prepare() { - this._nestedPopupsEnabled = /** @type {HTMLInputElement} */ (document.querySelector('#nested-popups-enabled')); - this._nestedPopupsCount = /** @type {HTMLInputElement} */ (document.querySelector('#nested-popups-count')); - this._nestedPopupsEnabledMoreOptions = /** @type {HTMLElement} */ (document.querySelector('#nested-popups-enabled-more-options')); - const options = await this._settingsController.getOptions(); const optionsContext = this._settingsController.getOptionsContext(); diff --git a/ext/js/pages/settings/permissions-origin-controller.js b/ext/js/pages/settings/permissions-origin-controller.js index a4271f92..6dacced8 100644 --- a/ext/js/pages/settings/permissions-origin-controller.js +++ b/ext/js/pages/settings/permissions-origin-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; export class PermissionsOriginController { /** @@ -25,16 +26,16 @@ export class PermissionsOriginController { constructor(settingsController) { /** @type {import('./settings-controller.js').SettingsController} */ this._settingsController = settingsController; - /** @type {?HTMLElement} */ - this._originContainer = null; - /** @type {?HTMLElement} */ - this._originEmpty = null; + /** @type {HTMLElement} */ + this._originContainer = querySelectorNotNull(document, '#permissions-origin-list'); + /** @type {HTMLElement} */ + this._originEmpty = querySelectorNotNull(document, '#permissions-origin-list-empty'); /** @type {?NodeListOf<HTMLInputElement>} */ this._originToggleNodes = null; - /** @type {?HTMLInputElement} */ - this._addOriginInput = null; - /** @type {?HTMLElement} */ - this._errorContainer = null; + /** @type {HTMLInputElement} */ + this._addOriginInput = querySelectorNotNull(document, '#permissions-origin-new-input'); + /** @type {HTMLElement} */ + this._errorContainer = querySelectorNotNull(document, '#permissions-origin-list-error'); /** @type {ChildNode[]} */ this._originContainerChildren = []; /** @type {EventListenerCollection} */ @@ -43,12 +44,9 @@ export class PermissionsOriginController { /** */ async prepare() { - this._originContainer = /** @type {HTMLElement} */ (document.querySelector('#permissions-origin-list')); - this._originEmpty = /** @type {HTMLElement} */ (document.querySelector('#permissions-origin-list-empty')); this._originToggleNodes = /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('.permissions-origin-toggle')); - this._addOriginInput = /** @type {HTMLInputElement} */ (document.querySelector('#permissions-origin-new-input')); - this._errorContainer = /** @type {HTMLElement} */ (document.querySelector('#permissions-origin-list-error')); - const addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#permissions-origin-add')); + /** @type {HTMLButtonElement} */ + const addButton = querySelectorNotNull(document, '#permissions-origin-add'); for (const node of this._originToggleNodes) { node.addEventListener('change', this._onOriginToggleChange.bind(this), false); @@ -87,8 +85,10 @@ export class PermissionsOriginController { for (const origin of originsSet) { if (excludeOrigins.has(origin)) { continue; } const node = this._settingsController.instantiateTemplateFragment('permissions-origin'); - const input = /** @type {HTMLInputElement} */ (node.querySelector('.permissions-origin-input')); - const menuButton = /** @type {HTMLElement} */ (node.querySelector('.permissions-origin-button')); + /** @type {HTMLInputElement} */ + const input = querySelectorNotNull(node, '.permissions-origin-input'); + /** @type {HTMLElement} */ + const menuButton = querySelectorNotNull(node, '.permissions-origin-button'); input.value = origin; this._eventListeners.addEventListener(menuButton, 'menuClose', this._onOriginMenuClose.bind(this, origin), false); this._originContainerChildren.push(...node.childNodes); diff --git a/ext/js/pages/settings/persistent-storage-controller.js b/ext/js/pages/settings/persistent-storage-controller.js index e85bfc6b..7386edd7 100644 --- a/ext/js/pages/settings/persistent-storage-controller.js +++ b/ext/js/pages/settings/persistent-storage-controller.js @@ -17,22 +17,23 @@ */ import {isObject} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class PersistentStorageController { constructor() { - /** @type {?HTMLInputElement} */ - this._persistentStorageCheckbox = null; + /** @type {HTMLInputElement} */ + this._persistentStorageCheckbox = querySelectorNotNull(document, '#storage-persistent-checkbox'); } /** */ async prepare() { - this._persistentStorageCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#storage-persistent-checkbox')); this._persistentStorageCheckbox.addEventListener('change', this._onPersistentStorageCheckboxChange.bind(this), false); if (!this._isPersistentStorageSupported()) { return; } - const info = /** @type {?HTMLElement} */ (document.querySelector('#storage-persistent-info')); + /** @type {?HTMLElement} */ + const info = document.querySelector('#storage-persistent-info'); if (info !== null) { info.hidden = false; } const isStoragePeristent = await this.isStoragePeristent(); @@ -77,7 +78,8 @@ export class PersistentStorageController { this._updateCheckbox(isStoragePeristent); - const node = /** @type {?HTMLElement} */ (document.querySelector('#storage-persistent-fail-warning')); + /** @type {?HTMLElement} */ + const node = document.querySelector('#storage-persistent-fail-warning'); if (node !== null) { node.hidden = isStoragePeristent; } yomitan.trigger('storageChanged'); diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js index 7239ca17..d8bc9850 100644 --- a/ext/js/pages/settings/popup-preview-controller.js +++ b/ext/js/pages/settings/popup-preview-controller.js @@ -16,6 +16,8 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import {querySelectorNotNull} from '../../dom/query-selector.js'; + export class PopupPreviewController { /** * @param {import('./settings-controller.js').SettingsController} settingsController @@ -25,25 +27,20 @@ export class PopupPreviewController { this._settingsController = settingsController; /** @type {string} */ this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); - /** @type {?HTMLIFrameElement} */ - this._frame = null; - /** @type {?HTMLTextAreaElement} */ - this._customCss = null; - /** @type {?HTMLTextAreaElement} */ - this._customOuterCss = null; - /** @type {?HTMLElement} */ - this._previewFrameContainer = null; + /** @type {HTMLIFrameElement} */ + this._frame = querySelectorNotNull(document, '#popup-preview-frame'); + /** @type {HTMLTextAreaElement} */ + this._customCss = querySelectorNotNull(document, '#custom-popup-css'); + /** @type {HTMLTextAreaElement} */ + this._customOuterCss = querySelectorNotNull(document, '#custom-popup-outer-css'); + /** @type {HTMLElement} */ + this._previewFrameContainer = querySelectorNotNull(document, '.preview-frame-container'); } /** */ async prepare() { if (new URLSearchParams(location.search).get('popup-preview') === 'false') { return; } - this._frame = /** @type {HTMLIFrameElement} */ (document.querySelector('#popup-preview-frame')); - this._customCss = /** @type {HTMLTextAreaElement} */ (document.querySelector('#custom-popup-css')); - this._customOuterCss = /** @type {HTMLTextAreaElement} */ (document.querySelector('#custom-popup-outer-css')); - this._previewFrameContainer = /** @type {HTMLElement} */ (document.querySelector('.preview-frame-container')); - this._customCss.addEventListener('input', this._onCustomCssChange.bind(this), false); this._customCss.addEventListener('settingChanged', this._onCustomCssChange.bind(this), false); this._customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js index 60d264fa..e5cc6580 100644 --- a/ext/js/pages/settings/popup-preview-frame.js +++ b/ext/js/pages/settings/popup-preview-frame.js @@ -18,6 +18,7 @@ import * as wanakana from '../../../lib/wanakana.js'; import {Frontend} from '../../app/frontend.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {TextSourceRange} from '../../dom/text-source-range.js'; import {yomitan} from '../../yomitan.js'; @@ -49,10 +50,10 @@ export class PopupPreviewFrame { this._textSource = null; /** @type {?import('settings').OptionsContext} */ this._optionsContext = null; - /** @type {?HTMLElement} */ - this._exampleText = null; - /** @type {?HTMLInputElement} */ - this._exampleTextInput = null; + /** @type {HTMLElement} */ + this._exampleText = querySelectorNotNull(document, '#example-text'); + /** @type {HTMLInputElement} */ + this._exampleTextInput = querySelectorNotNull(document, '#example-text-input'); /** @type {string} */ this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); @@ -67,9 +68,6 @@ export class PopupPreviewFrame { /** */ async prepare() { - this._exampleText = /** @type {HTMLElement} */ (document.querySelector('#example-text')); - this._exampleTextInput = /** @type {HTMLInputElement} */ (document.querySelector('#example-text-input')); - if (this._exampleTextInput !== null && typeof wanakana !== 'undefined') { wanakana.bind(this._exampleTextInput); } @@ -77,7 +75,8 @@ export class PopupPreviewFrame { window.addEventListener('message', this._onMessage.bind(this), false); // Setup events - const darkThemeCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#theme-dark-checkbox')); + /** @type {HTMLInputElement} */ + const darkThemeCheckbox = querySelectorNotNull(document, '#theme-dark-checkbox'); darkThemeCheckbox.addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false); this._exampleText.addEventListener('click', this._onExampleTextClick.bind(this), false); this._exampleTextInput.addEventListener('blur', this._onExampleTextInputBlur.bind(this), false); diff --git a/ext/js/pages/settings/popup-window-controller.js b/ext/js/pages/settings/popup-window-controller.js index e1a5456b..0d56dc58 100644 --- a/ext/js/pages/settings/popup-window-controller.js +++ b/ext/js/pages/settings/popup-window-controller.js @@ -16,12 +16,14 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class PopupWindowController { /** */ prepare() { - const testLink = /** @type {HTMLElement} */ (document.querySelector('#test-window-open-link')); + /** @type {HTMLElement} */ + const testLink = querySelectorNotNull(document, '#test-window-open-link'); testLink.addEventListener('click', this._onTestWindowOpenLinkClick.bind(this), false); } 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); } diff --git a/ext/js/pages/settings/profile-controller.js b/ext/js/pages/settings/profile-controller.js index c82223b8..6e0710a8 100644 --- a/ext/js/pages/settings/profile-controller.js +++ b/ext/js/pages/settings/profile-controller.js @@ -17,6 +17,7 @@ */ import {clone, EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; import {ProfileConditionsUI} from './profile-conditions-ui.js'; @@ -34,24 +35,24 @@ export class ProfileController { this._profileConditionsUI = new ProfileConditionsUI(settingsController); /** @type {?number} */ this._profileConditionsIndex = null; - /** @type {?HTMLSelectElement} */ - this._profileActiveSelect = null; - /** @type {?HTMLSelectElement} */ - this._profileTargetSelect = null; - /** @type {?HTMLSelectElement} */ - this._profileCopySourceSelect = null; - /** @type {?HTMLElement} */ - this._removeProfileNameElement = null; - /** @type {?HTMLButtonElement} */ - this._profileAddButton = null; - /** @type {?HTMLButtonElement} */ - this._profileRemoveConfirmButton = null; - /** @type {?HTMLButtonElement} */ - this._profileCopyConfirmButton = null; - /** @type {?HTMLElement} */ - this._profileEntryListContainer = null; - /** @type {?HTMLElement} */ - this._profileConditionsProfileName = null; + /** @type {HTMLSelectElement} */ + this._profileActiveSelect = querySelectorNotNull(document, '#profile-active-select'); + /** @type {HTMLSelectElement} */ + this._profileTargetSelect = querySelectorNotNull(document, '#profile-target-select'); + /** @type {HTMLSelectElement} */ + this._profileCopySourceSelect = querySelectorNotNull(document, '#profile-copy-source-select'); + /** @type {HTMLElement} */ + this._removeProfileNameElement = querySelectorNotNull(document, '#profile-remove-name'); + /** @type {HTMLButtonElement} */ + this._profileAddButton = querySelectorNotNull(document, '#profile-add-button'); + /** @type {HTMLButtonElement} */ + this._profileRemoveConfirmButton = querySelectorNotNull(document, '#profile-remove-confirm-button'); + /** @type {HTMLButtonElement} */ + this._profileCopyConfirmButton = querySelectorNotNull(document, '#profile-copy-confirm-button'); + /** @type {HTMLElement} */ + this._profileEntryListContainer = querySelectorNotNull(document, '#profile-entry-list'); + /** @type {HTMLElement} */ + this._profileConditionsProfileName = querySelectorNotNull(document, '#profile-conditions-profile-name'); /** @type {?import('./modal.js').Modal} */ this._profileRemoveModal = null; /** @type {?import('./modal.js').Modal} */ @@ -83,15 +84,6 @@ export class ProfileController { const {platform: {os}} = await yomitan.api.getEnvironmentInfo(); this._profileConditionsUI.os = os; - this._profileActiveSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-active-select')); - this._profileTargetSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-target-select')); - this._profileCopySourceSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-copy-source-select')); - this._removeProfileNameElement = /** @type {HTMLElement} */ (document.querySelector('#profile-remove-name')); - this._profileAddButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-add-button')); - this._profileRemoveConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-remove-confirm-button')); - this._profileCopyConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-copy-confirm-button')); - this._profileEntryListContainer = /** @type {HTMLElement} */ (document.querySelector('#profile-entry-list')); - this._profileConditionsProfileName = /** @type {HTMLElement} */ (document.querySelector('#profile-conditions-profile-name')); this._profileRemoveModal = this._modalController.getModal('profile-remove'); this._profileCopyModal = this._modalController.getModal('profile-copy'); this._profileConditionsModal = this._modalController.getModal('profile-conditions'); @@ -662,15 +654,15 @@ class ProfileEntry { /** @type {number} */ this._index = index; /** @type {HTMLInputElement} */ - this._isDefaultRadio = /** @type {HTMLInputElement} */ (node.querySelector('.profile-entry-is-default-radio')); + this._isDefaultRadio = querySelectorNotNull(node, '.profile-entry-is-default-radio'); /** @type {HTMLInputElement} */ - this._nameInput = /** @type {HTMLInputElement} */ (node.querySelector('.profile-entry-name-input')); + this._nameInput = querySelectorNotNull(node, '.profile-entry-name-input'); /** @type {HTMLElement} */ - this._countLink = /** @type {HTMLElement} */ (node.querySelector('.profile-entry-condition-count-link')); + this._countLink = querySelectorNotNull(node, '.profile-entry-condition-count-link'); /** @type {HTMLElement} */ - this._countText = /** @type {HTMLElement} */ (node.querySelector('.profile-entry-condition-count')); + this._countText = querySelectorNotNull(node, '.profile-entry-condition-count'); /** @type {HTMLButtonElement} */ - this._menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.profile-entry-menu-button')); + this._menuButton = querySelectorNotNull(node, '.profile-entry-menu-button'); /** @type {EventListenerCollection} */ this._eventListeners = new EventListenerCollection(); } diff --git a/ext/js/pages/settings/scan-inputs-controller.js b/ext/js/pages/settings/scan-inputs-controller.js index 53423bdc..eb526863 100644 --- a/ext/js/pages/settings/scan-inputs-controller.js +++ b/ext/js/pages/settings/scan-inputs-controller.js @@ -18,6 +18,7 @@ import {EventListenerCollection} from '../../core.js'; import {DocumentUtil} from '../../dom/document-util.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js'; @@ -30,10 +31,10 @@ export class ScanInputsController { this._settingsController = settingsController; /** @type {?import('environment').OperatingSystem} */ this._os = null; - /** @type {?HTMLElement} */ - this._container = null; - /** @type {?HTMLButtonElement} */ - this._addButton = null; + /** @type {HTMLElement} */ + this._container = querySelectorNotNull(document, '#scan-input-list'); + /** @type {HTMLButtonElement} */ + this._addButton = querySelectorNotNull(document, '#scan-input-add'); /** @type {?NodeListOf<HTMLElement>} */ this._scanningInputCountNodes = null; /** @type {ScanInputField[]} */ @@ -45,8 +46,6 @@ export class ScanInputsController { const {platform: {os}} = await yomitan.api.getEnvironmentInfo(); this._os = os; - this._container = /** @type {HTMLElement} */ (document.querySelector('#scan-input-list')); - this._addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#scan-input-add')); this._scanningInputCountNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.scanning-input-count')); this._addButton.addEventListener('click', this._onAddButtonClick.bind(this), false); @@ -157,7 +156,8 @@ export class ScanInputsController { // Scroll to bottom const button = /** @type {HTMLElement} */ (e.currentTarget); const modalContainer = /** @type {HTMLElement} */ (button.closest('.modal')); - const scrollContainer = /** @type {HTMLElement} */ (modalContainer.querySelector('.modal-body')); + /** @type {HTMLElement} */ + const scrollContainer = querySelectorNotNull(modalContainer, '.modal-body'); scrollContainer.scrollTop = scrollContainer.scrollHeight; } @@ -265,12 +265,16 @@ class ScanInputField { const {include, exclude, options: {showAdvanced}} = scanningInput; const node = /** @type {HTMLElement} */ (this._parent.instantiateTemplate('scan-input')); - const includeInputNode = /** @type {HTMLInputElement} */ (node.querySelector('.scan-input-field[data-property=include]')); - const includeMouseButton = /** @type {HTMLButtonElement} */ (node.querySelector('.mouse-button[data-property=include]')); - const excludeInputNode = /** @type {HTMLInputElement} */ (node.querySelector('.scan-input-field[data-property=exclude]')); - const excludeMouseButton = /** @type {HTMLButtonElement} */ (node.querySelector('.mouse-button[data-property=exclude]')); - const removeButton = /** @type {HTMLButtonElement} */ (node.querySelector('.scan-input-remove')); - const menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.scanning-input-menu-button')); + /** @type {HTMLInputElement} */ + const includeInputNode = querySelectorNotNull(node, '.scan-input-field[data-property=include]'); + /** @type {HTMLButtonElement} */ + const includeMouseButton = querySelectorNotNull(node, '.mouse-button[data-property=include]'); + /** @type {HTMLInputElement} */ + const excludeInputNode = querySelectorNotNull(node, '.scan-input-field[data-property=exclude]'); + /** @type {HTMLButtonElement} */ + const excludeMouseButton = querySelectorNotNull(node, '.mouse-button[data-property=exclude]'); + /** @type {HTMLButtonElement} */ + const menuButton = querySelectorNotNull(node, '.scanning-input-menu-button'); node.dataset.showAdvanced = `${showAdvanced}`; @@ -285,13 +289,8 @@ class ScanInputField { this._eventListeners.on(this._includeInputField, 'change', this._onIncludeValueChange.bind(this)); this._eventListeners.on(this._excludeInputField, 'change', this._onExcludeValueChange.bind(this)); - if (removeButton !== null) { - this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this)); - } - if (menuButton !== null) { - this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this)); - this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this)); - } + this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this)); + this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this)); this._updateDataSettingTargets(); } @@ -341,8 +340,10 @@ class ScanInputField { */ _onMenuOpen(e) { const bodyNode = e.detail.menu.bodyNode; - const showAdvanced = /** @type {?HTMLElement} */ (bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]')); - const hideAdvanced = /** @type {?HTMLElement} */ (bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]')); + /** @type {?HTMLElement} */ + const showAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]'); + /** @type {?HTMLElement} */ + const hideAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]'); const advancedVisible = (this._node !== null && this._node.dataset.showAdvanced === 'true'); if (showAdvanced !== null) { showAdvanced.hidden = advancedVisible; diff --git a/ext/js/pages/settings/scan-inputs-simple-controller.js b/ext/js/pages/settings/scan-inputs-simple-controller.js index 8d52af61..ddb68825 100644 --- a/ext/js/pages/settings/scan-inputs-simple-controller.js +++ b/ext/js/pages/settings/scan-inputs-simple-controller.js @@ -16,6 +16,7 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {HotkeyUtil} from '../../input/hotkey-util.js'; import {yomitan} from '../../yomitan.js'; import {ScanInputsController} from './scan-inputs-controller.js'; @@ -27,10 +28,10 @@ export class ScanInputsSimpleController { constructor(settingsController) { /** @type {import('./settings-controller.js').SettingsController} */ this._settingsController = settingsController; - /** @type {?HTMLInputElement} */ - this._middleMouseButtonScan = null; - /** @type {?HTMLSelectElement} */ - this._mainScanModifierKeyInput = null; + /** @type {HTMLInputElement} */ + this._middleMouseButtonScan = querySelectorNotNull(document, '#middle-mouse-button-scan'); + /** @type {HTMLSelectElement} */ + this._mainScanModifierKeyInput = querySelectorNotNull(document, '#main-scan-modifier-key'); /** @type {boolean} */ this._mainScanModifierKeyInputHasOther = false; /** @type {HotkeyUtil} */ @@ -39,9 +40,6 @@ export class ScanInputsSimpleController { /** */ async prepare() { - this._middleMouseButtonScan = /** @type {HTMLInputElement} */ (document.querySelector('#middle-mouse-button-scan')); - this._mainScanModifierKeyInput = /** @type {HTMLSelectElement} */ (document.querySelector('#main-scan-modifier-key')); - const {platform: {os}} = await yomitan.api.getEnvironmentInfo(); this._hotkeyUtil.os = os; diff --git a/ext/js/pages/settings/secondary-search-dictionary-controller.js b/ext/js/pages/settings/secondary-search-dictionary-controller.js index b20bd475..f24f6ea3 100644 --- a/ext/js/pages/settings/secondary-search-dictionary-controller.js +++ b/ext/js/pages/settings/secondary-search-dictionary-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class SecondarySearchDictionaryController { @@ -32,14 +33,12 @@ export class SecondarySearchDictionaryController { this._dictionaryInfoMap = new Map(); /** @type {EventListenerCollection} */ this._eventListeners = new EventListenerCollection(); - /** @type {?HTMLElement} */ - this._container = null; + /** @type {HTMLElement} */ + this._container = querySelectorNotNull(document, '#secondary-search-dictionary-list'); } /** */ async prepare() { - this._container = /** @type {HTMLElement} */ (document.querySelector('#secondary-search-dictionary-list')); - await this._onDatabaseUpdated(); yomitan.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); @@ -83,13 +82,16 @@ export class SecondarySearchDictionaryController { const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('secondary-search-dictionary')); fragment.appendChild(node); - const nameNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-title')); + /** @type {HTMLElement} */ + const nameNode = querySelectorNotNull(node, '.dictionary-title'); nameNode.textContent = name; - const versionNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-version')); + /** @type {HTMLElement} */ + const versionNode = querySelectorNotNull(node, '.dictionary-version'); versionNode.textContent = `rev.${dictionaryInfo.revision}`; - const toggle = /** @type {HTMLElement} */ (node.querySelector('.dictionary-allow-secondary-searches')); + /** @type {HTMLElement} */ + const toggle = querySelectorNotNull(node, '.dictionary-allow-secondary-searches'); toggle.dataset.setting = `dictionaries[${i}].allowSecondarySearches`; this._eventListeners.addEventListener(toggle, 'settingChanged', this._onEnabledChanged.bind(this, node), false); } diff --git a/ext/js/pages/settings/sentence-termination-characters-controller.js b/ext/js/pages/settings/sentence-termination-characters-controller.js index 80c4cdbe..7fd90b28 100644 --- a/ext/js/pages/settings/sentence-termination-characters-controller.js +++ b/ext/js/pages/settings/sentence-termination-characters-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; export class SentenceTerminationCharactersController { /** @@ -27,16 +28,16 @@ export class SentenceTerminationCharactersController { this._settingsController = settingsController; /** @type {SentenceTerminationCharacterEntry[]} */ this._entries = []; - /** @type {?HTMLButtonElement} */ - this._addButton = null; - /** @type {?HTMLButtonElement} */ - this._resetButton = null; - /** @type {?HTMLElement} */ - this._listTable = null; - /** @type {?HTMLElement} */ - this._listContainer = null; - /** @type {?HTMLElement} */ - this._emptyIndicator = null; + /** @type {HTMLButtonElement} */ + this._addButton = querySelectorNotNull(document, '#sentence-termination-character-list-add'); + /** @type {HTMLButtonElement} */ + this._resetButton = querySelectorNotNull(document, '#sentence-termination-character-list-reset'); + /** @type {HTMLElement} */ + this._listTable = querySelectorNotNull(document, '#sentence-termination-character-list-table'); + /** @type {HTMLElement} */ + this._listContainer = querySelectorNotNull(document, '#sentence-termination-character-list'); + /** @type {HTMLElement} */ + this._emptyIndicator = querySelectorNotNull(document, '#sentence-termination-character-list-empty'); } /** @type {import('./settings-controller.js').SettingsController} */ @@ -46,12 +47,6 @@ export class SentenceTerminationCharactersController { /** */ async prepare() { - this._addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#sentence-termination-character-list-add')); - this._resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#sentence-termination-character-list-reset')); - this._listTable = /** @type {HTMLElement} */ (document.querySelector('#sentence-termination-character-list-table')); - this._listContainer = /** @type {HTMLElement} */ (document.querySelector('#sentence-termination-character-list')); - this._emptyIndicator = /** @type {HTMLElement} */ (document.querySelector('#sentence-termination-character-list-empty')); - this._addButton.addEventListener('click', this._onAddClick.bind(this)); this._resetButton.addEventListener('click', this._onResetClick.bind(this)); this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); @@ -209,13 +204,20 @@ class SentenceTerminationCharacterEntry { const {enabled, character1, character2, includeCharacterAtStart, includeCharacterAtEnd} = this._data; const node = this._node; - const enabledToggle = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-enabled')); - const typeSelect = /** @type {HTMLSelectElement} */ (node.querySelector('.sentence-termination-character-type')); - const character1Input = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-input1')); - const character2Input = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-input2')); - const includeAtStartCheckbox = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-include-at-start')); - const includeAtEndheckbox = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-include-at-end')); - const menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.sentence-termination-character-entry-button')); + /** @type {HTMLInputElement} */ + const enabledToggle = querySelectorNotNull(node, '.sentence-termination-character-enabled'); + /** @type {HTMLSelectElement} */ + const typeSelect = querySelectorNotNull(node, '.sentence-termination-character-type'); + /** @type {HTMLInputElement} */ + const character1Input = querySelectorNotNull(node, '.sentence-termination-character-input1'); + /** @type {HTMLInputElement} */ + const character2Input = querySelectorNotNull(node, '.sentence-termination-character-input2'); + /** @type {HTMLInputElement} */ + const includeAtStartCheckbox = querySelectorNotNull(node, '.sentence-termination-character-include-at-start'); + /** @type {HTMLInputElement} */ + const includeAtEndheckbox = querySelectorNotNull(node, '.sentence-termination-character-include-at-end'); + /** @type {HTMLButtonElement} */ + const menuButton = querySelectorNotNull(node, '.sentence-termination-character-entry-button'); this._character1Input = character1Input; this._character2Input = character2Input; diff --git a/ext/js/pages/settings/settings-display-controller.js b/ext/js/pages/settings/settings-display-controller.js index 16e6cfae..e575a1cb 100644 --- a/ext/js/pages/settings/settings-display-controller.js +++ b/ext/js/pages/settings/settings-display-controller.js @@ -18,6 +18,7 @@ import {DocumentUtil} from '../../dom/document-util.js'; import {PopupMenu} from '../../dom/popup-menu.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {SelectorObserver} from '../../dom/selector-observer.js'; export class SettingsDisplayController { @@ -30,10 +31,10 @@ export class SettingsDisplayController { this._settingsController = settingsController; /** @type {import('./modal-controller.js').ModalController} */ this._modalController = modalController; - /** @type {?HTMLElement} */ - this._contentNode = null; - /** @type {?HTMLElement} */ - this._menuContainer = null; + /** @type {HTMLElement} */ + this._contentNode = querySelectorNotNull(document, '.content'); + /** @type {HTMLElement} */ + this._menuContainer = querySelectorNotNull(document, '#popup-menus'); /** @type {(event: MouseEvent) => void} */ this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this); /** @type {(event: MouseEvent) => void} */ @@ -42,9 +43,6 @@ export class SettingsDisplayController { /** */ prepare() { - this._contentNode = /** @type {HTMLElement} */ (document.querySelector('.content')); - this._menuContainer = /** @type {HTMLElement} */ (document.querySelector('#popup-menus')); - const onFabButtonClick = this._onFabButtonClick.bind(this); for (const fabButton of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.fab-button'))) { fabButton.addEventListener('click', onFabButtonClick, false); @@ -156,7 +154,8 @@ export class SettingsDisplayController { const container = this._getMoreContainer(node); if (container === null) { return; } - const more = /** @type {?HTMLElement} */ (container.querySelector('.more')); + /** @type {?HTMLElement} */ + const more = container.querySelector('.more'); if (more === null) { return; } const moreVisible = more.hidden; diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js index 1b9723e8..3f0dac3f 100644 --- a/ext/js/pages/settings/settings-main.js +++ b/ext/js/pages/settings/settings-main.js @@ -18,6 +18,7 @@ import {log} from '../../core.js'; import {DocumentFocusController} from '../../dom/document-focus-controller.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; import {ExtensionContentController} from '../common/extension-content-controller.js'; import {AnkiController} from './anki-controller.js'; @@ -65,7 +66,9 @@ async function setupGenericSettingsController(genericSettingController) { const extensionContentController = new ExtensionContentController(); extensionContentController.prepare(); - const statusFooter = new StatusFooter(/** @type {HTMLElement} */ (document.querySelector('.status-footer-container'))); + /** @type {HTMLElement} */ + const statusFooterElement = querySelectorNotNull(document, '.status-footer-container'); + const statusFooter = new StatusFooter(statusFooterElement); statusFooter.prepare(); /** @type {?number} */ diff --git a/ext/js/pages/settings/sort-frequency-dictionary-controller.js b/ext/js/pages/settings/sort-frequency-dictionary-controller.js index e7759d95..2c56f023 100644 --- a/ext/js/pages/settings/sort-frequency-dictionary-controller.js +++ b/ext/js/pages/settings/sort-frequency-dictionary-controller.js @@ -16,6 +16,7 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class SortFrequencyDictionaryController { @@ -25,25 +26,20 @@ export class SortFrequencyDictionaryController { constructor(settingsController) { /** @type {import('./settings-controller.js').SettingsController} */ this._settingsController = settingsController; - /** @type {?HTMLSelectElement} */ - this._sortFrequencyDictionarySelect = null; - /** @type {?HTMLSelectElement} */ - this._sortFrequencyDictionaryOrderSelect = null; - /** @type {?HTMLButtonElement} */ - this._sortFrequencyDictionaryOrderAutoButton = null; - /** @type {?HTMLElement} */ - this._sortFrequencyDictionaryOrderContainerNode = null; + /** @type {HTMLSelectElement} */ + this._sortFrequencyDictionarySelect = querySelectorNotNull(document, '#sort-frequency-dictionary'); + /** @type {HTMLSelectElement} */ + this._sortFrequencyDictionaryOrderSelect = querySelectorNotNull(document, '#sort-frequency-dictionary-order'); + /** @type {HTMLButtonElement} */ + this._sortFrequencyDictionaryOrderAutoButton = querySelectorNotNull(document, '#sort-frequency-dictionary-order-auto'); + /** @type {HTMLElement} */ + this._sortFrequencyDictionaryOrderContainerNode = querySelectorNotNull(document, '#sort-frequency-dictionary-order-container'); /** @type {?import('core').TokenObject} */ this._getDictionaryInfoToken = null; } /** */ async prepare() { - this._sortFrequencyDictionarySelect = /** @type {HTMLSelectElement} */ (document.querySelector('#sort-frequency-dictionary')); - this._sortFrequencyDictionaryOrderSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#sort-frequency-dictionary-order')); - this._sortFrequencyDictionaryOrderAutoButton = /** @type {HTMLButtonElement} */ (document.querySelector('#sort-frequency-dictionary-order-auto')); - this._sortFrequencyDictionaryOrderContainerNode = /** @type {HTMLElement} */ (document.querySelector('#sort-frequency-dictionary-order-container')); - await this._onDatabaseUpdated(); yomitan.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); diff --git a/ext/js/pages/settings/status-footer.js b/ext/js/pages/settings/status-footer.js index a8f1a8c4..4830dbd5 100644 --- a/ext/js/pages/settings/status-footer.js +++ b/ext/js/pages/settings/status-footer.js @@ -17,6 +17,7 @@ */ import {PanelElement} from '../../dom/panel-element.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; export class StatusFooter extends PanelElement { /** @@ -28,12 +29,13 @@ export class StatusFooter extends PanelElement { closingAnimationDuration: 375 // Milliseconds; includes buffer }); /** @type {HTMLElement} */ - this._body = /** @type {HTMLElement} */ (node.querySelector('.status-footer')); + this._body = querySelectorNotNull(node, '.status-footer'); } /** */ prepare() { - const closeButton = /** @type {HTMLElement} */ (this._body.querySelector('.status-footer-header-close')); + /** @type {HTMLElement} */ + const closeButton = querySelectorNotNull(this._body, '.status-footer-header-close'); this.on('closeCompleted', this._onCloseCompleted.bind(this)); closeButton.addEventListener('click', this._onCloseClick.bind(this), false); } diff --git a/ext/js/pages/settings/storage-controller.js b/ext/js/pages/settings/storage-controller.js index 7f323b48..16e03786 100644 --- a/ext/js/pages/settings/storage-controller.js +++ b/ext/js/pages/settings/storage-controller.js @@ -16,6 +16,7 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import {querySelectorNotNull} from '../../dom/query-selector.js'; import {yomitan} from '../../yomitan.js'; export class StorageController { @@ -53,7 +54,8 @@ export class StorageController { this._storageUseInfiniteNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-infinite')); this._storageUseValidNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-valid')); this._storageUseInvalidNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-invalid')); - const storageRefreshButton = /** @type {HTMLButtonElement} */ (document.querySelector('#storage-refresh')); + /** @type {HTMLButtonElement} */ + const storageRefreshButton = querySelectorNotNull(document, '#storage-refresh'); storageRefreshButton.addEventListener('click', this._onStorageRefreshButtonClick.bind(this), false); yomitan.on('storageChanged', this._onStorageChanged.bind(this)); diff --git a/ext/js/pages/settings/translation-text-replacements-controller.js b/ext/js/pages/settings/translation-text-replacements-controller.js index 050db8d1..a54c3dd9 100644 --- a/ext/js/pages/settings/translation-text-replacements-controller.js +++ b/ext/js/pages/settings/translation-text-replacements-controller.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../../core.js'; +import {querySelectorNotNull} from '../../dom/query-selector.js'; export class TranslationTextReplacementsController { /** @@ -25,16 +26,16 @@ export class TranslationTextReplacementsController { constructor(settingsController) { /** @type {import('./settings-controller.js').SettingsController} */ this._settingsController = settingsController; - /** @type {?HTMLElement} */ - this._entryContainer = null; + /** @type {HTMLElement} */ + this._entryContainer = querySelectorNotNull(document, '#translation-text-replacement-list'); /** @type {TranslationTextReplacementsEntry[]} */ this._entries = []; } /** */ async prepare() { - this._entryContainer = /** @type {HTMLElement} */ (document.querySelector('#translation-text-replacement-list')); - const addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#translation-text-replacement-add')); + /** @type {HTMLButtonElement} */ + const addButton = querySelectorNotNull(document, '#translation-text-replacement-add'); addButton.addEventListener('click', this._onAdd.bind(this), false); this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); @@ -179,12 +180,18 @@ class TranslationTextReplacementsEntry { /** */ prepare() { - const patternInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-pattern')); - const replacementInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-replacement')); - const ignoreCaseToggle = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-pattern-ignore-case')); - const menuButton = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-button')); - const testInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-test-input')); - const testOutput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-test-output')); + /** @type {HTMLInputElement} */ + const patternInput = querySelectorNotNull(this._node, '.translation-text-replacement-pattern'); + /** @type {HTMLInputElement} */ + const replacementInput = querySelectorNotNull(this._node, '.translation-text-replacement-replacement'); + /** @type {HTMLInputElement} */ + const ignoreCaseToggle = querySelectorNotNull(this._node, '.translation-text-replacement-pattern-ignore-case'); + /** @type {HTMLInputElement} */ + const menuButton = querySelectorNotNull(this._node, '.translation-text-replacement-button'); + /** @type {HTMLInputElement} */ + const testInput = querySelectorNotNull(this._node, '.translation-text-replacement-test-input'); + /** @type {HTMLInputElement} */ + const testOutput = querySelectorNotNull(this._node, '.translation-text-replacement-test-output'); this._patternInput = patternInput; this._replacementInput = replacementInput; @@ -221,8 +228,12 @@ class TranslationTextReplacementsEntry { _onMenuOpen(e) { const bodyNode = e.detail.menu.bodyNode; const testVisible = this._isTestVisible(); - /** @type {HTMLElement} */ (bodyNode.querySelector('[data-menu-action=showTest]')).hidden = testVisible; - /** @type {HTMLElement} */ (bodyNode.querySelector('[data-menu-action=hideTest]')).hidden = !testVisible; + /** @type {HTMLElement} */ + const element1 = querySelectorNotNull(bodyNode, '[data-menu-action=showTest]'); + /** @type {HTMLElement} */ + const element2 = querySelectorNotNull(bodyNode, '[data-menu-action=hideTest]'); + element1.hidden = testVisible; + element2.hidden = !testVisible; } /** diff --git a/ext/js/pages/welcome-main.js b/ext/js/pages/welcome-main.js index c034aae1..d208e996 100644 --- a/ext/js/pages/welcome-main.js +++ b/ext/js/pages/welcome-main.js @@ -18,6 +18,7 @@ import {log} from '../core.js'; import {DocumentFocusController} from '../dom/document-focus-controller.js'; +import {querySelectorNotNull} from '../dom/query-selector.js'; import {yomitan} from '../yomitan.js'; import {ExtensionContentController} from './common/extension-content-controller.js'; import {DictionaryController} from './settings/dictionary-controller.js'; @@ -55,7 +56,9 @@ async function setupGenericSettingsController(genericSettingController) { const extensionContentController = new ExtensionContentController(); extensionContentController.prepare(); - const statusFooter = new StatusFooter(/** @type {HTMLElement} */ (document.querySelector('.status-footer-container'))); + /** @type {HTMLElement} */ + const statusFooterElement = querySelectorNotNull(document, '.status-footer-container'); + const statusFooter = new StatusFooter(statusFooterElement); statusFooter.prepare(); await yomitan.prepare(); |