unicode-input-toolconverter 0.2.0 → 0.2.3

package/browser_action/unicodecharref.js

@@ -1,33 +1,68 @@
 /* eslint-disable camelcase -- Temporary */
 // See https://unicode.org/Public/UNIDATA/ for data use
 
-import {$, $$, jml} from '../vendor/jamilih/dist/jml-es.js';
+import {$$, jml} from 'jamilih/dist/jml.js';
 // Todo: Filed the following to avoid both sync and callbacks:
 //  https://github.com/101arrowz/fflate/issues/70
-import {strFromU8} from '../vendor/fflate/esm/browser.js'; // unzipSync,
+import {strFromU8} from 'fflate'; // unzipSync,
+import camelCase from 'camelcase';
+
 import {
   getUnicodeDefaults, getPrefDefaults
 } from './preferences/prefDefaults.js';
 import {chartBuild, lastStartCharCode} from './chartBuild.js';
 
-import camelCase from '../vendor/camelcase/index.js';
 import {insertIntoOrOverExisting} from './utils/TextUtils.js';
 import {joinChunks} from './utils/TypedArrayUtils.js';
 import {
   placeItem, removeViewChildren, createHTMLElement,
-  showProgress
+  showProgress, $, $s, $i, $o, $t, $tabbox, $tabpanel
 } from './utils/DOMUtils.js';
 import getScriptInfoForCodePoint from './unicode/getScriptInfoForCodePoint.js';
 import charrefunicodeDb, {UnihanDatabase} from './unicode/charrefunicodeDb.js';
 import {getCJKTypeFromHexString} from './unicode/unihan.js';
 import unihanDbPopulate from './unicode/unihanDbPopulate.js';
+import unihanFields from './unicode/unihanFields.js';
 // import parseUnihanFromTextFileStrings from
 //   './unicode/parseUnihanFromTextFileStrings.js';
 import {registerDTD} from './entityBehaviors.js';
 import {entities, numericCharacterReferences} from './entities.js';
 import {findBridgeForTargetID} from './charrefConverters.js';
 
-let _, charrefunicodeConverter, getPref, setPref;
+/* eslint-disable jsdoc/reject-any-type -- Arbitrary */
+/**
+ * @typedef {any} AnyValue
+ */
+/* eslint-enable jsdoc/reject-any-type -- Arbitrary */
+
+/**
+ * @typedef {number} Integer
+ */
+
+/** @type {import('intl-dom').I18NCallback<string>} */
+let _;
+
+/**
+ * @type {InstanceType<ReturnType<
+ *   typeof import('./unicode/UnicodeConverter.js').getUnicodeConverter
+ * >>}
+ */
+let charrefunicodeConverter;
+
+/** @type {ReturnType<typeof getUnicodeDefaults>['getPref']} */
+let getPref;
+/** @type {ReturnType<typeof getUnicodeDefaults>['setPref']} */
+let setPref;
+
+/**
+ * @param {{
+ *   _: import('intl-dom').I18NCallback<string>
+ *   charrefunicodeConverter: InstanceType<ReturnType<
+ *     typeof import('./unicode/UnicodeConverter.js').getUnicodeConverter
+ *   >>
+ * }} cfg
+ * @returns {void}
+ */
 export const shareVars = ({_: l10n, charrefunicodeConverter: _uc}) => {
   _ = l10n;
   charrefunicodeConverter = _uc;
@@ -45,7 +80,9 @@ async function getDownloadResults () {
       /* istanbul ignore next -- For GitHub Pages only */
       ? '/unicode-input-toolconverter/download/unihan/unihan.json'
       : '/download/unihan/unihan.json',
-    progressElement: $('#progress_element'),
+    progressElement: /** @type {HTMLProgressElement} */ (
+      $('#progress_element')
+    ),
     progress (percentComplete) {
       return `${_('download_progress')} ${
         percentComplete.toFixed(2)
@@ -71,6 +108,23 @@ async function getDownloadResults () {
 }
 
 const unicodecharref = {
+  /** @type {string[]} */
+  origents: [],
+
+  /** @type {number[]} */
+  origcharrefs: [],
+
+  /** @type {string[]} */
+  orignewents: [],
+
+  /** @type {(string|number)[]} */
+  orignewcharrefs: [],
+
+  /** @type {UnihanDatabase|null} */
+  unihanDatabase: null,
+
+  unihanDb_exists: false,
+
   async downloadUnihan () {
     $('#DownloadButtonBox').hidden = true;
     $('#DownloadProgressBox').hidden = false;
@@ -261,28 +315,32 @@ const unicodecharref = {
     }
   },
   */
+  /**
+   * @param {...string} els
+   */
   setupBoolChecked (...els) {
     els.forEach(async (el) => {
-      $('#' + el).checked = await getPref(el);
+      /** @type {HTMLInputElement} */
+      ($('#' + el)).checked = /** @type {boolean} */ (await getPref(el));
     });
   },
   /**
-  * @param {PlainObject} cfg
-  * @param {boolean} [cfg.customProtocol]
-  * @param {boolean} [cfg.options]
-  * @param {string} [cfg.convert]
-  * @param {string} [cfg.targetid]
-  * @param {string} [cfg.selection]
-  * @returns {Promise<void>}
-  */
+   * @param {object} cfg
+   * @param {string|null} [cfg.customProtocol]
+   * @param {string|null} [cfg.options]
+   * @param {string|null} [cfg.convert]
+   * @param {string|null} [cfg.targetid]
+   * @param {string} [cfg.selection]
+   * @returns {Promise<void>}
+   */
   async initialize (cfg) {
     // this.refreshToolbarDropdown(); // redundant?
 
     this.unihanDb_exists = false;
     try {
-      const namespace = 'unicode-input-toolconverter-Unihan';
+      // const namespace = 'unicode-input-toolconverter-Unihan';
       this.unihanDatabase = new UnihanDatabase({
-        name: namespace,
+        // name: namespace,
         // We don't peg to package major version as database version may vary
         //  independently
         version: 1
@@ -298,7 +356,7 @@ const unicodecharref = {
       $('#UnihanInstalled').hidden = false;
     } catch (e) {
       /* istanbul ignore if -- Only expected for transactions */
-      if (!e.message.includes('ransaction')) {
+      if (!(/** @type {Error} */ (e)).message.includes('ransaction')) {
         // eslint-disable-next-line no-console -- Debug
         console.error(e);
       }
@@ -308,10 +366,11 @@ const unicodecharref = {
 
     // document.documentElement.maxWidth =
     //  window.screen.availWidth-(window.screen.availWidth*1/100);
-    $('#unicodeTabBox').style.maxWidth = window.screen.availWidth -
-      (window.screen.availWidth * 3 / 100);
-    $('#unicodeTabBox > .tabs').style.maxWidth =
-      window.screen.availWidth - (window.screen.availWidth * 3 / 100);
+    $('#unicodeTabBox').style.maxWidth = String(window.screen.availWidth -
+      (window.screen.availWidth * 3 / 100));
+    $('#unicodeTabBox > .tabs').style.maxWidth = String(
+      window.screen.availWidth - (window.screen.availWidth * 3 / 100)
+    );
     /*
     $('#unicodeTabBox').style.maxHeight =
       window.screen.availHeight-(window.screen.availHeight*5/100);
@@ -346,15 +405,15 @@ const unicodecharref = {
       DTDtxtbxval
       // outerh, outerw
     ] = await Promise.all([
-      getPref('lang'),
-      getPref('font'),
+      /** @type {Promise<string>} */ (getPref('lang')),
+      /** @type {Promise<string>} */ (getPref('font')),
       getPref('initialTab'),
       getPref('multiline'),
       getPref('cssWhitespace'),
       getPref('tblrowsset'),
       getPref('tblcolsset'),
       getPref('ampspace'),
-      getPref('DTDtextbox')
+      /** @type {Promise<string>} */ (getPref('DTDtextbox'))
       // getPref('outerHeight'),
       // getPref('outerWidth')
     ]);
@@ -374,7 +433,7 @@ const unicodecharref = {
     }).map(([key]) => key));
     switch (cssWhitespace) {
     case ' ':
-      $('#CSSWhitespace').selectedIndex = 0;
+      $s('#CSSWhitespace').selectedIndex = 0;
       break;
     /*
     // Carriage returns shouldn't survive
@@ -386,13 +445,13 @@ const unicodecharref = {
       break;
     */
     case '\n':
-      $('#CSSWhitespace').selectedIndex = 1;
+      $s('#CSSWhitespace').selectedIndex = 1;
       break;
     case '\t':
-      $('#CSSWhitespace').selectedIndex = 2;
+      $s('#CSSWhitespace').selectedIndex = 2;
       break;
     case '\f':
-      $('#CSSWhitespace').selectedIndex = 3;
+      $s('#CSSWhitespace').selectedIndex = 3;
       break;
     /* istanbul ignore next -- Unexpected value */
     default:
@@ -413,31 +472,33 @@ const unicodecharref = {
     // Set the size per the prefs (don't increase or decrease the value)
     await this.resizecells();
 
-    $('#rowsset').value = tblrowsset;
-    $('#colsset').value = tblcolsset;
+    /** @type {HTMLInputElement} */
+    ($('#rowsset')).value = String(tblrowsset);
+    /** @type {HTMLInputElement} */
+    ($('#colsset')).value = String(tblcolsset);
 
     // Save copies in case decide to reset later (i.e., not append to
     //  HTML entities, then wish to append to them again)
-    this.origents = [];
-    this.origcharrefs = [];
-    this.orignewents = [];
-    this.orignewcharrefs = [];
 
     this.origents = [...entities];
     this.origcharrefs = [...numericCharacterReferences];
     this.orignewents = [...charrefunicodeConverter.newents];
     this.orignewcharrefs = [...charrefunicodeConverter.newcharrefs];
 
-    $('#lang').value = lang;
-    $('#font').value = font;
-    $('#initialTab').value = $('#mi_' + initialTab).value;
+    $i('#lang').value = lang;
+    $i('#font').value = font;
+
+    $s('#initialTab').value = $o('#mi_' + initialTab).value;
 
-    $('#DTDtextbox').value = DTDtxtbxval;
+    /** @type {HTMLTextAreaElement} */
+    ($('#DTDtextbox')).value = DTDtxtbxval;
     await registerDTD();
 
     // These defaults are necessary for the sake of the options URL
     //  (when called from addons menu)
     let toconvert = null;
+
+    /** @type {string|null|undefined} */
     let targetid = '';
     // const targetid = 'context-launchunicode';
 
@@ -477,10 +538,10 @@ const unicodecharref = {
       toconvert = cfg.convert || '';
       ({targetid} = cfg);
       //  toconvert = charreftoconvert.replace(/\n/g, ' ');
-      $('#toconvert').value = toconvert;
+      $t('#toconvert').value = toconvert;
 
       if (ampspace) {
-        toconvert = toconvert.replaceAll(/&([^;\s]*\s)/gu, '&amp;$1');
+        toconvert = toconvert.replaceAll(/&([^;\s]*\s)/gv, '&amp;$1');
       }
 
       if (targetid) {
@@ -491,61 +552,71 @@ const unicodecharref = {
     // Detect which context menu item was selected:
     let out = ''; // converttypeid;
 
-    if (bridgeResult !== false && bridgeResult !== undefined) {
+    if (
+      // bridgeResult !== false &&
+      bridgeResult !== undefined
+    ) {
       out = bridgeResult;
     } else {
       switch (targetid) {
       case 'context-unicodechart':
         await this.disableEnts();
-        $('#startset').value = chr;
-        $('#unicodeTabBox').$selectTabForTabPanel($('#charts'));
+        $i('#startset').value = String(chr);
+        $tabbox('#unicodeTabBox').$selectTabForTabPanel($tabpanel('#charts'));
         // Fallthrough
       case 'context-launchunicode':
       case 'tools-charrefunicode':
-        out = '';
+        // out = '';
         break;
       case 'searchName':
-        $('#' + targetid).value = unicodeQueryObj.get('string');
+        $i('#' + targetid).value = String(unicodeQueryObj?.get('string'));
         $('#' + targetid).focus();
         await this.searchUnicode({
-          id: targetid, value: unicodeQueryObj.get('string')
+          id: targetid, value: String(unicodeQueryObj?.get('string'))
         }); // Assume non-CJK
         break;
       case 'searchkDefinition':
-        $('#' + targetid).value = unicodeQueryObj.get('string');
-        $('#' + targetid).focus();
+        $i('#' + targetid).value = String(unicodeQueryObj?.get('string'));
+        $i('#' + targetid).focus();
         await this.searchUnihan({
-          id: targetid, value: unicodeQueryObj.get('string')
+          id: targetid, value: String(unicodeQueryObj?.get('string'))
         });
         break;
       default:
-        out = ''; // Plain launcher with no values sent
+        // out = ''; // Plain launcher with no values sent
         // const prefstab = true;
         break;
       }
     }
-    $('#converted').value = out;
+    $t('#converted').value = out;
 
     if (!customProtocol) {
       if (cfg.options) { // options menu
-        $('#unicodeTabBox').$selectTabForTabPanel($('#prefs'));
+        $tabbox('#unicodeTabBox').$selectTabForTabPanel($tabpanel('#prefs'));
       } else if (toconvert !== null && targetid) {
         // Keyboard invocation or button
         // $('#unicodetabs').selectedIndex = 0; // Fix: set by preference
-        $('#unicodeTabBox').$selectTabForTabPanel($('#conversion'));
+        $tabbox('#unicodeTabBox').$selectTabForTabPanel(
+          $tabpanel('#conversion')
+        );
       } else if (
         targetid !== 'context-unicodechart' &&
         targetid !== 'tools-charrefunicode'
       ) {
-        $('#unicodeTabBox').$selectTabForTabPanel(
-          $('#' + initialTab)
+        $tabbox('#unicodeTabBox').$selectTabForTabPanel(
+          $tabpanel('#' + initialTab)
         );
       }
     }
 
     if (targetid !== 'searchName' && targetid !== 'searchkDefinition') {
       if (toconvert || chr) { // Seemed to become necessarily suddenly
-        await this.setCurrstartset((toconvert || chr).codePointAt() - 1);
+        await this.setCurrstartset(
+          /** @type {number} */ (
+            /** @type {string} */
+            (toconvert || chr).codePointAt(0)
+          ) - 1
+        );
       }
       await chartBuild();
     }
@@ -573,25 +644,33 @@ const unicodecharref = {
     });
     */
   },
-  async copyToClipboard (id) {
-    const text = $(id).value;
+  /**
+   * @param {string} sel
+   */
+  async copyToClipboard (sel) {
+    const text = $t(sel).value;
     await navigator.clipboard.writeText(text);
     alert(_('copiedToClipboard'));
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async setprefs (e) {
-    switch (e.target.type) {
+    // eslint-disable-next-line prefer-destructuring -- TS
+    const target = /** @type {HTMLInputElement} */ (e.target);
+    switch (target.type) {
     case 'select-one': case 'text':
       return await setPref(
-        e.target.id,
-        e.target.value
+        target.id,
+        target.value
       );
     case 'checkbox':
-      return await setPref(e.target.id, Boolean(e.target.checked));
+      return await setPref(target.id, Boolean(target.checked));
     /*
     // Should work but not in use
     case 'radio': {
       let radioid;
-      const result = e.target.id.match(/^_(\d)+-(.*)$/u);
+      const result = target.id.match(/^_(\d)+-(.*)$/u);
       if (result !== null) {
         radioid = result[2]; // Extract preference name
         return await setPref(radioid, result[1] === '1');
@@ -618,18 +697,18 @@ const unicodecharref = {
       'xmlentkeep', 'ampkeep', 'appendtohtmldtd', 'cssUnambiguous'
     ], true);
 
-    $('#ampspace').checked = false;
+    $i('#ampspace').checked = false;
     // $('#showComplexWindow').checked = false;
-    $('#showAllDetailedView').checked = true;
-    $('#showAllDetailedCJKView').checked = true;
+    $i('#showAllDetailedView').checked = true;
+    $i('#showAllDetailedCJKView').checked = true;
 
     /**
-    * @param {string} langOrFont
-    * @returns {string}
-    */
+     * @param {string} langOrFont
+     * @returns {Promise<string>}
+     */
     async function langFont (langOrFont) { // Fix: needs to get default!
-      const deflt = await getPref(langOrFont);
-      $('#' + langOrFont).value = deflt;
+      const deflt = /** @type {string} */ (await getPref(langOrFont));
+      $i('#' + langOrFont).value = deflt;
       await setPref(langOrFont, deflt);
       return deflt;
     }
@@ -656,16 +735,18 @@ const unicodecharref = {
     // Don't really need to reset since user can't currently change
     //  this (only for blank string entry)
     await setPref(
-      'startset', 'a'.codePointAt() - 1
+      'startset', /** @type {number} */ ('a'.codePointAt(0)) - 1
     );
 
-    await this.setCurrstartset(await getPref('startset'));
+    await this.setCurrstartset(
+      /** @type {number} */ (await getPref('startset'))
+    );
 
     // These get activated in chartBuild(); below
     await setPref('tblrowsset', 4);
-    $('#rowsset').value = 4;
+    $i('#rowsset').value = '4';
     await setPref('tblcolsset', 3);
-    $('#colsset').value = 3;
+    $i('#colsset').value = '3';
 
     await this.setBoolChecked([
       'entyes', 'hexyes', 'decyes', 'unicodeyes', 'buttonyes'
@@ -678,7 +759,7 @@ const unicodecharref = {
     // $('#xstyle').checked = true;
 
     await setPref('initialTab', 'charts');
-    $('#initialTab').value = $('#mi_charts').value;
+    $s('#initialTab').value = $o('#mi_charts').value;
 
     await setPref('tblfontsize', 13);
     await this.resizecells();
@@ -701,20 +782,27 @@ const unicodecharref = {
     els = typeof els === 'string' ? [els] : els;
     return await Promise.all(els.map(async (el) => {
       await setPref(el, value);
-      $('#' + el).checked = value;
+      $i('#' + el).checked = value;
     }));
   },
 
   // End UI bridges
 
-  async setImagePref (ev) {
-    await this.setprefs(ev);
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
+  async setImagePref (e) {
+    await this.setprefs(e);
     if ($('#unicodeImg').firstChild) {
-      $('#unicodeImg').firstChild.remove();
+      $('#unicodeImg').firstChild?.remove();
     }
     return false;
   },
 
+  /**
+   * @param {string} kent
+   * @param {string} khextemp
+   */
   async getUnicodeDescription (kent, khextemp) {
     const hideMissing = !(await getPref('showAllDetailedView'));
     const hideMissingUnihan = !(await getPref('showAllDetailedCJKView'));
@@ -724,9 +812,11 @@ const unicodecharref = {
 
     if (
       !unihanType && !hangul &&
-      $('#viewTabs').$selectedTab() === $('#detailedCJKView')
+      $tabbox('#viewTabs').$selectedTab() === $('#detailedCJKView')
     ) {
-      $('#viewTabs').$selectTabForTabPanel($('#detailedView'));
+      $tabbox('#viewTabs').$selectTabForTabPanel(
+        $tabpanel('#detailedView')
+      );
     }
 
     const kdectemp = Number.parseInt(khextemp, 16);
@@ -744,13 +834,13 @@ const unicodecharref = {
         if (i === this.kDefinitionIndex) {
           continue;
         }
-        $('#_detailedCJKView' + i).value = '';
+        $t('#_detailedCJKView' + i).value = '';
       }
       for (const prop of this.Unihan) {
         // eslint-disable-next-line @stylistic/max-len -- Long
         /* istanbul ignore next -- May not be generated based on `showComplexWindow` */
-        if ($('#searchk' + prop)) {
-          $('#searchk' + prop).value = '';
+        if ($i('#searchk' + prop)) {
+          $i('#searchk' + prop).value = '';
         }
       }
     }
@@ -776,21 +866,22 @@ const unicodecharref = {
           let temp = results[camelizedField];
           if (unicodeField === 'Unicode_1_Name') {
             if (temp) {
-              result += ';\u00A0\u00A0\u00A0\u00A0\n' +
+              result += ';\u{A0}\u{A0}\u{A0}\u{A0}\n' +
                 _('searchUnicode_1_Name') + _('colon') + ' ' + temp;
             }
             continue;
           }
           if (temp) {
             if (hideMissing) {
-              $('#_detailedView' + i).parentNode.hidden = false;
+              /** @type {HTMLElement} */
+              ($('#_detailedView' + i).parentNode).hidden = false;
             }
             switch (unicodeField) {
             case 'General_Category':
               temp = _('General_Category' + temp);
               break;
             case 'Canonical_Combining_Class':
-              if (temp < 11 || temp > 132) {
+              if (Number(temp) < 11 || Number(temp) > 132) {
                 // 199, 200, 204, 208, 210, 212 do not have members yet and
                 //  others from 11 to 132 do not have name listed
                 temp = _('Canonical_Combining_Class' + temp);
@@ -800,9 +891,8 @@ const unicodecharref = {
               temp = _('Bidi_Class' + temp);
               break;
             case 'Bidi_Mirrored':
-              temp = (temp === 'Y')
-                ? _('Bidi_MirroredY')
-                : _('Bidi_MirroredN'); // Only two choices
+              // Only two choices
+              temp = _(temp === 'Y' ? 'Bidi_MirroredY' : 'Bidi_MirroredN');
               break;
             case 'numericType': {
               const view = $('#_detailedView' + i);
@@ -836,13 +926,19 @@ const unicodecharref = {
               // eslint-disable-next-line no-script-url -- This is controlled
               a.href = 'javascript:void(0)';
 
-              a.addEventListener('click', async (e) => {
-                await unicodecharref.startset({
-                  value: e.target.textContent
-                });
-                // Probably want to start checking again since move to new page
-                // that.noGetDescripts = false;
-              });
+              a.addEventListener(
+                'click',
+                async (e) => {
+                  await unicodecharref.startset({
+                    value: /** @type {HTMLElement} */ (
+                      e.target
+                    ).textContent
+                  });
+                  // Probably want to start checking again since
+                  //   move to new page
+                  // that.noGetDescripts = false;
+                }
+              );
               const tempno = Number.parseInt(temp, 16);
               a.textContent = String.fromCodePoint(tempno);
               a.className = 'text-link';
@@ -861,41 +957,43 @@ const unicodecharref = {
             }
             // Not casing
             if (
-              !unicodeField.includes('case_Mapping') &&
-              unicodeField !== 'decompositionMapping'
+              unicodeField !== 'decompositionMapping' &&
+              !unicodeField.includes('case_Mapping')
             ) {
-              $('#_detailedView' + i).value = temp;
+              $i('#_detailedView' + i).value = temp;
             }
           // Not casing
           } else if (
-            !unicodeField.includes('case_Mapping') &&
-            unicodeField !== 'decompositionMapping'
+            unicodeField !== 'decompositionMapping' &&
+            !unicodeField.includes('case_Mapping')
           ) {
-            $('#_detailedView' + i).parentNode.hidden = hideMissing;
-            $('#_detailedView' + i).value = '';
+            /** @type {HTMLElement} */
+            ($i('#_detailedView' + i).parentNode).hidden = hideMissing;
+            $i('#_detailedView' + i).value = '';
           } else {
-            $('#_detailedView' + i).parentNode.hidden = hideMissing;
+            /** @type {HTMLElement} */
+            ($i('#_detailedView' + i).parentNode).hidden = hideMissing;
             removeViewChildren(i);
           }
         }
       }
 
       if (!unihanType) {
-        $('#displayUnicodeDesc').value = kent +
+        $t('#displayUnicodeDesc').value = kent +
           'U+' + khextemp + _('colon') + ' ' + result;
-        $('#displayUnicodeDesc2').value = kent +
+        $t('#displayUnicodeDesc2').value = kent +
           'U+' + khextemp + _('colon') + ' ' + result;
       }
     } catch {
       if (surrogate) {
-        $('#displayUnicodeDesc').value = kent +
+        $t('#displayUnicodeDesc').value = kent +
           'U+' + khextemp + _('colon') + ' ' + surrogate;
-        $('#displayUnicodeDesc2').value = kent +
+        $t('#displayUnicodeDesc2').value = kent +
           'U+' + khextemp + _('colon') + ' ' + surrogate;
       } else if (privateuse) {
-        $('#displayUnicodeDesc').value = kent +
+        $t('#displayUnicodeDesc').value = kent +
           'U+' + khextemp + _('colon') + ' ' + _('Private_use_character');
-        $('#displayUnicodeDesc2').value = kent +
+        $t('#displayUnicodeDesc2').value = kent +
           'U+' + khextemp + _('colon') + ' ' + _('Private_use_character');
       } else if ( // Catch noncharacters
         (kdectemp >= 0xFDD0 && kdectemp <= 0xFDEF) ||
@@ -920,22 +1018,23 @@ const unicodecharref = {
         (kdectemp >= 0x10FFFE && kdectemp <= 0x10FFFF)
         */
       ) {
-        $('#displayUnicodeDesc').value = kent +
+        $t('#displayUnicodeDesc').value = kent +
           'U+' + khextemp + _('colon') + ' ' + _('Noncharacter');
-        $('#displayUnicodeDesc2').value = kent +
+        $t('#displayUnicodeDesc2').value = kent +
           'U+' + khextemp + _('colon') + ' ' + _('Noncharacter');
       } else {
         const notfoundval = 'U+' + khextemp + _('colon') + ' ' + _('Not_found');
-        $('#displayUnicodeDesc').value = notfoundval;
-        $('#displayUnicodeDesc2').value = notfoundval;
+        $t('#displayUnicodeDesc').value = notfoundval;
+        $t('#displayUnicodeDesc2').value = notfoundval;
       }
       for (const [j, unicodeField] of unicodecharref.Unicode.entries()) {
         if (unicodeField === 'Unicode_1_Name') {
           continue;
         }
         try {
-          $('#_detailedView' + j).value = '';
-          $('#_detailedView' + j).parentNode.hidden = hideMissing;
+          $i('#_detailedView' + j).value = '';
+          /** @type {HTMLElement} */
+          ($('#_detailedView' + j).parentNode).hidden = hideMissing;
           removeViewChildren(j);
         /* istanbul ignore next -- Debugging */
         } catch (err) {
@@ -951,7 +1050,7 @@ const unicodecharref = {
     if (this.unihanDb_exists) {
       try {
         // $('#displayUnicodeDesc').value= _('retrieving_description');
-        const results = await this.unihanDatabase.getUnicodeFields(khextemp);
+        const results = await this.unihanDatabase?.getUnicodeFields(khextemp);
         if (results) {
           // Fix: display data more readably, with heading, etc. (and
           //   conditional)
@@ -978,7 +1077,8 @@ const unicodecharref = {
             }
             if (temp) {
               if (hideMissingUnihan) {
-                $('#_detailedCJKView' + i).parentNode.hidden = false;
+                /** @type {HTMLElement} */
+                ($('#_detailedCJKView' + i).parentNode).hidden = false;
               }
               /*
               switch (i) {
@@ -992,10 +1092,12 @@ const unicodecharref = {
                 break;
               }
               */
-              $('#_detailedCJKView' + i).value = temp;
+              $i('#_detailedCJKView' + i).value = temp;
             } else {
-              $('#_detailedCJKView' + i).parentNode.hidden = hideMissingUnihan;
-              $('#_detailedCJKView' + i).value = '';
+              /** @type {HTMLElement} */
+              ($i('#_detailedCJKView' + i).parentNode).hidden =
+                hideMissingUnihan;
+              $i('#_detailedCJKView' + i).value = '';
             }
           }
         }
@@ -1004,11 +1106,11 @@ const unicodecharref = {
           // Commenting out to show general category under definition
           // $('#displayUnicodeDesc2').value = kent +
           //   'U+' + khextemp + _('colon')+' ' + result;
-          $('#displayUnicodeDescUnihan').value = kent +
+          $t('#displayUnicodeDescUnihan').value = kent +
             'U+' + khextemp + _('colon') + ' ' + result;
-          $('#displayUnicodeDesc').value = kent +
+          $t('#displayUnicodeDesc').value = kent +
             'U+' + khextemp + _('colon') + ' ' + result;
-          $('#displayUnicodeDesc2').value = kent +
+          $t('#displayUnicodeDesc2').value = kent +
             'U+' + khextemp + _('colon') + ' ' + result;
         } else {
           const notfoundval = 'U+' + khextemp + _('colon') + ' ' +
@@ -1020,8 +1122,9 @@ const unicodecharref = {
                 continue;
               }
               try {
-                $('#_detailedView' + j).value = '';
-                $('#_detailedView' + j).parentNode.hidden = hideMissing;
+                $i('#_detailedView' + j).value = '';
+                /** @type {HTMLElement} */
+                ($i('#_detailedView' + j).parentNode).hidden = hideMissing;
                 removeViewChildren(j);
               /* istanbul ignore next -- Debugging */
               } catch (e) {
@@ -1037,15 +1140,17 @@ const unicodecharref = {
               if (i === this.kDefinitionIndex) {
                 continue;
               }
-              $('#_detailedCJKView' + i).parentNode.hidden = hideMissingUnihan;
-              $('#_detailedCJKView' + i).value = '';
+              /** @type {HTMLElement} */
+              ($('#_detailedCJKView' + i).parentNode).hidden =
+                hideMissingUnihan;
+              $i('#_detailedCJKView' + i).value = '';
             }
           }
 
           if (!cjkText) {
-            $('#displayUnicodeDesc').value = notfoundval;
-            $('#displayUnicodeDescUnihan').value = notfoundval;
-            $('#displayUnicodeDesc2').value = notfoundval;
+            $i('#displayUnicodeDesc').value = notfoundval;
+            $i('#displayUnicodeDescUnihan').value = notfoundval;
+            $i('#displayUnicodeDesc2').value = notfoundval;
           } else {
             const finalval = kent +
               'U+' + khextemp + _('colon') + ' ' + cjkText +
@@ -1053,9 +1158,9 @@ const unicodecharref = {
                 ? ''
                 : ' ' + _('left_parenth') + _('No_definition') +
                   _('right_parenth'));
-            $('#displayUnicodeDesc').value = finalval;
-            $('#displayUnicodeDesc2').value = finalval;
-            $('#displayUnicodeDescUnihan').value = finalval;
+            $i('#displayUnicodeDesc').value = finalval;
+            $i('#displayUnicodeDesc2').value = finalval;
+            $i('#displayUnicodeDescUnihan').value = finalval;
             // $('#displayUnicodeDesc2').value = notfoundval;
           }
         }
@@ -1068,10 +1173,10 @@ const unicodecharref = {
     } // Excised Ajax code...
 
     if (
-      this.unihanDb_exists && unihanType &&
-      $('#viewTabs').$selectedTab() === $('#detailedView')
+      unihanType && this.unihanDb_exists &&
+      $tabbox('#viewTabs').$selectedTab() === $('#detailedView')
     ) {
-      $('#viewTabs').$selectTabForTabPanel($('#detailedCJKView'));
+      $tabbox('#viewTabs').$selectTabForTabPanel($tabpanel('#detailedCJKView'));
     }
 
     const alink = createHTMLElement('a');
@@ -1084,7 +1189,7 @@ const unicodecharref = {
     placeItem('#pdflink', alink);
 
     // Handle plane #
-    const planeText = _('plane_num', {plane}) + '\u00A0';
+    const planeText = _('plane_num', {plane}) + '\u{A0}';
     placeItem('#plane', planeText);
 
     if (await getPref('showImg')) {
@@ -1095,26 +1200,38 @@ const unicodecharref = {
       placeItem('#unicodeImg', img);
     }
   },
+  /**
+   * @param {number} size
+   */
   async fontsizetextbox (size) { // Changes font-size
-    const txtbxsize = await getPref('fontsizetextbox') + size;
+    const txtbxsize = /** @type {number} */ (
+      await getPref('fontsizetextbox')
+    ) + size;
     await setPref('fontsizetextbox', txtbxsize);
 
     $('#toconvert').style.fontSize = txtbxsize + 'px';
     $('#converted').style.fontSize = txtbxsize + 'px';
 
     /* istanbul ignore next -- Firefox only */
-    if (size > 0 && window.sizeToContent) {
+    if (size > 0 && 'sizeToContent' in globalThis) {
       // On Mac at least, resizing for reducing font size, causes button to
       // go off screen
-      window.sizeToContent();
+      // @ts-expect-error Firefox only
+      globalThis.sizeToContent();
     }
   },
+  /**
+   * @param {number} size
+   */
   async tblfontsize (size) { // Changes font-size of chart table cells
-    const fsize = await getPref('tblfontsize') + size;
+    const fsize = /** @type {number} */ (await getPref('tblfontsize')) + size;
     // const tds = createHTMLElement('td');
     await setPref('tblfontsize', fsize);
     await this.resizecells({sizeToContent: size > 0});
   },
+  /**
+   * @param {{sizeToContent?: boolean}} cfg
+   */
   async resizecells ({sizeToContent} = {}) {
     await Promise.all($$(
       "*[name='dec'],*[name='hex'],*[name='unicode']"
@@ -1128,44 +1245,75 @@ const unicodecharref = {
     //   await getPref('tblfontsize') + 'px';
 
     /* istanbul ignore next -- Firefox only */
-    if (sizeToContent && window.sizeToContent) {
+    if (sizeToContent && 'sizeToContent' in globalThis) {
       // On Mac at least, resizing for reducing font size, causes button to
       // go off screen
-      window.sizeToContent();
+      // @ts-expect-error Firefox only
+      globalThis.sizeToContent();
     }
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async hexLettersCasing (e) {
     await this.setprefs(e);
     await chartBuild();
     return await this.resizecells();
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async flip (e) {
     await this.setCurrstartset(lastStartCharCode);
     await this.setprefs(e);
     await chartBuild();
     return await this.resizecells();
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async onlyentsyesflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async hexflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async decflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async unicodeflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async middleflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async buttonflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async entflip (e) {
     return await this.flip(e);
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async cssWhitespace (e) {
     let {value} = e.target;
     // Escape \r since \r may be lost?
@@ -1207,6 +1355,9 @@ const unicodecharref = {
     await setPref('xstyle', currxstyle);
     return await chartBuild();
   }, */
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async rowsset (e) {
     await this.setCurrstartset(lastStartCharCode);
     if (e.target.value !== null && e.target.value !== '') {
@@ -1215,6 +1366,9 @@ const unicodecharref = {
     await chartBuild();
     return await this.resizecells();
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async colsset (e) {
     await this.setCurrstartset(lastStartCharCode);
     if (e.target.value !== null && e.target.value !== '') {
@@ -1226,7 +1380,7 @@ const unicodecharref = {
 
   /**
    * @param {{value: string}} tbx
-   * @param {boolean} descripts
+   * @param {boolean} [descripts]
    * @returns {Promise<void>}
    */
   async startset (tbx, descripts) {
@@ -1235,23 +1389,27 @@ const unicodecharref = {
      * @returns {Integer}
      */
     function convert (str) {
-      str = str.replace(/;$/u, '');
-      const hexInit = str.match(/^&?#?x/u);
+      str = str.replace(/;$/v, '');
+      const hexInit = str.match(/^&?#?x/v);
       if (hexInit) {
         return Number.parseInt(str.slice(hexInit[0].length), 16) - 1;
       }
-      const decInit = str.match(/^&?#/u);
+      const decInit = str.match(/^&?#/v);
       if (decInit) {
-        return Number.parseInt(str.slice(decInit[0].length)) - 1;
+        return Number.parseInt(str.slice(decInit[0].length), 10) - 1;
       }
-      return str.codePointAt() - 1;
+      return /** @type {number} */ (str.codePointAt(0)) - 1;
     }
     await this.disableEnts();
     const data = tbx.value !== null &&
       tbx.value !== undefined &&
       tbx.value !== ''
       ? convert(tbx.value)
-      : (await getPref('startset') || 'a').codePointAt() - 1;
+      : /** @type {number} */ (
+        (
+          /** @type {string} */ (await getPref('startset')) || 'a'
+        ).codePointAt(0)
+      ) - 1;
     await this.setCurrstartset(data);
 
     await chartBuild({descripts});
@@ -1266,7 +1424,9 @@ const unicodecharref = {
   async setCurrstartset (value) {
     /* istanbul ignore if -- Guard */
     if (typeof value !== 'number') {
-      const err = new Error('Bad value');
+      const err = /** @type {Error & {value: AnyValue}} */ (
+        new Error('Bad value')
+      );
       err.value = value;
       // eslint-disable-next-line no-console -- Debugging
       console.error(err);
@@ -1274,6 +1434,12 @@ const unicodecharref = {
         'Look at trace to see where setting ' +
         '`currentStartCharCode` as undefined'
       );
+      // Avoid corrupting the stored pref: `setPref` would otherwise
+      //   persist the literal string "undefined" (via
+      //   `localStorage.setItem` stringifying a JS `undefined`), which
+      //   then makes every future `getPref('currentStartCharCode')`
+      //   throw a JSON parse error indefinitely.
+      return undefined;
     }
 
     return await setPref('currentStartCharCode', value);
@@ -1290,19 +1456,28 @@ const unicodecharref = {
     await chartBuild();
     return await this.resizecells();
   },
+  /**
+   * @param {{id: string, value: string}} obj
+   */
   async searchUnihan (obj) {
     return await this.searchUnicode(obj, 'Unihan');
   },
   async disableEnts () {
     return await this.setBoolChecked('onlyentsyes', false);
   },
+  /**
+   * @param {{id: string, value: string}} obj
+   * @param {string} [table]
+   * @param {boolean} [nochart]
+   * @param {boolean} [strict]
+   */
   async searchUnicode (obj, table, nochart, strict) { // Fix: allow Jamo!
     await charrefunicodeConverter.searchUnicode(obj, table, nochart, strict);
     if (!nochart) {
       const tmp = await getPref('currentStartCharCode');
       this.startset(obj, true); // Could remember last description (?)
       // Set it back as it was before the search
-      await this.setCurrstartset(tmp);
+      await this.setCurrstartset(/** @type {number} */ (tmp));
       this.resizecells();
     }
     // Doesn't work since name_desc_val is search value, not first
@@ -1310,25 +1485,31 @@ const unicodecharref = {
     //  were a search, however); we need to be careful, however, since
     //  some searches run automatically on start-up
     /* if (name_desc === 'Name' || name_desc === 'kDefinition') {
-      await this.setCurrstartset(name_desc_val.codePointAt() - 1);
+      await this.setCurrstartset(name_desc_val.codePointAt(0) - 1);
     } */
   },
-  moveoutput (movedid) {
-    const insertText = $(movedid);
-    $('#unicodeTabBox').$selectTabForTabPanel($('#conversion'));
-    $('#toconvert').value = insertText.value;
+  /**
+   * @param {string} movedSel
+   */
+  moveoutput (movedSel) {
+    const insertText = $i(movedSel);
+    $tabbox('#unicodeTabBox').$selectTabForTabPanel($tabpanel('#conversion'));
+    $t('#toconvert').value = insertText.value;
   },
+  /**
+   * @param {{target: {type: string, id: string, value: string}}} e
+   */
   async append2htmlflip (e) {
     await this.setprefs(e);
     await registerDTD(); // (in case DTD not also changed, still need to reset)
     await chartBuild();
     await this.resizecells();
   },
-  /**
-   * @todo Unused
+  /*
+   * @ todo Unused
    * Sets the preference for whether to display the chosen character
    * in the middle of the chart (or beginning).
-   * @param {boolean} bool Whether to set to true or not
+   * @ param {boolean} bool Whether to set to true or not
    */
   /*
   async startCharInMiddleOfChart (bool) {
@@ -1340,7 +1521,7 @@ const unicodecharref = {
   */
   insertent () {
     insertIntoOrOverExisting({
-      textReceptacle: $('#DTDtextbox'),
+      textReceptacle: $t('#DTDtextbox'),
       value: '<!ENTITY  "">\n'
     });
     // The following works but may be annoying if trying to insert
@@ -1407,30 +1588,11 @@ const unicodecharref = {
 
   // Build these programmatically? (and in UI?)
   /* Pseudo-constants */
-  Unihan: [ // Ordered by database array; todo: rpplace above `Unihan`?
-    'kAccountingNumeric', 'kAlternateTotalStrokes', 'kBigFive', 'kCangjie',
-    'kCantonese', 'kCCCII', 'kCheungBauer', 'kCheungBauerIndex', 'kCihaiT',
-    'kCNS1986', 'kCNS1992', 'kCompatibilityVariant', 'kCowles', 'kDaeJaweon',
-    'kDefinition', 'kEACC', 'kFenn', 'kFennIndex', 'kFourCornerCode',
-    'kFrequency', 'kGB0', 'kGB1', 'kGB3', 'kGB5', 'kGB7', 'kGB8',
-    'kGradeLevel', 'kGSR', 'kHangul', 'kHanYu', 'kHanyuPinlu',
-    'kHanyuPinyin', 'kHDZRadBreak', 'kHKGlyph', 'kHKSCS', 'kIBMJapan',
-    'kIICore', 'kIRG_GSource', 'kIRG_HSource', 'kIRG_JSource',
-    'kIRG_KPSource', 'kIRG_KSource', 'kIRG_MSource', 'kIRG_SSource',
-    'kIRG_TSource', 'kIRG_UKSource', 'kIRG_USource', 'kIRG_VSource',
-    'kIRGDaeJaweon', 'kIRGDaiKanwaZiten', 'kIRGHanyuDaZidian',
-    'kIRGKangXi', 'kJa', 'kJapaneseKun', 'kJapaneseOn', 'kJinmeiyoKanji',
-    'kJis0', 'kJis1', 'kJIS0213', 'kJoyoKanji', 'kKangXi', 'kKarlgren',
-    'kKorean', 'kKoreanEducationHanja', 'kKoreanName', 'kKPS0', 'kKPS1',
-    'kKSC0', 'kKSC1', 'kLau', 'kMainlandTelegraph', 'kMandarin',
-    'kMatthews', 'kMeyerWempe', 'kMorohashi', 'kNelson', 'kOtherNumeric',
-    'kPhonetic', 'kPrimaryNumeric', 'kPseudoGB1', 'kRSAdobe_Japan1_6',
-    'kRSKangXi', 'kRSUnicode', 'kSBGY', 'kSemanticVariant',
-    'kSimplifiedVariant', 'kSpecializedSemanticVariant', 'kSpoofingVariant',
-    'kStrange', 'kTaiwanTelegraph', 'kTang', 'kTGH', 'kTGHZ2013',
-    'kTotalStrokes', 'kTraditionalVariant', 'kUnihanCore2020',
-    'kVietnamese', 'kXerox', 'kXHC1983', 'kZVariant'
-  ],
+  // Auto-generated (see `browser_action/unicode/unihanFields.js`) from the
+  //   exact column order used to build `download/unihan/unihan.json`;
+  //   values are looked up by this array's position, not by name, so this
+  //   must never be hand-edited independently of that data.
+  Unihan: unihanFields,
   UnihanMenus: [], // Unused
   Unicode: [
     'General_Category', 'Canonical_Combining_Class', 'Bidi_Class',
@@ -1472,7 +1634,8 @@ const unicodecharref = {
   ],
   UnicodeMenuBidi_Mirrored: ['Y', 'N'],
   UnicodeMenuDigit: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-  UnicodeMenuDecimal: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  UnicodeMenuDecimal: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  kDefinitionIndex: -1
 };
 
 unicodecharref.kDefinitionIndex = unicodecharref.Unihan.indexOf('kDefinition');