Bug 1444428 - Remove unsafeSetInnerHTML in config.js. r=nechen
authorJohann Hofmann <jhofmann@mozilla.com>
Fri, 13 Apr 2018 15:12:15 +0200
changeset 413875 8acb65ad7377ee946e9f55b2f5ae00e02ed25900
parent 413440 ceb3db3b31a07a2aaa164bdacb21f4135373aadb
child 413876 484c9ddde7ddda6dacf2be3d7e3e2d4c9d6f9a46
push id33853
push usercbrindusan@mozilla.com
push dateTue, 17 Apr 2018 09:51:13 +0000
treeherdermozilla-central@8b0ba3f7d099 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnechen
bugs1444428
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1444428 - Remove unsafeSetInnerHTML in config.js. r=nechen 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;
   },