From acf318d83c0fba9b4d9a95306ef1d1bc96bcdb0c Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Thu, 5 Oct 2017 12:49:26 -0400
Subject: [PATCH] fix AMO validation errors: innerHTML is forbidden

---
 platform/chromium/vapi-common.js |  6 ----
 src/js/about.js                  |  9 +++---
 src/js/asset-viewer.js           |  2 +-
 src/js/cloud-ui.js               | 47 +++++++++++++++++---------------
 src/js/user-rules.js             | 37 ++++++++++++++++++-------
 5 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/platform/chromium/vapi-common.js b/platform/chromium/vapi-common.js
index 3ce4514..fa13031 100644
--- a/platform/chromium/vapi-common.js
+++ b/platform/chromium/vapi-common.js
@@ -64,12 +64,6 @@ vAPI.download = function(details) {
 
 /******************************************************************************/
 
-vAPI.insertHTML = function(node, html) {
-    node.innerHTML = html;
-};
-
-/******************************************************************************/
-
 vAPI.getURL = chrome.runtime.getURL;
 
 /******************************************************************************/
diff --git a/src/js/about.js b/src/js/about.js
index 8b65ba6..7afe53e 100644
--- a/src/js/about.js
+++ b/src/js/about.js
@@ -21,12 +21,12 @@
 
 /* global vAPI, uDom */
 
+'use strict';
+
 /******************************************************************************/
 
 uDom.onLoad(function() {
 
-'use strict';
-
 /******************************************************************************/
 
 var messager = vAPI.messaging.channel('about.js');
@@ -120,13 +120,14 @@ var resetUserData = function() {
 
 (function() {
     var renderStats = function(details) {
-        uDom('#aboutVersion').html(details.version);
+        document.getElementById('aboutVersion').textContent = details.version;
         var template = uDom('[data-i18n="aboutStorageUsed"]').text();
         var storageUsed = '?';
         if ( typeof details.storageUsed === 'number' ) {
             storageUsed = details.storageUsed.toLocaleString();
         }
-        uDom('#aboutStorageUsed').html(template.replace('{{storageUsed}}', storageUsed));
+        document.getElementById('aboutStorageUsed').textContent =
+            template.replace('{{storageUsed}}', storageUsed);
     };
     messager.send({ what: 'getSomeStats' }, renderStats);
 })();
diff --git a/src/js/asset-viewer.js b/src/js/asset-viewer.js
index 1eea1b0..7ce3029 100644
--- a/src/js/asset-viewer.js
+++ b/src/js/asset-viewer.js
@@ -34,7 +34,7 @@ var messager = vAPI.messaging.channel('asset-viewer.js');
 /******************************************************************************/
 
 var onAssetContentReceived = function(details) {
-    uDom('#content').html(details && (details.content || ''));
+    document.getElementById('content').textContent = details && (details.content || '');
 };
 
 /******************************************************************************/
diff --git a/src/js/cloud-ui.js b/src/js/cloud-ui.js
index f129dc7..c4cc118 100644
--- a/src/js/cloud-ui.js
+++ b/src/js/cloud-ui.js
@@ -168,28 +168,31 @@ var onInitialize = function(options) {
 
     fetchCloudData();
 
-    var html = [
-        '<button id="cloudPush" type="button" title="cloudPush"></button>',
-        '<span data-i18n="cloudNoData"></span>',
-        '<button id="cloudPull" type="button" title="cloudPull" disabled></button>',
-        '<span id="cloudCog" class="fa">&#xf013;</span>',
-        '<div id="cloudOptions">',
-        '    <div>',
-        '        <p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">',
-        '        <p><button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>',
-        '    </div>',
-        '</div>',
-    ].join('');
-
-    vAPI.insertHTML(widget, html);
-    vAPI.i18n.render(widget);
-    widget.classList.remove('hide');
-
-    uDom('#cloudPush').on('click', pushData);
-    uDom('#cloudPull').on('click', pullData);
-    uDom('#cloudCog').on('click', openOptions);
-    uDom('#cloudOptions').on('click', closeOptions);
-    uDom('#cloudOptionsSubmit').on('click', submitOptions);
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', 'cloud-ui.html', true);
+    xhr.overrideMimeType('text/html;charset=utf-8');
+    xhr.responseType = 'text';
+    xhr.onload = function() {
+        this.onload = null;
+        var parser = new DOMParser(),
+            parsed = parser.parseFromString(this.responseText, 'text/html'),
+            fromParent = parsed.body;
+        while ( fromParent.firstElementChild !== null ) {
+            widget.appendChild(
+                document.adoptNode(fromParent.firstElementChild)
+            );
+        }
+
+        vAPI.i18n.render(widget);
+        widget.classList.remove('hide');
+
+        uDom('#cloudPush').on('click', pushData);
+        uDom('#cloudPull').on('click', pullData);
+        uDom('#cloudCog').on('click', openOptions);
+        uDom('#cloudOptions').on('click', closeOptions);
+        uDom('#cloudOptionsSubmit').on('click', submitOptions);
+    };
+    xhr.send();
 };
 
 messager.send({ what: 'cloudGetOptions' }, onInitialize);
diff --git a/src/js/user-rules.js b/src/js/user-rules.js
index 128c210..8963e7b 100644
--- a/src/js/user-rules.js
+++ b/src/js/user-rules.js
@@ -48,8 +48,6 @@ var directiveSort = function(a, b) {
 
 var processUserRules = function(response) {
     var rules, rule, i;
-    var permanentList = [];
-    var temporaryList = [];
     var allRules = {};
     var permanentRules = {};
     var temporaryRules = {};
@@ -71,29 +69,48 @@ var processUserRules = function(response) {
             temporaryRules[rule] = allRules[rule] = true;
         }
     }
+
+    var permanentList = document.createDocumentFragment(),
+        temporaryList = document.createDocumentFragment(),
+        li;
+
     rules = Object.keys(allRules).sort(directiveSort);
     for ( i = 0; i < rules.length; i++ ) {
         rule = rules[i];
         onLeft = permanentRules.hasOwnProperty(rule);
         onRight = temporaryRules.hasOwnProperty(rule);
         if ( onLeft && onRight ) {
-            permanentList.push('<li>', rule);
-            temporaryList.push('<li>', rule);
+            li = document.createElement('li');
+            li.textContent = rule;
+            permanentList.appendChild(li);
+            li = document.createElement('li');
+            li.textContent = rule;
+            temporaryList.appendChild(li);
         } else if ( onLeft ) {
-            permanentList.push('<li>', rule);
-            temporaryList.push('<li class="notRight toRemove">', rule);
+            li = document.createElement('li');
+            li.textContent = rule;
+            permanentList.appendChild(li);
+            li = document.createElement('li');
+            li.textContent = rule;
+            li.className = 'notRight toRemove';
+            temporaryList.appendChild(li);
         } else if ( onRight ) {
-            permanentList.push('<li>&nbsp;');
-            temporaryList.push('<li class="notLeft">', rule);
+            li = document.createElement('li');
+            li.textContent = '\xA0';
+            permanentList.appendChild(li);
+            li = document.createElement('li');
+            li.textContent = rule;
+            li.className = 'notLeft';
+            temporaryList.appendChild(li);
         }
     }
 
     // TODO: build incrementally.
 
     uDom('#diff > .left > ul > li').remove();
-    uDom('#diff > .left > ul').html(permanentList.join(''));
+    document.querySelector('#diff > .left > ul').appendChild(permanentList);
     uDom('#diff > .right > ul > li').remove();
-    uDom('#diff > .right > ul').html(temporaryList.join(''));
+    document.querySelector('#diff > .right > ul').appendChild(temporaryList);
     uDom('#diff').toggleClass('dirty', response.temporaryRules !== response.permanentRules);
 };