[CRD iOS] Fix layout issue of the cancel button on iPhone X

The cancel button on the navigation bar is currently overlapping the
notch on the top of the screen on iPhone X. The issue is that we didn't
make the navigation bar respect to the safe area when laying it out.

This CL fixes this by laying out the navigation bar on the top of the
safe area rather than on the top of the view.

Bug: 820547
Change-Id: I41494d01ab7f12a00b8a5bd4f3523245d3362e60
Reviewed-on: https://chromium-review.googlesource.com/957132Reviewed-by: Jamie Walch <jamiewalch@chromium.org>
Commit-Queue: Yuwei Huang <yuweih@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542243}

remoting/ios/app/client_connection_view_controller.mm

@@ -43,8 +43,6 @@ static const CGFloat kReconnectViewHeight = 90.f;
 static const CGFloat kPadding = 20.f;
 static const CGFloat kMargin = 20.f;
 
-static const CGFloat kBarHeight = 58.f;
-
 static const CGFloat kKeyboardAnimationTime = 0.3;
 
 static NSString* const kConnectionErrorFeedbackContext =
@@ -108,13 +106,13 @@ static NSString* const kConnectionErrorFeedbackContext =
     _navBar.translatesAutoresizingMaskIntoConstraints = NO;
 
     // Attach navBar to the top of the view.
+    UILayoutGuide* layoutGuide =
+        remoting::SafeAreaLayoutGuideForView(self.view);
     [NSLayoutConstraint activateConstraints:@[
-      [[_navBar topAnchor] constraintEqualToAnchor:[self.view topAnchor]],
-      [[_navBar leadingAnchor]
-          constraintEqualToAnchor:[self.view leadingAnchor]],
-      [[_navBar trailingAnchor]
-          constraintEqualToAnchor:[self.view trailingAnchor]],
-      [[_navBar heightAnchor] constraintEqualToConstant:kBarHeight],
+      [_navBar.topAnchor constraintEqualToAnchor:layoutGuide.topAnchor],
+      [_navBar.leadingAnchor constraintEqualToAnchor:layoutGuide.leadingAnchor],
+      [_navBar.trailingAnchor
+          constraintEqualToAnchor:layoutGuide.trailingAnchor],
     ]];
   }
   return self;