Refactor FXIOS-11611 [Tab tray UI experiment] Adjust tab thumbnail for dynamic type (#25331)

* Cell height was absolute for tab content + ensure it scales

* Revert minor changes not needed

Author: lmarceau

firefox-ios/Client/Frontend/Browser/Tabs/LayoutManager/TabsSectionManager.swift

@@ -9,7 +9,7 @@ class TabsSectionManager: FeatureFlaggable {
         // On iPad we can set to have bigger tabs, on iPhone we need smaller ones
         static let cellEstimatedWidth: CGFloat = UIDevice.current.userInterfaceIdiom == .pad ? 250 : 170
         static let cellAbsoluteHeight: CGFloat = 200
-        static let experimentCellAbsoluteHeight: CGFloat = 220
+        static let experimentCellEstimatedHeight: CGFloat = 220
         static let cardSpacing: CGFloat = 16
         static let experimentCardSpacing: CGFloat = 28
         static let standardInset: CGFloat = 18
@@ -41,13 +41,23 @@ class TabsSectionManager: FeatureFlaggable {
                                   ? minNumberOfCellsPerRow
                                   : maxNumberOfCellsPerRow
 
-        let cellHeight = isTabTrayUIExperimentsEnabled ? UX.experimentCellAbsoluteHeight : UX.cellAbsoluteHeight
-        let itemSize = NSCollectionLayoutSize(
-            widthDimension: .estimated(UX.cellEstimatedWidth),
-            heightDimension: .absolute(cellHeight)
-        )
-        let item = NSCollectionLayoutItem(layoutSize: itemSize)
+        let itemSize: NSCollectionLayoutSize
+        let cellHeight: CGFloat
+        if isTabTrayUIExperimentsEnabled {
+            cellHeight = UX.experimentCellEstimatedHeight
+            itemSize = NSCollectionLayoutSize(
+                widthDimension: .estimated(UX.cellEstimatedWidth),
+                heightDimension: .estimated(cellHeight)
+            )
+        } else {
+            cellHeight = UX.cellAbsoluteHeight
+            itemSize = NSCollectionLayoutSize(
+                widthDimension: .estimated(UX.cellEstimatedWidth),
+                heightDimension: .absolute(cellHeight)
+            )
+        }
 
+        let item = NSCollectionLayoutItem(layoutSize: itemSize)
         let groupSize = NSCollectionLayoutSize(
             widthDimension: .fractionalWidth(1),
             heightDimension: .estimated(cellHeight)

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

@@ -29,6 +29,7 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         static let shadowRadius: CGFloat = 4
         static let shadowOffset = CGSize(width: 0, height: 2)
         static let shadowOpacity: Float = 1
+        static let thumbnailScreenshotHeight: CGFloat = 200
     }
     // MARK: - Properties
 
@@ -43,6 +44,7 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
     }
 
     private lazy var favicon: FaviconImageView = .build()
+    private lazy var faviconContainer: UIView = .build()
 
     // MARK: - UI
 
@@ -53,6 +55,8 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         stackView.alignment = .fill
         stackView.spacing = UX.tabViewFooterSpacing
         stackView.backgroundColor = .clear
+        stackView.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
+        stackView.setContentHuggingPriority(.defaultHigh, for: .vertical)
     }
 
     private lazy var backgroundHolder: UIView = .build { view in
@@ -71,6 +75,8 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         label.font = FXFontStyles.Regular.footnote.scaledFont()
         label.adjustsFontForContentSizeCategory = true
         label.isAccessibilityElement = false
+        label.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
+        label.setContentHuggingPriority(.defaultHigh, for: .vertical)
     }
 
     private lazy var closeButton: UIButton = .build { button in
@@ -110,8 +116,9 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
         contentView.addSubview(backgroundHolder)
         contentView.addSubview(footerView)
 
-        footerView.addArrangedSubview(favicon)
+        footerView.addArrangedSubview(faviconContainer)
         footerView.addArrangedSubview(titleText)
+        faviconContainer.addSubview(favicon)
 
         backgroundHolder.addSubviews(screenshotView, smallFaviconView, closeButton)
 
@@ -263,16 +270,22 @@ class ExperimentTabCell: UICollectionViewCell, ThemeApplicable, ReusableCell, Fe
             backgroundHolder.topAnchor.constraint(equalTo: contentView.topAnchor),
             backgroundHolder.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
             backgroundHolder.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
-            backgroundHolder.bottomAnchor.constraint(equalTo: footerView.topAnchor,
-                                                     constant: -UX.tabViewFooterSpacing),
+            backgroundHolder.heightAnchor.constraint(equalToConstant: UX.thumbnailScreenshotHeight),
 
+            footerView.topAnchor.constraint(equalTo: backgroundHolder.bottomAnchor,
+                                            constant: UX.tabViewFooterSpacing),
             footerView.leadingAnchor.constraint(greaterThanOrEqualTo: contentView.leadingAnchor),
             footerView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
             footerView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
             footerView.trailingAnchor.constraint(lessThanOrEqualTo: contentView.trailingAnchor),
 
+            faviconContainer.topAnchor.constraint(lessThanOrEqualTo: favicon.topAnchor),
+            faviconContainer.bottomAnchor.constraint(greaterThanOrEqualTo: favicon.bottomAnchor),
+            faviconContainer.leadingAnchor.constraint(equalTo: favicon.leadingAnchor),
+            faviconContainer.trailingAnchor.constraint(equalTo: favicon.trailingAnchor),
             favicon.heightAnchor.constraint(equalToConstant: UX.faviconSize.height),
             favicon.widthAnchor.constraint(equalToConstant: UX.faviconSize.width),
+            favicon.centerYAnchor.constraint(equalTo: titleText.centerYAnchor),
 
             closeButton.heightAnchor.constraint(equalToConstant: UX.closeButtonSize),
             closeButton.widthAnchor.constraint(equalToConstant: UX.closeButtonSize),