From 79a03a7e3d021a85b280349e3a8fab7038a83484 Mon Sep 17 00:00:00 2001 From: Stefan Vladut Date: Wed, 20 Nov 2024 17:28:46 +0200 Subject: [PATCH 1/3] Bugfix FXIOS-10574 Protection panel tweaks Design QA (#23161) --- .../TrackingProtectionModel.swift | 9 +++------ ...TrackingProtectionBlockedTrackersView.swift | 2 +- .../TrackingProtectionButton.swift | 4 ---- ...ackingProtectionConnectionDetailsView.swift | 4 +++- ...rackingProtectionConnectionStatusView.swift | 9 +++------ .../TrackingProtectionViewController.swift | 18 +++++++++++------- 6 files changed, 21 insertions(+), 25 deletions(-) diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackigProtectionRedux/TrackingProtectionModel.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackigProtectionRedux/TrackingProtectionModel.swift index 6faacf09196a..c0dfdd23c7e6 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackigProtectionRedux/TrackingProtectionModel.swift +++ b/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() { diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionBlockedTrackersView.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionBlockedTrackersView.swift index b7719ed92605..f1113b096bad 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionBlockedTrackersView.swift +++ b/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 } } diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionButton.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionButton.swift index 1909fdf51863..5d2663cd24e9 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionButton.swift +++ b/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() } } diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift index 412679439e03..ed4c08f6a539 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift +++ b/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 @@ -35,12 +35,14 @@ final class TrackingProtectionConnectionDetailsView: UIView { 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] = [] diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionStatusView.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionStatusView.swift index bdfcb3f47a7c..be513e39df51 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionStatusView.swift +++ b/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 } } diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift index 1c5036a8092b..e4a06ff28b99 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift +++ b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift @@ -18,9 +18,10 @@ struct TPMenuUX { static let iconSize: CGFloat = 24 static let connectionDetailsHeaderMargins: CGFloat = 8 static let faviconCornerRadius: CGFloat = 5 + 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 @@ -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,7 +376,7 @@ class TrackingProtectionViewController: UIViewController, ), clearCookiesButton.topAnchor.constraint( equalTo: toggleView.bottomAnchor, - constant: TPMenuUX.UX.horizontalMargin + constant: TPMenuUX.UX.clearDataButtonTopDistance ) ] constraints.append(contentsOf: clearCookiesButtonConstraints) @@ -382,8 +384,11 @@ class TrackingProtectionViewController: UIViewController, // 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) } @@ -609,7 +614,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 +625,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() } From 3b9fccf75f17e356f76ca69728da0b1a73010ddb Mon Sep 17 00:00:00 2001 From: Stefan Vladut Date: Thu, 21 Nov 2024 21:02:33 +0200 Subject: [PATCH 2/3] addressed PR comments --- ...ckingProtectionConnectionDetailsView.swift | 31 ++++++++++++++----- .../TrackingProtectionViewController.swift | 15 ++++++--- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift index ed4c08f6a539..258e4ee8ddae 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift +++ b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHelpers/TrackingProtectionConnectionDetailsView.swift @@ -23,12 +23,8 @@ 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 @@ -60,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) } @@ -85,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, diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift index e4a06ff28b99..27e5cebbc83c 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift +++ b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift @@ -397,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 From ddaa5d8a7d3b23f7feb0fc4bf12d582012c91126 Mon Sep 17 00:00:00 2001 From: Stefan Vladut Date: Fri, 22 Nov 2024 11:55:05 +0200 Subject: [PATCH 3/3] updated the corner radius and removed the font change --- BrowserKit/Sources/ComponentLibrary/Headers/HeaderView.swift | 1 - .../TrackingProtection/TrackingProtectionViewController.swift | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/BrowserKit/Sources/ComponentLibrary/Headers/HeaderView.swift b/BrowserKit/Sources/ComponentLibrary/Headers/HeaderView.swift index 4950c7d5e832..7c7bb0f253c5 100644 --- a/BrowserKit/Sources/ComponentLibrary/Headers/HeaderView.swift +++ b/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 diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift index 27e5cebbc83c..426c6393bab1 100644 --- a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift +++ b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionViewController.swift @@ -17,7 +17,7 @@ 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 = 0 @@ -151,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