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 = [
- '',
- '',
- '',
- '',
- '
',
- ].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('', rule);
- temporaryList.push('', 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('', rule);
- temporaryList.push('', 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(' ');
- temporaryList.push('', 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);
};