[iOS][DarkMode][MF] Update gradient for Dark Mode

Creates the gradient programmatically and removes the image since it is
not longer needed.

Bug: 976671
Change-Id: I0c5960183d52383ae5f2ac8362b0f424968e5808
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1702002
Commit-Queue: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#679560}

ios/chrome/browser/autofill/form_input_accessory_view.mm

@@ -24,10 +24,10 @@
 
 namespace {
 
-// The width for the white gradient UIImageView.
+// The width for the white gradient UIView.
 constexpr CGFloat ManualFillGradientWidth = 44;
 
-// The margin for the white gradient UIImageView.
+// The margin for the white gradient UIView.
 constexpr CGFloat ManualFillGradientMargin = 14;
 
 // The spacing between the items in the navigation view.
@@ -50,6 +50,9 @@ constexpr CGFloat ManualFillSeparatorHeight = 0.5;
 @property(nonatomic, nullable, weak) id<FormInputAccessoryViewDelegate>
     delegate;
 
+// Gradient layer to disolve the leading view's end.
+@property(nonatomic, strong) CAGradientLayer* gradientLayer;
+
 @property(nonatomic, weak) UIButton* previousButton;
 
 @property(nonatomic, weak) UIButton* nextButton;
@@ -76,6 +79,11 @@ constexpr CGFloat ManualFillSeparatorHeight = 0.5;
           navigationDelegate:delegate];
 }
 
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  self.gradientLayer.frame = self.gradientLayer.superlayer.bounds;
+}
+
 #pragma mark - UIInputViewAudioFeedback
 
 - (BOOL)enableInputClicksWhenVisible {
@@ -151,10 +159,18 @@ constexpr CGFloat ManualFillSeparatorHeight = 0.5;
 
   self.backgroundColor = UIColor.cr_systemBackgroundColor;
 
-  UIImage* gradientImage = [[UIImage imageNamed:@"mf_gradient"]
-      resizableImageWithCapInsets:UIEdgeInsetsZero
-                     resizingMode:UIImageResizingModeStretch];
-  UIImageView* gradientView = [[UIImageView alloc] initWithImage:gradientImage];
+  CAGradientLayer* gradientLayer = [[CAGradientLayer alloc] init];
+  gradientLayer.colors = @[
+    (id)[[UIColor clearColor] CGColor], (id)[[UIColor whiteColor] CGColor]
+  ];
+  gradientLayer.startPoint = CGPointMake(0, 0.5);
+  gradientLayer.endPoint = CGPointMake(0.6, 0.5);
+  self.gradientLayer = gradientLayer;
+
+  UIView* gradientView = [[UIView alloc] init];
+  gradientView.userInteractionEnabled = NO;
+  gradientView.backgroundColor = UIColor.cr_systemBackgroundColor;
+  gradientView.layer.mask = gradientLayer;
   gradientView.translatesAutoresizingMaskIntoConstraints = NO;
   if (base::i18n::IsRTL()) {
     gradientView.transform = CGAffineTransformMakeRotation(M_PI);

ios/chrome/browser/ui/autofill/manual_fill/BUILD.gn

@@ -118,7 +118,6 @@ source_set("manual_fill_ui") {
     "//ios/chrome/browser/favicon",
     "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_arrow_down",
     "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_arrow_up",
-    "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_gradient",
     "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_keyboard",
     "//ios/chrome/browser/ui/list_model:list_model",
     "//ios/chrome/browser/ui/table_view:styler",

ios/chrome/browser/ui/autofill/manual_fill/resources/BUILD.gn

@@ -22,13 +22,6 @@ imageset("mf_arrow_up") {
   ]
 }
 
-imageset("mf_gradient") {
-  sources = [
-    "mf_gradient.imageset/Contents.json",
-    "mf_gradient.imageset/mf_gradient.png",
-  ]
-}
-
 imageset("mf_keyboard") {
   sources = [
     "mf_keyboard.imageset/Contents.json",

ios/chrome/browser/ui/autofill/manual_fill/resources/mf_gradient.imageset/Contents.json

-{
-    "images": [
-        {
-            "idiom": "universal",
-            "scale": "1x",
-            "filename": "mf_gradient.png"
-        }
-    ],
-    "info": {
-        "version": 1,
-        "author": "xcode"
-    }
-}