Construct DOM via $element instead of HTML string

.eslintrc

@@ -48,6 +48,7 @@ globals:
   animateElement: false
   $: false
   $$: false
+  $element: false
   # prefs.js
   prefs: false
   setupLivePrefs: false

backup/fileSaveLoad.js

@@ -143,24 +143,29 @@ function importFromString(jsonString) {
       stats.codeOnly.names.length +
       stats.added.names.length;
     Promise.resolve(numChanged && BG.refreshAllTabs()).then(() => {
-      const listNames = kind => {
-        const {ids, names} = stats[kind];
-        return ids
-          ? names.map((name, i) => `<div data-id="${ids[i]}">${name}</div>`)
-          : names.map(name => `<div>${name}</div>`);
-      };
       const report = Object.keys(stats)
         .filter(kind => stats[kind].names.length)
-        .map(kind =>
+        .map(kind => {
-          `<details data-id="${kind}">
+          const {ids, names, legend} = stats[kind];
-            <summary><b>${stats[kind].names.length} ${t(stats[kind].legend)}</b></summary>
+          const listItemsWithId = (name, i) =>
-            <small>${listNames(kind).join('')}</small>
+            $element({dataset: {id: ids[i]}, textContent: name});
-          </details>`)
+          const listItems = name =>
-        .join('');
+            $element({textContent: name});
+          const block =
+            $element({tag: 'details', dataset: {id: kind}, appendChild: [
+              $element({tag: 'summary', appendChild:
+                $element({tag: 'b', textContent: names.length + ' ' + t(legend)})
+              }),
+              $element({tag: 'small', appendChild:
+                names.map(ids ? listItemsWithId : listItems)
+              }),
+            ]});
+          return block;
+        });
       scrollTo(0, 0);
       messageBox({
         title: t('importReportTitle'),
-        contents: report || t('importReportUnchanged'),
+        contents: report.length ? report : t('importReportUnchanged'),
         buttons: [t('confirmOK'), numChanged && t('undo')],
         onshow:  bindClick,
       }).then(({button, enter, esc}) => {

dom.js

@@ -79,3 +79,21 @@ function $(selector, base = document) {
 function $$(selector, base = document) {
   return [...base.querySelectorAll(selector)];
 }
+
+
+function $element(opt) {
+  // tag:              string, default 'div'
+  // appendChild:      element or an array of elements
+  // dataset:          object
+  // any DOM property: assigned as is
+  const element = document.createElement(opt.tag || 'div');
+  (opt.appendChild instanceof Array ? opt.appendChild : [opt.appendChild])
+    .forEach(child => child && element.appendChild(child));
+  delete opt.appendChild;
+  delete opt.tag;
+  if (opt.dataset) {
+    Object.assign(element.dataset, opt.dataset);
+    delete opt.dataset;
+  }
+  return Object.assign(element, opt);
+}

msgbox/msgbox.js

@@ -89,13 +89,4 @@ function messageBox({
     messageBox.element = null;
     messageBox.resolve = null;
   }
-
-  function $element(opt) {
-    const element = document.createElement(opt.tag || 'div');
-    (opt.appendChild instanceof Array ? opt.appendChild : [opt.appendChild])
-      .forEach(child => child && element.appendChild(child));
-    delete opt.appendChild;
-    delete opt.tag;
-    return Object.assign(element, opt);
-  }
 }