fix AMO validation errors: innerHTML is forbidden

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;
 
 /******************************************************************************/

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);
 })();

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 || '');
 };
 
 /******************************************************************************/

src/js/cloud-ui.js

@@ -168,20 +168,21 @@ 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);
+    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');
 
@@ -190,6 +191,8 @@ var onInitialize = function(options) {
         uDom('#cloudCog').on('click', openOptions);
         uDom('#cloudOptions').on('click', closeOptions);
         uDom('#cloudOptionsSubmit').on('click', submitOptions);
+    };
+    xhr.send();
 };
 
 messager.send({ what: 'cloudGetOptions' }, onInitialize);

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);
 };