Add "Check Connection" message to updated settings printer

- Displays a message to users if there is no connection to
  the internet.
- This CL adds cloud off icons for settings printers landing
  page.
- Fixes a bug where cupsPrinters wasn't correctly checking for
  connectivity status.
- Updates browserTests.
- Updates fake network api's for testing.
- This CL is hidden behind the enableUpdatedUi feature flag.

Bug: 965721
Test: End to End manual, browserTests
Change-Id: Ic0cec85aeba408a02d7ec1bb864a8ae00c31c915
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1715731
Commit-Queue: jimmy gong <jimmyxgong@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683684}

chrome/app/settings_strings.grdp

@@ -1607,6 +1607,9 @@
     <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_REQUIRE_INTERNET_MESSAGE" desc="The message shown when there is no internet access to set up a printer.">
       Connect to the internet to add a printer
     </message>
+    <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_CHECK_CONNECTION_MESSAGE" desc="The message shown when there is no internet connection for detecting available printers">
+      Please check your connection to see available printers in your network
+    </message>
     <message name="IDS_SETTINGS_PRINTING_CUPS_EDIT_PRINTER_DIALOG_TITLE" desc="Text for the title of the dialog that is used to edit a CUPS printer's information.">
       Edit printer
     </message>

chrome/browser/resources/settings/icons.html

@@ -12,6 +12,7 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="googleg"><path d="M16.58 8H9v2.75h4.47c-.24 1.2-1.42 3.27-4.47 3.27-2.72 0-4.93-2.25-4.93-5.02S6.28 3.98 9 3.98c1.54 0 2.57.66 3.17 1.22l2.19-2.12C12.97 1.79 11.16 1 9 1 4.58 1 1 4.58 1 9s3.58 8 8 8c4.62 0 7.68-3.25 7.68-7.82 0-.46-.04-.83-.1-1.18z"></path></g>
       <g id="location-on"><path d="M10,2 C6.95928571,2 4.5,4.504 4.5,7.6 C4.5,11.8 10,18 10,18 C10,18 15.5,11.8 15.5,7.6 C15.5,4.504 13.0407143,2 10,2 Z M10,9.5 C8.896,9.5 8,8.604 8,7.5 C8,6.396 8.896,5.5 10,5.5 C11.104,5.5 12,6.396 12,7.5 C12,8.604 11.104,9.5 10,9.5 Z"></path></g>
       <g id="vpn-key"><path d="M10.4727273,8 C9.87272727,6.2525 8.26181818,5 6.36363636,5 C3.95272727,5 2,7.01375 2,9.5 C2,11.98625 3.95272727,14 6.36363636,14 C8.26181818,14 9.87272727,12.7475 10.4727273,11 L13.6363636,11 L13.6363636,14 L16.5454545,14 L16.5454545,11 L18,11 L18,8 L10.4727273,8 Z M6.36363636,11 C5.56,11 4.90909091,10.32875 4.90909091,9.5 C4.90909091,8.67125 5.56,8 6.36363636,8 C7.16727273,8 7.81818182,8.67125 7.81818182,9.5 C7.81818182,10.32875 7.16727273,11 6.36363636,11 Z"></path></g>
+      <g id="cloud_off"><path d="M14.8713111,16.0002 L6,16.0002 C3.239,16.0002 1,13.7622 1,11.0002 C1,8.58475294 2.71868905,6.59044755 4.99627833,6.12516722 L2,3.12888889 L3.12888889,2 L18,16.8711111 L16.8711111,18 L14.8713111,16.0002 Z M17.8921876,14.7632987 L7.33083687,4.20194798 C8.11843435,3.75577808 9.02717677,3.5002 10,3.5002 C12.71,3.5002 14.957,5.4612 15.411,8.0412 C17.424,8.2502 19,9.9312 19,12.0002 C19,13.0718701 18.5784721,14.0451601 17.8921876,14.7632987 Z"></path></g>
     </defs>
   </svg>
 </iron-iconset-svg>

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

@@ -10,6 +10,8 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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-icon/iron-icon.html">
 <link rel="import" href="cups_add_printer_dialog.html">
 <link rel="import" href="cups_edit_printer_dialog.html">
 <link rel="import" href="cups_printer_shared_css.html">
@@ -19,11 +21,10 @@
 
 <dom-module id="settings-cups-printers">
   <template>
-    <style include="cups-printer-shared action-link">
+    <style include="cups-printer-shared action-link iron-flex
+        iron-flex-alignment">
       .custom-list-item {
-        align-items: center;
         border-bottom: var(--cr-separator-line);
-        display: flex;
         min-height: var(--settings-row-min-height);
       }
 
@@ -42,6 +43,20 @@
         flex: 1;
       }
 
+      #cloudOffIcon {
+        --iron-icon-fill-color: rgb(95, 99, 104);
+        margin-bottom: 16px;
+      }
+
+      #connectionMessage {
+        text-align: center;
+        width: 250px;
+      }
+
+      #noConnectivityContentContainer {
+        margin-top: 32px;
+      }
+
       #noSearchResultsMessage {
         color: var(--md-loading-message-color);
         font-size: 16px;
@@ -102,9 +117,6 @@
         <a href="$i18n{printingCUPSPrintLearnMoreUrl}" target="_blank">
           $i18n{learnMore}
         </a>
-        <div class="secondary" hidden="[[canAddPrinter_]]">
-          $i18n{requireNetworkMessage}
-        </div>
         <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter_,
             prefs.native_printing.user_native_printers_allowed.value)]]">
           <cr-policy-pref-indicator
@@ -114,21 +126,33 @@
         </template>
       </div>
 
-      <div id="addPrinterSection">
-        <div class="custom-list-item">
-          <div id="addPrinterText">$i18n{addCupsPrinter}</div>
-          <cr-button class="action-button" id="addPrinter"
-              on-click="onAddPrinterTap_"
-              disabled="[[!addPrinterButtonActive_(canAddPrinter_,
-                  prefs.native_printing.user_native_printers_allowed.value)]]">
-            $i18n{addCupsPrinter}
-          </cr-button>
+      <template is="dom-if" if="[[canAddPrinter_]]">
+        <div id="addPrinterSection">
+          <div class="layout horizontal center custom-list-item">
+            <div id="addPrinterText">$i18n{addCupsPrinter}</div>
+            <cr-button class="action-button" id="addPrinter"
+                on-click="onAddPrinterTap_"
+                disabled="[[!addPrinterButtonActive_(canAddPrinter_,
+                    prefs.native_printing.user_native_printers_allowed.value)]]"
+            >
+              $i18n{addCupsPrinter}
+            </cr-button>
+          </div>
         </div>
-      </div>
-
-      <settings-cups-nearby-printers search-term="[[searchTerm]]"
-          active-printer="{{activePrinter}}">
-      </settings-cups-nearby-printers>
+        <settings-cups-nearby-printers search-term="[[searchTerm]]"
+            active-printer="{{activePrinter}}">
+        </settings-cups-nearby-printers>
+      </template>
+
+      <template is="dom-if" if="[[!canAddPrinter_]]">
+        <div id="noConnectivityContentContainer"
+            class="layout vertical center">
+          <iron-icon id="cloudOffIcon" icon="settings20:cloud_off"></iron-icon>
+          <div id="connectionMessage" class="secondary">
+            $i18n{checkNetworkMessage}
+          </div>
+        </div>
+      </template>
     </template>
 
     <settings-cups-add-printer-dialog id="addPrinterDialog"

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

@@ -108,7 +108,11 @@ Polymer({
    */
   onActiveNetworksChanged: function(networks) {
     this.canAddPrinter_ = networks.some(function(network) {
-      return OncMojo.connectionStateIsConnected(network.connectionState);
+      // Note: Check for kOnline rather than using
+      // OncMojo.connectionStateIsConnected() since the latter could return true
+      // for networks without connectivity (e.g., captive portals).
+      return network.connectionState ==
+          chromeos.networkConfig.mojom.ConnectionStateType.kOnline;
     });
   },
 

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

@@ -2300,6 +2300,8 @@ void AddPrintingStrings(content::WebUIDataSource* html_source) {
      IDS_SETTINGS_PRINTING_CUPS_EDIT_PRINTER_INVALID_PRINTER_UPDATE},
     {"requireNetworkMessage",
      IDS_SETTINGS_PRINTING_CUPS_PRINTER_REQUIRE_INTERNET_MESSAGE},
+    {"checkNetworkMessage",
+     IDS_SETTINGS_PRINTING_CUPS_PRINTER_CHECK_CONNECTION_MESSAGE},
     {"editPrinterDialogTitle",
      IDS_SETTINGS_PRINTING_CUPS_EDIT_PRINTER_DIALOG_TITLE},
     {"editPrinterButtonText", IDS_SETTINGS_PRINTING_CUPS_EDIT_PRINTER_BUTTON},

chrome/test/data/webui/chromeos/fake_network_config_mojom.js

@@ -20,6 +20,8 @@ class FakeNetworkConfig {
         this.onNetworkListChanged.bind(this));
     extensionApi.onDeviceStateListChanged.addListener(
         this.onDeviceStateListChanged.bind(this));
+    extensionApi.onActiveNetworksChanged.addListener(
+        this.onActiveNetworksChanged.bind(this));
   }
 
   onNetworkListChanged(networks) {
@@ -30,6 +32,14 @@ class FakeNetworkConfig {
     this.observers_.forEach(o => o.onDeviceStateListChanged());
   }
 
+  /**
+   * @param {?Array<?chromeos.networkConfig.mojom.NetworkStateProperties>}
+   *     networks
+   */
+  onActiveNetworksChanged(networks) {
+    this.observers_.forEach(o => o.onActiveNetworksChanged(networks));
+  }
+
   /**
    * @param { !chromeos.networkConfig.mojom.CrosNetworkConfigObserverProxy }
    *     observer

chrome/test/data/webui/chromeos/fake_networking_private.js

@@ -53,7 +53,7 @@ cr.define('chrome', function() {
 
       var methodNames = [
         'getProperties', 'getProperties', 'getManagedProperties', 'getNetworks',
-        'getDeviceStates', 'enableNetworkType', 'disableNetworkType',
+        'getDeviceStates', 'getState', 'enableNetworkType',
         'disableNetworkType', 'requestNetworkScan', 'getGlobalPolicy',
         'getCertificateLists'
       ];
@@ -127,7 +127,13 @@ cr.define('chrome', function() {
     },
 
     /** @override */
-    getState: assertNotReached,
+    getState: function(guid, callback) {
+      var result = this.networkStates_.find(function(state) {
+        return state.GUID == guid;
+      });
+      callback(result);
+      this.methodCalled('getState');
+    },
 
     /** @override */
     setProperties: assertNotReached,
@@ -240,6 +246,9 @@ cr.define('chrome', function() {
     /** @type {!FakeChromeEvent} */
     onDeviceStateListChanged: new FakeChromeEvent(),
 
+    /** @type {!FakeChromeEvent} */
+    onActiveNetworksChanged: new FakeChromeEvent(),
+
     /** @type {!FakeChromeEvent} */
     onPortalDetectionCompleted: new FakeChromeEvent(),
 

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

@@ -765,8 +765,12 @@ var OSSettingsPrinterLandingPageTest = class extends OSSettingsBrowserTest {
   get extraLibraries() {
     return super.extraLibraries.concat([
       '//ui/webui/resources/js/assert.js',
+      '//ui/webui/resources/js/promise_resolver.js',
       BROWSER_SETTINGS_PATH + 'test_util.js',
       BROWSER_SETTINGS_PATH + '../test_browser_proxy.js',
+      BROWSER_SETTINGS_PATH + '../fake_chrome_event.js',
+      BROWSER_SETTINGS_PATH + '../chromeos/fake_networking_private.js',
+      BROWSER_SETTINGS_PATH + '../chromeos/fake_network_config_mojom.js',
       'test_cups_printers_browser_proxy.js',
       'cups_printer_landing_page_tests.js',
     ]);