[CrOS Cellular] Style fixes to network item rows.

* Remove gap between rows in "Connect to Network" page.
* eSIM cellular network list will have 8px padding top and bottom.
* Add fake esim pending profile to fake hermes manager client.

Screenshots (Note that the background colors are not part of the CL
and are only there for visualization of different network row types):
https://drive.google.com/drive/folders/1iMszYFuCE_HDxIVWUcbgi8QnNjzLwqHn?usp=sharing

Fixed: 1162054
Change-Id: I904cb9d94fdef9e07968953807d209be3c5a77d5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2612521
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842402}

chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.html

@@ -67,6 +67,11 @@
         margin-inline-start: 0;
       }
 
+      network-list {
+        --cr-network-row-padding-bottom: 8px;
+        --cr-network-row-padding-top: 8px;
+        --cr-network-row-height: auto;
+      }
     </style>
     <template is="dom-if" if="[[!!euicc_]]" restamp>
       <div class="cellular-network-list-header esim-list-header flex">

chromeos/dbus/hermes/fake_hermes_manager_client.cc

@@ -88,6 +88,9 @@ void FakeHermesManagerClient::ParseCommandLineSwitch() {
   euicc_client_test->AddFakeCarrierProfile(dbus::ObjectPath(kDefaultEuiccPath),
                                            hermes::profile::State::kInactive,
                                            "");
+  euicc_client_test->AddFakeCarrierProfile(dbus::ObjectPath(kDefaultEuiccPath),
+                                           hermes::profile::State::kPending,
+                                           "");
 }
 
 void FakeHermesManagerClient::NotifyAvailableEuiccListChanged() {

ui/webui/resources/cr_components/chromeos/network/network_list_item.html

@@ -24,11 +24,26 @@
       }
 
       #divOuter {
-        margin-bottom: 8px;
-        margin-top: 8px;
-        min-height: 48px;
+        height: var(--cr-network-row-height, 48px);
         overflow: auto;
+        padding-bottom: var(--cr-network-row-padding-bottom, 0);
         padding-inline-end: var(--cr-icon-ripple-padding);
+        padding-top: var(--cr-network-row-padding-bottom, 0);
+      }
+
+      :host([is-e-sim-pending-profile_]) #divText {
+        opacity: 0.4;
+      }
+
+      :host(:not([is-e-sim-pending-profile_])) #divIcon {
+        height: 24px;
+        width: 24px;
+      }
+
+      :host([is-e-sim-pending-profile_]) #divIcon {
+        height: 20px;
+        opacity: 0.4;
+        width: 20px;
       }
 
       #divDetail {
@@ -53,24 +68,10 @@
         color: var(--google-green-500);
       }
 
-      iron-icon :not(.esim-pending-profile) {
-        height: 24px;
-        width: 24px;
-      }
-
-      iron-icon .esim-pending-profile {
-        height: 20px;
-        width: 20px;
-      }
-
       cr-policy-indicator {
         padding: 0 var(--cr-controlled-by-spacing);
       }
 
-      .esim-pending-profile {
-        opacity: 0.4;
-      }
-
       #wrapper {
         height: 100%;
       }
@@ -106,11 +107,9 @@
           </network-icon>
         </template>
         <template is="dom-if" if="[[item.polymerIcon]]">
-          <iron-icon icon="[[item.polymerIcon]]"
-              class$="[[getItemClassName_(item, item.customItemType]]"></iron-icon>
+          <iron-icon id="divIcon" icon="[[item.polymerIcon]]"></iron-icon>
         </template>
-        <div id="divText" class$="layout horizontal flex
-            [[getItemClassName_(item, item.customItemType)]]">
+        <div id="divText" class="layout horizontal flex">
           <div id="networkName" aria-hidden="true">
             [[getItemName_(item)]]
           </div>
@@ -144,7 +143,7 @@
             </cr-icon-button>
           </div>
         </template>
-        <template is="dom-if" if="[[isESimPendingProfile_(item, item.customItemType)]]" restamp>
+        <template is="dom-if" if="[[isESimPendingProfile_]]" restamp>
           <cr-button id="installButton"
               aria-label$="[[getItemName_(item)]], $i18n{networkListItemDownload}"
               on-click="onInstallButtonClick_">

ui/webui/resources/cr_components/chromeos/network/network_list_item.js

@@ -71,6 +71,17 @@ Polymer({
       value: 'button',
     },
 
+    /**
+     * Whether the network item is a cellular one and is of an esim
+     * pending profile.
+     */
+    isESimPendingProfile_: {
+      type: Boolean,
+      reflectToAttribute: true,
+      value: false,
+      computed: 'computeIsESimPendingProfile_(item, item.customItemType)',
+    },
+
     /**
      * The cached ConnectionState for the network.
      * @type {!chromeos.networkConfig.mojom.ConnectionStateType|undefined}
@@ -368,7 +379,7 @@ Polymer({
             'networkListItemLabelWifi', index, total, this.getItemName_(),
             secured, this.item.typeState.wifi.signalStrength);
       default:
-        if (this.isESimPendingProfile_()) {
+        if (this.isESimPendingProfile_) {
           if (this.subtitle_) {
             return this.i18n(
                 'networkListItemLabelESimPendingProfileWithProviderName', index,
@@ -504,7 +515,7 @@ Polymer({
     if (this.isSubpageButtonVisible_(this.networkState, this.showButtons) &&
         this.$$('#subpage-button') === this.shadowRoot.activeElement) {
       this.fireShowDetails_(event);
-    } else if (this.isESimPendingProfile_()) {
+    } else if (this.isESimPendingProfile_) {
       this.onInstallButtonClick_();
     } else if (this.item.hasOwnProperty('customItemName')) {
       this.fire('custom-item-selected', this.item);
@@ -572,20 +583,12 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  isESimPendingProfile_() {
+  computeIsESimPendingProfile_() {
     return !!this.item && this.item.hasOwnProperty('customItemType') &&
         this.item.customItemType ===
         NetworkList.CustomItemType.ESIM_PENDING_PROFILE;
   },
 
-  /**
-   * @return {string}
-   * @private
-   */
-  getItemClassName_() {
-    return this.isESimPendingProfile_() ? 'esim-pending-profile' : '';
-  },
-
   /**
    * @return {boolean}
    * @private