Bugfix FXIOS-10574 Protection panel tweaks Design QA

BrowserKit/Sources/ComponentLibrary/Headers/HeaderView.swift

@@ -181,7 +181,6 @@ public final class HeaderView: UIView, ThemeApplicable {
     }
 
     public func setupDetails(subtitle: String, title: String, icon: FaviconImageViewModel) {
-        titleLabel.font = FXFontStyles.Regular.headline.scaledFont()
         favicon.setFavicon(icon)
         subtitleLabel.text = subtitle
         titleLabel.text = title

firefox-ios/Client/Frontend/TrackingProtection/TrackigProtectionRedux/TrackingProtectionModel.swift

@@ -150,12 +150,9 @@ class TrackingProtectionModel {
     }
 
     func getConnectionStatusImage(themeType: ThemeType) -> UIImage {
-        if connectionSecure {
-            return UIImage(imageLiteralResourceName: StandardImageIdentifiers.Large.lock)
-                .withRenderingMode(.alwaysTemplate)
-        } else {
-            return UIImage(imageLiteralResourceName: StandardImageIdentifiers.Large.lockSlash)
-        }
+        let imageName = connectionSecure ? StandardImageIdentifiers.Large.lock : StandardImageIdentifiers.Large.lockSlash
+        return UIImage(imageLiteralResourceName: imageName)
+            .withRenderingMode(.alwaysTemplate)
     }
 
     func toggleSiteSafelistStatus() {

firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionBlockedTrackersView.swift

@@ -172,7 +172,7 @@ final class TrackingProtectionBlockedTrackersView: UIView, ThemeApplicable {
     func applyTheme(theme: Theme) {
         self.backgroundColor = theme.colors.layer2
         trackersDetailArrow.tintColor = theme.colors.iconSecondary
-        shieldImage.tintColor = theme.colors.iconPrimary
+        shieldImage.tintColor = theme.colors.iconSecondary
         trackersHorizontalLine.backgroundColor = theme.colors.borderPrimary
     }
 }

firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionButton.swift

@@ -60,7 +60,6 @@ class TrackingProtectionButton: ResizableButton, ThemeApplicable {
         updatedConfiguration.contentInsets = UX.contentInsets
         updatedConfiguration.title = viewModel?.title
         updatedConfiguration.titleAlignment = .leading
-        updatedConfiguration.background.customView?.layer.borderWidth = 1
         updatedConfiguration.background.customView?.layer.borderColor = borderColor.cgColor
 
         configuration = updatedConfiguration
@@ -77,7 +76,6 @@ class TrackingProtectionButton: ResizableButton, ThemeApplicable {
         updatedConfiguration.contentInsets = UX.contentInsets
         updatedConfiguration.title = viewModel.title
         updatedConfiguration.titleAlignment = .leading
-        updatedConfiguration.background.customView?.layer.borderWidth = 1
         updatedConfiguration.background.customView?.layer.borderColor = borderColor.cgColor
 
 //        if there were any pre-existing transformer applied to the background color,
@@ -96,10 +94,8 @@ class TrackingProtectionButton: ResizableButton, ThemeApplicable {
     // MARK: ThemeApplicable
 
     func applyTheme(theme: Theme) {
-        layer.borderColor = theme.colors.borderPrimary.cgColor
         backgroundColorNormal = theme.colors.layer2
         foregroundColor = theme.colors.textPrimary
-        borderColor = theme.colors.borderPrimary
         setNeedsUpdateConfiguration()
     }
 }

firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift

@@ -10,7 +10,7 @@ final class TrackingProtectionConnectionDetailsView: UIView {
         static let foxImageSize: CGFloat = 100
         static let connectionDetailsLabelsVerticalSpacing: CGFloat = 12
         static let connectionDetailsLabelBottomSpacing: CGFloat = 28
-        static let connectionDetailsStackSpacing = 15.0
+        static let connectionDetailsStackSpacing = 8.0
     }
 
     private let connectionDetailsContentView: UIView = .build { view in
@@ -23,24 +23,22 @@ final class TrackingProtectionConnectionDetailsView: UIView {
         image.clipsToBounds = true
     }
 
-    private var connectionDetailsLabelsContainer: UIStackView = .build { stack in
-        stack.backgroundColor = .clear
-        stack.distribution = .fillProportionally
-        stack.alignment = .leading
-        stack.axis = .vertical
-        stack.spacing = UX.connectionDetailsStackSpacing
+    private var connectionDetailsLabelsContainer: UIView = .build { view in
+        view.backgroundColor = .clear
     }
 
     private var connectionDetailsTitleLabel: UILabel = .build { label in
         label.font = FXFontStyles.Bold.subheadline.scaledFont()
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
+        label.textAlignment = .left
     }
 
     private let connectionDetailsStatusLabel: UILabel = .build { label in
         label.font = FXFontStyles.Regular.subheadline.scaledFont()
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
+        label.textAlignment = .left
     }
 
     private var viewConstraints: [NSLayoutConstraint] = []
@@ -58,8 +56,8 @@ final class TrackingProtectionConnectionDetailsView: UIView {
         self.layer.cornerRadius = TPMenuUX.UX.viewCornerRadius
         self.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
         self.layer.masksToBounds = true
-        connectionDetailsLabelsContainer.addArrangedSubview(connectionDetailsTitleLabel)
-        connectionDetailsLabelsContainer.addArrangedSubview(connectionDetailsStatusLabel)
+        connectionDetailsLabelsContainer.addSubview(connectionDetailsTitleLabel)
+        connectionDetailsLabelsContainer.addSubview(connectionDetailsStatusLabel)
         connectionDetailsContentView.addSubviews(foxStatusImage, connectionDetailsLabelsContainer)
         self.addSubview(connectionDetailsContentView)
     }
@@ -83,6 +81,25 @@ final class TrackingProtectionConnectionDetailsView: UIView {
                                                               constant: TPMenuUX.UX.connectionDetailsHeaderMargins),
             connectionDetailsContentView.bottomAnchor.constraint(equalTo: self.bottomAnchor,
                                                                  constant: -TPMenuUX.UX.connectionDetailsHeaderMargins / 2),
+
+            // Labels
+            connectionDetailsTitleLabel.leadingAnchor.constraint(equalTo: connectionDetailsLabelsContainer.leadingAnchor),
+            connectionDetailsTitleLabel.trailingAnchor.constraint(equalTo: connectionDetailsLabelsContainer.trailingAnchor),
+            connectionDetailsTitleLabel.bottomAnchor.constraint(
+                equalTo: connectionDetailsLabelsContainer.centerYAnchor,
+                constant: -UX.connectionDetailsLabelsVerticalSpacing / 2
+            ),
+
+            connectionDetailsStatusLabel.leadingAnchor.constraint(equalTo: connectionDetailsLabelsContainer.leadingAnchor),
+            connectionDetailsStatusLabel.trailingAnchor.constraint(equalTo: connectionDetailsLabelsContainer.trailingAnchor),
+            connectionDetailsStatusLabel.topAnchor.constraint(
+                equalTo: connectionDetailsLabelsContainer.centerYAnchor,
+                constant: UX.connectionDetailsLabelsVerticalSpacing / 2
+            ),
+            connectionDetailsStatusLabel.bottomAnchor.constraint(
+                lessThanOrEqualTo: connectionDetailsLabelsContainer.bottomAnchor
+            ),
+
             // Image
             foxStatusImage.leadingAnchor.constraint(
                 equalTo: connectionDetailsContentView.leadingAnchor,

firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionStatusView.swift

@@ -132,15 +132,12 @@ final class TrackingProtectionConnectionStatusView: UIView, ThemeApplicable {
     func applyTheme(theme: Theme) {
         self.backgroundColor = theme.colors.layer2
         connectionDetailArrow.tintColor = theme.colors.iconSecondary
+        connectionStatusImage.tintColor = theme.colors.iconSecondary
     }
 
     func setConnectionStatus(image: UIImage, isConnectionSecure: Bool, theme: Theme) {
         connectionStatusImage.image = image
-        if isConnectionSecure {
-            connectionDetailArrow.isHidden = false
-            connectionStatusImage.tintColor = theme.colors.iconPrimary
-        } else {
-            connectionDetailArrow.isHidden = true
-        }
+        connectionStatusImage.tintColor = theme.colors.iconSecondary
+        connectionDetailArrow.isHidden = !isConnectionSecure
     }
 }

firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift

@@ -17,10 +17,11 @@ struct TPMenuUX {
         static let headerLabelDistance: CGFloat = 2.0
         static let iconSize: CGFloat = 24
         static let connectionDetailsHeaderMargins: CGFloat = 8
-        static let faviconCornerRadius: CGFloat = 5
+        static let faviconCornerRadius: CGFloat = 16
+        static let clearDataButtonTopDistance: CGFloat = 32
         static let clearDataButtonCornerRadius: CGFloat = 12
-        static let clearDataButtonBorderWidth: CGFloat = 1
-        static let settingsLinkButtonBottomSpacing: CGFloat = 32
+        static let clearDataButtonBorderWidth: CGFloat = 0
+        static let settingsLinkButtonBottomSpacing: CGFloat = 16
         static let modalMenuCornerRadius: CGFloat = 12
         struct Line {
             static let height: CGFloat = 1
@@ -150,7 +151,7 @@ class TrackingProtectionViewController: UIViewController,
 
     override func viewDidLayoutSubviews() {
         super.viewDidLayoutSubviews()
-        self.view.invalidateIntrinsicContentSize() // Adjusts size based on content.
+        self.view.invalidateIntrinsicContentSize()
         if !hasSetPointOrigin {
             hasSetPointOrigin = true
             pointOrigin = self.view.frame.origin
@@ -274,6 +275,7 @@ class TrackingProtectionViewController: UIViewController,
         headerContainer.closeButtonCallback = { [weak self] in
             self?.enhancedTrackingProtectionMenuDelegate?.didFinish()
         }
+        headerContainer.updateHeaderLineView(isHidden: true)
     }
 
     // MARK: Connection Status Header Setup
@@ -374,16 +376,19 @@ class TrackingProtectionViewController: UIViewController,
             ),
             clearCookiesButton.topAnchor.constraint(
                 equalTo: toggleView.bottomAnchor,
-                constant: TPMenuUX.UX.horizontalMargin
+                constant: TPMenuUX.UX.clearDataButtonTopDistance
             )
         ]
         constraints.append(contentsOf: clearCookiesButtonConstraints)
     }
 
     // MARK: Settings View Setup
     private func configureProtectionSettingsView() {
-        let settingsButtonViewModel = LinkButtonViewModel(title: model.settingsButtonTitle,
-                                                          a11yIdentifier: model.settingsA11yId)
+        let settingsButtonViewModel = LinkButtonViewModel(
+            title: model.settingsButtonTitle,
+            a11yIdentifier: model.settingsA11yId,
+            font: FXFontStyles.Regular.footnote.scaledFont()
+        )
         settingsLinkButton.configure(viewModel: settingsButtonViewModel)
     }
 
@@ -392,10 +397,17 @@ class TrackingProtectionViewController: UIViewController,
         baseView.addSubviews(settingsLinkButton)
 
         let protectionConstraints = [
-            settingsLinkButton.leadingAnchor.constraint(equalTo: baseView.leadingAnchor),
-            settingsLinkButton.trailingAnchor.constraint(equalTo: baseView.trailingAnchor),
-            settingsLinkButton.topAnchor.constraint(equalTo: clearCookiesButton.bottomAnchor,
-                                                    constant: TPMenuUX.UX.horizontalMargin),
+            settingsLinkButton.leadingAnchor.constraint(
+                equalTo: baseView.leadingAnchor,
+                constant: TPMenuUX.UX.horizontalMargin
+            ),
+            settingsLinkButton.trailingAnchor.constraint(
+                equalTo: baseView.trailingAnchor
+            ),
+            settingsLinkButton.topAnchor.constraint(
+                equalTo: clearCookiesButton.bottomAnchor,
+                constant: TPMenuUX.UX.horizontalMargin
+            ),
             settingsLinkButton.bottomAnchor.constraint(
                 equalTo: baseView.bottomAnchor,
                 constant: -TPMenuUX.UX.settingsLinkButtonBottomSpacing
@@ -609,7 +621,7 @@ extension TrackingProtectionViewController {
     func applyTheme() {
         let theme = currentTheme()
         overrideUserInterfaceStyle = theme.type.getInterfaceStyle()
-        view.backgroundColor = theme.colors.layer1
+        view.backgroundColor = theme.colors.layer3
         headerContainer.applyTheme(theme: theme)
         connectionDetailsHeaderView.backgroundColor = theme.colors.layer2
         trackersView.applyTheme(theme: theme)
@@ -620,7 +632,6 @@ extension TrackingProtectionViewController {
         connectionHorizontalLine.backgroundColor = theme.colors.borderPrimary
         toggleView.applyTheme(theme: theme)
         clearCookiesButton.applyTheme(theme: theme)
-        clearCookiesButton.layer.borderColor = theme.colors.borderPrimary.cgColor
         settingsLinkButton.applyTheme(theme: theme)
         setNeedsStatusBarAppearanceUpdate()
     }