avoid assigning to innerHTML

ttyridal · ttyridal · commit 0c819ea13209 · 2016-08-11T08:39:53.000+02:00
mozilla validation script dislike it
diff --git a/ext/data/config.html b/ext/data/config.html
@@ -26,6 +26,23 @@
 tr td:nth-child(4) { text-align:center;}
 tr td:nth-child(5) { text-align:center;}
 td img { width: 15px; height:15px;}
+.backdrop {
+    position:fixed;
+    width:100%;
+    height:100%;
+    top:0;
+    left:0;
+    background:rgba(0,0,0,0.7);
+    z-index:500;
+}
+.dialog {
+    border:2px black inset;
+    position:fixed;
+    top:5em;left:5em;
+    width:50%;
+    background:white;
+    padding: 1em;
+}
 </style>
 <body style="margin:0;padding:0;padding-left:1em;">
 <img src="icon64.png" style="float:left;height:4em;padding-top:0;padding-right:0.5em">
@@ -35,6 +52,17 @@ <h2>Stored sites:</h2>
 <p>(You can drag-drop a .mpsites file here to import it)</p>
 <table id="stored_sites" style="padding-left:2em">
     <thead><tr><th>sitename<th>(matching)<th>Login<th>count<th>type<th>ver
+    <template id="stored_sites_row">
+    <tr>
+        <td>sitename</td>
+        <td><input class="domainvalue" type="text" data-old="domain" value="domain"></td>
+        <td>loginname</td>
+        <td>count</td>
+        <td>type</td>
+        <td>ver</td>
+        <td><img class="delete" src="delete.png"></td>
+    </tr>
+    </template>
 <tbody>
 </table>
 <button class="export_mpsites">export</button>
@@ -45,6 +73,20 @@ <h2>Stored sites:</h2>
 your password list can not be imported in apps supporting max revision 2 (notably the
 official iOS and osX apps with version 2.1.x and earlier)</p>
 
+<div id="conflict_resolve" class="backdrop" style="display:none">
+    <div class="dialog">
+        <h2>Conflicting <span class="sitename"></span> (<small class="domainvalue"></small>)</h2>
+        <h3>existing</h3>
+        type: <span class="existing_type"></span>
+        count: <span class="existing_count"></span>
+        username: <span class="existing_username"></span>
+        <h3>importing</h3>
+        type: <span class="new_type"></span>
+        count: <span class="new_count"></span>
+        username: <span class="new_username"></span>
+        <div style="padding-top:1em"><button id="existing">Keep existing</button> <button id="imported">Replace with imported</button></div>
+    </div>
+</div>
 
 <script src="mpw-utils.js"></script>
 <script src="config.js"></script>
diff --git a/ext/data/config.js b/ext/data/config.js
@@ -51,11 +51,16 @@ function passtype_to_str(type) {
 }
 
 function stored_sites_table_append(domain, site, type, loginname, count, ver) {
-    type = passtype_to_str(type);
-    let tr = document.createElement('tr');
-    tr.innerHTML = '<td>'+site+'<td><input class="domainvalue" type="text" data-old="'+
-        domain+'" value="'+domain+'"><td>'+loginname+'<td>'+count+'<td>'+type+'<td>'+ver+
-        '<td><img class="delete" src="delete.png">';
+    let tr = document.importNode(document.querySelector('#stored_sites_row').content, true);
+    let x = tr.querySelector('input.domainvalue');
+    x.value = domain;
+    x.setAttribute('data-old', domain);
+    x = tr.querySelectorAll('td');
+    x[0].textContent = site;
+    x[2].textContent = loginname;
+    x[3].textContent = count;
+    x[4].textContent = passtype_to_str(type);
+    x[5].textContent = ver;
 
     document.querySelector('#stored_sites > tbody').appendChild(tr);
 }
@@ -153,23 +158,20 @@ function get_sitesearch(sitename) {
 
 function resolveConflict(site) {
     return new Promise(function(resolve, reject){
-        var div = document.createElement('div');
-        div.style.cssText = "position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.7);z-index:500";
-        div.innerHTML = [
-            '<div style="border:2px black inset;position:fixed;top:5em;left:5em;width:50%;background:white;padding: 1em"><h2>Conflicting ',
-            site.sitename,
-            ' (<small>',site.sitesearch,'</small>)',
-            '</h2><h3>existing</h3>',
-            'type: ', passtype_to_str(stored_sites[site.sitesearch][site.sitename].type),
-            ' count: ', stored_sites[site.sitesearch][site.sitename].generation,
-            ' username: ', stored_sites[site.sitesearch][site.sitename].username,
-            '<h3>importing</h3>',
-            'type: ', passtype_to_str(site.passtype),
-            ' count: ', site.passcnt,
-            ' username: ', site.loginname,
-            '<div style="padding-top:1em"><button id="existing">Keep existing</button> <button id="imported">Replace with imported</button></div>',
-            '</div>'].join('');
-        div.addEventListener('click', function(ev){
+        let existing = stored_sites[site.sitesearch][site.sitename],
+            div = document.querySelector('#conflict_resolve');
+
+        div.querySelector('.sitename').textContent = site.sitename;
+        div.querySelector('.domainvalue').textContent = site.sitesearch;
+        div.querySelector('.existing_type').textContent = passtype_to_str(existing.type);
+        div.querySelector('.existing_count').textContent = existing.generation;
+        div.querySelector('.existing_username').textContent = existing.username;
+
+        div.querySelector('.new_type').textContent = passtype_to_str(site.passtype);
+        div.querySelector('.new_count').textContent = site.passcnt;
+        div.querySelector('.new_username').textContent = site.loginname;
+
+        function click_handler(ev) {
             switch (ev.target.id) {
                 case 'existing':
                     resolve(stored_sites[site.sitesearch][site.sitename]);
@@ -179,11 +181,13 @@ function resolveConflict(site) {
                     break;
                 default:
                     return;
-
             }
-            div.parentNode.removeChild(div);
-        });
-        document.querySelector('body').appendChild(div);
+            div.removeEventListener('click', click_handler);
+            div.style.display = 'none';
+        }
+
+        div.addEventListener('click', click_handler);
+        div.style.display = '';
     });
 }
 
diff --git a/ext/data/main_popup.js b/ext/data/main_popup.js
@@ -101,7 +101,7 @@ let ui = {
             e = e.appendChild(document.createElement('a'));
             e.href = '';
             e.id = 'showpass';
-            e.innerHTML = visible;
+            e.textContent = visible;
         }
     },
 
@@ -174,7 +174,7 @@ function recalculate(hide_after_copy, retry) {
                 siteconfig.generation,
                 siteconfig.type);
 
-        ui.thepassword(Array(pass.length+1).join('&middot;'), pass);
+        ui.thepassword(Array(pass.length+1).join("\u00B7"), pass); // &middot;
 
         copy_to_clipboard("text/plain", pass);
         update_page_password_input(pass);
diff --git a/ext/test/test-main.js b/ext/test/test-main.js
@@ -125,10 +125,19 @@ exports["test mpsites upload valid"] = function(assert, async_test_done) {
 
     let DummyDom = scope_import_fake_dom(scope);
     let document = scope.document;
+    document.importNode = function() {
+        let x = new DummyDom();
+        x.appendChild(new DummyDom('input.domainvalue')).setAttribute = function(){};
+        x.querySelectorAll = function() {
+            return [{},{},{},{},{},{}];
+        };
+        return x;
+    };
 
     document.appendChild(new DummyDom('body'))
         .appendChild(new DummyDom('#stored_sites'))
-            .appendChild(new DummyDom('#stored_sites > tbody'));
+            .appendChild(new DummyDom('#stored_sites > tbody'))
+                .appendChild(new DummyDom('#stored_sites_row'));
 
     scope.alert = function(m){ if (/Version mismatch/.test(m)) version_mismatch_received=true; else throw new Error('unexpected alert: '+m);};
     scope.confirm = function(m){return true;};
