Bug 1517507 - Part 2 - Improve validation of numeric input. r=bgrins
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Tue, 08 Jan 2019 11:48:18 +0000
changeset 510008 be8b406d7fe4f05bd1f6bbfeba57b1bc740642fe
parent 510007 f24ea722320a0493d3d39cc0127457370aae9b94
child 510009 13e4170bccb10d6d69fb9d69bbe75eda75017557
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1517507
milestone66.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 1517507 - Part 2 - Improve validation of numeric input. r=bgrins Differential Revision: https://phabricator.services.mozilla.com/D15663
browser/components/aboutconfig/content/aboutconfig.css
browser/components/aboutconfig/content/aboutconfig.js
browser/components/aboutconfig/content/aboutconfig.notftl
browser/components/aboutconfig/test/browser/browser_edit.js
--- a/browser/components/aboutconfig/content/aboutconfig.css
+++ b/browser/components/aboutconfig/content/aboutconfig.css
@@ -62,12 +62,13 @@
 #prefs > tr > td.cell-name {
   padding-inline-start: 30px;
 }
 
 .cell-value {
   word-break: break-all;
 }
 
-td.cell-value > form > input[type="text"] {
+td.cell-value > form > input {
+  -moz-appearance: textfield;
   width: 100%;
   box-sizing: border-box;
 }
--- a/browser/components/aboutconfig/content/aboutconfig.js
+++ b/browser/components/aboutconfig/content/aboutconfig.js
@@ -252,56 +252,51 @@ function startEditingPref(row, arrayEntr
     gPrefRowInEdit.appendChild(getPrefRow(gPrefInEdit));
   }
   gPrefRowInEdit = row;
 
   let name = getPrefName(row);
   gPrefInEdit = arrayEntry;
 
   let valueCell = row.querySelector("td.cell-value");
-  let oldValue = valueCell.textContent;
   valueCell.textContent = "";
   // The form is needed for the invalid-tooltip to appear.
   let form = document.createElement("form");
-  form.id = "form-" + name;
+  form.id = "form-edit";
   let inputField = document.createElement("input");
-  inputField.type = "text";
-  inputField.value = oldValue;
-  if (Services.prefs.getPrefType(name) == Services.prefs.PREF_INT) {
-    inputField.setAttribute("pattern", "-?[0-9]*");
-    document.l10n.setAttributes(inputField, "about-config-pref-input-number");
+  inputField.value = arrayEntry.value;
+  if (arrayEntry.value.constructor.name == "Number") {
+    inputField.type = "number";
+    inputField.required = true;
+    inputField.min = -2147483648;
+    inputField.max = 2147483647;
   } else {
-    document.l10n.setAttributes(inputField, "about-config-pref-input-string");
+    inputField.type = "text";
   }
-  inputField.placeholder = oldValue;
   form.appendChild(inputField);
   valueCell.appendChild(form);
 
   let buttonCell = row.querySelector("td.cell-edit");
   buttonCell.childNodes[0].remove();
   let button = document.createElement("button");
   button.classList.add("primary", "button-save");
   document.l10n.setAttributes(button, "about-config-pref-save");
-  button.setAttribute("form", form.id);
+  button.setAttribute("form", "form-edit");
   buttonCell.appendChild(button);
 }
 
 function endEditingPref(row) {
   let name = gPrefInEdit.name;
   let input = row.querySelector("td.cell-value").firstChild.firstChild;
   let newValue = input.value;
-
   if (Services.prefs.getPrefType(name) == Services.prefs.PREF_INT) {
-    let numberValue = parseInt(newValue);
-    if (!/^-?[0-9]*$/.test(newValue) || isNaN(numberValue)) {
-      input.setCustomValidity(input.title);
+    if (!input.reportValidity()) {
       return;
     }
-    newValue = numberValue;
-    Services.prefs.setIntPref(name, newValue);
+    Services.prefs.setIntPref(name, parseInt(newValue));
   } else {
     Services.prefs.setStringPref(name, newValue);
   }
 
   // Update gPrefArray.
   gPrefInEdit.refreshValue();
   // Update UI.
   row.textContent = "";
--- a/browser/components/aboutconfig/content/aboutconfig.notftl
+++ b/browser/components/aboutconfig/content/aboutconfig.notftl
@@ -11,15 +11,11 @@ about-config-warning-button = I accept t
 about-config-title = about:config
 
 about-config-search =
     .placeholder = Search
 
 about-config-pref-add = Add as:
 about-config-pref-toggle = Toggle
 about-config-pref-edit = Edit
-about-config-pref-input-number =
-    .title = Please enter an integer value
-about-config-pref-input-string =
-    .title = Please enter the value
 about-config-pref-save = Save
 about-config-pref-reset = Reset
 about-config-pref-delete = Delete
--- a/browser/components/aboutconfig/test/browser/browser_edit.js
+++ b/browser/components/aboutconfig/test/browser/browser_edit.js
@@ -113,20 +113,24 @@ add_task(async function test_modify() {
     row.valueInput.value = "test";
     let intRow = this.getRow("test.aboutconfig.modify.number");
     intRow.editColumnButton.click();
     Assert.equal(intRow.valueInput.value,
       Preferences.get("test.aboutconfig.modify.number"));
     Assert.ok(!row.valueInput);
     Assert.equal(row.value, Preferences.get("test.aboutconfig.modify.string"));
 
-    // Test regex check for Int pref.
-    intRow.valueInput.value += "a";
-    intRow.editColumnButton.click();
-    Assert.ok(!intRow.valueInput.checkValidity());
+    // Test validation of integer values.
+    for (let invalidValue of
+         ["", " ", "a", "1.5", "-2147483649", "2147483648"]) {
+      intRow.valueInput.value = invalidValue;
+      intRow.editColumnButton.click();
+      // We should still be in edit mode.
+      Assert.ok(intRow.valueInput);
+    }
 
     // Test correct saving and DOM-update.
     for (let prefName of [
       "test.aboutconfig.modify.string",
       "test.aboutconfig.modify.number",
       PREF_NUMBER_DEFAULT_ZERO,
       PREF_STRING_DEFAULT_EMPTY,
     ]) {