[multiball] Improve blocking overlay design.

Adds a blurred background, uses localized strings, supports dark mode.

Bug: 1072408
Change-Id: I3806765e99ec6d93776bea7e932426a4cff238c6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2353256Reviewed-by: Mark Cogan <marq@chromium.org>
Commit-Queue: Stepan Khapugin <stkhapugin@chromium.org>
Auto-Submit: Stepan Khapugin <stkhapugin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802275}

ios/chrome/app/strings/ios_strings.grd

@@ -2594,6 +2594,12 @@ New Search
       <message name="IDS_IOS_SHARE_LINK_TO_TEXT" desc="Option that appears in the iOS Edit Menu when highlighting text (alongside options like Copy, Paste, and Share). When selected, this generates a special URL that will open the current page and jump to/highlight the user's current selection. The user will then have the chance to share this special URL through the normal iOS sharing menu.">
           Link to Text
       </message>
+      <message name="IDS_IOS_UI_BLOCKED_USE_OTHER_WINDOW_DESCRIPTION" desc="Explanatory text that appears when the user has multiple windows open, and one window is showing a dialog that has to be interacted with before any other window can be used. [iOS only]">
+          Finish what you were doing in your other open Chrome window.
+      </message>
+      <message name="IDS_IOS_UI_BLOCKED_USE_OTHER_WINDOW_SWITCH_WINDOW_ACTION" desc="Button label that appears on a button to switch to some other window, when the user has multiple windows open, and one window is showing a dialog that has to be interacted with before any other window can be used.">
+          Switch to Open Window.
+      </message>
     </messages>
   </release>
 </grit>

ios/chrome/app/strings/ios_strings_grd/IDS_IOS_UI_BLOCKED_USE_OTHER_WINDOW_DESCRIPTION.png.sha1

+e448023f24ac158305420ed7805ebb815672c2f3
\ No newline at end of file

ios/chrome/app/strings/ios_strings_grd/IDS_IOS_UI_BLOCKED_USE_OTHER_WINDOW_SWITCH_WINDOW_ACTION.png.sha1

+e448023f24ac158305420ed7805ebb815672c2f3
\ No newline at end of file

ios/chrome/browser/ui/blocking_overlay/BUILD.gn

@@ -12,6 +12,8 @@ source_set("blocking_overlay") {
   deps = [
     "//base",
     "//ios/chrome/app:blocking_scene_commands",
+    "//ios/chrome/app/strings:ios_strings",
+    "//ios/chrome/common/ui/colors",
     "//ios/chrome/common/ui/util",
     "//ui/base",
   ]

ios/chrome/browser/ui/blocking_overlay/blocking_overlay_view_controller.mm

@@ -5,39 +5,74 @@
 #import "ios/chrome/browser/ui/blocking_overlay/blocking_overlay_view_controller.h"
 
 #import "ios/chrome/app/blocking_scene_commands.h"
+#import "ios/chrome/common/ui/colors/semantic_color_names.h"
 #import "ios/chrome/common/ui/util/constraints_ui_util.h"
+#include "ios/chrome/grit/ios_strings.h"
+#include "ui/base/l10n/l10n_util_mac.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
+namespace {
+// Max width for explanatory text.
+const CGFloat kMaxTextWidth = 275.0f;
+// Vertical space between text and button.
+const CGFloat kButtonSpacing = 20.0f;
+
+}  // namespace
+
 @implementation BlockingOverlayViewController
 
 - (void)viewWillAppear:(BOOL)animated {
   [super viewWillAppear:animated];
-  self.view.backgroundColor = UIColor.blackColor;
+
+  // Set up a blurred background.
+  UIBlurEffect* effect = nil;
+  // SystemXYZMaterial effect styles are iOS 13+, but so is multiwindow.
+  if (@available(iOS 13, *)) {
+    effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemThinMaterial];
+  }
+
+  UIVisualEffectView* backgroundBlurEffect =
+      [[UIVisualEffectView alloc] initWithEffect:effect];
+  backgroundBlurEffect.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.view addSubview:backgroundBlurEffect];
+  AddSameConstraints(self.view, backgroundBlurEffect);
 
   UILabel* label = [[UILabel alloc] init];
-  // TODO(crbug.com/1072408): use localized text if this goes into final UI.
-  label.text = @"Please finish the flow in the other window";
-  label.textColor = UIColor.whiteColor;
+  label.text =
+      l10n_util::GetNSString(IDS_IOS_UI_BLOCKED_USE_OTHER_WINDOW_DESCRIPTION);
+  label.textColor = [UIColor colorNamed:kGrey800Color];
+  label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+  label.textAlignment = NSTextAlignmentCenter;
+  label.numberOfLines = 0;
+
   [self.view addSubview:label];
   AddSameCenterConstraints(label, self.view);
+  [label.widthAnchor constraintLessThanOrEqualToConstant:kMaxTextWidth].active =
+      YES;
   label.translatesAutoresizingMaskIntoConstraints = NO;
 
   UIButton* button = [[UIButton alloc] init];
   button.translatesAutoresizingMaskIntoConstraints = NO;
-  [button setTitle:@"Show that window" forState:UIControlStateNormal];
-  button.backgroundColor = [UIColor colorWithWhite:1 alpha:0.1];
-  button.layer.cornerRadius = 5;
+  [button setTitle:l10n_util::GetNSString(
+                       IDS_IOS_UI_BLOCKED_USE_OTHER_WINDOW_SWITCH_WINDOW_ACTION)
+          forState:UIControlStateNormal];
+  [button setTitleColor:[UIColor colorNamed:kBlueColor]
+               forState:UIControlStateNormal];
+  button.titleLabel.font =
+      [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
   [button addTarget:self
                 action:@selector(buttonPressed:)
       forControlEvents:UIControlEventTouchUpInside];
+
   [self.view addSubview:button];
   [NSLayoutConstraint activateConstraints:@[
     [button.leadingAnchor constraintEqualToAnchor:label.leadingAnchor],
     [button.trailingAnchor constraintEqualToAnchor:label.trailingAnchor],
-    [button.topAnchor constraintEqualToAnchor:label.bottomAnchor],
+    [button.topAnchor constraintEqualToAnchor:label.bottomAnchor
+                                     constant:kButtonSpacing],
   ]];
 }