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