Update Favicons to include 2 letters + colors (macOS parity) (duckduckgo#1927)

afterxleep · web-flow · commit ca1e14dc6817 · 2023-08-24T17:48:24.000+02:00
Task/Issue URL: https://app.asana.com/0/1142021229838617/1205285857217353/f Description: Updates the favicon generator to support multiple characters. It also makes sure we pass random colors for fake icon generation (which was not working before)
diff --git a/DuckDuckGo/AutofillListItemTableViewCell.swift b/DuckDuckGo/AutofillListItemTableViewCell.swift
@@ -126,7 +126,7 @@ class AutofillListItemTableViewCell: UITableViewCell {
     private func setupContentView(with item: AutofillLoginListItemViewModel) {
         titleLabel.text = item.title
         subtitleLabel.text = item.subtitle
-        iconImageView.loadFavicon(forDomain: item.account.domain, usingCache: .fireproof, preferredFakeFaviconLetter: item.preferredFaviconLetter)
+        iconImageView.loadFavicon(forDomain: item.account.domain, usingCache: .fireproof, preferredFakeFaviconLetters: item.preferredFaviconLetters)
     }
     
     override func layoutSubviews() {
diff --git a/DuckDuckGo/AutofillLoginDetailsHeaderView.swift b/DuckDuckGo/AutofillLoginDetailsHeaderView.swift
@@ -28,7 +28,7 @@ struct AutofillLoginDetailsHeaderView: View {
         HStack(spacing: Constants.horizontalStackSpacing) {
             FaviconView(viewModel: FaviconViewModel(domain: viewModel.domain,
                                                     cacheType: .fireproof,
-                                                    preferredFakeFaviconLetter: viewModel.preferredFakeFaviconLetter))
+                                                    preferredFakeFaviconLetters: viewModel.preferredFakeFaviconLetters))
                 .scaledToFit()
                 .frame(width: Constants.imageSize, height: Constants.imageSize)
                 .accessibilityHidden(true)
diff --git a/DuckDuckGo/AutofillLoginDetailsViewModel.swift b/DuckDuckGo/AutofillLoginDetailsViewModel.swift
@@ -455,13 +455,18 @@ final class AutofillLoginDetailsHeaderViewModel: ObservableObject {
     @Published var title: String = ""
     @Published var subtitle: String = ""
     @Published var domain: String = ""
-    @Published var preferredFakeFaviconLetter: String?
+    @Published var preferredFakeFaviconLetters: String?
     
     func updateData(with account: SecureVaultModels.WebsiteAccount, tld: TLD, autofillDomainNameUrlMatcher: AutofillDomainNameUrlMatcher, autofillDomainNameUrlSort: AutofillDomainNameUrlSort) {
         self.title = account.name(tld: tld, autofillDomainNameUrlMatcher: autofillDomainNameUrlMatcher)
         self.subtitle = UserText.autofillLoginDetailsLastUpdated(for: (dateFormatter.string(from: account.lastUpdated)))
         self.domain = account.domain ?? ""
-        self.preferredFakeFaviconLetter = account.firstTLDLetter(tld: tld, autofillDomainNameUrlSort: autofillDomainNameUrlSort)
+        
+        // Update favicon
+        let accountName = account.name(tld: tld, autofillDomainNameUrlMatcher: autofillDomainNameUrlMatcher)
+        let accountTitle = (account.title?.isEmpty == false) ? account.title! : "#"
+        self.preferredFakeFaviconLetters = tld.eTLDplus1(accountName) ?? accountTitle
+        
     }
 
 }
diff --git a/DuckDuckGo/AutofillLoginListItemViewModel.swift b/DuckDuckGo/AutofillLoginListItemViewModel.swift
@@ -25,12 +25,18 @@ import Common
 final class AutofillLoginListItemViewModel: Identifiable, Hashable {
     @Published var image = UIImage(systemName: "globe")!
     
+    var preferredFaviconLetters: String {
+        let accountName = self.account.name(tld: tld, autofillDomainNameUrlMatcher: urlMatcher)
+        let accountTitle = (account.title?.isEmpty == false) ? account.title! : "#"
+        return tld.eTLDplus1(accountName) ?? accountTitle
+    }
+    
     let account: SecureVaultModels.WebsiteAccount
     let title: String
     let subtitle: String
-    let preferredFaviconLetter: String?
     let id = UUID()
     let tld: TLD
+    let urlMatcher: AutofillDomainNameUrlMatcher
 
     internal init(account: SecureVaultModels.WebsiteAccount,
                   tld: TLD,
@@ -40,16 +46,15 @@ final class AutofillLoginListItemViewModel: Identifiable, Hashable {
         self.tld = tld
         self.title = account.name(tld: tld, autofillDomainNameUrlMatcher: autofillDomainNameUrlMatcher)
         self.subtitle = account.username ?? ""
-        self.preferredFaviconLetter = account.firstTLDLetter(tld: tld, autofillDomainNameUrlSort: autofillDomainNameUrlSort)
-
+        self.urlMatcher = autofillDomainNameUrlMatcher
         fetchImage()
     }
     
     private func fetchImage() {
         FaviconsHelper.loadFaviconSync(forDomain: account.domain,
                                        usingCache: .fireproof,
                                        useFakeFavicon: true,
-                                       preferredFakeFaviconLetter: preferredFaviconLetter) { image, _ in
+                                       preferredFakeFaviconLetters: preferredFaviconLetters) { image, _ in
             if let image = image {
                 self.image = image
             } else {
diff --git a/DuckDuckGo/FaviconViewModel.swift b/DuckDuckGo/FaviconViewModel.swift
@@ -26,25 +26,25 @@ final class FaviconViewModel {
     private let domain: String
     private let useFakeFavicon: Bool
     private let cacheType: Favicons.CacheType
-    private let preferredFaviconLetter: String?
+    private let preferredFaviconLetters: String?
     
     internal init(domain: String,
                   useFakeFavicon: Bool = true,
                   cacheType: Favicons.CacheType = .tabs,
-                  preferredFakeFaviconLetter: String? = nil) {
+                  preferredFakeFaviconLetters: String? = nil) {
         
         self.domain = domain
         self.useFakeFavicon = useFakeFavicon
         self.cacheType = cacheType
-        self.preferredFaviconLetter = preferredFakeFaviconLetter
+        self.preferredFaviconLetters = preferredFakeFaviconLetters
         loadFavicon()
     }
     
     private func loadFavicon() {
         FaviconsHelper.loadFaviconSync(forDomain: domain,
                                        usingCache: cacheType,
                                        useFakeFavicon: useFakeFavicon,
-                                       preferredFakeFaviconLetter: preferredFaviconLetter) { image, _ in
+                                       preferredFakeFaviconLetters: preferredFaviconLetters) { image, _ in
             if let image = image {
                 self.image = image
             }
diff --git a/DuckDuckGo/FaviconsHelper.swift b/DuckDuckGo/FaviconsHelper.swift
@@ -20,15 +20,18 @@
 import UIKit
 import Core
 import Kingfisher
+import Common
 
 struct FaviconsHelper {
-
+    
+    private static  let tld: TLD = AppDependencyProvider.shared.storageCache.tld
+    
     static func loadFaviconSync(forDomain domain: String?,
                                 usingCache cacheType: Favicons.CacheType,
                                 useFakeFavicon: Bool,
-                                preferredFakeFaviconLetter: String? = nil,
+                                preferredFakeFaviconLetters: String? = nil,
                                 completion: ((UIImage?, Bool) -> Void)? = nil) {
-   
+           
         func complete(_ image: UIImage?) {
             var fake = false
             var resultImage: UIImage?
@@ -38,7 +41,8 @@ struct FaviconsHelper {
             } else if useFakeFavicon, let domain = domain {
                 fake = true
                 resultImage = Self.createFakeFavicon(forDomain: domain,
-                                                     preferredFakeFaviconLetter: preferredFakeFaviconLetter)
+                                                     backgroundColor: UIColor.forDomain(domain),
+                                                     preferredFakeFaviconLetters: preferredFakeFaviconLetters)
             }
             completion?(resultImage, fake)
         }
@@ -92,12 +96,13 @@ struct FaviconsHelper {
                                   size: CGFloat = 192,
                                   backgroundColor: UIColor = UIColor.greyishBrown2,
                                   bold: Bool = true,
-                                  preferredFakeFaviconLetter: String? = nil) -> UIImage? {
+                                  preferredFakeFaviconLetters: String? = nil,
+                                  letterCount: Int = 2) -> UIImage? {
 
         let cornerRadius = size * 0.125
-        let fontSize = size * 0.76
-        
         let imageRect = CGRect(x: 0, y: 0, width: size, height: size)
+        let padding = size * 0.16
+        let labelFrame = CGRect(x: padding, y: padding, width: imageRect.width - (2 * padding), height: imageRect.height - (2 * padding))
 
         let renderer = UIGraphicsImageRenderer(size: imageRect.size)
         let icon = renderer.image { imageContext in
@@ -106,21 +111,29 @@ struct FaviconsHelper {
             context.setFillColor(backgroundColor.cgColor)
             context.addPath(CGPath(roundedRect: imageRect, cornerWidth: cornerRadius, cornerHeight: cornerRadius, transform: nil))
             context.fillPath()
-             
-            let label = UILabel(frame: imageRect)
-            label.font = bold ? UIFont.boldAppFont(ofSize: fontSize) : UIFont.appFont(ofSize: fontSize)
+           
+            let label = UILabel(frame: labelFrame)
+            label.numberOfLines = 1
+            label.adjustsFontSizeToFitWidth = true
+            label.minimumScaleFactor = 0.1
+            label.baselineAdjustment = .alignCenters
+            label.font = bold ? UIFont.boldAppFont(ofSize: size) : UIFont.appFont(ofSize: size)
             label.textColor = UIColor.white
             label.textAlignment = .center
-            label.text = preferredFakeFaviconLetter ?? String(domain.droppingWwwPrefix().prefix(1).uppercased())
-            label.sizeToFit()
-             
-            context.translateBy(x: (imageRect.width - label.bounds.width) / 2.0,
-                                y: (imageRect.height - label.font.ascender) / 2.0 - (label.font.ascender - label.font.capHeight) / 2.0)
-             
+
+            if let prefferedPrefix = preferredFakeFaviconLetters?.prefix(letterCount).capitalized {
+                label.text = prefferedPrefix
+            } else {
+                label.text = String(tld.eTLDplus1(domain)?.prefix(letterCount) ?? "#").capitalized
+            }
+           
+            context.translateBy(x: padding, y: padding)
+
             label.layer.draw(in: context)
         }
          
         return icon.withRenderingMode(.alwaysOriginal)
     }
+
     
 }
diff --git a/DuckDuckGo/UIImageViewExtension.swift b/DuckDuckGo/UIImageViewExtension.swift
@@ -27,14 +27,14 @@ extension UIImageView {
     func loadFavicon(forDomain domain: String?,
                      usingCache cacheType: Favicons.CacheType,
                      useFakeFavicon: Bool = true,
-                     preferredFakeFaviconLetter: String? = nil,
+                     preferredFakeFaviconLetters: String? = nil,
                      completion: ((UIImage?, Bool) -> Void)? = nil) {
 
         func load() {
             FaviconsHelper.loadFaviconSync(forDomain: domain,
                                            usingCache: cacheType,
                                            useFakeFavicon: useFakeFavicon,
-                                           preferredFakeFaviconLetter: preferredFakeFaviconLetter) { image, fake in
+                                           preferredFakeFaviconLetters: preferredFakeFaviconLetters) { image, fake in
                 self.image = image
                 completion?(image, fake)
             }

Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ class AutofillListItemTableViewCell: UITableViewCell {`
`126`	`126`	`private func setupContentView(with item: AutofillLoginListItemViewModel) {`
`127`	`127`	`titleLabel.text = item.title`
`128`	`128`	`subtitleLabel.text = item.subtitle`
`129`		`- iconImageView.loadFavicon(forDomain: item.account.domain, usingCache: .fireproof, preferredFakeFaviconLetter: item.preferredFaviconLetter)`
	`129`	`+ iconImageView.loadFavicon(forDomain: item.account.domain, usingCache: .fireproof, preferredFakeFaviconLetters: item.preferredFaviconLetters)`
`130`	`130`	`}`
`131`	`131`
`132`	`132`	`override func layoutSubviews() {`