[iOS] Support dark mode for widgets

With the new +widgetVibrancyEffectForStyle: visual effect views,
setting the alpha of the button in HighlightButton doesn't work.
(According to the docs, this never should have worked.) Now,
HighlightButton takes a list of views to highlight.

Bug: 976683
Change-Id: I44e6b10e58fad7acb25bb591f46ae31878ab0fdd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1736673
Commit-Queue: Robbie Gibson <rkgibson@google.com>
Reviewed-by: Mark Cogan <marq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688052}

ios/chrome/common/highlight_button.h

@@ -9,6 +9,13 @@
 
 // A button that fades opacity on highlight.
 @interface HighlightButton : UIButton
+
+// If the button has subviews that are UIVisualEffectViews, fading the opacity
+// breaks the visual effect. If this array is non-nil, only the views in this
+// array will have their opacities faded. Otherwise, the entire view will fade
+// opacity.
+@property(nonatomic, strong) NSArray<UIView*>* highlightableViews;
+
 @end
 
 #endif  // IOS_CHROME_COMMON_HIGHLIGHT_BUTTON_H_

ios/chrome/common/highlight_button.mm

@@ -15,11 +15,20 @@
 - (void)setHighlighted:(BOOL)highlighted {
   [super setHighlighted:highlighted];
 
+  NSArray<UIView*>* highlightViews;
+  if (self.highlightableViews) {
+    highlightViews = self.highlightableViews;
+  } else {
+    highlightViews = @[ self ];
+  }
+
   [UIView transitionWithView:self
                     duration:ios::material::kDuration8
                      options:UIViewAnimationOptionCurveEaseInOut
                   animations:^{
-                    self.alpha = highlighted ? 0.5 : 1.0;
+                    for (UIView* view in highlightViews) {
+                      view.alpha = highlighted ? 0.5 : 1.0;
+                    }
                   }
                   completion:nil];
 }

ios/chrome/content_widget_extension/content_widget_view.mm

@@ -193,7 +193,7 @@ const int kRows = 2;
         // Something bad happened when saving the icon. Switch to best effort to
         // show something to the user.
         // kDefaultTextColor = SK_ColorWHITE;
-        site.fallbackTextColor = [UIColor whiteColor];
+        site.fallbackTextColor = UIColor.whiteColor;
         // kDefaultBackgroundColor = SkColorSetRGB(0x78, 0x78, 0x78);
         site.fallbackBackgroundColor = [UIColor colorWithRed:0x78 / 255.0f
                                                        green:0x78 / 255.0f

ios/chrome/content_widget_extension/most_visited_tile_view.mm

@@ -14,7 +14,6 @@
 #endif
 
 namespace {
-const CGFloat kLabelTextColor = 0.314;
 const NSInteger kLabelNumLines = 2;
 const CGFloat kFaviconSize = 48;
 const CGFloat kSpaceFaviconTitle = 8;
@@ -25,9 +24,7 @@ const CGFloat kTileWidth = 73;
 
 @implementation MostVisitedTileView
 
-@synthesize faviconView = _faviconView;
 @synthesize titleLabel = _titleLabel;
-@synthesize URL = _URL;
 
 #pragma mark - Public
 
@@ -40,13 +37,16 @@ const CGFloat kTileWidth = 73;
   if (self) {
     UIVibrancyEffect* labelEffect =
         [UIVibrancyEffect widgetSecondaryVibrancyEffect];
+    if (@available(iOS 13, *)) {
+      labelEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleSecondaryLabel];
+    }
 
     UIVisualEffectView* titleLabelEffectView =
         [[UIVisualEffectView alloc] initWithEffect:labelEffect];
     titleLabelEffectView.translatesAutoresizingMaskIntoConstraints = NO;
 
     _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
-    _titleLabel.textColor = [UIColor colorWithWhite:kLabelTextColor alpha:1.0];
     _titleLabel.font =
         [UIFont preferredFontForTextStyle:UIFontTextStyleCaption2];
     _titleLabel.textAlignment = NSTextAlignmentCenter;
@@ -80,6 +80,8 @@ const CGFloat kTileWidth = 73;
     ]];
 
     self.translatesAutoresizingMaskIntoConstraints = NO;
+
+    self.highlightableViews = @[ _faviconView, _titleLabel ];
   }
   return self;
 }

ios/chrome/search_widget_extension/copied_content_view.mm

@@ -35,6 +35,9 @@ const CGFloat kURLButtonMargin = 10;
 // The button-shaped background view shown when there is a copied URL to open.
 @property(nonatomic, strong) UIView* copiedButtonView;
 
+@property(nonatomic, strong) UIVisualEffectView* primaryEffectView;
+@property(nonatomic, strong) UIVisualEffectView* secondaryEffectView;
+
 // Updates the view to show the currently set |type| and |copiedText|.
 - (void)updateUI;
 
@@ -57,13 +60,33 @@ const CGFloat kURLButtonMargin = 10;
         [UIVibrancyEffect widgetPrimaryVibrancyEffect];
     UIVibrancyEffect* secondaryEffect =
         [UIVibrancyEffect widgetSecondaryVibrancyEffect];
+    UIVibrancyEffect* backgroundEffect =
+        [UIVibrancyEffect widgetSecondaryVibrancyEffect];
+    UIVibrancyEffect* hairlineEffect =
+        [UIVibrancyEffect widgetSecondaryVibrancyEffect];
+    if (@available(iOS 13, *)) {
+      primaryEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleLabel];
+      secondaryEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleSecondaryLabel];
+      backgroundEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleTertiaryFill];
+      hairlineEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleSeparator];
+    }
 
-    UIVisualEffectView* primaryEffectView =
+    _primaryEffectView =
         [[UIVisualEffectView alloc] initWithEffect:primaryEffect];
-    UIVisualEffectView* secondaryEffectView =
+    _secondaryEffectView =
         [[UIVisualEffectView alloc] initWithEffect:secondaryEffect];
-    for (UIVisualEffectView* effectView in
-         @[ primaryEffectView, secondaryEffectView ]) {
+    UIVisualEffectView* backgroundEffectView =
+        [[UIVisualEffectView alloc] initWithEffect:backgroundEffect];
+    UIVisualEffectView* hairlineEffectView =
+        [[UIVisualEffectView alloc] initWithEffect:hairlineEffect];
+    for (UIVisualEffectView* effectView in @[
+           _primaryEffectView, _secondaryEffectView, backgroundEffectView,
+           hairlineEffectView
+         ]) {
       [self addSubview:effectView];
       effectView.translatesAutoresizingMaskIntoConstraints = NO;
       AddSameConstraints(self, effectView);
@@ -71,29 +94,39 @@ const CGFloat kURLButtonMargin = 10;
     }
 
     _hairlineView = [[UIView alloc] initWithFrame:CGRectZero];
-    _hairlineView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.05];
+    // The new widget vibrancy style API requires new colors for the views.
+    if (@available(iOS 13, *)) {
+      _hairlineView.backgroundColor = UIColor.separatorColor;
+    } else {
+      _hairlineView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.05];
+    }
     _hairlineView.translatesAutoresizingMaskIntoConstraints = NO;
-    [secondaryEffectView.contentView addSubview:_hairlineView];
+    [hairlineEffectView.contentView addSubview:_hairlineView];
 
     _copiedButtonView = [[UIView alloc] init];
-    _copiedButtonView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.05];
+    // The new widget vibrancy style API requires new colors for the views.
+    if (@available(iOS 13, *)) {
+      _copiedButtonView.backgroundColor = UIColor.whiteColor;
+    } else {
+      _copiedButtonView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.05];
+    }
     _copiedButtonView.layer.cornerRadius = 5;
     _copiedButtonView.translatesAutoresizingMaskIntoConstraints = NO;
-    [secondaryEffectView.contentView addSubview:_copiedButtonView];
+    [backgroundEffectView.contentView addSubview:_copiedButtonView];
 
     _openCopiedContentTitleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
     _openCopiedContentTitleLabel.textAlignment = NSTextAlignmentCenter;
     _openCopiedContentTitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
     _openCopiedContentTitleLabel.font =
         [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
-    [primaryEffectView.contentView addSubview:_openCopiedContentTitleLabel];
+    [_primaryEffectView.contentView addSubview:_openCopiedContentTitleLabel];
 
     _copiedContentLabel = [[UILabel alloc] initWithFrame:CGRectZero];
     _copiedContentLabel.textAlignment = NSTextAlignmentCenter;
     _copiedContentLabel.font =
         [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
     _copiedContentLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    [secondaryEffectView.contentView addSubview:_copiedContentLabel];
+    [_secondaryEffectView.contentView addSubview:_copiedContentLabel];
 
     [NSLayoutConstraint activateConstraints:@[
       [_hairlineView.topAnchor constraintEqualToAnchor:self.topAnchor],
@@ -133,6 +166,10 @@ const CGFloat kURLButtonMargin = 10;
           constraintEqualToAnchor:_openCopiedContentTitleLabel.trailingAnchor],
     ]];
     [self setCopiedContentType:CopiedContentTypeNone copiedText:nil];
+    self.highlightableViews = @[
+      _hairlineView, _copiedButtonView, _openCopiedContentTitleLabel,
+      _copiedContentLabel
+    ];
   }
   return self;
 }
@@ -151,8 +188,22 @@ const CGFloat kURLButtonMargin = 10;
   self.hairlineView.hidden = hasContent;
   self.accessibilityTraits =
       (hasContent) ? UIAccessibilityTraitLink : UIAccessibilityTraitNone;
-  self.copiedContentLabel.alpha = (hasContent) ? 1 : 0.5;
-  self.openCopiedContentTitleLabel.alpha = (hasContent) ? 1 : 0.5;
+  if (@available(iOS 13, *)) {
+    if (hasContent) {
+      self.primaryEffectView.effect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleLabel];
+      self.secondaryEffectView.effect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleSecondaryLabel];
+    } else {
+      self.primaryEffectView.effect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleSecondaryLabel];
+      self.secondaryEffectView.effect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleTertiaryLabel];
+    }
+  } else {
+    self.copiedContentLabel.alpha = (hasContent) ? 1 : 0.5;
+    self.openCopiedContentTitleLabel.alpha = (hasContent) ? 1 : 0.5;
+  }
 
   NSString* titleText;
   NSString* contentText;

ios/chrome/search_widget_extension/search_action_view.mm

@@ -36,24 +36,43 @@ const CGFloat kIconSize = 35;
         [UIVibrancyEffect widgetPrimaryVibrancyEffect];
     UIVibrancyEffect* secondaryEffect =
         [UIVibrancyEffect widgetSecondaryVibrancyEffect];
+    UIVibrancyEffect* iconBackgroundEffect =
+        [UIVibrancyEffect widgetSecondaryVibrancyEffect];
+    if (@available(iOS 13, *)) {
+      primaryEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleLabel];
+      secondaryEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleSecondaryLabel];
+      iconBackgroundEffect = [UIVibrancyEffect
+          widgetEffectForVibrancyStyle:UIVibrancyEffectStyleTertiaryFill];
+    }
 
     UIVisualEffectView* primaryEffectView =
         [[UIVisualEffectView alloc] initWithEffect:primaryEffect];
     UIVisualEffectView* secondaryEffectView =
         [[UIVisualEffectView alloc] initWithEffect:secondaryEffect];
-    for (UIVisualEffectView* effectView in
-         @[ primaryEffectView, secondaryEffectView ]) {
-      [self addSubview:effectView];
+    UIVisualEffectView* iconBackgroundEffectView =
+        [[UIVisualEffectView alloc] initWithEffect:iconBackgroundEffect];
+    for (UIVisualEffectView* effectView in @[
+           primaryEffectView, secondaryEffectView, iconBackgroundEffectView
+         ]) {
       effectView.translatesAutoresizingMaskIntoConstraints = NO;
       effectView.userInteractionEnabled = NO;
-      AddSameConstraints(self, effectView);
     }
 
     UIView* circleView = [[UIView alloc] initWithFrame:CGRectZero];
-    circleView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.05];
+    circleView.translatesAutoresizingMaskIntoConstraints = NO;
+    if (@available(iOS 13, *)) {
+      circleView.backgroundColor = UIColor.whiteColor;
+    } else {
+      circleView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.05];
+    }
     circleView.layer.cornerRadius = kActionButtonSize / 2;
+    [iconBackgroundEffectView.contentView addSubview:circleView];
+    AddSameConstraints(iconBackgroundEffectView.contentView, circleView);
 
     UILabel* labelView = [[UILabel alloc] initWithFrame:CGRectZero];
+    labelView.translatesAutoresizingMaskIntoConstraints = NO;
     labelView.text = title;
     labelView.numberOfLines = 0;
     labelView.textAlignment = NSTextAlignmentCenter;
@@ -62,22 +81,28 @@ const CGFloat kIconSize = 35;
     [labelView
         setContentCompressionResistancePriority:UILayoutPriorityRequired
                                         forAxis:UILayoutConstraintAxisVertical];
+    [secondaryEffectView.contentView addSubview:labelView];
+    AddSameConstraints(secondaryEffectView.contentView, labelView);
 
-    UIStackView* stack = [[UIStackView alloc]
-        initWithArrangedSubviews:@[ circleView, labelView ]];
+    UIStackView* stack = [[UIStackView alloc] initWithArrangedSubviews:@[
+      iconBackgroundEffectView, secondaryEffectView
+    ]];
     stack.axis = UILayoutConstraintAxisVertical;
     stack.spacing = kIconSpacing;
     stack.alignment = UIStackViewAlignmentCenter;
     stack.translatesAutoresizingMaskIntoConstraints = NO;
-    [secondaryEffectView.contentView addSubview:stack];
-    AddSameConstraints(secondaryEffectView, stack);
+    stack.userInteractionEnabled = NO;
+    [self addSubview:stack];
+    AddSameConstraints(self, stack);
+
     UIImage* iconImage = [UIImage imageNamed:imageName];
     iconImage =
         [iconImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
-
     UIImageView* icon = [[UIImageView alloc] initWithImage:iconImage];
     icon.translatesAutoresizingMaskIntoConstraints = NO;
     [primaryEffectView.contentView addSubview:icon];
+    AddSameConstraints(primaryEffectView.contentView, icon);
+    [self addSubview:primaryEffectView];
 
     [NSLayoutConstraint activateConstraints:@[
       [circleView.widthAnchor constraintEqualToConstant:kActionButtonSize],
@@ -93,6 +118,8 @@ const CGFloat kIconSize = 35;
                   action:actionSelector
         forControlEvents:UIControlEventTouchUpInside];
     self.accessibilityLabel = title;
+
+    self.highlightableViews = @[ circleView, labelView, icon ];
   }
   return self;
 }

ios/chrome/search_widget_extension/search_widget_view.mm

@@ -53,13 +53,6 @@ const CGFloat kMaxContentSize = 421;
 
 @implementation SearchWidgetView
 
-@synthesize target = _target;
-@synthesize copiedURLSection = _copiedURLSection;
-@synthesize actionsSection = _actionsSection;
-@synthesize actionsContent = _actionsContent;
-@synthesize compactHeight = _compactHeight;
-@synthesize actionsSectionHeightConstraint = _actionsSectionHeightConstraint;
-
 - (instancetype)initWithActionTarget:(id<SearchWidgetViewActionTarget>)target
                        compactHeight:(CGFloat)compactHeight {
   self = [super initWithFrame:CGRectZero];