this completes fix of #954

3 files changed, 22 insertions, 15 deletions

diff --git a/src/dyna-rules.html b/src/dyna-rules.html
index 435dd1d5..9a665f3b 100644
--- a/src/dyna-rules.html
+++ b/src/dyna-rules.html
@@ -38,8 +38,13 @@
         </div>
     </div>
 
-<input class="hidden" id="importFilePicker" type="file" accept="text/plain" style="display: none;">
-<span class="hidden" data-i18n="rulesDefaultFileName" style="display: none;"></span>
+<div id="templates" style="display: none;">
+    <input class="hidden" id="importFilePicker" type="file" accept="text/plain">
+    <span class="hidden" data-i18n="rulesDefaultFileName"></span>
+    <ul>
+        <li>&nbsp;</li>
+        </ul>
+    </div>
 
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/js/asset-viewer.js b/src/js/asset-viewer.js
index ef1b6cbe..6525b440 100644
--- a/src/js/asset-viewer.js
+++ b/src/js/asset-viewer.js
@@ -33,7 +33,7 @@ var messager = vAPI.messaging.channel('asset-viewer.js');
 /******************************************************************************/
 
 var onAssetContentReceived = function(details) {
-    uDom('#content').html(details && (details.content || ''));
+    uDom('#content').text(details && (details.content || ''));
 };
 
 /******************************************************************************/
diff --git a/src/js/dyna-rules.js b/src/js/dyna-rules.js
index cae3e503..65f5dac5 100644
--- a/src/js/dyna-rules.js
+++ b/src/js/dyna-rules.js
@@ -35,8 +35,6 @@ var messager = vAPI.messaging.channel('dyna-rules.js');
 
 var renderRules = function(details) {
     var rules, rule, i;
-    var permanentList = [];
-    var sessionList = [];
     var allRules = {};
     var permanentRules = {};
     var sessionRules = {};
@@ -64,27 +62,31 @@ var renderRules = function(details) {
     }
     details.permanentRules = rules.sort().join('\n');
 
+    var liTemplate = uDom('#templates > ul > li');
+    var ulLeft = uDom('#diff > .left ul').empty();
+    var ulRight = uDom('#diff > .right ul').empty();
+    var liLeft, liRight;
+
     rules = Object.keys(allRules).sort();
     for ( i = 0; i < rules.length; i++ ) {
         rule = rules[i];
         onLeft = permanentRules.hasOwnProperty(rule);
         onRight = sessionRules.hasOwnProperty(rule);
+        liLeft = liTemplate.clone();
+        liRight = liTemplate.clone();
         if ( onLeft && onRight ) {
-            permanentList.push('<li>', rule);
-            sessionList.push('<li>', rule);
+            liLeft.text(rule);
+            liRight.text(rule);
         } else if ( onLeft ) {
-            permanentList.push('<li>', rule);
-            sessionList.push('<li class="notRight toRemove">', rule);
+            liLeft.text(rule);
+            liRight.text(rule).addClass('notRight toRemove');
         } else {
-            permanentList.push('<li>&nbsp;');
-            sessionList.push('<li class="notLeft">', rule);
+            liRight.text(rule).addClass('notLeft');
         }
+        ulLeft.append(liLeft);
+        ulRight.append(liRight);
     }
 
-    uDom('#diff > .left ul > li').remove();
-    uDom('#diff > .left ul').html(permanentList.join(''));
-    uDom('#diff > .right ul > li').remove();
-    uDom('#diff > .right ul').html(sessionList.join(''));
     uDom('#diff').toggleClass('dirty', details.sessionRules !== details.permanentRules);
 };