Update offline UI for printer settings

- When there is no connectivity, we disable the ability to add a
  printer and display a message to users.

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

chrome/app/settings_strings.grdp

@@ -1631,6 +1631,12 @@
     <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_PRINTER_NO_INTERNET_CONNECTION" desc="The message shown when there is no internet connection.">
+      No internet connection
+    </message>
+    <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_CONNECT_TO_NETWORK_SUBTEXT" desc="The message shown when the user needs to connect to a network with connectivity and try again.">
+      Connect to a network and try again
+    </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

@@ -13,7 +13,7 @@ NOTE: Chrome OS icons go in ./chromeos/os_icons.html.
       <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>
+      <g id="cloud-off"><path d="M16.4732571,13.3443682 C16.8002856,12.9882746 17,12.5134184 17,11.9922 C17,10.8882 16.104,9.9922 15,9.9922 L13.494,9.9922 L13.494,9.0002 C13.494,7.0672 11.927,5.5002 9.994,5.5002 C9.5847901,5.5002 9.1930204,5.57089988 8.82954884,5.70065995 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 L16.4732571,13.3443682 Z M17.8711111,17 L16.8711111,18 L14.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,2.12888889 L17.8711111,17 Z M6.86331111,7.9922 L6,7.9922 C4.343,7.9922 3,9.3352 3,10.9922 C3,12.6492 4.343,13.9922 6,13.9922 L12.8633111,13.9922 L6.86331111,7.9922 Z"></path></g>
       <!-- The polygon ("+" shape) within this icon will always be filled with
            the color #4285F4. Any color fills specified programmatically will
            only be applied to the outer layer. -->

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

@@ -51,16 +51,16 @@
 
       #cloudOffIcon {
         --iron-icon-fill-color: rgb(95, 99, 104);
-        margin-bottom: 16px;
+        margin-top: 10px;
       }
 
       #connectionMessage {
-        text-align: center;
-        width: 250px;
+        padding-inline-start: 20px;
       }
 
       #noConnectivityContentContainer {
-        margin-top: 32px;
+        border-bottom: var(--cr-separator-line);
+        padding-inline-start: 20px;
       }
 
       #noSearchResultsMessage {
@@ -70,6 +70,12 @@
         margin-top: 80px;
         text-align: center;
       }
+
+      :host(:not([can-add-printer])) #addPrinterSection,
+      :host(:not([can-add-printer])) #nearbyPrinters {
+        opacity: var(--cr-disabled-opacity);
+        pointer-events: none;
+      }
     </style>
 
     <template is="dom-if" if="[[!enableUpdatedUi_]]">
@@ -79,11 +85,11 @@
           <a href="$i18n{printingCUPSPrintLearnMoreUrl}" target="_blank">
             $i18n{learnMore}
           </a>
-          <div class="secondary" hidden="[[canAddPrinter_]]">
+          <div class="secondary" hidden="[[canAddPrinter]]">
             $i18n{requireNetworkMessage}
           </div>
         </div>
-        <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter_,
+        <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter,
             prefs.native_printing.user_native_printers_allowed.value)]]">
           <cr-policy-pref-indicator
               pref="[[prefs.native_printing.user_native_printers_allowed]]"
@@ -92,7 +98,7 @@
         </template>
         <cr-button class="action-button" id="addPrinter"
             on-click="onAddPrinterTap_"
-            disabled="[[!addPrinterButtonActive_(canAddPrinter_,
+            disabled="[[!addPrinterButtonActive_(canAddPrinter,
                 prefs.native_printing.user_native_printers_allowed.value)]]">
           $i18n{addCupsPrinter}
         </cr-button>
@@ -104,6 +110,17 @@
     </template>
 
     <template is="dom-if" if="[[enableUpdatedUi_]]">
+      <template is="dom-if" if="[[!canAddPrinter]]">
+        <div id="noConnectivityContentContainer"
+            class="layout horizontal padded">
+          <iron-icon id="cloudOffIcon" icon="settings20:cloud-off"></iron-icon>
+          <div id="connectionMessage" class="layout vertical">
+            <div>$i18n{noInternetConnection}</div>
+            <div class="secondary">$i18n{checkNetworkAndTryAgain}</div>
+          </div>
+        </div>
+      </template>
+
       <div class="settings-box first">
         <div class="start">
           <span>$i18n{savedPrintersTitle}</span>
@@ -120,10 +137,11 @@
         <span class="secondary">
           $i18n{nearbyPrintersListDescription}
         </span>
-        <a href="$i18n{printingCUPSPrintLearnMoreUrl}" target="_blank">
+        <a href="$i18n{printingCUPSPrintLearnMoreUrl}"
+            target="_blank">
           $i18n{learnMore}
         </a>
-        <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter_,
+        <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter,
             prefs.native_printing.user_native_printers_allowed.value)]]">
           <cr-policy-pref-indicator
               pref="[[prefs.native_printing.user_native_printers_allowed]]"
@@ -132,33 +150,23 @@
         </template>
       </div>
 
-      <template is="dom-if" if="[[canAddPrinter_]]">
-        <div id="addPrinterSection">
-          <div class="layout horizontal center custom-list-item">
-            <div id="addPrinterText">$i18n{addCupsPrinter}</div>
-            <cr-icon-button class="action-button" id="addManualPrinterIcon"
-                iron-icon="settings20:printer-add"
-                on-click="onAddPrinterTap_"
-                disabled="[[!addPrinterButtonActive_(canAddPrinter_,
-                    prefs.native_printing.user_native_printers_allowed.value)]]"
-                title="$i18n{addCupsPrinter}">
-            </cr-icon-button>
-          </div>
+      <div id="addPrinterSection">
+        <div class="layout horizontal center custom-list-item">
+          <div id="addPrinterText">$i18n{addCupsPrinter}</div>
+          <cr-icon-button class="action-button" id="addManualPrinterIcon"
+              iron-icon="settings20:printer-add"
+              on-click="onAddPrinterTap_"
+              disabled="[[!addPrinterButtonActive_(canAddPrinter,
+                  prefs.native_printing.user_native_printers_allowed.value)]]"
+              title="$i18n{addCupsPrinter}">
+          </cr-icon-button>
         </div>
+      </div>
+      <template is="dom-if" if="[[canAddPrinter]]">
         <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

@@ -36,8 +36,11 @@ Polymer({
       type: String,
     },
 
-    /** @private */
-    canAddPrinter_: Boolean,
+    /** This is also used as an attribute for css styling. */
+    canAddPrinter: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
 
     /** @private */
     showCupsEditPrinterDialog_: Boolean,
@@ -107,7 +110,7 @@ Polymer({
    * @private
    */
   onActiveNetworksChanged: function(networks) {
-    this.canAddPrinter_ = networks.some(function(network) {
+    this.canAddPrinter = networks.some(function(network) {
       // Note: Check for kOnline rather than using
       // OncMojo.connectionStateIsConnected() since the latter could return true
       // for networks without connectivity (e.g., captive portals).

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

@@ -2370,6 +2370,10 @@ void AddPrintingStrings(content::WebUIDataSource* html_source) {
      IDS_SETTINGS_PRINTING_CUPS_PRINTER_REQUIRE_INTERNET_MESSAGE},
     {"checkNetworkMessage",
      IDS_SETTINGS_PRINTING_CUPS_PRINTER_CHECK_CONNECTION_MESSAGE},
+    {"noInternetConnection",
+     IDS_SETTINGS_PRINTING_CUPS_PRINTER_NO_INTERNET_CONNECTION},
+    {"checkNetworkAndTryAgain",
+     IDS_SETTINGS_PRINTING_CUPS_PRINTER_CONNECT_TO_NETWORK_SUBTEXT},
     {"editPrinterDialogTitle",
      IDS_SETTINGS_PRINTING_CUPS_EDIT_PRINTER_DIALOG_TITLE},
     {"editPrinterButtonText", IDS_SETTINGS_PRINTING_CUPS_EDIT_PRINTER_BUTTON},

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

@@ -672,6 +672,7 @@ suite('CupsNearbyPrintersTests', function() {
       // connected to a network.
       assertTrue(!!page.$$('#cloudOffIcon'));
       assertTrue(!!page.$$('#connectionMessage'));
+      assertTrue(!!page.$$('#addManualPrinterIcon').disabled);
     });
   });
 
@@ -680,10 +681,11 @@ suite('CupsNearbyPrintersTests', function() {
     setNetworkConnectionState('wifi1_guid', 'NotConnected');
     return test_util.flushTasks()
         .then(() => {
-          // Expect "Check Connection" text to show up when no internet is
+          // Expect offline text to show up when no internet is
           // connected.
           assertTrue(!!page.$$('#cloudOffIcon'));
           assertTrue(!!page.$$('#connectionMessage'));
+          assertTrue(!!page.$$('#addManualPrinterIcon').disabled);
 
           // Simulate connecting to a network with connectivity.
           setNetworkConnectionState('wifi1_guid', 'Online');