[iOS] - Fix URL-Bar LTR-RTL Clipping

ios/BUILD.gn

@@ -34,6 +34,7 @@ import("//brave/ios/browser/api/query_filter/headers.gni")
 import("//brave/ios/browser/api/session_restore/headers.gni")
 import("//brave/ios/browser/api/skus/headers.gni")
 import("//brave/ios/browser/api/storekit_receipt/headers.gni")
+import("//brave/ios/browser/api/string/headers.gni")
 import("//brave/ios/browser/api/url/headers.gni")
 import("//brave/ios/browser/api/url_sanitizer/headers.gni")
 import("//brave/ios/browser/api/web/ui/headers.gni")
@@ -127,6 +128,7 @@ brave_core_public_headers += credential_provider_public_headers
 brave_core_public_headers += developer_options_code_public_headers
 brave_core_public_headers += browser_api_storekit_receipt_public_headers
 brave_core_public_headers += webcompat_reporter_public_headers
+brave_core_public_headers += browser_api_string_public_headers
 
 action("brave_core_umbrella_header") {
   script = "//build/config/ios/generate_umbrella_header.py"

ios/brave-ios/Sources/Brave/Frontend/Browser/Toolbars/BottomToolbar/Menu/History/HistoryView.swift

@@ -44,13 +44,10 @@ struct HistoryItemView: View {
             forDisplayOmitSchemePathAndTrivialSubdomains: url.absoluteString
           )
         )
-        .truncationMode(.tail)
         .font(.footnote)
         .frame(maxWidth: .infinity, alignment: .leading)
         .fixedSize(horizontal: false, vertical: true)
         .foregroundStyle(Color(braveSystemName: .textSecondary))
-        .environment(\.layoutDirection, .leftToRight)
-        .flipsForRightToLeftLayoutDirection(false)
       }
     }
   }

ios/brave-ios/Sources/Brave/Frontend/Browser/Toolbars/PageSecurityView.swift

@@ -4,6 +4,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import BraveCore
+import BraveShared
 import BraveUI
 import Foundation
 import Shared
@@ -63,9 +64,12 @@ struct PageSecurityView: View {
   var body: some View {
     VStack(alignment: .leading, spacing: 0) {
       VStack(alignment: .leading, spacing: 16) {
-        Text(displayURL)
+        URLElidedText(text: displayURL)
           .font(.headline)
           .foregroundStyle(Color(braveSystemName: .textPrimary))
+          .frame(maxWidth: .infinity, alignment: .leading)
+          .fixedSize(horizontal: false, vertical: true)
+
         HStack(alignment: .firstTextBaseline) {
           warningIcon
           VStack(alignment: .leading, spacing: 4) {

ios/brave-ios/Sources/Brave/Frontend/Browser/Toolbars/UrlBar/TabLocationView.swift

@@ -3,6 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import BraveCore
+import BraveShared
 import BraveStrings
 import Combine
 import DesignSystem
@@ -456,7 +457,7 @@ class TabLocationView: UIView {
 
     if let url = url {
       if let internalURL = InternalURL(url), internalURL.isBasicAuthURL {
-        urlDisplayLabel.isWebScheme = false
+        urlDisplayLabel.isLeftToRight = true
         urlDisplayLabel.text = Strings.PageSecurityView.signIntoWebsiteURLBarTitle
       } else {
         // Matches LocationBarModelImpl::GetFormattedURL in Chromium (except for omitHTTP)
@@ -466,21 +467,42 @@ class TabLocationView: UIView {
         // If we can't parse the origin and the URL can't be classified via AutoCompleteClassifier
         // the URL is likely a broken deceptive URL. Example: `about:blank#https://apple.com`
         if URLOrigin(url: url).url == nil && URIFixup.getURL(url.absoluteString) == nil {
-          urlDisplayLabel.isWebScheme = false
+          urlDisplayLabel.isLeftToRight = true
           urlDisplayLabel.text = ""
         } else {
-          urlDisplayLabel.isWebScheme = ["http", "https"].contains(url.scheme ?? "")
           urlDisplayLabel.text = URLFormatter.formatURL(
             URLOrigin(url: url).url?.absoluteString ?? url.absoluteString,
             formatTypes: [
-              .trimAfterHost, .omitHTTPS, .omitTrivialSubdomains,
+              .omitDefaults, .trimAfterHost, .omitHTTPS, .omitTrivialSubdomains,
             ],
             unescapeOptions: .normal
           )
+
+          // The direction the string will be rendered (this happens regardless of locale!!!)
+          // In a LTR environment, Arabic will always render RTL
+          // The dominant charset based on unicode's bidirection algorithm
+          // with strong L and strong R determines how a string will be rendered
+          let isLTRRendered = url.isLTRRendered
+
+          // Determine if the URL has BOTH LTR and RTL characters.
+          // Very likely a malicious URL, but not always!
+          // URLs like: m5155.xn--mgbaiqly6b2eg.xn--ngbc5azd/ are innocent
+          let isMixedCharset = url.hasMixedBidiDirection
+
+          var isLTR = isLTRRendered && !isMixedCharset
+          if isMixedCharset {
+            // FORCE LTR - ETLD are always the right most portion after the dot.
+            // We will force render the URL in LTR mode, so we should force clip on the left (sub-domain).
+            // RTL rendered domains will clip from the right side (sub-domain) and the ETLD will be rendered on the left.
+            isLTR = true
+          }
+
+          urlDisplayLabel.isLeftToRight =
+            !["http", "https"].contains(url.scheme ?? "") || !isLTR
         }
       }
     } else {
-      urlDisplayLabel.isWebScheme = false
+      urlDisplayLabel.isLeftToRight = true
       urlDisplayLabel.text = ""
     }
 
@@ -548,9 +570,10 @@ private class DisplayURLLabel: UILabel {
   }
 
   private var textSize: CGSize = .zero
-  private var isRightToLeft: Bool = false
-  fileprivate var isWebScheme: Bool = false {
+  fileprivate var isLeftToRight: Bool = true {
     didSet {
+      updateText()
+      updateTextSize()
       updateClippingDirection()
       setNeedsLayout()
       setNeedsDisplay()
@@ -570,13 +593,24 @@ private class DisplayURLLabel: UILabel {
       if oldValue != text {
         updateText()
         updateTextSize()
-        detectLanguageForNaturalDirectionClipping()
         updateClippingDirection()
       }
       setNeedsDisplay()
     }
   }
 
+  private func updateTextSize() {
+    textSize = attributedText?.size() ?? .zero
+    setNeedsLayout()
+    setNeedsDisplay()
+  }
+
+  private func updateClippingDirection() {
+    // Update clipping fade direction
+    clippingFade.gradientLayer.startPoint = .init(x: isLeftToRight ? 1 : 0, y: 0.5)
+    clippingFade.gradientLayer.endPoint = .init(x: isLeftToRight ? 0 : 1, y: 0.5)
+  }
+
   private func updateText() {
     if let text = text {
       // Without attributed string, the label will always render RTL characters even if you force LTR layout.
@@ -597,28 +631,6 @@ private class DisplayURLLabel: UILabel {
     }
   }
 
-  private func updateTextSize() {
-    textSize = attributedText?.size() ?? .zero
-    setNeedsLayout()
-    setNeedsDisplay()
-  }
-
-  private func detectLanguageForNaturalDirectionClipping() {
-    guard let text, let language = NLLanguageRecognizer.dominantLanguage(for: text) else { return }
-    switch language {
-    case .arabic, .hebrew, .persian, .urdu:
-      isRightToLeft = true
-    default:
-      isRightToLeft = false
-    }
-  }
-
-  private func updateClippingDirection() {
-    // Update clipping fade direction
-    clippingFade.gradientLayer.startPoint = .init(x: isRightToLeft || !isWebScheme ? 1 : 0, y: 0.5)
-    clippingFade.gradientLayer.endPoint = .init(x: isRightToLeft || !isWebScheme ? 0 : 1, y: 0.5)
-  }
-
   @available(*, unavailable)
   required init(coder: NSCoder) {
     fatalError()
@@ -637,7 +649,7 @@ private class DisplayURLLabel: UILabel {
     super.layoutSubviews()
 
     clippingFade.frame = .init(
-      x: isRightToLeft || !isWebScheme ? bounds.width - 20 : 0,
+      x: isLeftToRight ? bounds.width - 20 : 0,
       y: 0,
       width: 20,
       height: bounds.height
@@ -651,7 +663,7 @@ private class DisplayURLLabel: UILabel {
     var rect = rect
     if textSize.width > bounds.width {
       let delta = (textSize.width - bounds.width)
-      if !isRightToLeft && isWebScheme {
+      if !isLeftToRight {
         rect.origin.x -= delta
         rect.size.width += delta
       }

ios/brave-ios/Sources/BraveShared/Extensions/URLExtensions.swift

@@ -136,6 +136,56 @@ extension URL {
 
     return URL(string: "\(baseURL)?\(InternalURL.Param.url.rawValue)=\(encodedURL)")
   }
+
+  public var hasMixedBidiDirection: Bool {
+    // First format the URL which will decode the puny-coding
+    let scheme = scheme ?? "http"
+    var renderedString = URLFormatter.formatURL(
+      absoluteString,
+      formatTypes: [.omitDefaults, .omitTrivialSubdomains, .omitTrailingSlashOnBareHostname],
+      unescapeOptions: .normal
+    )
+
+    // Strip prefixes
+    if let range = renderedString.range(of: "^(www|mobile|m)\\.", options: .regularExpression) {
+      renderedString.replaceSubrange(range, with: "")
+    }
+
+    // Strip scheme
+    if let range = renderedString.range(
+      of: "^(\(scheme)://|\(scheme):)",
+      options: .regularExpression
+    ) {
+      renderedString.replaceSubrange(range, with: "")
+    }
+
+    return renderedString.bidiDirection == .MIXED
+  }
+
+  public var isLTRRendered: Bool {
+    // First format the URL which will decode the puny-coding
+    let scheme = scheme ?? "http"
+    var renderedString = URLFormatter.formatURL(
+      absoluteString,
+      formatTypes: [.omitDefaults, .omitTrivialSubdomains, .omitTrailingSlashOnBareHostname],
+      unescapeOptions: .normal
+    )
+
+    // Strip prefixes
+    if let range = renderedString.range(of: "^(www|mobile|m)\\.", options: .regularExpression) {
+      renderedString.replaceSubrange(range, with: "")
+    }
+
+    // Strip scheme
+    if let range = renderedString.range(
+      of: "^(\(scheme)://|\(scheme):)",
+      options: .regularExpression
+    ) {
+      renderedString.replaceSubrange(range, with: "")
+    }
+
+    return renderedString.bidiBaseDirection == .LTR
+  }
 }
 
 extension InternalURL {

ios/brave-ios/Sources/BraveShared/URLElidedTextView.swift

@@ -37,5 +37,8 @@ public struct URLElidedText: View {
         attributes: .init([.font: font ?? .body, .paragraphStyle: paragraphStyle])
       )
     )
+    .truncationMode(.tail)
+    .environment(\.layoutDirection, .leftToRight)
+    .flipsForRightToLeftLayoutDirection(false)
   }
 }