Add Show more button to CupsPrinterEntryList

- Introduces a Show more button that expands the printer list and shows
  the complete printer list.
- With this change, we only show the first 3 saved printers while the
  rest are hidden beneath a "Show more" button.
- Adds browser test to test all corner cases with the list behavior.

Bug:993822
Test: end to end manual, browsertest

Change-Id: Ia2128482b02ce759fa94cf9345473664b37877bf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1808079
Commit-Queue: jimmy gong <jimmyxgong@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#706214}

chrome/app/settings_strings.grdp

@@ -1511,6 +1511,9 @@
     <message name="IDS_SETTINGS_PRINTING_CUPS_SAVED_PRINTERS_TITLE" desc="Text for the title of the user's saved printers list.">
       Your saved printers
     </message>
+    <message name="IDS_SETTINGS_PRINTING_CUPS_SHOW_MORE" desc="Text for the button to show more printers when there are more printers than currently displayed to the user.">
+      Show more
+    </message>
     <message name="IDS_SETTINGS_PRINTING_CUPS_ADD_PRINTERS_NEARBY_TITLE" desc="Text for the title of the dialog that is used to add nearby printers.">
       Add a nearby printer
     </message>

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

@@ -166,6 +166,15 @@ cr.define('settings.printing', function() {
     return printer.printerName.toLowerCase().includes(searchTerm.toLowerCase());
   }
 
+  /**
+   * @param {!PrinterListEntry} first
+   * @param {!PrinterListEntry} second
+   * @return {boolean}
+   */
+  function arePrinterIdsEqual(first, second) {
+    return first.printerInfo.printerId == second.printerInfo.printerId;
+  }
+
   return {
     isNetworkProtocol: isNetworkProtocol,
     isNameAndAddressValid: isNameAndAddressValid,
@@ -175,5 +184,6 @@ cr.define('settings.printing', function() {
     getErrorText: getErrorText,
     sortPrinters: sortPrinters,
     matchesSearchTerm: matchesSearchTerm,
+    arePrinterIdsEqual: arePrinterIdsEqual,
   };
 });

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

@@ -56,7 +56,7 @@ const CupsPrintersEntryListBehavior = {
   },
 
   /**
-   * Non-empty/null fields indicate the applicable change to be notified.
+   * Non-empty params indicate the applicable change to be notified.
    * @param {!Array<!PrinterListEntry>} savedPrinters
    * @param {!Array<!PrinterListEntry>} addedPrinters
    * @param {!Array<!PrinterListEntry>} removedPrinters
@@ -67,6 +67,14 @@ const CupsPrintersEntryListBehavior = {
     this.updateList(
         'savedPrinters', printer => printer.printerInfo.printerId,
         savedPrinters);
+
+    assert(!(addedPrinters.length && removedPrinters.length));
+
+    if (addedPrinters.length) {
+      this.onSavedPrintersAdded(addedPrinters);
+    } else if (removedPrinters.length) {
+      this.onSavedPrintersRemoved(removedPrinters);
+    }
   },
 
   /**
@@ -77,5 +85,14 @@ const CupsPrintersEntryListBehavior = {
     this.updateList(
         'nearbyPrinters', printer => printer.printerInfo.printerId,
         printerList);
-  }
+  },
+
+  // CupsPrintersEntryListBehavior methods. Override these in the
+  // implementations.
+
+  /** @param{!Array<!PrinterListEntry>} addedPrinters */
+  onSavedPrintersAdded: function(addedPrinters) {},
+
+  /** @param{!Array<!PrinterListEntry>} removedPrinters */
+  onSavedPrintersRemoved: function(removedPrinters) {},
 };
\ No newline at end of file

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

@@ -22,16 +22,6 @@ let PrintersListWithDeltasCallback;
 let PrintersListCallback;
 
 cr.define('settings.printing', function() {
-  /**
-   * @param {!PrinterListEntry} first
-   * @param {!PrinterListEntry} second
-   * @return {boolean}
-   * @private
-   */
-  function arePrinterIdsEqual_(first, second) {
-    return first.printerInfo.printerId == second.printerInfo.printerId;
-  }
-
   /**
    * Finds the printers that are in |firstArr| but not in |secondArr|.
    * @param {!Array<!PrinterListEntry>} firstArr
@@ -41,7 +31,8 @@ cr.define('settings.printing', function() {
    */
   function findDifference_(firstArr, secondArr) {
     return firstArr.filter((firstArrEntry) => {
-      return !secondArr.some(arePrinterIdsEqual_.bind(this, firstArrEntry));
+      return !secondArr.some(
+          p => p.printerInfo.printerId == firstArrEntry.printerInfo.printerId);
     });
   }
 

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

@@ -3,6 +3,7 @@
 <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-flex-layout/iron-flex-layout-classes.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">
@@ -12,7 +13,8 @@
 
 <dom-module id="settings-cups-saved-printers">
   <template>
-    <style include="cups-printer-shared">
+    <style include="settings-shared iron-flex iron-flex-alignment
+        iron-flex-factors">
       :host {
         display: flex;
         flex-direction: column;
@@ -21,6 +23,28 @@
       #no-search-results {
         margin-bottom: 20px;
       }
+
+      /** Height of iron list row entry. */
+      #show-more-container {
+        min-height: var(--settings-row-min-height);
+      }
+
+      /** Border line that is the same size as a list entry's border. */
+      #show-more-line-separator {
+        border-bottom: var(--cr-separator-line);
+        left: 60px;
+        position: relative;
+        right: 20px;
+        width: 596px;
+      }
+
+      #show-more-icon {
+        --cr-icon-button-margin-end: 0;
+      }
+
+      #show-more-text {
+        flex: 1;
+      }
     </style>
 
     <cr-action-menu>
@@ -39,6 +63,20 @@
         </settings-cups-printers-entry>
       </template>
     </iron-list>
+    <template is="dom-if" id="show-more-button-section"
+        if="[[shouldPrinterListBeCollapsed_(searchTerm, savedPrinters.*,
+            newPrinters_.*, hasShowMoreBeenTapped_)]]" restamp>
+      <div id="show-more-line-separator"></div>
+      <div class="list-frame layout horizontal" id="show-more-container">
+        <div id="show-more-text">$i18n{showMorePrinters}</div>
+        <cr-icon-button class="action-button" id="show-more-icon"
+            iron-icon="cr:expand-more"
+            on-click="onShowMoreTap_"
+            title=$i18n{showMorePrinters}>
+        </cr-icon-button>
+      </div>
+    </template>
+
     <div id="no-search-results"
         hidden="[[!showNoSearchResultsMessage_(searchTerm,
             filteredPrinters_.*)]]">

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

@@ -2,6 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+(function() {
+
+// If the Show more button is visible, the minimum number of printers we show
+// is 3.
+const kMinVisiblePrinters = 3;
+
+/**
+ * Move a printer's position in |printerArr| from |fromIndex| to |toIndex|.
+ * @param {!Array<!PrinterListEntry>} printerArr
+ * @param {number} fromIndex
+ * @param {number} toIndex
+ */
+function moveEntryInPrinters(printerArr, fromIndex, toIndex) {
+  const element = printerArr[fromIndex];
+  printerArr.splice(fromIndex, 1);
+  printerArr.splice(toIndex, 0, element);
+}
+
 /**
  * @fileoverview 'settings-cups-saved-printers' is a list container for Saved
  * Printers.
@@ -50,17 +68,49 @@ Polymer({
       type: Array,
       value: () => [],
     },
+
+    /**
+     * Array of new PrinterListEntry's that were added during this session.
+     * @type {!Array<!PrinterListEntry>}
+     * @private
+     */
+    newPrinters_: {
+      type: Array,
+      value: () => [],
+    },
+
+    /**
+     * Keeps track of whether the user has tapped the Show more button. A search
+     * term will expand the collapsed list, so we need to keep track of whether
+     * the list expanded because of a search term or because the user tapped on
+     * the Show more button.
+     * @private
+     */
+    hasShowMoreBeenTapped_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   listeners: {
     'open-action-menu': 'onOpenActionMenu_',
   },
 
-  observers: ['onSearchOrPrintersChanged_(savedPrinters.*, searchTerm)'],
+  observers: [
+      'onSearchOrPrintersChanged_(savedPrinters.*, searchTerm,' +
+          'hasShowMoreBeenTapped_, newPrinters_.*)'
+  ],
 
   /** @private {settings.CupsPrintersBrowserProxy} */
   browserProxy_: null,
 
+  /**
+   * The number of printers we display if hidden printers are allowed.
+   * kMinVisiblePrinters is the default value and we never show fewer printers
+   * if the Show more button is visible.
+   */
+  visiblePrinterCounter_: kMinVisiblePrinters,
+
   /** @override */
   created: function() {
     this.browserProxy_ = settings.CupsPrintersBrowserProxyImpl.getInstance();
@@ -74,15 +124,8 @@ Polymer({
     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);
+    const updatedPrinters = this.getVisiblePrinters_();
 
     this.updateList(
         'filteredPrinters_', printer => printer.printerInfo.printerId,
@@ -121,6 +164,40 @@ Polymer({
     this.closeActionMenu_();
   },
 
+  /** @private */
+  onShowMoreTap_: function() {
+    this.hasShowMoreBeenTapped_ = true;
+  },
+
+  /**
+   * Gets the printers to be shown in the UI. These printers are filtered
+   * by the search term, alphabetically sorted (if applicable), and are the
+   * printers not hidden by the Show more section.
+   * @return {!Array<!PrinterListEntry>} Returns only the visible printers.
+   * @private
+   */
+  getVisiblePrinters_: function() {
+    // 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.moveNewlyAddedPrinters_(updatedPrinters, 0 /* toIndex */);
+
+    if (this.shouldPrinterListBeCollapsed_()) {
+      // If the Show more button is visible, we only display the first
+      // N < |visiblePrinterCounter_| printers and the rest are hidden.
+      return updatedPrinters.filter(
+          (printer, idx) => idx < this.visiblePrinterCounter_);
+    }
+    return updatedPrinters;
+  },
+
   /** @private */
   closeActionMenu_: function() {
     this.$$('cr-action-menu').close();
@@ -132,6 +209,87 @@ Polymer({
    */
   showNoSearchResultsMessage_: function() {
     return !!this.searchTerm && !this.filteredPrinters_.length;
+  },
+
+  /** @param{!Array<!PrinterListEntry>} addedPrinters */
+  onSavedPrintersAdded: function(addedPrinters) {
+    const currArr = this.newPrinters_.slice();
+    for (const printer of addedPrinters) {
+      this.visiblePrinterCounter_++;
+      currArr.push(printer);
+    }
+
+    this.set('newPrinters_', currArr);
+  },
+
+  /** @param{!Array<!PrinterListEntry>} removedPrinters */
+  onSavedPrintersRemoved: function(removedPrinters) {
+    const currArr = this.newPrinters_.slice();
+    for (const printer of removedPrinters) {
+      const newPrinterRemovedIdx = currArr.findIndex(
+          p => p.printerInfo.printerId == printer.printerInfo.printerId);
+      // If the removed printer is a recently added printer, remove it from
+      // |currArr|.
+      if (newPrinterRemovedIdx > -1) {
+        currArr.splice(newPrinterRemovedIdx, 1);
+      }
+
+      this.visiblePrinterCounter_ = Math.max(
+          kMinVisiblePrinters, --this.visiblePrinterCounter_);
+    }
+
+    this.set('newPrinters_', currArr);
+  },
+
+  /**
+   * Keeps track of whether the Show more button should be visible which means
+   * that the printer list is collapsed. There are two ways a collapsed list
+   * may be expanded: the Show more button is tapped or if there is a search
+   * term.
+   * @return {boolean} True if the printer list should be collapsed.
+   * @private
+   */
+  shouldPrinterListBeCollapsed_: function() {
+    // If |searchTerm| is set, never collapse the list.
+    if (this.searchTerm) {
+      return false;
+    }
+
+    // If |hasShowMoreBeenTapped_| is set to true, never collapse the list.
+    if (this.hasShowMoreBeenTapped_) {
+      return false;
+    }
+
+    // If the total number of saved printers does not exceed the number of
+    // visible printers, there is no need for the list to be collapsed.
+    if (this.savedPrinters.length - this.visiblePrinterCounter_ < 1) {
+      return false;
+    }
+
+    return true;
+  },
+
+  /**
+   * Moves printers that are in |newPrinters_| to position |toIndex| of
+   * |printerArr|. This moves all recently added printers to the top of the
+   * printer list.
+   * @param {!Array<!PrinterListEntry>} printerArr
+   * @param {number} toIndex
+   * @private
+   */
+  moveNewlyAddedPrinters_: function(printerArr, toIndex) {
+    if (!this.newPrinters_.length) {
+      return;
     }
 
+    // We have newly added printers, move them to the top of the list.
+    for (const printer of this.newPrinters_) {
+      const idx = printerArr.findIndex(
+          p => p.printerInfo.printerId == printer.printerInfo.printerId);
+      if (idx > -1) {
+        moveEntryInPrinters(printerArr, idx, toIndex);
+      }
+    }
+  }
 });
+})();

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

@@ -2363,6 +2363,7 @@ void AddPrintingStrings(content::WebUIDataSource* html_source) {
     {"printerModel", IDS_SETTINGS_PRINTING_CUPS_PRINTER_DETAILS_MODEL},
     {"printerQueue", IDS_SETTINGS_PRINTING_CUPS_PRINTER_DETAILS_QUEUE},
     {"savedPrintersTitle", IDS_SETTINGS_PRINTING_CUPS_SAVED_PRINTERS_TITLE},
+    {"showMorePrinters", IDS_SETTINGS_PRINTING_CUPS_SHOW_MORE},
     {"addPrintersNearbyTitle",
      IDS_SETTINGS_PRINTING_CUPS_ADD_PRINTERS_NEARBY_TITLE},
     {"addPrintersManuallyTitle",

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

@@ -319,20 +319,9 @@ suite('CupsSavedPrintersTests', function() {
 
   setup(function() {
     const mojom = chromeos.networkConfig.mojom;
-    printerList = [
-      createCupsPrinterInfo('google', '4', 'id4'),
-      createCupsPrinterInfo('test1', '1', 'id1'),
-      createCupsPrinterInfo('test2', '2', 'id2'),
-      createCupsPrinterInfo('test3', '3', 'id3'),
-    ];
 
     cupsPrintersBrowserProxy =
         new printerBrowserProxy.TestCupsPrintersBrowserProxy;
-    // |cupsPrinterBrowserProxy| needs to have a list of saved printers before
-    // initializing the landing page.
-    cupsPrintersBrowserProxy.printerList = {printerList: printerList};
-    settings.CupsPrintersBrowserProxyImpl.instance_ = cupsPrintersBrowserProxy;
-
     // Simulate internet connection.
     mojoApi_.resetForTest();
     mojoApi_.setNetworkTypeEnabledState(mojom.NetworkType.kWiFi, true);
@@ -343,15 +332,6 @@ suite('CupsSavedPrintersTests', function() {
 
     PolymerTest.clearBody();
     settings.navigateTo(settings.routes.CUPS_PRINTERS);
-
-    page = document.createElement('settings-cups-printers');
-    // Enable feature flag to show the new saved printers list.
-    // TODO(jimmyxgong): Remove this line when the feature flag is removed.
-    page.enableUpdatedUi_ = true;
-    document.body.appendChild(page);
-    assertTrue(!!page);
-
-    Polymer.dom.flush();
   });
 
   teardown(function() {
@@ -363,9 +343,38 @@ suite('CupsSavedPrintersTests', function() {
     page = null;
   });
 
-  /** @param {!CupsPrinterInfo} */
+  /** @param {!Array<!CupsPrinterInfo>} printerList */
+  function createCupsPrinterPage(printers) {
+    printerList = printers;
+    // |cupsPrinterBrowserProxy| needs to have a list of saved printers before
+    // initializing the landing page.
+    cupsPrintersBrowserProxy.printerList = {printerList: printerList};
+    settings.CupsPrintersBrowserProxyImpl.instance_ = cupsPrintersBrowserProxy;
+
+    page = document.createElement('settings-cups-printers');
+    // Enable feature flag to show the new saved printers list.
+    // TODO(jimmyxgong): Remove this line when the feature flag is removed.
+    page.enableUpdatedUi_ = true;
+    document.body.appendChild(page);
+    assertTrue(!!page);
+
+    Polymer.dom.flush();
+  }
+
+  /** @param {!CupsPrinterInfo} printer*/
   function addNewSavedPrinter(printer) {
     printerList.push(printer);
+    updateSavedPrinters();
+  }
+
+  /** @param {number} id*/
+  function removeSavedPrinter(id) {
+    const idx = printerList.findIndex(p => p.printerId == id);
+    printerList.splice(idx, 1);
+    updateSavedPrinters();
+  }
+
+  function updateSavedPrinters() {
     cupsPrintersBrowserProxy.printerList = {printerList: printerList};
     cr.webUIListenerCallback(
         'on-printers-changed', cupsPrintersBrowserProxy.printerList);
@@ -373,6 +382,11 @@ suite('CupsSavedPrintersTests', function() {
   }
 
   test('SavedPrintersSuccessfullyPopulates', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -388,17 +402,17 @@ suite('CupsSavedPrintersTests', function() {
           let printerListEntries = getPrinterEntries(savedPrintersElement);
 
           verifyPrintersList(printerListEntries, printerList);
-
-          addNewSavedPrinter(createCupsPrinterInfo('test5', '5', 'id5'));
-
-          printerListEntries = getPrinterEntries(savedPrintersElement);
-          verifyPrintersList(printerListEntries, printerList);
         });
   });
 
   test('SuccessfullyRemoveMultipleSavedPrinters', function() {
     let savedPrinterEntries = [];
 
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -421,6 +435,11 @@ suite('CupsSavedPrintersTests', function() {
     let savedPrintersList = [];
     let savedPrinterEntries = [];
 
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -451,6 +470,11 @@ suite('CupsSavedPrintersTests', function() {
     let editDialog = null;
     let savedPrinterEntries = null;
 
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -498,6 +522,11 @@ suite('CupsSavedPrintersTests', function() {
     let savedPrinterEntries = null;
     let editDialog = null;
 
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -546,6 +575,11 @@ suite('CupsSavedPrintersTests', function() {
   });
 
   test('SavedPrintersSearchTermFiltersCorrectPrinters', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -580,27 +614,31 @@ suite('CupsSavedPrintersTests', function() {
               [
                 createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
                 createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED),
-                createPrinterListEntry('test3', '3', 'id3', PrinterType.SAVED)
               ],
               searchTerm);
 
           // Add more printers and assert that they are correctly filtered.
-          addNewSavedPrinter(createCupsPrinterInfo('test4', '5', 'id5'));
+          addNewSavedPrinter(createCupsPrinterInfo('test3', '3', 'id3'));
           addNewSavedPrinter(createCupsPrinterInfo('google2', '6', 'id6'));
+          Polymer.dom.flush();
 
           verifySearchQueryResults(
               savedPrintersElement,
               [
-                createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
-                createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED),
                 createPrinterListEntry('test3', '3', 'id3', PrinterType.SAVED),
-                createPrinterListEntry('test4', '5', 'id5', PrinterType.SAVED)
+                createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+                createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
               ],
               searchTerm);
         });
   });
 
   test('SavedPrintersNoSearchFound', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
     return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
         .then(() => {
           // Wait for saved printers to populate.
@@ -642,6 +680,344 @@ suite('CupsSavedPrintersTests', function() {
               searchTerm);
         });
   });
+
+  test('ShowMoreButtonIsInitiallyHiddenAndANewPrinterIsAdded', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(() => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+
+          let printerEntryListTestElement =
+              savedPrintersElement.$$('#printerEntryList');
+
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
+          ]);
+          // Assert that the Show more button is hidden because printer list
+          // length is <= 3.
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Newly added printers will always be visible and inserted to the
+          // top of the list.
+          addNewSavedPrinter(createCupsPrinterInfo('test3', '3', 'id3'));
+          expectedVisiblePrinters = [
+            createPrinterListEntry('test3', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
+          ];
+          verifyVisiblePrinters(
+              printerEntryListTestElement, expectedVisiblePrinters);
+          // Assert that the Show more button is still hidden because all newly
+          // added printers are visible.
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+        });
+  });
+
+  test('PressShowMoreButton', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+      createCupsPrinterInfo('test3', '3', 'id3'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(() => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+
+          const printerEntryListTestElement =
+              savedPrintersElement.$$('#printerEntryList');
+
+          // There are 4 total printers but only 3 printers are visible and 1 is
+          // hidden underneath the Show more section.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED),
+          ]);
+          // Assert that the Show more button is shown since printer list length
+          // is > 3.
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Click on the Show more button.
+          savedPrintersElement.$$('#show-more-icon').click();
+          Polymer.dom.flush();
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+          // Clicking on the Show more button reveals all hidden printers.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED),
+            createPrinterListEntry('test3', '3', 'id3', PrinterType.SAVED)
+          ]);
+        });
+  });
+
+  test('ShowMoreButtonIsInitiallyShownAndWithANewPrinterAdded', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+      createCupsPrinterInfo('test3', '3', 'id3'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(() => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+
+          const printerEntryListTestElement =
+              savedPrintersElement.$$('#printerEntryList');
+
+          // There are 4 total printers but only 3 printers are visible and 1 is
+          // hidden underneath the Show more section.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED),
+          ]);
+          // Assert that the Show more button is shown since printer list length
+          // is > 3.
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Newly added printers will always be visible.
+          addNewSavedPrinter(createCupsPrinterInfo('test5', '5', 'id5'));
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('test5', '5', 'id5', PrinterType.SAVED),
+            createPrinterListEntry('google', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
+          ]);
+          // Assert that the Show more button is still shown.
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+        });
+  });
+
+  test('ShowMoreButtonIsShownAndRemovePrinters', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '3', 'id3'),
+      createCupsPrinterInfo('google2', '4', 'id4'),
+      createCupsPrinterInfo('google3', '5', 'id5'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(() => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+
+          const printerEntryListTestElement =
+              savedPrintersElement.$$('#printerEntryList');
+
+          // There are 5 total printers but only 3 printers are visible and 2
+          // are hidden underneath the Show more section.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('google3', '5', 'id5', PrinterType.SAVED)
+          ]);
+          // Assert that the Show more button is shown since printer list length
+          // is > 3.
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Simulate removing 'google' printer.
+          removeSavedPrinter('id3');
+          // Printer list has 4 elements now, but since the list is still
+          // collapsed we should still expect only 3 elements to be visible.
+          // Since printers were initially alphabetically sorted, we should
+          // expect 'test1' to be the next visible printer.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('google3', '5', 'id5', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED)
+          ]);
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Simulate removing 'google2' printer.
+          removeSavedPrinter('id4');
+          // Printer list has 3 elements now, the Show more button should be
+          // hidden.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google3', '5', 'id5', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
+          ]);
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+        });
+  });
+
+  test('ShowMoreButtonIsShownAndSearchQueryFiltersCorrectly', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '3', 'id3'),
+      createCupsPrinterInfo('google2', '4', 'id4'),
+      createCupsPrinterInfo('google3', '5', 'id5'),
+      createCupsPrinterInfo('google4', '6', 'id6'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(() => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+
+          const printerEntryListTestElement =
+              savedPrintersElement.$$('#printerEntryList');
+
+          // There are 6 total printers but only 3 printers are visible and 3
+          // are hidden underneath the Show more section.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('google3', '5', 'id5', PrinterType.SAVED)
+          ]);
+          // Assert that the Show more button is shown since printer list length
+          // is > 3.
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Set search term to 'google' and expect 4 visible printers.
+          searchTerm = 'google';
+          savedPrintersElement.searchTerm = searchTerm;
+          Polymer.dom.flush();
+          verifySearchQueryResults(
+              savedPrintersElement,
+              [
+                createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+                createPrinterListEntry(
+                    'google2', '4', 'id4', PrinterType.SAVED),
+                createPrinterListEntry(
+                    'google3', '5', 'id5', PrinterType.SAVED),
+                createPrinterListEntry('google4', '6', 'id6', PrinterType.SAVED)
+              ],
+              searchTerm);
+          // Having a search term should hide the Show more button.
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Search for a term with no matching printers. Expect Show more
+          // button to still be hidden.
+          searchTerm = 'noSearchFound';
+          savedPrintersElement.searchTerm = searchTerm;
+          Polymer.dom.flush();
+          verifySearchQueryResults(savedPrintersElement, [], searchTerm);
+
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Change search term and expect new set of visible printers.
+          searchTerm = 'test';
+          savedPrintersElement.searchTerm = searchTerm;
+          Polymer.dom.flush();
+          verifySearchQueryResults(
+              savedPrintersElement,
+              [
+                createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED),
+                createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
+              ],
+              searchTerm);
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Remove the search term and expect the collapsed list to appear
+          // again.
+          searchTerm = '';
+          savedPrintersElement.searchTerm = searchTerm;
+          Polymer.dom.flush();
+          const expectedVisiblePrinters = [
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('google3', '5', 'id5', PrinterType.SAVED)
+          ];
+          verifySearchQueryResults(
+              savedPrintersElement, expectedVisiblePrinters, searchTerm);
+          verifyVisiblePrinters(
+              printerEntryListTestElement, expectedVisiblePrinters);
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+        });
+  });
+
+  test('ShowMoreButtonAddAndRemovePrinters', function() {
+    createCupsPrinterPage([
+      createCupsPrinterInfo('google', '3', 'id3'),
+      createCupsPrinterInfo('google2', '4', 'id4'),
+      createCupsPrinterInfo('test1', '1', 'id1'),
+      createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(() => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+
+          const printerEntryListTestElement =
+              savedPrintersElement.$$('#printerEntryList');
+
+          // There are 4 total printers but only 3 printers are visible and 1 is
+          // hidden underneath the Show more section.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED)
+          ]);
+          // Assert that the Show more button is shown since printer list length
+          // is > 3.
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Add a new printer and expect it to be at the top of the list.
+          addNewSavedPrinter(createCupsPrinterInfo('newPrinter', '5', 'id5'));
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('newPrinter', '5', 'id5', PrinterType.SAVED),
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED),
+            createPrinterListEntry('test1', '1', 'id1', PrinterType.SAVED)
+          ]);
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Now simulate removing printer 'test1'.
+          removeSavedPrinter('id1');
+          // If the number of visible printers is > 3, removing printers will
+          // decrease the number of visible printers until there are only 3
+          // visible printers. In this case, we remove 'test1' and now only
+          // have 3 visible printers and 1 hidden printer: 'test2'.
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('newPrinter', '5', 'id5', PrinterType.SAVED),
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('google2', '4', 'id4', PrinterType.SAVED)
+          ]);
+          assertTrue(!!savedPrintersElement.$$('#show-more-container'));
+
+          // Remove another printer and assert that we still have 3 visible
+          // printers but now 'test2' is our third visible printer.
+          removeSavedPrinter('id4');
+          verifyVisiblePrinters(printerEntryListTestElement, [
+            createPrinterListEntry('newPrinter', '5', 'id5', PrinterType.SAVED),
+            createPrinterListEntry('google', '3', 'id3', PrinterType.SAVED),
+            createPrinterListEntry('test2', '2', 'id2', PrinterType.SAVED)
+          ]);
+          // Printer list length is <= 3, Show more button should be hidden.
+          assertFalse(!!savedPrintersElement.$$('#show-more-container'));
+        });
+  });
 });
 
 suite('CupsNearbyPrintersTests', function() {