Bug 1312374 - Search sites listed in Settings of Site Data on host, r=Gijs

MozReview-Commit-ID: J74Jg3xkJNe

--HG--
extra : rebase_source : f210762a50ec02fc3e80449b3bdc6408b0613f48

browser/components/preferences/in-content/tests/browser_advanced_siteData.js

@@ -35,19 +35,43 @@ const mockOfflineAppCacheHelper = {
 
 const mockSiteDataManager = {
   sites: new Map([
+    [
+      "https://account.xyz.com/",
+      {
+        usage: 1024 * 200,
+        host: "account.xyz.com",
+        status: Ci.nsIPermissionManager.ALLOW_ACTION
+      }
+    ],
     [
       "https://shopping.xyz.com/",
       {
-        usage: 102400,
+        usage: 1024 * 100,
         host: "shopping.xyz.com",
+        status: Ci.nsIPermissionManager.DENY_ACTION
+      }
+    ],
+    [
+      "https://video.bar.com/",
+      {
+        usage: 1024 * 20,
+        host: "video.bar.com",
         status: Ci.nsIPermissionManager.ALLOW_ACTION
       }
     ],
     [
       "https://music.bar.com/",
       {
-        usage: 10240,
+        usage: 1024 * 10,
         host: "music.bar.com",
+        status: Ci.nsIPermissionManager.DENY_ACTION
+      }
+    ],
+    [
+      "https://books.foo.com/",
+      {
+        usage: 1024 * 2,
+        host: "books.foo.com",
         status: Ci.nsIPermissionManager.ALLOW_ACTION
       }
     ],
@@ -304,3 +328,49 @@ add_task(function* () {
   }
 });
 
+add_task(function* () {
+  yield SpecialPowers.pushPrefEnv({set: [["browser.storageManager.enabled", true]]});
+
+  mockSiteDataManager.register();
+  let updatePromise = promiseSitesUpdated();
+  yield openPreferencesViaOpenPreferencesAPI("advanced", "networkTab", { leaveOpen: true });
+  yield updatePromise;
+
+  // Open the siteDataSettings subdialog
+  let doc = gBrowser.selectedBrowser.contentDocument;
+  let settingsBtn = doc.getElementById("siteDataSettings");
+  let dialogOverlay = doc.getElementById("dialogOverlay");
+  let dialogPromise = promiseLoadSubDialog("chrome://browser/content/preferences/siteDataSettings.xul");
+  settingsBtn.doCommand();
+  yield dialogPromise;
+  is(dialogOverlay.style.visibility, "visible", "The dialog should be visible");
+
+  let frameDoc = doc.getElementById("dialogFrame").contentDocument;
+  let searchBox = frameDoc.getElementById("searchBox");
+  let mockOrigins = Array.from(mockSiteDataManager.sites.keys());
+
+  searchBox.value = "xyz";
+  searchBox.doCommand();
+  assertSitesListed(mockOrigins.filter(o => o.includes("xyz")));
+
+  searchBox.value = "bar";
+  searchBox.doCommand();
+  assertSitesListed(mockOrigins.filter(o => o.includes("bar")));
+
+  searchBox.value = "";
+  searchBox.doCommand();
+  assertSitesListed(mockOrigins);
+
+  mockSiteDataManager.unregister();
+  yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
+
+  function assertSitesListed(origins) {
+    let sitesList = frameDoc.getElementById("sitesList");
+    let totalSitesNumber = sitesList.getElementsByTagName("richlistitem").length;
+    is(totalSitesNumber, origins.length, "Should list the right sites number");
+    origins.forEach(origin => {
+      let site = sitesList.querySelector(`richlistitem[data-origin="${origin}"]`);
+      ok(site instanceof XULElement, `Should list the site of ${origin}`);
+    });
+  }
+});

browser/components/preferences/siteDataSettings.css

@@ -2,6 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+#searchBoxContainer {
+  -moz-box-align: center;
+}
+
 #sitesList {
   min-height: 20em;
 }

browser/components/preferences/siteDataSettings.js

@@ -23,6 +23,7 @@ let gSiteDataSettings = {
   _sites: null,
 
   _list: null,
+  _searchBox: null,
 
   init() {
     function setEventListener(id, eventType, callback) {
@@ -31,6 +32,7 @@ let gSiteDataSettings = {
     }
 
     this._list = document.getElementById("sitesList");
+    this._searchBox = document.getElementById("searchBox");
     SiteDataManager.getSites().then(sites => {
       this._sites = sites;
       let sortCol = document.getElementById("hostCol");
@@ -41,6 +43,7 @@ let gSiteDataSettings = {
     setEventListener("hostCol", "click", this.onClickTreeCol);
     setEventListener("usageCol", "click", this.onClickTreeCol);
     setEventListener("statusCol", "click", this.onClickTreeCol);
+    setEventListener("searchBox", "command", this.onCommandSearch);
   },
 
   /**
@@ -89,19 +92,29 @@ let gSiteDataSettings = {
     col.setAttribute("data-last-sortDirection", sortDirection);
   },
 
+  /**
+   * @param sites {Array} array of metadata of sites
+   */
   _buildSitesList(sites) {
     // Clear old entries.
-    while (this._list.childNodes.length > 1) {
-      this._list.removeChild(this._list.lastChild);
+    let oldItems = this._list.querySelectorAll("richlistitem");
+    for (let item of oldItems) {
+      item.remove();
     }
 
     let prefStrBundle = document.getElementById("bundlePreferences");
+    let keyword = this._searchBox.value.toLowerCase().trim();
     for (let data of sites) {
+      let host = data.uri.host;
+      if (keyword && !host.includes(keyword)) {
+        continue;
+      }
+
       let statusStrId = data.status === Ci.nsIPermissionManager.ALLOW_ACTION ? "important" : "default";
       let size = DownloadUtils.convertByteUnits(data.usage);
       let item = document.createElement("richlistitem");
       item.setAttribute("data-origin", data.uri.spec);
-      item.setAttribute("host", data.uri.host);
+      item.setAttribute("host", host);
       item.setAttribute("status", prefStrBundle.getString(statusStrId));
       item.setAttribute("usage", prefStrBundle.getFormattedString("siteUsage", size));
       this._list.appendChild(item);
@@ -111,5 +124,9 @@ let gSiteDataSettings = {
   onClickTreeCol(e) {
     this._sortSites(this._sites, e.target);
     this._buildSitesList(this._sites);
+  },
+
+  onCommandSearch() {
+    this._buildSitesList(this._sites);
   }
 };

browser/components/preferences/siteDataSettings.xul

@@ -26,6 +26,12 @@
     <description>&settings.description;</description>
     <separator class="thin"/>
 
+    <hbox id="searchBoxContainer">
+      <label accesskey="&search.accesskey;" control="searchBox">&search.label;</label>
+      <textbox id="searchBox" type="search" flex="1"/>
+    </hbox>
+    <separator class="thin"/>
+
     <richlistbox id="sitesList" orient="vertical" flex="1">
       <listheader>
         <treecol flex="4" width="50" label="&hostCol.label;" id="hostCol"/>

browser/locales/en-US/chrome/browser/preferences/siteDataSettings.dtd

@@ -7,3 +7,5 @@
 <!ENTITY     hostCol.label                 "Site">
 <!ENTITY     statusCol.label               "Status">
 <!ENTITY     usageCol.label                "Storage">
+<!ENTITY     search.label                  "Search:">
+<!ENTITY     search.accesskey              "S">