Split CupsPrintersEntryList between Saved and Nearby printers

- This CL is in anticipation of the Show More feature to be implemented
  for Saved printers.
- The behavior of CupsPrintersEntryList will soon have customized
  features for saved printers.
- CupsSavedPrinters and CupsNearbyPrinters will now have their own list
  to manage.

Bug: 993822
Test: end to end manual, browsertest
Change-Id: I58d9f4a9920decbb5f4eab23505be52d962e90a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1835703Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: jimmy gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#706132}

chrome/browser/resources/settings/os_settings_resources.grd

@@ -769,12 +769,6 @@
       <structure name="IDR_OS_SETTINGS_CUPS_PRINTERS_ENTRY_JS"
                  file="printing_page/cups_printers_entry.js"
                  type="chrome_html" />
-      <structure name="IDR_OS_SETTINGS_CUPS_PRINTERS_ENTRY_LIST_HTML"
-                 file="printing_page/cups_printers_entry_list.html"
-                 type="chrome_html" />
-      <structure name="IDR_OS_SETTINGS_CUPS_PRINTERS_ENTRY_LIST_JS"
-                 file="printing_page/cups_printers_entry_list.js"
-                 type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_CUPS_PRINTERS_ENTRY_LIST_BEHAVIOR_HTML"
                  file="printing_page/cups_printers_entry_list_behavior.html"
                  type="chrome_html" />

chrome/browser/resources/settings/printing_page/BUILD.gn

@@ -21,7 +21,6 @@ js_type_check("closure_compile") {
       ":cups_printers",
       ":cups_printers_browser_proxy",
       ":cups_printers_entry",
-      ":cups_printers_entry_list",
       ":cups_printers_entry_list_behavior",
       ":cups_printers_entry_manager",
       ":cups_printers_list",
@@ -84,6 +83,7 @@ if (is_chromeos) {
     deps = [
       ":cups_printer_types",
       ":cups_printers_browser_proxy",
+      ":cups_printers_entry",
       ":cups_printers_entry_list_behavior",
       ":cups_printers_entry_manager",
       "//ui/webui/resources/js:list_property_update_behavior",
@@ -134,14 +134,6 @@ if (is_chromeos) {
     ]
   }
 
-  js_library("cups_printers_entry_list") {
-    deps = [
-      ":cups_printer_types",
-      ":cups_printers_browser_proxy",
-      "//ui/webui/resources/js:list_property_update_behavior",
-    ]
-  }
-
   js_library("cups_printers_entry_list_behavior") {
     deps = [
       ":cups_printer_types",
@@ -171,6 +163,7 @@ if (is_chromeos) {
     deps = [
       ":cups_printer_types",
       ":cups_printers_browser_proxy",
+      ":cups_printers_entry",
       ":cups_printers_entry_list_behavior",
       ":cups_printers_entry_manager",
       "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu",

chrome/browser/resources/settings/printing_page/cups_nearby_printers.html

@@ -2,18 +2,39 @@
 
 <link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="cups_printer_types.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
-<link rel="import" href="cups_printers_entry_list.html">
 <link rel="import" href="cups_printers_entry_list_behavior.html">
+<link rel="import" href="cups_printers_entry.html">
 <link rel="import" href="cups_printers_entry_manager.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-cups-nearby-printers">
   <template>
-    <settings-cups-printers-entry-list printers="[[nearbyPrinters]]"
-        search-term="[[searchTerm]]">
-    </settings-cups-printers-entry-list>
+    <style include="cups-printer-shared">
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #no-search-results {
+        margin-top: 20px;
+      }
+    </style>
+
+    <iron-list class="list-frame vertical-list flex-auto" id="printerEntryList"
+        items="[[filteredPrinters_]]">
+      <template>
+        <settings-cups-printers-entry printer-entry="[[item]]">
+        </settings-cups-printers-entry>
+      </template>
+    </iron-list>
+    <div id="no-search-results"
+        hidden="[[!showNoSearchResultsMessage_(searchTerm,
+            filteredPrinters_.*)]]">
+      $i18n{noSearchResults}
+    </div>
   </template>
   <script src="cups_nearby_printers.js"></script>
 </dom-module>

chrome/browser/resources/settings/printing_page/cups_nearby_printers.js

@@ -40,12 +40,49 @@ Polymer({
       type: Number,
       value: -1,
     },
+
+    /**
+     * List of printers filtered through a search term.
+     * @type {!Array<!PrinterListEntry>}
+     * @private
+     */
+    filteredPrinters_: {
+      type: Array,
+      value: () => [],
+    },
   },
 
   listeners: {
     'add-automatic-printer': 'onAddAutomaticPrinter_',
   },
 
+  observers: [
+    'onSearchOrPrintersChanged_(nearbyPrinters.*, searchTerm)'
+  ],
+
+  /**
+   * Redoes the search whenever |searchTerm| or |nearbyPrinters| changes.
+   * @private
+   */
+  onSearchOrPrintersChanged_: function() {
+    if (!this.nearbyPrinters) {
+      return;
+    }
+    // Filter printers through |searchTerm|. If |searchTerm| is empty,
+    // |filteredPrinters_| is just |nearbyPrinters|.
+    const updatedPrinters = this.searchTerm ?
+        this.nearbyPrinters.filter(
+            item => settings.printing.matchesSearchTerm(
+                item.printerInfo,this.searchTerm)) :
+        this.nearbyPrinters.slice();
+
+    updatedPrinters.sort(settings.printing.sortPrinters);
+
+    this.updateList(
+        'filteredPrinters_', printer => printer.printerInfo.printerId,
+        updatedPrinters);
+  },
+
   /**
    * @param {!CustomEvent<{item: !PrinterListEntry}>} e
    * @private
@@ -99,5 +136,13 @@ Polymer({
         'show-cups-printer-toast',
         {resultCode: PrinterSetupResult.PRINTER_UNREACHABLE,
          printerName: printer.printerName});
+  },
+
+  /**
+   * @return {boolean} Returns true if the no search message should be visible.
+   * @private
+   */
+  showNoSearchResultsMessage_: function() {
+    return !!this.searchTerm && !this.filteredPrinters_.length;
   }
 });
\ No newline at end of file

chrome/browser/resources/settings/printing_page/cups_printer_dialog_util.js

@@ -141,6 +141,31 @@ cr.define('settings.printing', function() {
     }
   }
 
+  /**
+   * We sort by printer type, which is based off of a maintained list in
+   * cups_printers_types.js. If the types are the same, we sort alphabetically.
+   * @param {!PrinterListEntry} first
+   * @param {!PrinterListEntry} second
+   * @return {number}
+   */
+  function sortPrinters(first, second) {
+    if (first.printerType == second.printerType) {
+      return settings.printing.alphabeticalSort(
+          first.printerInfo, second.printerInfo);
+    }
+
+    return first.printerType - second.printerType;
+  }
+
+  /**
+   * @param {!CupsPrinterInfo} printer
+   * @param {string} searchTerm
+   * @return {boolean} True if the printer has |searchTerm| in its name.
+   */
+  function matchesSearchTerm(printer, searchTerm) {
+    return printer.printerName.toLowerCase().includes(searchTerm.toLowerCase());
+  }
+
   return {
     isNetworkProtocol: isNetworkProtocol,
     isNameAndAddressValid: isNameAndAddressValid,
@@ -148,5 +173,7 @@ cr.define('settings.printing', function() {
     getBaseName: getBaseName,
     alphabeticalSort: alphabeticalSort,
     getErrorText: getErrorText,
+    sortPrinters: sortPrinters,
+    matchesSearchTerm: matchesSearchTerm,
   };
 });

chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html

@@ -68,6 +68,10 @@
         width: 100%;
       }
 
+      .flex-auto {
+        flex: 1 1 auto;
+      }
+
       .list-item {
         background: none;
         border: none;
@@ -109,6 +113,10 @@
         font-size: 10px;
         margin-inline-start: 5px;
       }
+
+      #no-search-results {
+        text-align: center;
+      }
     </style>
   </template>
 </dom-module>

chrome/browser/resources/settings/printing_page/cups_printers_entry_list.html

-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
-<link rel="import" href="cups_printer_dialog_util.html">
-<link rel="import" href="cups_printer_types.html">
-<link rel="import" href="cups_printers_browser_proxy.html">
-<link rel="import" href="cups_printers_entry.html">
-<link rel="import" href="../settings_shared_css.html">
-
-<dom-module id="settings-cups-printers-entry-list">
-  <template>
-    <style include="settings-shared">
-     :host {
-        display: flex;
-        flex-direction: column;
-     }
-
-     iron-list {
-        flex: 1 1 auto;
-     }
-
-     #no-search-results {
-       margin-top: 20px;
-       text-align: center;
-     }
-
-    </style>
-    <iron-list class="list-frame vertical-list" id="printerEntryList"
-        items="[[filteredPrinters_]]">
-      <template>
-        <settings-cups-printers-entry printer-entry="[[item]]">
-        </settings-cups-printers-entry>
-      </template>
-    </iron-list>
-    <div id="no-search-results"
-        hidden="[[!showNoSearchResultsMessage_]]">
-      $i18n{noSearchResults}
-    </div>
-  </template>
-  <script src="cups_printers_entry_list.js"></script>
-</dom-module>

chrome/browser/resources/settings/printing_page/cups_printers_entry_list.js

-// Copyright 2019 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-/**
- * @fileoverview 'settings-cups-printers-entry-list' is a component for a list
- * of PrinterListEntry's.
- */
-Polymer({
-  is: 'settings-cups-printers-entry-list',
-
-  behaviors: [
-    ListPropertyUpdateBehavior,
-  ],
-
-  properties: {
-    /**
-     * List of printers.
-     * @type {!Array<!PrinterListEntry>}
-     */
-    printers: {
-      type: Array,
-      value: () => [],
-    },
-
-    /**
-     * List of printers filtered through a search term.
-     * @type {!Array<!PrinterListEntry>}
-     * @private
-     */
-    filteredPrinters_: {
-      type: Array,
-      value: () => [],
-    },
-
-    /**
-     * Search term for filtering |printers|.
-     * @type {string}
-     */
-    searchTerm: {
-      type: String,
-      value: '',
-    },
-
-    /**
-     * Whether to show the no search results message.
-     * @type {boolean}
-     * @private
-     */
-     showNoSearchResultsMessage_: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  observers: [
-    'onSearchChanged_(printers.*, searchTerm)'
-  ],
-
-  /**
-   * Redoes the search whenever |searchTerm| or |printers| changes.
-   * @private
-   */
-  onSearchChanged_: function() {
-    if (!this.printers) {
-      return;
-    }
-    // Filter printers through |searchTerm|. If |searchTerm| is empty,
-    // |filteredPrinters_| is just |printers|.
-    const updatedPrinters = this.searchTerm ?
-        this.printers.filter(
-            item =>
-                this.matchesSearchTerm_(item.printerInfo, this.searchTerm)) :
-        this.printers.slice();
-
-    updatedPrinters.sort(this.sortPrinters_);
-
-    this.updateList(
-        'filteredPrinters_', printer => printer.printerInfo.printerId,
-        updatedPrinters);
-
-    this.showNoSearchResultsMessage_ =
-        !!this.searchTerm && !this.filteredPrinters_.length;
-  },
-
-
-  /**
-   * @param {!PrinterListEntry} first
-   * @param {!PrinterListEntry} second
-   * @return {number}
-   * @private
-   */
-  sortPrinters_: function(first, second) {
-    if (first.printerType == second.printerType) {
-      return settings.printing.alphabeticalSort(
-          first.printerInfo, second.printerInfo);
-    }
-
-    // PrinterType sort order maintained in cups_printer_types.js
-    return first.printerType - second.printerType;
-  },
-
-  /**
-   * @param {!CupsPrinterInfo} printer
-   * @param {string} searchTerm
-   * @return {boolean} True if the printer has |searchTerm| in its name.
-   * @private
-   */
-  matchesSearchTerm_: function(printer, searchTerm) {
-    return printer.printerName.toLowerCase().includes(searchTerm.toLowerCase());
-  }
-});

chrome/browser/resources/settings/printing_page/cups_saved_printers.html

@@ -3,14 +3,26 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="cups_printer_types.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
-<link rel="import" href="cups_printers_entry_list.html">
 <link rel="import" href="cups_printers_entry_list_behavior.html">
+<link rel="import" href="cups_printers_entry.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-cups-saved-printers">
   <template>
+    <style include="cups-printer-shared">
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #no-search-results {
+        margin-bottom: 20px;
+      }
+    </style>
+
     <cr-action-menu>
       <button id="editButton" class="dropdown-item" on-click="onEditTap_">
         $i18n{editPrinter}
@@ -20,10 +32,18 @@
       </button>
     </cr-action-menu>
 
-    <style include="settings-shared"></style>
-    <settings-cups-printers-entry-list printers="[[savedPrinters]]"
-        search-term="[[searchTerm]]">
-    </settings-cups-printers-entry-list>
+    <iron-list class="list-frame vertical-list flex-auto" id="printerEntryList"
+        items="[[filteredPrinters_]]">
+      <template>
+        <settings-cups-printers-entry printer-entry="[[item]]">
+        </settings-cups-printers-entry>
+      </template>
+    </iron-list>
+    <div id="no-search-results"
+        hidden="[[!showNoSearchResultsMessage_(searchTerm,
+            filteredPrinters_.*)]]">
+      $i18n{noSearchResults}
+    </div>
   </template>
   <script src="cups_saved_printers.js"></script>
 </dom-module>

chrome/browser/resources/settings/printing_page/cups_saved_printers.js

@@ -40,12 +40,24 @@ Polymer({
       type: Number,
       value: -1,
     },
+
+    /**
+     * List of printers filtered through a search term.
+     * @type {!Array<!PrinterListEntry>}
+     * @private
+     */
+    filteredPrinters_: {
+      type: Array,
+      value: () => [],
+    },
   },
 
   listeners: {
     'open-action-menu': 'onOpenActionMenu_',
   },
 
+  observers: ['onSearchOrPrintersChanged_(savedPrinters.*, searchTerm)'],
+
   /** @private {settings.CupsPrintersBrowserProxy} */
   browserProxy_: null,
 
@@ -54,6 +66,29 @@ Polymer({
     this.browserProxy_ = settings.CupsPrintersBrowserProxyImpl.getInstance();
   },
 
+  /**
+   * Redoes the search whenever |searchTerm| or |savedPrinters| changes.
+   * @private
+   */
+  onSearchOrPrintersChanged_: function() {
+    if (!this.savedPrinters) {
+      return;
+    }
+    // Filter printers through |searchTerm|. If |searchTerm| is empty,
+    // |filteredPrinters_| is just |savedPrinters|.
+    const updatedPrinters = this.searchTerm ?
+        this.savedPrinters.filter(
+            item => settings.printing.matchesSearchTerm(
+                item.printerInfo, this.searchTerm)) :
+        this.savedPrinters.slice();
+
+    updatedPrinters.sort(settings.printing.sortPrinters);
+
+    this.updateList(
+        'filteredPrinters_', printer => printer.printerInfo.printerId,
+        updatedPrinters);
+  },
+
   /**
    * @param {!CustomEvent<{target: !HTMLElement, item: !PrinterListEntry}>} e
    * @private
@@ -91,4 +126,12 @@ Polymer({
     this.$$('cr-action-menu').close();
   },
 
+  /**
+   * @return {boolean} Returns true if the no search message should be visible.
+   * @private
+   */
+  showNoSearchResultsMessage_: function() {
+    return !!this.searchTerm && !this.filteredPrinters_.length;
+  }
+
 });

chrome/browser/resources/settings/settings_resources.grd

@@ -981,12 +981,6 @@
         <structure name="IDR_SETTINGS_CUPS_PRINTERS_ENTRY_JS"
                    file="printing_page/cups_printers_entry.js"
                    type="chrome_html" />
-        <structure name="IDR_SETTINGS_CUPS_PRINTERS_ENTRY_LIST_HTML"
-                   file="printing_page/cups_printers_entry_list.html"
-                   type="chrome_html" />
-        <structure name="IDR_SETTINGS_CUPS_PRINTERS_ENTRY_LIST_JS"
-                   file="printing_page/cups_printers_entry_list.js"
-                   type="chrome_html" />
         <structure name="IDR_SETTINGS_CUPS_PRINTERS_ENTRY_LIST_BEHAVIOR_HTML"
                    file="printing_page/cups_printers_entry_list_behavior.html"
                    type="chrome_html" />

chrome/test/data/webui/settings/chromeos/cups_printer_entry_tests.js

@@ -173,158 +173,3 @@ suite('CupsPrintersEntry', function() {
     assertTrue(!!printerEntryTestElement.$$('.icon-more-vert'));
   });
 });
-
-suite('CupsPrinterEntryList', function() {
-  /**
-   * A printry entry list created before each test.
-   * @type {PrintersEntryList}
-   */
-  let printerEntryListTestElement = null;
-
-  /** @type {?Array<!PrinterListEntry>} */
-  let printerList = [];
-
-  /** @type {string} */
-  let searchTerm = '';
-
-  setup(function() {
-    PolymerTest.clearBody();
-    printerEntryListTestElement =
-        document.createElement('settings-cups-printers-entry-list');
-    assertTrue(!!printerEntryListTestElement);
-    document.body.appendChild(printerEntryListTestElement);
-  });
-
-  teardown(function() {
-    printerEntryListTestElement.remove();
-    printerEntryListTestElement = null;
-    printerList = [];
-    searchTerm = '';
-  });
-
-  /**
-   * Helper function that creates a new PrinterListEntry.
-   * @param {string} printerName
-   * @param {string} printerAddress
-   * @param {string} printerId
-   * @param {string} printerType
-   * @return {!PrinterListEntry}
-   */
-  function createPrinterListEntry(
-      printerName, printerAddress, printerId, printerType) {
-    const entry = {
-      printerInfo: {
-        ppdManufacturer: '',
-        ppdModel: '',
-        printerAddress: printerAddress,
-        printerDescription: '',
-        printerId: printerId,
-        printerManufacturer: '',
-        printerModel: '',
-        printerMakeAndModel: '',
-        printerName: printerName,
-        printerPPDPath: '',
-        printerPpdReference: {
-          userSuppliedPpdUrl: '',
-          effectiveMakeAndModel: '',
-          autoconf: false,
-        },
-        printerProtocol: 'ipp',
-        printerQueue: 'moreinfohere',
-        printerStatus: '',
-      },
-      printerType: printerType,
-    };
-    return entry;
-  }
-
-  test('SearchTermFiltersCorrectPrinters', function() {
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('test1', 'address', '1', PrinterType.SAVED));
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('test2', 'address', '2', PrinterType.SAVED));
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('google', 'address', '3', PrinterType.SAVED));
-
-    Polymer.dom.flush();
-
-    verifyVisiblePrinters(printerEntryListTestElement, [
-      createPrinterListEntry('google', 'address', '3', PrinterType.SAVED),
-      createPrinterListEntry('test1', 'address', '1', PrinterType.SAVED),
-      createPrinterListEntry('test2', 'address', '2', PrinterType.SAVED)
-    ]);
-
-    searchTerm = 'google';
-    // Set the search term and filter out the printers. Filtering "google"
-    // should result in one visible entry and two hidden entries.
-    verifySearchQueryResults(
-        printerEntryListTestElement,
-        [createPrinterListEntry('google', 'address', '3', PrinterType.SAVED)],
-        searchTerm);
-
-    // Change the search term and assert that entries are filtered correctly.
-    // Filtering "test" should result in two visible entries and one hidden
-    // entry.
-    searchTerm = 'test';
-    verifySearchQueryResults(
-        printerEntryListTestElement,
-        [
-          createPrinterListEntry('test1', 'address', '1', PrinterType.SAVED),
-          createPrinterListEntry('test2', 'address', '2', PrinterType.SAVED)
-        ],
-        searchTerm);
-
-    // Add more printers and assert that they are correctly filtered.
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('test3', 'address', '4', PrinterType.SAVED));
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('google2', 'address', '5', PrinterType.SAVED));
-
-    Polymer.dom.flush();
-
-    verifySearchQueryResults(
-        printerEntryListTestElement,
-        [
-          createPrinterListEntry('test1', 'address', '1', PrinterType.SAVED),
-          createPrinterListEntry('test2', 'address', '2', PrinterType.SAVED),
-          createPrinterListEntry('test3', 'address', '4', PrinterType.SAVED)
-        ],
-        searchTerm);
-  });
-
-  test('NoSearchFound', function() {
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('test1', 'address', '1', PrinterType.SAVED));
-    printerEntryListTestElement.push(
-        'printers',
-        createPrinterListEntry('google', 'address', '2', PrinterType.SAVED));
-
-    Polymer.dom.flush();
-
-    searchTerm = 'google';
-    // Set the search term and filter out the printers. Filtering "google"
-    // should result in one visible entry and two hidden entries.
-    verifySearchQueryResults(
-        printerEntryListTestElement,
-        [createPrinterListEntry('google', 'address', '2', PrinterType.SAVED)],
-        searchTerm);
-
-    // Change search term to something that has no matches.
-    searchTerm = 'noSearchFound';
-    verifySearchQueryResults(printerEntryListTestElement, [], searchTerm);
-
-    // Change search term back to "google" and verify that the No search found
-    // message is no longer there.
-    searchTerm = 'google';
-    verifySearchQueryResults(
-        printerEntryListTestElement,
-        [createPrinterListEntry('google', 'address', '2', PrinterType.SAVED)],
-        searchTerm);
-  });
-});

chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js

@@ -896,7 +896,7 @@ TEST_F('OSSettingsPluginVmPageTest', 'AllJsTests', () => {
 var OSSettingsPrinterEntryTest = class extends OSSettingsBrowserTest {
   /** @override */
   get browsePreload() {
-    return super.browsePreload + 'printing_page/cups_printers_entry_list.html';
+    return super.browsePreload + 'printing_page/cups_printers_entry.html';
   }
 
   /** @override */