Bug 1444428 - Remove unsafeSetInnerHTML in config.js. r=Gijs draft
authorJohann Hofmann <jhofmann@mozilla.com>
Fri, 13 Apr 2018 15:12:15 +0200
changeset 781700 945056f17f2dc43f4a07ed356af166ab83d9665a
parent 781489 da809ecceaf3a8ada0aa2d7115822d39d0439654
push id106378
push userjhofmann@mozilla.com
push dateFri, 13 Apr 2018 13:12:59 +0000
reviewersGijs
bugs1444428
milestone61.0a1
Bug 1444428 - Remove unsafeSetInnerHTML in config.js. r=Gijs MozReview-Commit-ID: CHyl9FJQ7j9
mobile/android/chrome/content/config.js
--- a/mobile/android/chrome/content/config.js
+++ b/mobile/android/chrome/content/config.js
@@ -567,25 +567,16 @@ Pref.prototype = {
   reset: function AC_reset() {
     Services.prefs.clearUserPref(this.name);
   },
 
   test: function AC_test(aValue) {
     return aValue ? aValue.test(this.name) : true;
   },
 
-  escapeHTML: function(input) {
-    return input.replace(/&/g, "&amp;")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/"/g, "&quot;")
-                .replace(/'/g, "&#x27;")
-                .replace(/\//g, "&#x2F;");
-  },
-
   // Get existing or create new LI node for the pref
   getOrCreateNewLINode: function AC_getOrCreateNewLINode() {
     if (!this.li) {
       this.li = document.createElement("li");
 
       this.li.className = "pref-item";
       this.li.setAttribute("name", this.name);
 
@@ -600,42 +591,70 @@ Pref.prototype = {
       this.li.addEventListener("contextmenu",
         function(aEvent) {
           AboutConfig.contextMenuLINode = AboutConfig.getLINodeForEvent(aEvent);
         }
       );
 
       this.li.setAttribute("contextmenu", "prefs-context-menu");
 
-      // Create list item outline, bind to object actions
-      this.li.unsafeSetInnerHTML(
-        "<div class='pref-name' " +
-            "onclick='AboutConfig.selectOrToggleBoolPref(event);'>" +
-            this.escapeHTML(this.name) +
-        "</div>" +
-        "<div class='pref-item-line'>" +
-          "<input class='pref-value' value='' " +
-            "onblur='AboutConfig.setIntOrStringPref(event);' " +
-            "onclick='AboutConfig.selectOrToggleBoolPref(event);'>" +
-          "</input>" +
-          "<div class='pref-button reset' " +
-            "onclick='AboutConfig.resetDefaultPref(event);'>" +
-            gStringBundle.GetStringFromName("pref.resetButton") +
-          "</div>" +
-          "<div class='pref-button toggle' " +
-            "onclick='AboutConfig.toggleBoolPref(event);'>" +
-            gStringBundle.GetStringFromName("pref.toggleButton") +
-          "</div>" +
-          "<div class='pref-button up' " +
-            "onclick='AboutConfig.incrOrDecrIntPref(event, 1);'>" +
-          "</div>" +
-          "<div class='pref-button down' " +
-            "onclick='AboutConfig.incrOrDecrIntPref(event, -1);'>" +
-          "</div>" +
-        "</div>");
+      let prefName = document.createElement("div");
+      prefName.className = "pref-name";
+      prefName.addEventListener("click", function(event) {
+        AboutConfig.selectOrToggleBoolPref(event);
+      });
+      prefName.textContent = this.name;
+
+      this.li.appendChild(prefName);
+
+      let prefItemLine = document.createElement("div");
+      prefItemLine.className = "pref-item-line";
+
+      let prefValue = document.createElement("input");
+      prefValue.className = "pref-value";
+      prefValue.addEventListener("blur", function(event) {
+        AboutConfig.setIntOrStringPref(event);
+      });
+      prefValue.addEventListener("click", function(event) {
+        AboutConfig.selectOrToggleBoolPref(event);
+      });
+      prefValue.value = "";
+      prefItemLine.appendChild(prefValue);
+
+      let resetButton = document.createElement("div");
+      resetButton.className = "pref-button reset";
+      resetButton.addEventListener("click", function(event) {
+        AboutConfig.resetDefaultPref(event);
+      });
+      resetButton.textContent = gStringBundle.GetStringFromName("pref.resetButton");
+      prefItemLine.appendChild(resetButton);
+
+      let toggleButton = document.createElement("div");
+      toggleButton.className = "pref-button toggle";
+      toggleButton.addEventListener("click", function(event) {
+        AboutConfig.toggleBoolPref(event);
+      });
+      toggleButton.textContent = gStringBundle.GetStringFromName("pref.toggleButton");
+      prefItemLine.appendChild(toggleButton);
+
+      let upButton = document.createElement("div");
+      upButton.className = "pref-button up";
+      upButton.addEventListener("click", function(event) {
+        AboutConfig.incrOrDecrIntPref(event, 1);
+      });
+      prefItemLine.appendChild(upButton);
+
+      let downButton = document.createElement("div");
+      downButton.className = "pref-button down";
+      downButton.addEventListener("click", function(event) {
+        AboutConfig.incrOrDecrIntPref(event, -1);
+      });
+      prefItemLine.appendChild(downButton);
+
+      this.li.appendChild(prefItemLine);
 
       // Delay providing the list item values, until the LI is returned and added to the document
       setTimeout(this._valueSetup.bind(this), INNERHTML_VALUE_DELAY);
     }
 
     return this.li;
   },