[CrOS settings]: fix page header for VPN.

Removes an excessive space in the network list header only when it is
displayed in the VPN settings page.

Bug: b:188845291
Change-Id: Id25927792400802d9d3b27ec7a446245a2c21863
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2927585
Commit-Queue: Damien Dejean <damiendejean@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#888141}

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

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.html b/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.html
index 7ce6b313..0d400cf 100644
--- a/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.html
+++ b/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.html
@@ -32,10 +32,13 @@
   <template>
     <style include="cr-shared-style os-settings-icons settings-shared iron-flex">
       #networkListDiv {
-        margin-top: var(--cr-section-vertical-margin);
         min-height: var(--settings-row-min-height);
       }
 
+      :host(:not([is-showing-vpn_])) #networkListDiv {
+        margin-top: var(--cr-section-vertical-margin);
+      }
+
       #cellularNetworkList {
         /* No extra margin-top when displaying the cellular network list. */
         margin-top: calc(-1*var(--cr-section-vertical-margin));
@@ -146,7 +149,7 @@
     <template is="dom-if" if="[[deviceIsEnabled_(deviceState)]]">
       <div id="networkListDiv" class="layout vertical flex">
         <!-- VPN only header for built-in VPNs. -->
-        <template is="dom-if" if="[[matchesType_('VPN', deviceState)]]">
+        <template is="dom-if" if="[[isShowingVpn_]]">
           <div class="vpn-header layout horizontal center">
             <div class="flex settings-box-text">$i18n{networkVpnBuiltin}</div>
             <template is="dom-if" if="[[!vpnIsEnabled_]]">
@@ -219,7 +222,7 @@
                 "[[getNoNetworksInnerHtml_(deviceState, tetherDeviceState)]]">
         </settings-localized-link>
 
-        <template is="dom-if" if="[[matchesType_('VPN', deviceState)]]">
+        <template is="dom-if" if="[[isShowingVpn_]]">
           <!-- Third party VPNs. -->
           <template is="dom-repeat"
               items="[[getVpnProviders_(vpnProviders, thirdPartyVpns_)]]">
@@ -245,7 +248,7 @@
       </div>
 
       <template is="dom-if"
-          if="[[shouldShowVpnPreferences_(isManaged_, deviceState)]]">
+          if="[[shouldShowVpnPreferences_(isManaged_, isShowingVpn_)]]">
         <div class="settings-box first">
           <h2>$i18n{networkVpnPreferences}</h2>
         </div>

chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.js

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.js b/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.js
index fe753226..db3d40c 100644
--- a/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.js
+++ b/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.js
@@ -91,6 +91,13 @@
       },
     },
 
+    /** @private */
+    isShowingVpn_: {
+      type: Boolean,
+      computed: 'computeIsShowingVpn_(deviceState)',
+      reflectToAttribute: true,
+    },
+
     /**
      * Whether the browser/ChromeOS is managed by their organization
      * through enterprise policies.
@@ -992,6 +999,18 @@
   },
 
   /**
+   * @return {boolean}
+   * @private
+   */
+  computeIsShowingVpn_() {
+    if (!this.deviceState) {
+      return false;
+    }
+    return this.matchesType_(
+        OncMojo.getNetworkTypeString(mojom.NetworkType.kVPN), this.deviceState);
+  },
+
+  /**
    * Tells when VPN preferences section should be displayed. It is
    * displayed when the preferences are applicable to the current device.
    * @return {boolean}
@@ -1004,7 +1023,7 @@
     // For now the section only contain always-on VPN settings. It should not be
     // displayed on managed devices while the legacy always-on VPN based on ARC
     // is not replaced/extended by the new implementation.
-    return !this.isManaged_ && this.matchesType_('VPN', this.deviceState);
+    return !this.isManaged_ && this.isShowingVpn_;
   },
 
   /**