element picker, android + desktop v2

Signed-off-by: Vadym Struts <[email protected]>
brave · Dec 3, 2024 · 50b3c88 · 50b3c88
1 parent a3fec02
commit 50b3c88
Show file tree

Hide file tree

Showing 14 changed files with 352 additions and 108 deletions.
diff --git a/android/java/org/chromium/chrome/browser/app/BraveActivity.java b/android/java/org/chromium/chrome/browser/app/BraveActivity.java
@@ -1621,6 +1621,11 @@ 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);

diff --git a/android/java/org/chromium/chrome/browser/cosmetic_filters/BraveCosmeticFiltersUtils.java b/android/java/org/chromium/chrome/browser/cosmetic_filters/BraveCosmeticFiltersUtils.java
@@ -30,6 +30,17 @@ public static void showCustomFilterSettings() {
         }
     }
 
+    @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);

diff --git a/browser/android/cosmetic_filters/cosmetic_filters_utils.cc b/browser/android/cosmetic_filters/cosmetic_filters_utils.cc
@@ -30,4 +30,9 @@ void ShowCustomFilterSettings() {
   Java_BraveCosmeticFiltersUtils_showCustomFilterSettings(env);
 }
 
+int32_t GetThemeBackgroundColor() {
+  JNIEnv* env = base::android::AttachCurrentThread();
+  return Java_BraveCosmeticFiltersUtils_getThemeBackgroundColor(env);
+}
+
 }  // namespace cosmetic_filters
diff --git a/browser/android/cosmetic_filters/cosmetic_filters_utils.h b/browser/android/cosmetic_filters/cosmetic_filters_utils.h
@@ -11,7 +11,7 @@
 namespace cosmetic_filters {
 
 void ShowCustomFilterSettings();
-
-}
+int GetThemeBackgroundColor();
+}  // namespace cosmetic_filters
 
 #endif  // BRAVE_BROWSER_ANDROID_COSMETIC_FILTERS_COSMETIC_FILTERS_UTILS_H_
diff --git a/browser/cosmetic_filters/cosmetic_filters_tab_helper.cc b/browser/cosmetic_filters/cosmetic_filters_tab_helper.cc
@@ -16,14 +16,21 @@
 
 #if !BUILDFLAG(IS_ANDROID)
 #include "brave/browser/ui/brave_pages.h"
+#include "chrome/browser/themes/theme_service.h"
+#include "chrome/browser/themes/theme_service_factory.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"
 #endif  // !BUILDFLAG(IS_ANDROID)
 
 namespace cosmetic_filters {
 
 namespace {
+
 bool IsValidFilterText(std::string_view selector) {
   if (!base::IsStringUTF8(selector)) {
     return false;
@@ -91,6 +98,17 @@ void CosmeticFiltersTabHelper::ManageCustomFilters() {
 #endif  // !BUILDFLAG(IS_ANDROID)
 }
 
+void CosmeticFiltersTabHelper::GetElementPickerThemeInfo(
+    GetElementPickerThemeInfoCallback callback) {
+#if !BUILDFLAG(IS_ANDROID)
+  auto& color_provider = GetWebContents().GetColorProvider();
+  std::move(callback).Run(
+      color_provider.GetColor(kColorSidePanelBadgeBackground));
+#else   // !BUILDFLAG(IS_ANDROID)
+  std::move(callback).Run(GetThemeBackgroundColor());
+#endif  // !BUILDFLAG(IS_ANDROID)
+}
+
 CosmeticFiltersTabHelper::CosmeticFiltersTabHelper(
     content::WebContents* web_contents)
     : content::WebContentsUserData<CosmeticFiltersTabHelper>(*web_contents),

diff --git a/browser/cosmetic_filters/cosmetic_filters_tab_helper.h b/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>;
 

diff --git a/components/cosmetic_filters/common/cosmetic_filters.mojom b/components/cosmetic_filters/common/cosmetic_filters.mojom
@@ -24,6 +24,8 @@ interface CosmeticFiltersHandler {
 
   // Opens the custom filter section in Shields settings .
   ManageCustomFilters();
+
+  GetElementPickerThemeInfo() => (int32 background_color);
 };
 
 // An interface to render frame agent `CosmeticFiltersJSHandler` to control

diff --git a/components/cosmetic_filters/renderer/cosmetic_filters_js_handler.cc b/components/cosmetic_filters/renderer/cosmetic_filters_js_handler.cc
@@ -119,6 +119,11 @@ constexpr char kHideSelectorsInjectScript[] =
                 ...document.adoptedStyleSheets];
           };
         })();)";
+constexpr char kSePickerThemeInfoScript[] =
+    R"((function() {
+          const CC = window.content_cosmetic
+          CC.setTheme(%d)
+        })();)";
 
 std::string LoadDataResource(const int id) {
   auto& resource_bundle = ui::ResourceBundle::GetSharedInstance();
@@ -274,13 +279,36 @@ bool CosmeticFiltersJSHandler::OnIsFirstParty(const std::string& url_string) {
 void CosmeticFiltersJSHandler::OnAddSiteCosmeticFilter(
     const std::string& selector) {
   const auto host = url_.host();
-  auto handler = MakeCosmeticFiltersHandler(render_frame_);
-  handler->AddSiteCosmeticFilter(selector);
+  GetRemoteHandler()->AddSiteCosmeticFilter(selector);
 }
 
 void CosmeticFiltersJSHandler::OnManageCustomFilters() {
-  auto handler = MakeCosmeticFiltersHandler(render_frame_);
-  handler->ManageCustomFilters();
+  GetRemoteHandler()->ManageCustomFilters();
+}
+
+mojo::AssociatedRemote<cosmetic_filters::mojom::CosmeticFiltersHandler>&
+CosmeticFiltersJSHandler::GetRemoteHandler() {
+  if (!handler_ || !handler_.is_bound() || !handler_.is_connected()) {
+    handler_ = MakeCosmeticFiltersHandler(render_frame_);
+  }
+  return handler_;
+}
+
+void CosmeticFiltersJSHandler::GetCosmeticFilterThemeInfo() {
+  GetRemoteHandler()->GetElementPickerThemeInfo(
+      base::BindOnce(&CosmeticFiltersJSHandler::OnGetCosmeticFilterThemeInfo,
+                     weak_ptr_factory_.GetWeakPtr()));
+}
+
+void CosmeticFiltersJSHandler::OnGetCosmeticFilterThemeInfo(
+    int32_t background_color) {
+  blink::WebLocalFrame* web_frame = render_frame_->GetWebFrame();
+  std::string new_selectors_script =
+      base::StringPrintf(kSePickerThemeInfoScript, background_color);
+  web_frame->ExecuteScriptInIsolatedWorld(
+      isolated_world_id_,
+      blink::WebScriptSource(blink::WebString::FromUTF8(new_selectors_script)),
+      blink::BackForwardCacheAware::kAllow);
 }
 
 void CosmeticFiltersJSHandler::AddJavaScriptObjectToFrame(
@@ -356,6 +384,11 @@ void CosmeticFiltersJSHandler::BindFunctionsToObject(
       base::BindRepeating(&CosmeticFiltersJSHandler::OnManageCustomFilters,
                           base::Unretained(this)));
 
+  BindFunctionToObject(
+      isolate, javascript_object, "getElementPickerThemeInfo",
+      base::BindRepeating(&CosmeticFiltersJSHandler::GetCosmeticFilterThemeInfo,
+                          base::Unretained(this)));
+
   if (perf_tracker_) {
     BindFunctionToObject(
         isolate, javascript_object, "onHandleMutationsBegin",

diff --git a/components/cosmetic_filters/renderer/cosmetic_filters_js_handler.h b/components/cosmetic_filters/renderer/cosmetic_filters_js_handler.h
@@ -17,6 +17,7 @@
 #include "content/public/renderer/render_frame.h"
 #include "content/public/renderer/render_frame_observer.h"
 #include "mojo/public/cpp/bindings/associated_receiver.h"
+#include "mojo/public/cpp/bindings/associated_remote.h"
 #include "mojo/public/cpp/bindings/remote.h"
 #include "url/gurl.h"
 #include "v8/include/v8.h"
@@ -76,13 +77,19 @@ class CosmeticFiltersJSHandler : public mojom::CosmeticFiltersAgent {
   bool OnIsFirstParty(const std::string& url_string);
   void OnAddSiteCosmeticFilter(const std::string& selector);
   void OnManageCustomFilters();
+  void GetCosmeticFilterThemeInfo();
+  void OnGetCosmeticFilterThemeInfo(int32_t background_color);
   int OnEventBegin(const std::string& event_name);
   void OnEventEnd(const std::string& event_name, int);
 
   void InjectStylesheet(const std::string& stylesheet);
 
   bool generichide_ = false;
 
+  mojo::AssociatedRemote<cosmetic_filters::mojom::CosmeticFiltersHandler>&
+  GetRemoteHandler();
+  mojo::AssociatedRemote<cosmetic_filters::mojom::CosmeticFiltersHandler>
+      handler_;
   raw_ptr<content::RenderFrame> render_frame_ = nullptr;
   mojo::Remote<mojom::CosmeticFiltersResources> cosmetic_filters_resources_;
   mojo::AssociatedReceiver<mojom::CosmeticFiltersAgent> receiver_{this};

diff --git a/components/cosmetic_filters/resources/data/android_element_picker.html b/components/cosmetic_filters/resources/data/android_element_picker.html
@@ -0,0 +1,153 @@
+<style>
+    :host {
+      background: transparent;
+      color: black;
+      font: 14px sans-serif;
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+      font-family: "Noto Sans", Arial, sans-serif;
+    }
+
+    :host :focus {
+      outline: none;
+    }
+
+    #rules-box {
+      height: 8em;
+      margin-bottom: 5px;
+      background-color: #fff;
+      border-radius: .1em;
+      display: none;
+    }
+
+    #rules-box>textarea {
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      resize: none;
+      border: none;
+      padding: 5px;
+      overflow: auto;
+      overflow-wrap: break-word;
+    }
+
+    section {
+      background-color: #FFFFFF;
+      color-scheme: light only;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      box-sizing: border-box;
+      min-width: 24em;
+      padding-top: 4px;
+      padding-right: 4px;
+      padding-left: 4px;
+      position: fixed;
+      opacity: 1;
+      height: auto;
+    }
+
+    section input {
+      width: calc(100% - 4px);
+    }
+
+    #buttons {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+    }
+
+    .buttons-line {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      padding-bottom: 6px;
+    }
+
+    .block-button {
+      background-color: #4036d3;
+      color: #FFFFFF;
+      cursor: pointer;
+      padding: 4px 6px;
+      margin: 0 2px 0 2px;
+      border-radius: .4em;
+      flex-grow: 1;
+      border-width: 0px;
+    }
+    .block-button-disabled {
+      background-color: #d6d6d6;
+      color: #959595;
+    }
+
+    .secondary-button {
+      background-color: #FFFFFF;
+      color: #4036d3;
+      cursor: pointer;
+      padding: 4px 6px;
+      margin: 0 2px 0 2px;
+      border-radius: .4em;
+      flex-grow: 1;
+      border-width: 0px;
+
+    }
+
+    .secondary-button-bordered {
+      border-width: 1px;
+      border-color: #4036d3;
+    }
+
+    svg {
+      cursor: crosshair;
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      position: absolute;
+    }
+
+    #darken {
+      fill: rgba(0, 0, 0, 0.5);
+    }
+
+    #slider-container {
+      padding-bottom: 4px;
+    }
+    .target {
+      stroke: #3d39c8;
+      stroke-width: 2px;
+      fill: rgba(121, 116, 224, 0.25);
+    }
+  </style>
+  <svg xmlns="http://www.w3.org/2000/svg" id="picker-ui">
+    <defs>
+      <mask id="highlight-mask">
+        <rect x="0" y="0" width="100%" height="100%" fill="white">
+      </mask>
+    </defs>
+    <rect id="darken" x="0" y="0" width="100%" height="100vh" mask="url(#highlight-mask)">
+  </svg>
+  <section id="main-section">
+    <div id="rules-box">
+      <textarea></textarea>
+    </div>
+    <div>
+      <div id="slider-container">
+        <input id="sliderSpecificity" type="range" min="0" max="4" value="4">
+      </div>
+      <div id="buttons">
+        <div class="buttons-line">
+          <button id="btnCreate" class="block-button block-button-disabled">Select element you want to block</button>
+        </div>
+        <div class="buttons-line">
+          <button id="btnManage" class="secondary-button">Manage filters</button>
+          <button id="btnShowRulesBox" class="secondary-button">Show rules</button>
+          <button id="btnQuit" class="secondary-button secondary-button-bordered">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </section>
+