Add FXIOS-11598 [Tab tray UI experiment] Shadow on Experiment tab cell (#25273)

* Add shadow on Experiment tab cell

* Adjust border width

* Remove dispatch queue, turns out it wasn't needed 🤦

Author: lmarceau

firefox-ios/Client/Frontend/Browser/Tabs/Views/ExperimentTabCell.swift

@@ -12,7 +12,7 @@ import SiteImageView
 class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, FeatureFlaggable {
     struct UX {
         static let selectedBorderWidth: CGFloat = 3.0
-        static let unselectedBorderWidth: CGFloat = 0.8
+        static let unselectedBorderWidth: CGFloat = 1
         static let cornerRadius: CGFloat = 16
         static let subviewDefaultPadding: CGFloat = 6.0
         static let faviconSize = CGSize(width: 16, height: 16)
@@ -26,6 +26,9 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         static let closeButtonTop: CGFloat = 6
         static let closeButtonTrailing: CGFloat = 8
         static let tabViewFooterSpacing: CGFloat = 4
+        static let shadowRadius: CGFloat = 4
+        static let shadowOffset = CGSize(width: 0, height: 2)
+        static let shadowOpacity: Float = 1
     }
     // MARK: - Properties
 
@@ -88,6 +91,12 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         super.layoutSubviews()
         favicon.layer.cornerRadius = UX.faviconSize.height / 2
         smallFaviconView.layer.cornerRadius = UX.fallbackFaviconSize.height / 2
+
+        backgroundHolder.layoutIfNeeded()
+        contentView.layer.shadowPath = UIBezierPath(
+            roundedRect: self.backgroundHolder.bounds,
+            cornerRadius: self.backgroundHolder.layer.cornerRadius
+        ).cgPath
     }
 
     // MARK: - Initializer
@@ -171,6 +180,14 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         screenshotView.backgroundColor = theme.colors.layer1
         favicon.tintColor = theme.colors.textPrimary
         smallFaviconView.tintColor = theme.colors.textPrimary
+        setupShadow(theme: theme)
+    }
+
+    func setupShadow(theme: Theme) {
+        contentView.layer.shadowRadius = UX.shadowRadius
+        contentView.layer.shadowOffset = UX.shadowOffset
+        contentView.layer.shadowColor = theme.colors.shadowDefault.cgColor
+        contentView.layer.shadowOpacity = UX.shadowOpacity
     }
 
     // MARK: - Configuration
@@ -232,8 +249,6 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         // Reset any close animations.
         super.prepareForReuse()
         screenshotView.image = nil
-        backgroundHolder.transform = .identity
-        backgroundHolder.alpha = 1
         smallFaviconView.isHidden = true
         layer.shadowOffset = .zero
         layer.shadowPath = nil