Bug 1497727 - Add ability to add prefs on new "about:config" page. r=paolo

Differential Revision: https://phabricator.services.mozilla.com/D12719

--HG--
extra : rebase_source : 0be710db3c60907ee89a3241c688870a34ac93cc

browser/components/aboutconfig/content/aboutconfig.js

@@ -39,7 +39,7 @@ function onLoad() {
   gPrefArray.sort((a, b) => a.name > b.name);
 
   document.getElementById("search").addEventListener("keypress", function(e) {
-    if (e.code == "Enter") {
+    if (e.key == "Enter") {
       filterPrefs();
     }
   });
@@ -62,6 +62,18 @@ function onLoad() {
       prefRow.classList.remove("has-user-value");
       prefRow.appendChild(getPrefRow(pref));
       prefRow.querySelector("td.cell-edit").firstChild.focus();
+    } else if (button.classList.contains("add-true")) {
+      addNewPref(prefRow.firstChild.innerHTML, true);
+    } else if (button.classList.contains("add-false")) {
+      addNewPref(prefRow.firstChild.innerHTML, false);
+    } else if (button.classList.contains("add-Number") ||
+               button.classList.contains("add-String")) {
+      addNewPref(prefRow.firstChild.innerHTML,
+                 button.classList.contains("add-Number") ? 0 : "");
+      prefRow = [...document.getElementById("prefs").getElementsByTagName("tr")]
+                .find(row => row.querySelector("td").textContent == prefName);
+      startEditingPref(prefRow, gPrefArray.find(p => p.name == prefName));
+      prefRow.querySelector("td.cell-value").firstChild.firstChild.focus();
     } else if (button.classList.contains("button-toggle")) {
       // Toggle the pref and update gPrefArray.
       Services.prefs.setBoolPref(prefName, !pref.value);
@@ -89,13 +101,16 @@ function onLoad() {
     }
   });
 
-  document.getElementById("prefs").appendChild(createPrefsFragment(gPrefArray));
+  filterPrefs();
 }
 
 function filterPrefs() {
   let substring = document.getElementById("search").value.trim();
-  let fragment = createPrefsFragment(gPrefArray.filter(pref => pref.name.includes(substring)));
   document.getElementById("prefs").textContent = "";
+  if (substring && !gPrefArray.some(pref => pref.name == substring)) {
+    document.getElementById("prefs").appendChild(createNewPrefFragment(substring));
+  }
+  let fragment = createPrefsFragment(gPrefArray.filter(pref => pref.name.includes(substring)));
   document.getElementById("prefs").appendChild(fragment);
 }
 
@@ -114,6 +129,38 @@ function createPrefsFragment(prefArray) {
   return fragment;
 }
 
+function createNewPrefFragment(name) {
+  let fragment = document.createDocumentFragment();
+  let row = document.createElement("tr");
+  row.classList.add("has-user-value");
+  row.setAttribute("aria-label", name);
+  let nameCell = document.createElement("td");
+  nameCell.append(name);
+  row.appendChild(nameCell);
+
+  let valueCell = document.createElement("td");
+  valueCell.classList.add("cell-value");
+  let guideText = document.createElement("span");
+  document.l10n.setAttributes(guideText, "about-config-pref-add");
+  valueCell.appendChild(guideText);
+  for (let item of ["true", "false", "Number", "String"]) {
+    let optionBtn = document.createElement("button");
+    optionBtn.textContent = item;
+    optionBtn.classList.add("add-" + item);
+    valueCell.appendChild(optionBtn);
+  }
+  row.appendChild(valueCell);
+
+  let editCell = document.createElement("td");
+  row.appendChild(editCell);
+
+  let buttonCell = document.createElement("td");
+  row.appendChild(buttonCell);
+
+  fragment.appendChild(row);
+  return fragment;
+}
+
 function getPrefRow(pref) {
   let rowFragment = document.createDocumentFragment();
   let nameCell = document.createElement("td");
@@ -243,3 +290,15 @@ function prefHasDefaultValue(name) {
   } catch (ex) {}
   return false;
 }
+
+function addNewPref(name, value) {
+  Preferences.set(name, value);
+  gPrefArray.push({
+    name,
+    value,
+    hasUserValue: true,
+    hasDefaultValue: false,
+  });
+  gPrefArray.sort((a, b) => a.name > b.name);
+  filterPrefs();
+}

browser/components/aboutconfig/content/aboutconfig.notftl

@@ -7,6 +7,7 @@ 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 =

browser/components/aboutconfig/test/browser/browser_edit.js

@@ -1,6 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+ChromeUtils.import("resource://gre/modules/Preferences.jsm", this);
+
 const PAGE_URL = "chrome://browser/content/aboutconfig/aboutconfig.html";
 
 add_task(async function setup() {
@@ -19,6 +21,41 @@ add_task(async function setup() {
   });
 });
 
+add_task(async function test_add_user_pref() {
+  await BrowserTestUtils.withNewTab({
+    gBrowser,
+    url: PAGE_URL,
+  }, async browser => {
+    await ContentTask.spawn(browser, null, () => {
+      Assert.ok(!Services.prefs.getChildList("").find(pref => pref == "testPref"));
+      let search = content.document.getElementById("search");
+      search.value = "testPref";
+      search.focus();
+    });
+
+    for (let [buttonSelector, expectedValue] of [
+      [".add-true", true],
+      [".add-false", false],
+      [".add-Number", 0],
+      [".add-String", ""],
+    ]) {
+      EventUtils.sendKey("return");
+      await ContentTask.spawn(browser, [buttonSelector, expectedValue],
+                                      ([buttonSelector, expectedValue]) => {
+        ChromeUtils.import("resource://gre/modules/Preferences.jsm");
+
+        content.document.querySelector("#prefs button" + buttonSelector).click();
+        Assert.ok(Services.prefs.getChildList("").find(pref => pref == "testPref"));
+        Assert.ok(Preferences.get("testPref") === expectedValue);
+        content.document.querySelector("#prefs button[data-l10n-id='about-config-pref-delete']").click();
+        let search = content.document.getElementById("search");
+        search.value = "testPref";
+        search.focus();
+      });
+    }
+  });
+});
+
 add_task(async function test_delete_user_pref() {
   Services.prefs.setBoolPref("userAddedPref", true);
   await BrowserTestUtils.withNewTab({

browser/components/aboutconfig/test/browser/browser_search.js

@@ -37,8 +37,11 @@ add_task(async function test_search() {
     await ContentTask.spawn(browser, prefArray, aPrefArray => {
       let filteredPrefArray =
           aPrefArray.filter(pref => pref.includes("button"));
+      // Adding +1 to the list since button does not match an exact
+      // preference name then a row is added for the user to add a
+      // new button preference if desired
       Assert.equal(content.document.getElementById("prefs").childElementCount,
-                   filteredPrefArray.length);
+                   filteredPrefArray.length + 1);
 
       // Test empty search returns all preferences.
       let search = content.document.getElementById("search");
@@ -59,8 +62,9 @@ add_task(async function test_search() {
 
     EventUtils.sendKey("return");
     await ContentTask.spawn(browser, prefArray, aPrefArray => {
+      // Expecting 1 row to be returned since it offers the ability to add
       Assert.equal(content.document.getElementById("prefs").childElementCount,
-                   0);
+                   1);
 
       // Test added preferences search returns 2 preferences.
       let search = content.document.getElementById("search");