[WIP] [MVP] Add FXIOS-13816 [Translations] icon to translate

BrowserKit/Sources/Common/Constants/StandardImageIdentifiers.swift

@@ -39,6 +39,8 @@ public struct StandardImageIdentifiers {
         public static let starOneHalfFill = "starOneHalfFillMedium"
         public static let sun = "sunMedium"
         public static let sunFill = "sunFillMedium"
+        public static let translate = "translateMedium"
+        public static let translateActive = "translateActiveMedium"
     }
 
     // Icon size 24x24

BrowserKit/Sources/ToolbarKit/ToolbarButton.swift

@@ -37,6 +37,7 @@ class ToolbarButton: UIButton, ThemeApplicable, UIGestureRecognizerDelegate {
 
     private var isTextButton = false
     private var hasCustomColor = false
+    private var hasHighlightedColor = false
 
     override init(frame: CGRect) {
         super.init(frame: frame)
@@ -59,6 +60,7 @@ class ToolbarButton: UIButton, ThemeApplicable, UIGestureRecognizerDelegate {
         isSelected = element.isSelected
         isTextButton = element.title != nil
         hasCustomColor = element.hasCustomColor
+        hasHighlightedColor = element.hasHighlightedColor
         self.notificationCenter = notificationCenter
 
         let image = imageConfiguredForRTL(for: element)
@@ -208,9 +210,22 @@ class ToolbarButton: UIButton, ThemeApplicable, UIGestureRecognizerDelegate {
     }
 
     private func imageConfiguredForRTL(for element: ToolbarElement) -> UIImage? {
-        if let existingImage = configuration?.image { return existingImage }
+        // TODO: FXIOS-11973 For MVP purpose, should revisit
+        let inactiveImageName = StandardImageIdentifiers.Medium.translate
+        let activeImageName = StandardImageIdentifiers.Medium.translateActive
+        let isTranslateButton = element.iconName == inactiveImageName || element.iconName == activeImageName
+
+        if let existingImage = configuration?.image, !isTranslateButton {
+            return existingImage
+        }
+
         guard let iconName = element.iconName else { return nil }
-        let image = UIImage(named: iconName)?.withRenderingMode(.alwaysTemplate)
+        var image = UIImage(named: iconName)?.withRenderingMode(.alwaysTemplate)
+
+        if element.iconName == StandardImageIdentifiers.Medium.translateActive {
+            image = UIImage(named: iconName)
+        }
+
         return element.isFlippedForRTL ? image?.imageFlippedForRightToLeftLayoutDirection() : image
     }
 
@@ -257,7 +272,7 @@ class ToolbarButton: UIButton, ThemeApplicable, UIGestureRecognizerDelegate {
     public func applyTheme(theme: Theme) {
         let colors = theme.colors
         foregroundColorNormal = hasCustomColor ? colors.iconSecondary : colors.iconPrimary
-        foregroundColorHighlighted = colors.actionPrimary
+        foregroundColorHighlighted = hasHighlightedColor ? colors.actionPrimary : colors.iconPrimary
         foregroundColorDisabled = colors.iconDisabled
         backgroundColorNormal = .clear
 

BrowserKit/Sources/ToolbarKit/ToolbarElement.swift

@@ -32,6 +32,9 @@ public struct ToolbarElement: Equatable {
     /// Indicates if the element has a custom color
     let hasCustomColor: Bool
 
+    /// Indicates if the element has a highlighted color when tapping on it
+    let hasHighlightedColor: Bool
+
     /// Title to display in the large content viewer
     let largeContentTitle: String?
 
@@ -74,6 +77,7 @@ public struct ToolbarElement: Equatable {
                 isFlippedForRTL: Bool = false,
                 isSelected: Bool = false,
                 hasCustomColor: Bool = false,
+                hasHighlightedColor: Bool = false,
                 largeContentTitle: String? = nil,
                 contextualHintType: String? = nil,
                 a11yLabel: String,
@@ -93,6 +97,7 @@ public struct ToolbarElement: Equatable {
         self.isFlippedForRTL = isFlippedForRTL
         self.isSelected = isSelected
         self.hasCustomColor = hasCustomColor
+        self.hasHighlightedColor = hasHighlightedColor
         self.largeContentTitle = largeContentTitle
         self.contextualHintType = contextualHintType
         self.onSelected = onSelected

firefox-ios/Client/Application/AccessibilityIdentifiers.swift

@@ -30,6 +30,7 @@ struct AccessibilityIdentifiers {
         static let searchButton = "TabToolbar.searchButton"
         static let stopButton = "TabToolbar.stopButton"
         static let bookmarksButton = "TabToolbar.libraryButton"
+        static let translateButton = "TabToolbar.translateButton"
     }
 
     struct Browser {

firefox-ios/Client/Assets/Images.xcassets/translateActiveMedium.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "translateActive.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

firefox-ios/Client/Assets/Images.xcassets/translateMedium.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "translate-24.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

firefox-ios/Client/Frontend/Browser/BrowserViewController/Views/BrowserViewController.swift

@@ -2447,6 +2447,9 @@ class BrowserViewController: UIViewController,
             lockIconImageName: lockIconImageName,
             lockIconNeedsTheming: lockIconNeedsTheming,
             safeListedURLImageName: safeListedURLImageName,
+            translationConfiguration: TranslationConfiguration(
+                hasTranslated: false
+            ),
             windowUUID: windowUUID,
             actionType: ToolbarActionType.urlDidChange)
         store.dispatchLegacy(action)

firefox-ios/Client/Frontend/Browser/Toolbars/Models/AddressToolbarContainerModel.swift

@@ -264,6 +264,7 @@ final class AddressToolbarContainerModel: Equatable {
                 isFlippedForRTL: action.isFlippedForRTL,
                 isSelected: action.isSelected,
                 hasCustomColor: action.hasCustomColor,
+                hasHighlightedColor: action.hasHighlightedColor,
                 largeContentTitle: action.largeContentTitle,
                 contextualHintType: action.contextualHintType,
                 a11yLabel: action.a11yLabel,
@@ -313,6 +314,7 @@ final class AddressToolbarContainerModel: Equatable {
 
     static func == (lhs: AddressToolbarContainerModel, rhs: AddressToolbarContainerModel) -> Bool {
         lhs.navigationActions == rhs.navigationActions &&
+        lhs.leadingPageActions == rhs.leadingPageActions &&
         lhs.trailingPageActions == rhs.trailingPageActions &&
         lhs.browserActions == rhs.browserActions &&