Element Picker on Android

android/brave_java_sources.gni

@@ -96,6 +96,7 @@ brave_java_sources = [
   "../../brave/android/java/org/chromium/chrome/browser/browsing_data/BraveClearBrowsingDataFragmentAdvanced.java",
   "../../brave/android/java/org/chromium/chrome/browser/compositor/layouts/BraveToolbarSwipeLayout.java",
   "../../brave/android/java/org/chromium/chrome/browser/contextmenu/BraveChromeContextMenuPopulator.java",
+  "../../brave/android/java/org/chromium/chrome/browser/cosmetic_filters/BraveCosmeticFiltersUtils.java",
   "../../brave/android/java/org/chromium/chrome/browser/crash/BravePureJavaExceptionReporter.java",
   "../../brave/android/java/org/chromium/chrome/browser/crypto_wallet/AssetRatioServiceFactory.java",
   "../../brave/android/java/org/chromium/chrome/browser/crypto_wallet/BlockchainRegistryFactory.java",

android/java/org/chromium/base/BraveFeatureList.java

@@ -35,4 +35,5 @@ public abstract class BraveFeatureList {
     public static final String BRAVE_DAY_ZERO_EXPERIMENT = "BraveDayZeroExperiment";
     public static final String BRAVE_FALLBACK_DOH_PROVIDER = "BraveFallbackDoHProvider";
     public static final String BRAVE_BLOCK_ALL_COOKIES_TOGGLE = "BlockAllCookiesToggle";
+    public static final String BRAVE_SHIELDS_ELEMENT_PICKER = "BraveShieldsElementPicker";
 }

android/java/org/chromium/chrome/browser/app/BraveActivity.java

@@ -184,6 +184,7 @@
 import org.chromium.chrome.browser.share.ShareDelegate;
 import org.chromium.chrome.browser.share.ShareDelegate.ShareOrigin;
 import org.chromium.chrome.browser.shields.ContentFilteringFragment;
+import org.chromium.chrome.browser.shields.CreateCustomFiltersFragment;
 import org.chromium.chrome.browser.site_settings.BraveWalletEthereumConnectedSites;
 import org.chromium.chrome.browser.speedreader.BraveSpeedReaderUtils;
 import org.chromium.chrome.browser.tab.Tab;
@@ -1622,6 +1623,16 @@ public void openBraveContentFilteringSettings() {
         settingsLauncher.startSettings(this, ContentFilteringFragment.class);
     }
 
+    public int getBraveThemeBackgroundColor() {
+        return ContextUtils.getApplicationContext()
+                .getColor(R.color.toolbar_background_color_for_ntp);
+    }
+
+    public void openBraveCreateCustomFiltersSettings() {
+        SettingsNavigation settingsLauncher = SettingsNavigationFactory.createSettingsNavigation();
+        settingsLauncher.startSettings(this, CreateCustomFiltersFragment.class);
+    }
+
     public void openBraveWalletSettings() {
         SettingsNavigation settingsLauncher = SettingsNavigationFactory.createSettingsNavigation();
         settingsLauncher.startSettings(this, BraveWalletPreferences.class);

android/java/org/chromium/chrome/browser/cosmetic_filters/BraveCosmeticFiltersUtils.java

@@ -0,0 +1,48 @@
+/* Copyright (c) 2024 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/. */
+
+package org.chromium.chrome.browser.cosmetic_filters;
+
+import org.jni_zero.CalledByNative;
+import org.jni_zero.JNINamespace;
+import org.jni_zero.NativeMethods;
+
+import org.chromium.base.Log;
+import org.chromium.chrome.browser.app.BraveActivity;
+import org.chromium.chrome.browser.tab.Tab;
+
+@JNINamespace("cosmetic_filters")
+public class BraveCosmeticFiltersUtils {
+    private static final String TAG = "CosmeticFiltersUtils";
+
+    public static boolean launchContentPickerForWebContent(Tab tab) {
+        return BraveCosmeticFiltersUtilsJni.get().launchContentPickerForWebContent(tab);
+    }
+
+    @CalledByNative
+    public static void showCustomFilterSettings() {
+        try {
+            BraveActivity.getBraveActivity().openBraveCreateCustomFiltersSettings();
+        } catch (BraveActivity.BraveActivityNotFoundException e) {
+            Log.e(TAG, "open create custom filter settings" + e);
+        }
+    }
+
+    @CalledByNative
+    public static int getThemeBackgroundColor() {
+        int backgroundColor = 0;
+        try {
+            backgroundColor = BraveActivity.getBraveActivity().getBraveThemeBackgroundColor();
+        } catch (BraveActivity.BraveActivityNotFoundException e) {
+            Log.e(TAG, "Get theme background color" + e);
+        }
+        return backgroundColor;
+    }
+
+    @NativeMethods
+    interface Natives {
+        boolean launchContentPickerForWebContent(Tab tab);
+    }
+}

android/java/org/chromium/chrome/browser/shields/BraveShieldsHandler.java

@@ -48,6 +48,7 @@
 import org.chromium.chrome.browser.BraveRewardsNativeWorker;
 import org.chromium.chrome.browser.app.BraveActivity;
 import org.chromium.chrome.browser.brave_stats.BraveStatsUtil;
+import org.chromium.chrome.browser.cosmetic_filters.BraveCosmeticFiltersUtils;
 import org.chromium.chrome.browser.customtabs.CustomTabActivity;
 import org.chromium.chrome.browser.flags.ChromeFeatureList;
 import org.chromium.chrome.browser.onboarding.OnboardingPrefManager;
@@ -744,6 +745,23 @@ private void setUpSwitchLayouts() {
         } else {
             fingerprintingSwitchLayout.setVisibility(View.GONE);
         }
+
+        TextView blockElementsText =
+                mSecondaryLayout.findViewById(R.id.brave_shields_block_element_text);
+        blockElementsText.setVisibility(
+                ChromeFeatureList.isEnabled(BraveFeatureList.BRAVE_SHIELDS_ELEMENT_PICKER)
+                        ? View.VISIBLE
+                        : View.GONE);
+        blockElementsText.setOnClickListener(
+                new View.OnClickListener() {
+                    @Override
+                    public void onClick(View view) {
+                        hideBraveShieldsMenu();
+                        Tab currentActiveTab = mIconFetcher.getTab();
+                        BraveCosmeticFiltersUtils.launchContentPickerForWebContent(
+                                currentActiveTab);
+                    }
+                });
     }
 
     private void setUpAboutLayout() {

android/java/res/layout/brave_shields_secondary_layout.xml

@@ -58,4 +58,14 @@
 		android:id="@+id/brave_shields_fingerprinting_switch_id"
 		layout="@layout/brave_shields_switcher"/>
 
+    <TextView
+        android:id="@+id/brave_shields_block_element_text"
+		android:layout_width="wrap_content"
+		android:layout_height="48dp"
+		android:paddingHorizontal="16dp"
+		android:gravity="start|center_vertical"
+        android:textColor="@color/shield_text_color"
+        android:textSize="14sp"
+		android:text="@string/brave_shields_block_element_text" />
+
 </LinearLayout>

browser/about_flags.cc

@@ -687,6 +687,14 @@
           kOsAll,                                                              \
           FEATURE_VALUE_TYPE(brave_shields::features::kBlockAllCookiesToggle), \
       },                                                                       \
+      {                                                                        \
+          "block-element-feature",                                             \
+          "Enable Block Element feature",                                      \
+          "Allows to block selected HTML element on the page",                 \
+          kOsAll,                                                              \
+          FEATURE_VALUE_TYPE(                                                  \
+              brave_shields::features::kBraveShieldsElementPicker),            \
+      },                                                                       \
       {                                                                        \
           "brave-super-referral",                                              \
           "Enable Brave Super Referral",                                       \

browser/android/cosmetic_filters/cosmetic_filters_utils.cc

@@ -0,0 +1,38 @@
+/* Copyright (c) 2024 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/. */
+
+#include "brave/browser/android/cosmetic_filters/cosmetic_filters_utils.h"
+
+#include "brave/browser/cosmetic_filters/cosmetic_filters_tab_helper.h"
+#include "brave/build/android/jni_headers/BraveCosmeticFiltersUtils_jni.h"
+#include "chrome/browser/android/tab_android.h"
+
+namespace cosmetic_filters {
+
+static jboolean JNI_BraveCosmeticFiltersUtils_LaunchContentPickerForWebContent(
+    JNIEnv* env,
+    const base::android::JavaParamRef<jobject>& tab) {
+  TabAndroid* tab_android = TabAndroid::GetNativeTab(env, tab);
+  content::WebContents* web_contents = tab_android->web_contents();
+  if (!web_contents) {
+    return false;
+  }
+
+  CosmeticFiltersTabHelper::LaunchContentPicker(web_contents);
+
+  return true;
+}
+
+void ShowCustomFilterSettings() {
+  JNIEnv* env = base::android::AttachCurrentThread();
+  Java_BraveCosmeticFiltersUtils_showCustomFilterSettings(env);
+}
+
+int32_t GetThemeBackgroundColor() {
+  JNIEnv* env = base::android::AttachCurrentThread();
+  return Java_BraveCosmeticFiltersUtils_getThemeBackgroundColor(env);
+}
+
+}  // namespace cosmetic_filters

browser/android/cosmetic_filters/cosmetic_filters_utils.h

@@ -0,0 +1,18 @@
+/* Copyright (c) 2024 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/. */
+
+#ifndef BRAVE_BROWSER_ANDROID_COSMETIC_FILTERS_COSMETIC_FILTERS_UTILS_H_
+#define BRAVE_BROWSER_ANDROID_COSMETIC_FILTERS_COSMETIC_FILTERS_UTILS_H_
+
+#include "content/public/browser/web_contents.h"
+
+namespace cosmetic_filters {
+
+void ShowCustomFilterSettings();
+int GetThemeBackgroundColor();
+
+}  // namespace cosmetic_filters
+
+#endif  // BRAVE_BROWSER_ANDROID_COSMETIC_FILTERS_COSMETIC_FILTERS_UTILS_H_

browser/cosmetic_filters/cosmetic_filters_tab_helper.cc

@@ -16,12 +16,21 @@
 
 #if !BUILDFLAG(IS_ANDROID)
 #include "brave/browser/ui/brave_pages.h"
+#include "chrome/browser/themes/theme_service.h"
+#include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_finder.h"
+#include "chrome/browser/ui/browser_window.h"
+#include "chrome/browser/ui/color/chrome_color_id.h"
+#include "ui/color/color_provider.h"
+#else
+#include "brave/browser/android/cosmetic_filters/cosmetic_filters_utils.h"
+#include "chrome/browser/flags/android/chrome_session_state.h"
 #endif  // !BUILDFLAG(IS_ANDROID)
 
 namespace cosmetic_filters {
 
 namespace {
+
 bool IsValidFilterText(std::string_view selector) {
   if (!base::IsStringUTF8(selector)) {
     return false;
@@ -85,7 +94,23 @@ void CosmeticFiltersTabHelper::ManageCustomFilters() {
     brave::ShowBraveAdblock(browser);
   }
 #else   // !BUILDFLAG(IS_ANDROID)
-  NOTIMPLEMENTED();
+  ShowCustomFilterSettings();
+#endif  // !BUILDFLAG(IS_ANDROID)
+}
+
+void CosmeticFiltersTabHelper::GetElementPickerThemeInfo(
+    GetElementPickerThemeInfoCallback callback) {
+#if !BUILDFLAG(IS_ANDROID)
+  auto& color_provider = GetWebContents().GetColorProvider();
+  std::move(callback).Run(
+      GetWebContents().GetColorMode() == ui::ColorProviderKey::ColorMode::kDark,
+      color_provider.GetColor(kColorSidePanelBadgeBackground));
+#else   // !BUILDFLAG(IS_ANDROID)
+  const auto dark_mode_state = chrome::android::GetDarkModeState();
+  std::move(callback).Run(
+      dark_mode_state == chrome::android::DarkModeState::kDarkModeSystem ||
+          dark_mode_state == chrome::android::DarkModeState::kDarkModeApp,
+      GetThemeBackgroundColor());
 #endif  // !BUILDFLAG(IS_ANDROID)
 }
 

browser/cosmetic_filters/cosmetic_filters_tab_helper.h

@@ -32,6 +32,8 @@ class CosmeticFiltersTabHelper
  private:
   void AddSiteCosmeticFilter(const std::string& filter) override;
   void ManageCustomFilters() override;
+  void GetElementPickerThemeInfo(
+      GetElementPickerThemeInfoCallback callback) override;
 
   friend class content::WebContentsUserData<CosmeticFiltersTabHelper>;
 

browser/cosmetic_filters/sources.gni

@@ -15,3 +15,12 @@ brave_browser_cosmetic_filters_deps = [
   "//chrome/browser/ui",
   "//third_party/blink/public/common",
 ]
+
+if (is_android) {
+  brave_browser_cosmetic_filters_sources += [
+    "//brave/browser/android/cosmetic_filters/cosmetic_filters_utils.cc",
+    "//brave/browser/android/cosmetic_filters/cosmetic_filters_utils.h",
+  ]
+
+  brave_browser_cosmetic_filters_deps += [ "//brave/build/android:jni_headers" ]
+}

browser/ui/android/strings/android_brave_strings.grd

@@ -1645,6 +1645,9 @@ Are you sure you want to do this?
       <message name="IDS_SITE_BROKEN_TEXT" desc="Shields text for broken text warning message.">
         If this site appears broken, try Shields down.
       </message>
+      <message name="IDS_BRAVE_SHIELDS_BLOCK_ELEMENT_TEXT" desc="Shields block element button label.">
+        Block element
+      </message>
       <message name="IDS_REPORT_BROKEN_SITE_TEXT" desc="Shields text for broken text warning message.">
         Report a broken site
       </message>

build/android/BUILD.gn

@@ -217,6 +217,7 @@ generate_jni("jni_headers") {
     "//brave/android/java/org/chromium/chrome/browser/brave_leo/BraveLeoSettingsLauncherHelper.java",
     "//brave/android/java/org/chromium/chrome/browser/brave_leo/BraveLeoUtils.java",
     "//brave/android/java/org/chromium/chrome/browser/brave_news/BraveNewsControllerFactory.java",
+    "//brave/android/java/org/chromium/chrome/browser/cosmetic_filters/BraveCosmeticFiltersUtils.java",
     "//brave/android/java/org/chromium/chrome/browser/crypto_wallet/AssetRatioServiceFactory.java",
     "//brave/android/java/org/chromium/chrome/browser/crypto_wallet/BlockchainRegistryFactory.java",
     "//brave/android/java/org/chromium/chrome/browser/crypto_wallet/BraveWalletProviderDelegateImplHelper.java",

build/android/config.gni

@@ -107,6 +107,7 @@ brave_jni_headers_sources = [
   "//brave/android/java/org/chromium/chrome/browser/brave_leo/BraveLeoMojomHelper.java",
   "//brave/android/java/org/chromium/chrome/browser/brave_leo/BraveLeoUtils.java",
   "//brave/android/java/org/chromium/chrome/browser/brave_news/BraveNewsControllerFactory.java",
+  "//brave/android/java/org/chromium/chrome/browser/cosmetic_filters/BraveCosmeticFiltersUtils.java",
   "//brave/android/java/org/chromium/chrome/browser/crypto_wallet/AssetRatioServiceFactory.java",
   "//brave/android/java/org/chromium/chrome/browser/crypto_wallet/BlockchainRegistryFactory.java",
   "//brave/android/java/org/chromium/chrome/browser/crypto_wallet/BraveWalletProviderDelegateImplHelper.java",

chromium_src/chrome/browser/flags/android/chrome_feature_list.cc

@@ -45,7 +45,8 @@
     &net::features::kBraveForgetFirstPartyStorage,                      \
     &brave_shields::features::kBraveShowStrictFingerprintingMode,       \
     &brave_shields::features::kBraveLocalhostAccessPermission,          \
-    &brave_shields::features::kBlockAllCookiesToggle
+    &brave_shields::features::kBlockAllCookiesToggle,                   \
+    &brave_shields::features::kBraveShieldsElementPicker
 
 // clang-format on
 

chromium_src/chrome/browser/renderer_context_menu/render_view_context_menu.cc

@@ -43,6 +43,7 @@
 #include "brave/browser/tor/tor_profile_service_factory.h"
 #endif
 
+#include "base/feature_list.h"
 #include "brave/browser/ai_chat/ai_chat_service_factory.h"
 #include "brave/browser/brave_browser_process.h"
 #include "brave/browser/misc_metrics/process_misc_metrics.h"
@@ -55,6 +56,7 @@
 #include "brave/components/ai_chat/core/common/features.h"
 #include "brave/components/ai_chat/core/common/mojom/ai_chat.mojom.h"
 #include "brave/components/ai_chat/core/common/pref_names.h"
+#include "brave/components/brave_shields/core/common/features.h"
 #include "components/grit/brave_components_strings.h"
 
 #if BUILDFLAG(ENABLE_AI_REWRITER)
@@ -714,6 +716,8 @@ void BraveRenderViewContextMenu::AppendDeveloperItems() {
 
   const auto page_url = source_web_contents_->GetLastCommittedURL();
   add_block_elements &= page_url.SchemeIsHTTPOrHTTPS();
+  add_block_elements &= base::FeatureList::IsEnabled(
+      brave_shields::features::kBraveShieldsElementPicker);
   if (add_block_elements) {
     std::optional<size_t> inspect_index =
         menu_model_.GetIndexOfCommandId(IDC_CONTENT_CONTEXT_INSPECTELEMENT);

components/brave_shields/core/common/features.cc

@@ -133,6 +133,14 @@ BASE_FEATURE(kCosmeticFilteringSyncLoad,
 BASE_FEATURE(kBlockAllCookiesToggle,
              "BlockAllCookiesToggle",
              base::FEATURE_DISABLED_BY_DEFAULT);
+// when enabled, allow to select and block HTML elements
+BASE_FEATURE(kBraveShieldsElementPicker,
+             "BraveShieldsElementPicker",
+#if BUILDFLAG(IS_ANDROID)
+             base::FEATURE_DISABLED_BY_DEFAULT);
+#else
+             base::FEATURE_ENABLED_BY_DEFAULT);
+#endif
 
 // Enables extra TRACE_EVENTs in content filter js. The feature is
 // primary designed for local debugging.

components/brave_shields/core/common/features.h

@@ -41,6 +41,7 @@ BASE_DECLARE_FEATURE(kCosmeticFilteringJsPerformance);
 BASE_DECLARE_FEATURE(kCosmeticFilteringSyncLoad);
 BASE_DECLARE_FEATURE(kBlockAllCookiesToggle);
 BASE_DECLARE_FEATURE(kCosmeticFilteringCustomScriptlets);
+BASE_DECLARE_FEATURE(kBraveShieldsElementPicker);
 extern const base::FeatureParam<int> kComponentUpdateCheckIntervalMins;
 extern const base::FeatureParam<std::string>
     kCosmeticFilteringSubFrameFirstSelectorsPollingDelayMs;

components/cosmetic_filters/common/cosmetic_filters.mojom

@@ -24,6 +24,9 @@ interface CosmeticFiltersHandler {
 
   // Opens the custom filter section in Shields settings .
   ManageCustomFilters();
+
+  GetElementPickerThemeInfo() => (
+      bool is_dark_mode_enabled, int32 background_color);
 };
 
 // An interface to render frame agent `CosmeticFiltersJSHandler` to control