[ash-md] Adjusts layout of lists with sticky header rows to match specs

ash/common/system/chromeos/network/vpn_list_view.cc

Index: ash/common/system/chromeos/network/vpn_list_view.cc
diff --git a/ash/common/system/chromeos/network/vpn_list_view.cc b/ash/common/system/chromeos/network/vpn_list_view.cc
index 9831cfc997863877baf098c776b14ff74976d8db..036cffa86affb426cdc4b2624e870c6b79eb87eb 100644
--- a/ash/common/system/chromeos/network/vpn_list_view.cc
+++ b/ash/common/system/chromeos/network/vpn_list_view.cc
@@ -110,11 +110,12 @@ class VPNListProviderEntryMd : public views::ButtonListener,
   VPNListProviderEntryMd(ViewClickListener* parent,
                          const std::string& name,
                          int button_accessible_name_id)
-      : parent_(parent) {
+      : parent_(parent), tri_view_(nullptr) {
+    // TODO(varkha): Make this a sticky section header.
     SetLayoutManager(new views::FillLayout);
-    TriView* tri_view = TrayPopupUtils::CreateDefaultRowView();
-    tri_view->SetContainerVisible(TriView::Container::START, false);
-    AddChildView(tri_view);
+    tri_view_ = TrayPopupUtils::CreateDefaultRowView();
+    tri_view_->SetContainerVisible(TriView::Container::START, false);
+    AddChildView(tri_view_);
 
     const ui::NativeTheme* theme = GetNativeTheme();
     const SkColor prominent_color =
@@ -125,7 +126,15 @@ class VPNListProviderEntryMd : public views::ButtonListener,
     style.SetupLabel(label);
     label->SetText(base::ASCIIToUTF16(name));
     label->SetEnabledColor(prominent_color);
-    tri_view->AddView(TriView::Container::CENTER, label);
+    tri_view_->AddView(TriView::Container::CENTER, label);
+    auto box_layout = base::MakeUnique<views::BoxLayout>(
+        views::BoxLayout::kHorizontal, 0, 0, 0);
+    box_layout->set_main_axis_alignment(
+        views::BoxLayout::MAIN_AXIS_ALIGNMENT_START);
+    box_layout->set_cross_axis_alignment(
+        views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
+    tri_view_->SetContainerLayout(TriView::Container::CENTER,
+                                  std::move(box_layout));
 
     gfx::ImageSkia icon =
         gfx::CreateVectorIcon(kSystemMenuAddConnectionIcon, prominent_color);
@@ -134,7 +143,20 @@ class VPNListProviderEntryMd : public views::ButtonListener,
                              icon, button_accessible_name_id);
     add_vpn_button->set_ink_drop_base_color(prominent_color);
     add_vpn_button->SetEnabled(true);
-    tri_view->AddView(TriView::Container::END, add_vpn_button);
+    tri_view_->AddView(TriView::Container::END, add_vpn_button);
+  }
+
+  // Sets up the border. When the provider header is the first item in the
+  // list (i.e. when the list was empty before adding the provider row) there is
+  // already |kMenuSeparatorVerticalPadding| padding at the top of the scroll
+  // contents, so only add that padding when the list was not |empty|.
+  // TODO(varkha): Remove this special handling when this header becomes sticky.
+  void SetBorderForHeader(bool empty) {
+    tri_view_->SetBorder(views::CreateEmptyBorder(
+        empty ? 0 : kMenuSeparatorVerticalPadding,
+        kTrayPopupPaddingHorizontal -
+            GetTrayConstant(TRAY_POPUP_ITEM_LEFT_INSET),
+        kMenuSeparatorVerticalPadding, 0));
   }
 
  protected:
@@ -147,6 +169,9 @@ class VPNListProviderEntryMd : public views::ButtonListener,
   // Our parent to handle events.
   ViewClickListener* parent_;
 
+  // Container that owns the child controls.
+  TriView* tri_view_;
+
   DISALLOW_COPY_AND_ASSIGN(VPNListProviderEntryMd);
 };
 
@@ -287,22 +312,20 @@ void VPNListNetworkEntry::UpdateFromNetworkState(
     if (UseMd()) {
       disconnect_button_ = TrayPopupUtils::CreateTrayPopupButton(
           this, l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_VPN_DISCONNECT));
-    } else {
-      disconnect_button_ = new DisconnectButton(this);
-    }
-    if (UseMd()) {
       DCHECK(tri_view());
       tri_view()->AddView(TriView::Container::END, disconnect_button_);
       tri_view()->SetContainerVisible(TriView::Container::END, true);
     } else {
+      disconnect_button_ = new DisconnectButton(this);
       AddChildView(disconnect_button_);
     }
 
     SetBorder(
-        views::CreateEmptyBorder(0, kTrayPopupPaddingHorizontal, 0,
-                                 UseMd() ? kTrayPopupButtonEndMargin : 3));
+        views::CreateEmptyBorder(0, UseMd() ? 0 : kTrayPopupPaddingHorizontal,
+                                 0, UseMd() ? kTrayPopupButtonEndMargin : 3));
   } else {
-    SetBorder(views::CreateEmptyBorder(0, kTrayPopupPaddingHorizontal, 0, 0));
+    SetBorder(views::CreateEmptyBorder(
+        0, UseMd() ? 0 : kTrayPopupPaddingHorizontal, 0, 0));
   }
 
   if (!UseMd()) {
@@ -456,29 +479,26 @@ void VPNListView::AddProviderAndNetworks(
     const VPNProvider& vpn_provider,
     const chromeos::NetworkStateHandler::NetworkStateList& networks) {
   // Add a visual separator, unless this is the topmost entry in the list.
-  if (!list_empty_) {
-    views::Separator* const separator =
-        new views::Separator(views::Separator::HORIZONTAL);
-    separator->SetColor(kBorderLightColor);
-    container()->AddChildView(separator);
-  } else {
-    list_empty_ = false;
-  }
+  if (!list_empty_)
+    container()->AddChildView(TrayPopupUtils::CreateListHeaderSeparator());
   std::string vpn_name =
       vpn_provider.third_party
           ? vpn_provider.third_party_provider_name
           : l10n_util::GetStringUTF8(IDS_ASH_STATUS_TRAY_VPN_BUILT_IN_PROVIDER);
 
   // Add a list entry for the VPN provider.
-  views::View* provider_view = nullptr;
+  views::View* view = nullptr;
   if (UseMd()) {
-    provider_view = new VPNListProviderEntryMd(
+    VPNListProviderEntryMd* provider_view = new VPNListProviderEntryMd(
         this, vpn_name, IDS_ASH_STATUS_TRAY_ADD_CONNECTION);
+    provider_view->SetBorderForHeader(list_empty_);
+    view = provider_view;
   } else {
-    provider_view = new VPNListProviderEntry(this, vpn_name);
+    view = new VPNListProviderEntry(this, vpn_name);
   }
-  container()->AddChildView(provider_view);
-  provider_view_map_[provider_view] = vpn_provider;
+  container()->AddChildView(view);
+  provider_view_map_[view] = vpn_provider;
+  list_empty_ = false;
   // Add the networks belonging to this provider, in the priority order returned
   // by shill.
   for (const chromeos::NetworkState* const& network : networks) {