AllSites: Support specifying default sort method.

Allow passing a URL parameter to specify the sort method to be used upon
page load. This will be used by a storage pressure notification which
optionally navigates the user to all sites. The all-sites page will be
sorted by storage, when the user is forwarded here from a storage
pressure notification.

example usage: chrome://settings/content/all?sort=data-stored

Bug: 997258
Change-Id: I4ccc547c2dc4aad974f06debd6e0d4e461e4a0b3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1865259
Commit-Queue: Jarryd Goodman <jarrydg@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720599}

chrome/browser/resources/settings/site_settings/all_sites.js

@@ -132,6 +132,13 @@ Polymer({
           /** @type {!CustomEvent<!{item: !SiteGroup, index: number}>} */ (e);
       this.selectedItem_ = event.detail;
     });
+
+    if (loadTimeData.getBoolean('enableStoragePressureUI')) {
+      const sortParam = settings.getQueryParameters().get('sort');
+      if (Object.values(this.sortMethods_).includes(sortParam)) {
+        this.$.sortMethod.value = sortParam;
+      }
+    }
     this.sortMethod_ = this.$.sortMethod.value;
   },
 

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -3135,6 +3135,10 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
       base::FeatureList::IsEnabled(
           content_settings ::
               kImprovedCookieControlsForThirdPartyCookieBlocking));
+
+  html_source->AddBoolean(
+      "enableStoragePressureUI",
+      base::FeatureList::IsEnabled(features::kStoragePressureUI));
 }
 
 #if defined(OS_CHROMEOS)

chrome/test/data/webui/settings/all_sites_tests.js

@@ -103,14 +103,23 @@ suite('AllSites', function() {
   /**
    * Configures the test element.
    * @param {Array<dictionary>} prefs The prefs to use.
+   * @param {string=} sortOrder the URL param used to establish default sort
+   * order.
    */
-  function setUpCategory(prefs) {
+  function setUpAllSites(prefs, sortOrder) {
     browserProxy.setPrefs(prefs);
-    settings.navigateTo(settings.routes.SITE_SETTINGS_ALL);
+    if (sortOrder) {
+      loadTimeData.overrideValues({enableStoragePressureUI: true});
+      settings.navigateTo(
+          settings.routes.SITE_SETTINGS_ALL,
+          new URLSearchParams(`sort=${sortOrder}`));
+    } else {
+      settings.navigateTo(settings.routes.SITE_SETTINGS_ALL);
+    }
   }
 
   test('All sites list populated', function() {
-    setUpCategory(prefsVarious);
+    setUpAllSites(prefsVarious);
     testElement.populateList_();
     return browserProxy.whenCalled('getAllSites').then(() => {
       // Use resolver to ensure that the list container is populated.
@@ -134,7 +143,7 @@ suite('AllSites', function() {
 
   test('search query filters list', function() {
     const SEARCH_QUERY = 'foo';
-    setUpCategory(prefsVarious);
+    setUpAllSites(prefsVarious);
     testElement.populateList_();
     return browserProxy.whenCalled('getAllSites')
         .then(() => {
@@ -166,7 +175,7 @@ suite('AllSites', function() {
   });
 
   test('can be sorted by most visited', function() {
-    setUpCategory(prefsVarious);
+    setUpAllSites(prefsVarious);
     testElement.populateList_();
 
     return browserProxy.whenCalled('getAllSites').then(() => {
@@ -210,7 +219,7 @@ suite('AllSites', function() {
 
   test('can be sorted by storage', function() {
     localDataBrowserProxy.setCookieDetails(TEST_COOKIE_LIST);
-    setUpCategory(prefsVarious);
+    setUpAllSites(prefsVarious);
     testElement.populateList_();
     return browserProxy.whenCalled('getAllSites')
         .then(() => {
@@ -266,8 +275,40 @@ suite('AllSites', function() {
         });
   });
 
+  test('can be sorted by storage by passing URL param', function() {
+    // The default sorting (most visited) will have the ascending storage
+    // values. With the URL param, we expect the sites to be sorted by usage in
+    // descending order.
+    document.body.innerHTML = '';
+    setUpAllSites(prefsVarious, 'data-stored');
+    testElement = document.createElement('all-sites');
+    document.body.appendChild(testElement);
+    testElement.currentRouteChanged(settings.routes.SITE_SETTINGS_ALL);
+    return browserProxy.whenCalled('getAllSites').then(() => {
+      Polymer.dom.flush();
+      const siteEntries =
+          testElement.$.listContainer.querySelectorAll('site-entry');
+
+      assertEquals(
+          'google.com',
+          siteEntries[0]
+              .root.querySelector('#displayName .url-directionality')
+              .innerText.trim());
+      assertEquals(
+          'bar.com',
+          siteEntries[1]
+              .root.querySelector('#displayName .url-directionality')
+              .innerText.trim());
+      assertEquals(
+          'foo.com',
+          siteEntries[2]
+              .root.querySelector('#displayName .url-directionality')
+              .innerText.trim());
+    });
+  });
+
   test('can be sorted by name', function() {
-    setUpCategory(prefsVarious);
+    setUpAllSites(prefsVarious);
     testElement.populateList_();
     return browserProxy.whenCalled('getAllSites').then(() => {
       Polymer.dom.flush();
@@ -291,8 +332,25 @@ suite('AllSites', function() {
     });
   });
 
+  test('can sort by name by passing URL param', function() {
+    document.body.innerHTML = '';
+    setUpAllSites(prefsVarious, 'name');
+    testElement = document.createElement('all-sites');
+    document.body.appendChild(testElement);
+    testElement.currentRouteChanged(settings.routes.SITE_SETTINGS_ALL);
+    return browserProxy.whenCalled('getAllSites').then(() => {
+      Polymer.dom.flush();
+      const siteEntries =
+          testElement.$.listContainer.querySelectorAll('site-entry');
+
+      assertEquals('bar.com', siteEntries[0].$.displayName.innerText.trim());
+      assertEquals('foo.com', siteEntries[1].$.displayName.innerText.trim());
+      assertEquals('google.com', siteEntries[2].$.displayName.innerText.trim());
+    });
+  });
+
   test('merging additional SiteGroup lists works', function() {
-    setUpCategory(prefsVarious);
+    setUpAllSites(prefsVarious);
     testElement.populateList_();
     return browserProxy.whenCalled('getAllSites').then(() => {
       Polymer.dom.flush();

chrome/test/data/webui/settings/test_site_settings_prefs_browser_proxy.js

@@ -217,10 +217,17 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
         return siteGroup.etldPlus1 == etldPlus1Name;
       });
 
+      const mockUsage = index * 100;
+
+      // TODO(https://crbug.com/1021606): Add test where existing evaluates to
+      // true.
       if (existing) {
-        existing.origins.push(test_util.createOriginInfo(origin));
+        const originInfo =
+            test_util.createOriginInfo(origin, {usage: mockUsage});
+        existing.origins.push(originInfo);
       } else {
-        const entry = test_util.createSiteGroup(etldPlus1Name, [origin]);
+        const entry =
+            test_util.createSiteGroup(etldPlus1Name, [origin], mockUsage);
         result.push(entry);
       }
     });

chrome/test/data/webui/settings/test_util.js

@@ -154,10 +154,16 @@ cr.define('test_util', function() {
    *     |originList|.
    * @param {!Array<string>} originList A list of the origins with the same
    *     eTLD+1.
+   * @param {number=} mockUsage The override initial usage value for each origin
+   *     in the site group.
    * @return {SiteGroup}
    */
-  function createSiteGroup(eTLDPlus1Name, originList) {
-    const originInfoList = originList.map(origin => createOriginInfo(origin));
+  function createSiteGroup(eTLDPlus1Name, originList, mockUsage) {
+    if (mockUsage == undefined) {
+      mockUsage = 0;
+    }
+    const originInfoList = originList.map(
+        (origin) => createOriginInfo(origin, {usage: mockUsage}));
     return {
       etldPlus1: eTLDPlus1Name,
       origins: originInfoList,