Add you-tube warning popover

Sources/Brave/Frontend/Browser/BrowserViewController.swift

@@ -2612,15 +2612,34 @@ extension BrowserViewController: TabDelegate {
       ReadyStateScriptHandler(tab: tab),
       DeAmpScriptHandler(tab: tab),
       SiteStateListenerScriptHandler(tab: tab),
-      CosmeticFiltersScriptHandler(tab: tab),
       URLPartinessScriptHandler(tab: tab),
       FaviconScriptHandler(tab: tab),
       Web3NameServiceScriptHandler(tab: tab),
       Web3IPFSScriptHandler(tab: tab),
       YoutubeQualityScriptHandler(tab: tab),
-
       tab.contentBlocker,
       tab.requestBlockingContentHelper,
+
+      CosmeticFiltersScriptHandler(tab: tab, youtubeWarningCallback: { [weak self] url in
+        guard let self = self else { return }
+        let viewController = AntiAdBlockWarningViewController(url: url)
+
+        let popover = PopoverController(
+          contentController: viewController,
+          contentSizeBehavior: .preferredContentSize
+        )
+
+        viewController.dismissCallback = { [weak self, weak popover] needsReload in
+          if needsReload {
+            self?.tabManager.reloadSelectedTab()
+          }
+
+          popover?.dismissPopover()
+        }
+
+        popover.arrowDirectionBehavior = .automatic
+        popover.present(from: self.topToolbar.locationView.shieldsButton, on: self)
+      }),
     ]
 
     if #unavailable(iOS 16.0) {

Sources/Brave/Frontend/UserContent/UserScripts/Scripts_Dynamic/ScriptHandlers/Paged/CosmeticFiltersScriptHandler.swift

@@ -8,6 +8,7 @@ import WebKit
 import Shared
 import Data
 import os.log
+import BraveShields
 
 /// This handler receives a list of ids and selectors for a given frame for which it is then able to inject scripts and css rules in order to hide certain elements
 ///
@@ -31,9 +32,12 @@ class CosmeticFiltersScriptHandler: TabContentScript {
   static let userScript: WKUserScript? = nil
 
   private weak var tab: Tab?
+  private let youtubeWarningCallback: (URL) -> Void
+  private var shownYoutubeWarning = false
 
-  init(tab: Tab) {
+  init(tab: Tab, youtubeWarningCallback: @escaping (URL) -> Void) {
     self.tab = tab
+    self.youtubeWarningCallback = youtubeWarningCallback
   }
 
   func userContentController(_ userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage, replyHandler: @escaping (Any?, String?) -> Void) {
@@ -83,6 +87,19 @@ class CosmeticFiltersScriptHandler: TabContentScript {
           }
         }
 
+        // Based on what we block we want to show the youtube warning
+        // TODO: @JS Figure out which selectors should trigger this warning
+        if !ShieldPreferences.hasSeenAntiAdBlockWarning.value {
+          if let url = self.tab?.url, let etldP1 = url.baseDomain, etldP1 == "youtube.com" {
+            if !shownYoutubeWarning {
+              shownYoutubeWarning = true
+              youtubeWarningCallback(url)
+            }
+          } else {
+            shownYoutubeWarning = false
+          }
+        }
+
         replyHandler([
           "aggressiveSelectors": Array(aggressiveSelectors),
           "standardSelectors": Array(standardSelectors)

Sources/BraveShields/ShieldPreferences.swift

@@ -22,3 +22,13 @@ public class ShieldPreferences {
     set { blockAdsAndTrackingLevelRaw.value = newValue.rawValue }
   }
 }
+
+// MARK: - Youtube warning
+
+extension ShieldPreferences {
+  /// The bool detemining if adblock warning was shown
+  public static let hasSeenAntiAdBlockWarning = Preferences.Option<Bool>(
+    key: "shields.has-seen-anti-ad-block-warning",
+    default: false
+  )
+}

Sources/DesignSystem/Views/BraveButtonStyle.swift

@@ -90,6 +90,25 @@ public struct BraveOutlineButtonStyle: ButtonStyle {
   }
 }
 
+public struct BravePlainButtonStyle: ButtonStyle {
+  @Environment(\.isEnabled) private var isEnabled
+
+  public var size: BraveButtonSize
+
+  public init(size: BraveButtonSize) {
+    self.size = size
+  }
+
+  public func makeBody(configuration: Configuration) -> some View {
+    configuration.label
+      .opacity(configuration.isPressed ? 0.7 : 1.0)
+      .font(size.font)
+      .foregroundColor(isEnabled ? Color(.braveLabel) : Color(.braveDisabled))
+      .padding(size.padding)
+      .animation(.linear(duration: 0.15), value: isEnabled)
+  }
+}
+
 #if DEBUG
 struct BraveButtonStyle_Previews: PreviewProvider {
   static let defaultSizes: [BraveButtonSize] = [

Sources/Onboarding/Assets/Images.xcassets/AntiAdBlockWarning/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Onboarding/Assets/Images.xcassets/AntiAdBlockWarning/youtube_warning_address_bar.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "Address bar.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "Address bar 1.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Onboarding/Shields/AntiAdBlockWarningView.swift

@@ -0,0 +1,142 @@
+// Copyright 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import SwiftUI
+import BraveUI
+import DesignSystem
+import Strings
+import Preferences
+import BraveShields
+import SnapKit
+import Data
+
+public struct AntiAdBlockWarningView: View {
+  public typealias DismissCallback = (Bool) -> Void
+
+  let url: URL
+  let dismiss: DismissCallback
+
+  private var playerDescription: AttributedString? {
+    do {
+      return try AttributedString(markdown: Strings.Shields.antiAdBlockWarningBravePlayerDescription)
+    } catch {
+      assertionFailure()
+      return nil
+    }
+  }
+
+  public var body: some View {
+    ScrollView {
+      VStack(alignment: .leading, spacing: 24) {
+        Text(Strings.Shields.antiAdBlockWarningTitle)
+          .font(.headline).foregroundStyle(Color(braveSystemName: .textPrimary))
+        Text(Strings.Shields.antiAdBlockWarningDescription)
+        Text(Strings.Shields.antiAdBlockWarningDescription2)
+
+        if let playerDescription = playerDescription {
+          VStack(spacing: 0) {
+            Image("youtube_warning_address_bar", bundle: .module)
+            Text(playerDescription)
+              .multilineTextAlignment(.center)
+              .font(.caption)
+              .padding()
+              .frame(maxWidth: .infinity, alignment: .center)
+          }
+          .clipShape(RoundedRectangle(cornerRadius: 8))
+          .overlay(
+            RoundedRectangle(cornerRadius: 8)
+              .stroke(Color(braveSystemName: .gray20), lineWidth: 1)
+          )
+        }
+
+        VStack(alignment: .center) {
+          Button {
+            ShieldPreferences.hasSeenAntiAdBlockWarning.value = true
+            Domain.setBraveShield(forUrl: url, shield: .AllOff, isOn: true, isPrivateBrowsing: false)
+            dismiss(true)
+          } label: {
+            Text(Strings.Shields.antiAdBlockWarningConfirmationButton)
+              .multilineTextAlignment(.center)
+              .frame(maxWidth: .infinity, alignment: .center)
+              .padding(4)
+          }
+          .buttonStyle(BraveFilledButtonStyle(size: .normal))
+
+          Button {
+            ShieldPreferences.hasSeenAntiAdBlockWarning.value = true
+            dismiss(false)
+          } label: {
+            Text(Strings.Shields.antiAdBlockWarningDismissButton)
+              .multilineTextAlignment(.center)
+              .frame(maxWidth: .infinity, alignment: .center)
+              .padding(4)
+          }
+          .buttonStyle(BravePlainButtonStyle(size: .normal))
+        }
+      }
+      .foregroundStyle(Color(braveSystemName: .textSecondary))
+      .background(Color(.braveBackground))
+      .padding(24)
+    }
+  }
+}
+
+#if swift(>=5.9)
+#Preview {
+  AntiAdBlockWarningView(
+    url: URL(string: "https://youtube.com")!,
+    dismiss: { _ in }
+  )
+}
+#endif
+
+public class AntiAdBlockWarningViewController: UIViewController, PopoverContentComponent {
+  private lazy var hostingController: UIHostingController<AntiAdBlockWarningView> = {
+    return UIHostingController(rootView: AntiAdBlockWarningView(url: url, dismiss: { [weak self] needsReload in
+      self?.dismissCallback?(needsReload)
+    }))
+  }()
+
+  private let url: URL
+  public var dismissCallback: ((Bool) -> Void)?
+
+  public init(url: URL) {
+    self.url = url
+    super.init(nibName: nil, bundle: nil)
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  public override func viewDidLoad() {
+    super.viewDidLoad()
+    hostingController.willMove(toParent: self)
+    view.addSubview(hostingController.view)
+    hostingController.didMove(toParent: self)
+
+    hostingController.view.snp.makeConstraints {
+      $0.edges.equalTo(view.safeAreaLayoutGuide)
+    }
+
+    updatePreferredContentSize()
+  }
+
+  private func updatePreferredContentSize() {
+    let width = min(360, UIScreen.main.bounds.width - 20)
+    // Ensure the a static width is given to the main view so we can calculate the height
+    // correctly when we force a layout
+    let height = view.systemLayoutSizeFitting(
+      CGSize(width: width, height: 0),
+      withHorizontalFittingPriority: .required,
+      verticalFittingPriority: .fittingSizeLevel
+    ).height
+
+    preferredContentSize = CGSize(
+      width: width,
+      height: height
+    )
+  }
+}