Updates to shields panel v2

- Added favicon observer
- Added web component button

browser/ui/brave_shields_data_controller.cc

@@ -13,7 +13,11 @@
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/content_settings/host_content_settings_map_factory.h"
 #include "chrome/browser/profiles/profile.h"
+#include "components/favicon/content/content_favicon_driver.h"
 #include "content/public/browser/navigation_handle.h"
+#include "net/base/url_util.h"
+
+using net::AppendQueryParameter;
 
 namespace brave_shields {
 
@@ -22,7 +26,10 @@ BraveShieldsDataController::~BraveShieldsDataController() = default;
 BraveShieldsDataController::BraveShieldsDataController(
     content::WebContents* web_contents)
     : content::WebContentsObserver(web_contents),
-      content::WebContentsUserData<BraveShieldsDataController>(*web_contents) {}
+      content::WebContentsUserData<BraveShieldsDataController>(*web_contents) {
+  favicon::ContentFaviconDriver::FromWebContents(web_contents)
+      ->AddObserver(this);
+}
 
 void BraveShieldsDataController::DidFinishNavigation(
     content::NavigationHandle* navigation_handle) {
@@ -32,6 +39,23 @@ void BraveShieldsDataController::DidFinishNavigation(
   }
 }
 
+void BraveShieldsDataController::WebContentsDestroyed() {
+  favicon::ContentFaviconDriver::FromWebContents(web_contents())
+      ->RemoveObserver(this);
+}
+
+void BraveShieldsDataController::OnFaviconUpdated(
+    favicon::FaviconDriver* favicon_driver,
+    NotificationIconType notification_icon_type,
+    const GURL& icon_url,
+    bool icon_url_changed,
+    const gfx::Image& image) {
+  if (icon_url_changed) {
+    for (Observer& obs : observer_list_)
+      obs.OnFaviconUpdated();
+  }
+}
+
 void BraveShieldsDataController::ReloadWebContents() {
   web_contents()->GetController().Reload(content::ReloadType::NORMAL, true);
 }
@@ -112,6 +136,22 @@ GURL BraveShieldsDataController::GetCurrentSiteURL() {
   return web_contents()->GetLastCommittedURL();
 }
 
+GURL BraveShieldsDataController::GetFaviconURL(bool refresh) {
+  auto url = GURL("chrome://favicon2/");
+  url = AppendQueryParameter(url, "size", "16");
+  url = AppendQueryParameter(url, "scale_factor", "2x");
+  url = AppendQueryParameter(url, "show_fallback_monogram", "");
+  url = AppendQueryParameter(url, "page_url",
+                             GetCurrentSiteURL().GetWithoutFilename().spec());
+
+  if (refresh) {
+    url = AppendQueryParameter(url, "v",
+                               std::to_string(base::Time::Now().ToJsTime()));
+  }
+
+  return url;
+}
+
 AdBlockMode BraveShieldsDataController::GetAdBlockMode() {
   auto* map = HostContentSettingsMapFactory::GetForProfile(
       web_contents()->GetBrowserContext());

browser/ui/brave_shields_data_controller.h

@@ -12,6 +12,7 @@
 
 #include "base/observer_list.h"
 #include "brave/components/brave_shields/common/brave_shields_panel.mojom.h"
+#include "components/favicon/core/favicon_driver_observer.h"
 #include "content/public/browser/navigation_entry.h"
 #include "content/public/browser/web_contents_observer.h"
 #include "content/public/browser/web_contents_user_data.h"
@@ -26,7 +27,8 @@ namespace brave_shields {
 // Per-tab class to manage Shields panel data
 class BraveShieldsDataController
     : public content::WebContentsObserver,
-      public content::WebContentsUserData<BraveShieldsDataController> {
+      public content::WebContentsUserData<BraveShieldsDataController>,
+      public favicon::FaviconDriverObserver {
  public:
   BraveShieldsDataController(const BraveShieldsDataController&) = delete;
   BraveShieldsDataController& operator=(const BraveShieldsDataController&) =
@@ -36,6 +38,7 @@ class BraveShieldsDataController
   class Observer : public base::CheckedObserver {
    public:
     virtual void OnResourcesChanged() = 0;
+    virtual void OnFaviconUpdated() {}
   };
 
   void HandleItemBlocked(const std::string& block_type,
@@ -49,6 +52,7 @@ class BraveShieldsDataController
   bool GetBraveShieldsEnabled();
   void SetBraveShieldsEnabled(bool is_enabled);
   GURL GetCurrentSiteURL();
+  GURL GetFaviconURL(bool refresh);
 
   AdBlockMode GetAdBlockMode();
   FingerprintMode GetFingerprintMode();
@@ -70,8 +74,17 @@ class BraveShieldsDataController
 
   explicit BraveShieldsDataController(content::WebContents* web_contents);
 
+  // content::WebContentsObserver
   void DidFinishNavigation(
       content::NavigationHandle* navigation_handle) override;
+  void WebContentsDestroyed() override;
+
+  // favicon::FaviconDriverObserver
+  void OnFaviconUpdated(favicon::FaviconDriver* favicon_driver,
+                        NotificationIconType notification_icon_type,
+                        const GURL& icon_url,
+                        bool icon_url_changed,
+                        const gfx::Image& image) override;
 
   void ReloadWebContents();
 

browser/ui/brave_shields_data_controller_unittest.cc

@@ -17,6 +17,7 @@
 #include "chrome/test/base/testing_profile_manager.h"
 #include "components/content_settings/core/browser/host_content_settings_map.h"
 #include "components/content_settings/core/common/content_settings_types.h"
+#include "components/favicon/content/content_favicon_driver.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/test/browser_task_environment.h"
 #include "content/public/test/test_renderer_host.h"
@@ -49,6 +50,8 @@ class BraveShieldsDataControllerTest : public testing::Test {
 
     test_web_contents_ =
         content::WebContentsTester::CreateTestWebContents(profile_, nullptr);
+    favicon::ContentFaviconDriver::CreateForWebContents(
+        test_web_contents_.get(), nullptr);
     BraveShieldsDataController::CreateForWebContents(test_web_contents_.get());
   }
 

browser/ui/views/brave_actions/brave_shields_action_view.cc

@@ -10,13 +10,16 @@
 #include <utility>
 
 #include "brave/browser/ui/brave_actions/brave_action_icon_with_badge_image_source.h"
+#include "brave/common/pref_names.h"
 #include "brave/common/webui_url_constants.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/tabs/tab_strip_model.h"
 #include "chrome/browser/ui/views/chrome_layout_provider.h"
 #include "chrome/browser/ui/views/toolbar/toolbar_ink_drop_util.h"
 #include "components/grit/brave_components_resources.h"
 #include "components/grit/brave_components_strings.h"
+#include "components/prefs/pref_service.h"
+#include "content/public/common/url_constants.h"
 #include "extensions/common/constants.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/models/image_model.h"
@@ -119,7 +122,8 @@ BraveShieldsActionView::GetImageSource() {
   }
 
   image_source->SetIcon(gfx::Image(GetIconImage(is_enabled)));
-  if (is_enabled)
+
+  if (is_enabled && profile_->GetPrefs()->GetBoolean(kShieldsStatsBadgeVisible))
     image_source->SetBadge(std::move(badge));
 
   return image_source;
@@ -145,6 +149,11 @@ void BraveShieldsActionView::UpdateIconState() {
 }
 
 void BraveShieldsActionView::ButtonPressed() {
+  auto* web_content = tab_strip_model_->GetActiveWebContents();
+  if (web_content && SchemeIsLocal(web_content->GetLastCommittedURL())) {
+    return;  // Do not show bubble if it's a local scheme
+  }
+
   if (!webui_bubble_manager_) {
     webui_bubble_manager_ =
         std::make_unique<WebUIBubbleManagerT<ShieldsPanelUI>>(
@@ -159,6 +168,13 @@ void BraveShieldsActionView::ButtonPressed() {
   webui_bubble_manager_->ShowBubble();
 }
 
+bool BraveShieldsActionView::SchemeIsLocal(GURL url) {
+  return url.SchemeIs(url::kAboutScheme) || url.SchemeIs(url::kBlobScheme) ||
+         url.SchemeIs(url::kDataScheme) ||
+         url.SchemeIs(url::kFileSystemScheme) ||
+         url.SchemeIs(content::kChromeUIScheme);
+}
+
 std::unique_ptr<views::LabelButtonBorder>
 BraveShieldsActionView::CreateDefaultBorder() const {
   std::unique_ptr<views::LabelButtonBorder> border =

browser/ui/views/brave_actions/brave_shields_action_view.h

@@ -37,6 +37,7 @@ class BraveShieldsActionView
 
  private:
   void ButtonPressed();
+  bool SchemeIsLocal(GURL url);
   void UpdateIconState();
   gfx::ImageSkia GetIconImage(bool is_enabled);
   std::unique_ptr<IconWithBadgeImageSource> GetImageSource();

browser/ui/webui/brave_shields/shields_panel_data_handler.cc

@@ -6,6 +6,7 @@
 #include <utility>
 
 #include "brave/browser/ui/webui/brave_shields/shields_panel_data_handler.h"
+#include "brave/browser/webcompat_reporter/webcompat_reporter_dialog.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_finder.h"
@@ -107,6 +108,13 @@ void ShieldsPanelDataHandler::SetBraveShieldsEnabled(bool is_enabled) {
   shields_data_ctrlr->SetBraveShieldsEnabled(is_enabled);
 }
 
+void ShieldsPanelDataHandler::OpenWebCompatWindow() {
+  auto* shields_data_ctrlr = GetActiveShieldsDataController();
+  DCHECK(shields_data_ctrlr);
+
+  OpenWebcompatReporterDialog(shields_data_ctrlr->web_contents());
+}
+
 BraveShieldsDataController*
 ShieldsPanelDataHandler::GetActiveShieldsDataController() {
   auto* profile = Profile::FromWebUI(webui_controller_->web_ui());
@@ -139,6 +147,12 @@ void ShieldsPanelDataHandler::UpdateSiteBlockInfo() {
   site_block_info_.is_shields_enabled =
       shields_data_ctrlr->GetBraveShieldsEnabled();
 
+  // This method gets called from various callsites. Constantly updating favicon
+  // url will replace the hashed version too. So, we update this once only
+  if (site_block_info_.favicon_url.is_empty()) {
+    site_block_info_.favicon_url = shields_data_ctrlr->GetFaviconURL(false);
+  }
+
   // Notify remote that data changed
   if (ui_handler_remote_) {
     ui_handler_remote_.get()->OnSiteBlockInfoChanged(site_block_info_.Clone());
@@ -149,6 +163,19 @@ void ShieldsPanelDataHandler::OnResourcesChanged() {
   UpdateSiteBlockInfo();
 }
 
+void ShieldsPanelDataHandler::OnFaviconUpdated() {
+  auto* shields_data_ctrlr = GetActiveShieldsDataController();
+  if (!shields_data_ctrlr)
+    return;
+
+  site_block_info_.favicon_url = shields_data_ctrlr->GetFaviconURL(true);
+
+  // Notify remote that favicon changed
+  if (ui_handler_remote_) {
+    ui_handler_remote_.get()->OnSiteBlockInfoChanged(site_block_info_.Clone());
+  }
+}
+
 void ShieldsPanelDataHandler::OnTabStripModelChanged(
     TabStripModel* tab_strip_model,
     const TabStripModelChange& change,

browser/ui/webui/brave_shields/shields_panel_data_handler.h

@@ -20,6 +20,7 @@ class MojoBubbleWebUIController;
 using brave_shields::BraveShieldsDataController;
 using brave_shields::mojom::SiteBlockInfo;
 using brave_shields::mojom::SiteSettings;
+using favicon::FaviconDriver;
 
 class ShieldsPanelDataHandler : public brave_shields::mojom::DataHandler,
                                 public BraveShieldsDataController::Observer,
@@ -45,13 +46,16 @@ class ShieldsPanelDataHandler : public brave_shields::mojom::DataHandler,
   void SetIsNoScriptsEnabled(bool is_enabled) override;
   void SetHTTPSEverywhereEnabled(bool is_enabled) override;
   void SetBraveShieldsEnabled(bool is_enabled) override;
+  void OpenWebCompatWindow() override;
 
  private:
   BraveShieldsDataController* GetActiveShieldsDataController();
   void UpdateSiteBlockInfo();
 
-  // brave_shields::BraveShieldsDataController
+  // BraveShieldsDataController::Observer
   void OnResourcesChanged() override;
+  void OnFaviconUpdated() override;
+
   // TabStripModelObserver
   void OnTabStripModelChanged(
       TabStripModel* tab_strip_model,

browser/ui/webui/brave_shields/shields_panel_handler.cc

@@ -32,13 +32,3 @@ void ShieldsPanelHandler::CloseUI() {
     embedder->CloseUI();
   }
 }
-
-void ShieldsPanelHandler::OpenURL(const GURL& url) {
-  Browser* browser = chrome::FindBrowserWithWebContents(
-      webui_controller_->web_ui()->GetWebContents());
-
-  if (!browser)
-    return;
-
-  chrome::AddTabAt(browser, url, -1, true);
-}

browser/ui/webui/brave_shields/shields_panel_handler.h

@@ -31,7 +31,6 @@ class ShieldsPanelHandler : public brave_shields::mojom::PanelHandler {
   // brave_shields::mojom::PanelHandler:
   void ShowUI() override;
   void CloseUI() override;
-  void OpenURL(const GURL& url) override;
 
  private:
   mojo::Receiver<brave_shields::mojom::PanelHandler> receiver_;

common/extensions/api/_api_features.json

@@ -72,7 +72,8 @@
       "chrome://read-later.top-chrome/*",
       "chrome://tab-strip/*",
       "chrome://wallet-panel.top-chrome/*",
-      "chrome://wallet/*"
+      "chrome://wallet/*",
+      "chrome://brave-shields.top-chrome/*"
     ]
   }, {
     "channel": "stable",

components/brave_shields/common/brave_shields_panel.mojom

@@ -21,8 +21,6 @@ interface PanelHandler {
 
   // Notify the backend that the dialog should be closed.
   CloseUI();
-
-  OpenURL(url.mojom.Url url);
 };
 
 // WebUI-side handler for requests from the browser.
@@ -40,12 +38,14 @@ interface DataHandler {
   SetIsNoScriptsEnabled(bool is_enabled);
   SetHTTPSEverywhereEnabled(bool is_enabled);
   SetBraveShieldsEnabled(bool is_enabled);
+  OpenWebCompatWindow();
 };
 
 struct SiteBlockInfo {
   string host;
   int32 total_blocked_resources;
   bool is_shields_enabled;
+  url.mojom.Url favicon_url;
   array<url.mojom.Url> ads_list;
   array<url.mojom.Url> http_redirects_list;
   array<url.mojom.Url> js_list;

components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx

@@ -27,21 +27,29 @@ const fingerprintModeOptions = [
 ]
 
 function GlobalSettings () {
+  const onAdBlockListsClick = () => {
+    chrome.tabs.create({ url: 'chrome://adblock', active: true })
+  }
+
+  const onSettingsClick = () => {
+    chrome.tabs.create({ url: 'chrome://settings/shields', active: true })
+  }
+
   return (
     <S.FooterActionBox>
       <div>
         <button
-          onClick={() => getPanelBrowserAPI().panelHandler.openURL({ url: 'chrome://adblock' })}
+          onClick={onAdBlockListsClick}
         >
           <i>
-          <svg width="18" height="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M17.01 2.41H4.26a.709.709 0 0 1 0-1.418h12.75a.709.709 0 0 1 0 1.417ZM.717 11.616h1.416v1.417H.718v-1.417Zm0-3.541h1.416v1.416H.718V8.076Zm0-3.542h1.416v1.417H.718V4.534Zm0-3.542h1.416V2.41H.718V.992Zm3.541 3.542h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Zm0 3.542h12.75a.709.709 0 0 1 0 1.416H4.26a.709.709 0 0 1 0-1.416Zm0 3.541h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Z"/></svg>
+          <svg aria-hidden="true" width="18" height="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M17.01 2.41H4.26a.709.709 0 0 1 0-1.418h12.75a.709.709 0 0 1 0 1.417ZM.717 11.616h1.416v1.417H.718v-1.417Zm0-3.541h1.416v1.416H.718V8.076Zm0-3.542h1.416v1.417H.718V4.534Zm0-3.542h1.416V2.41H.718V.992Zm3.541 3.542h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Zm0 3.542h12.75a.709.709 0 0 1 0 1.416H4.26a.709.709 0 0 1 0-1.416Zm0 3.541h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Z"/></svg>
           </i>
           {getLocale('braveShieldsCustomizeAdblockLists')}
         </button>
         <button
-          onClick={() => getPanelBrowserAPI().panelHandler.openURL({ url: 'chrome://settings/shields' })}>
+          onClick={onSettingsClick}>
           <i>
-            <svg width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M14.03 11.126a3.191 3.191 0 0 1 3.188 3.186A3.191 3.191 0 0 1 14.03 17.5a3.191 3.191 0 0 1-3.187-3.188 3.191 3.191 0 0 1 3.187-3.186Zm0 1.417c-.227 0-.443.046-.643.125l2.289 2.288c.078-.2.125-.416.125-.644 0-.976-.795-1.77-1.77-1.77Zm0 3.54c.228 0 .444-.046.644-.125l-2.29-2.29c-.078.2-.125.417-.125.644 0 .977.795 1.772 1.771 1.772Z"/><path d="M8.718.5C4.043.5.218 4.325.218 9s3.825 8.5 8.5 8.5h.354a.71.71 0 0 0 .708-.708c0-.355-.354-.638-.708-.638-.708-.92-1.558-2.267-2.054-3.966H8.93c.425 0 .709-.284.709-.709s-.284-.708-.709-.708H6.734c0-.142-.07-.284-.07-.425-.142-1.133-.071-2.054.07-2.975h3.896c.071.637.142 1.346.142 2.054 0 .425.283.708.708.708a.71.71 0 0 0 .709-.708c0-.708 0-1.417-.142-2.125h3.542c.141.496.212 1.063.212 1.63 0 .283 0 .566-.07.85-.072.353.212.708.637.778.354.071.708-.212.779-.637.07-.213.07-.567.07-.921 0-4.675-3.824-8.5-8.5-8.5ZM7.23 2.058c-.566.992-1.275 2.267-1.629 3.896H2.343c.92-1.983 2.762-3.4 4.887-3.896Zm0 13.884c-2.125-.496-3.896-1.913-4.816-3.825H5.6a11.962 11.962 0 0 0 1.63 3.825Zm-1.983-5.525c0 .07 0 .212.07.283h-3.47c-.142-.496-.213-1.133-.213-1.7s.071-1.133.213-1.63h3.471c-.142.922-.213 1.984-.071 3.047Zm3.33-4.463H7.088a12.229 12.229 0 0 1 1.629-3.47c.566.85 1.204 1.983 1.629 3.47h-1.77Zm6.516 0h-3.33c-.424-1.629-1.062-2.975-1.7-3.896 2.196.425 4.109 1.913 5.03 3.896Z"/></svg>
+            <svg aria-hidden="true" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M14.03 11.126a3.191 3.191 0 0 1 3.188 3.186A3.191 3.191 0 0 1 14.03 17.5a3.191 3.191 0 0 1-3.187-3.188 3.191 3.191 0 0 1 3.187-3.186Zm0 1.417c-.227 0-.443.046-.643.125l2.289 2.288c.078-.2.125-.416.125-.644 0-.976-.795-1.77-1.77-1.77Zm0 3.54c.228 0 .444-.046.644-.125l-2.29-2.29c-.078.2-.125.417-.125.644 0 .977.795 1.772 1.771 1.772Z"/><path d="M8.718.5C4.043.5.218 4.325.218 9s3.825 8.5 8.5 8.5h.354a.71.71 0 0 0 .708-.708c0-.355-.354-.638-.708-.638-.708-.92-1.558-2.267-2.054-3.966H8.93c.425 0 .709-.284.709-.709s-.284-.708-.709-.708H6.734c0-.142-.07-.284-.07-.425-.142-1.133-.071-2.054.07-2.975h3.896c.071.637.142 1.346.142 2.054 0 .425.283.708.708.708a.71.71 0 0 0 .709-.708c0-.708 0-1.417-.142-2.125h3.542c.141.496.212 1.063.212 1.63 0 .283 0 .566-.07.85-.072.353.212.708.637.778.354.071.708-.212.779-.637.07-.213.07-.567.07-.921 0-4.675-3.824-8.5-8.5-8.5ZM7.23 2.058c-.566.992-1.275 2.267-1.629 3.896H2.343c.92-1.983 2.762-3.4 4.887-3.896Zm0 13.884c-2.125-.496-3.896-1.913-4.816-3.825H5.6a11.962 11.962 0 0 0 1.63 3.825Zm-1.983-5.525c0 .07 0 .212.07.283h-3.47c-.142-.496-.213-1.133-.213-1.7s.071-1.133.213-1.63h3.471c-.142.922-.213 1.984-.071 3.047Zm3.33-4.463H7.088a12.229 12.229 0 0 1 1.629-3.47c.566.85 1.204 1.983 1.629 3.47h-1.77Zm6.516 0h-3.33c-.424-1.629-1.062-2.975-1.7-3.896 2.196.425 4.109 1.913 5.03 3.896Z"/></svg>
           </i>
           {getLocale('braveShieldsChangeDefaults')}
         </button>
@@ -97,7 +105,9 @@ function AdvancedControlsContent () {
             >
               {adBlockModeOptions.map(entry => {
                 return (
-                  <option key={entry.value }value={entry.value}>{entry.text}</option>
+                  <option key={entry.value} value={entry.value}>
+                    {entry.text}
+                  </option>
                 )
               })}
             </Select>
@@ -113,6 +123,7 @@ function AdvancedControlsContent () {
           <label>
             <span>{getLocale('braveShieldsConnectionsUpgraded')}</span>
             <Toggle
+              brand="shields"
               onChange={handleHTTPSEverywhereEnabledChange}
               isOn={siteSettings?.isHttpsEverywhereEnabled}
               size='sm'
@@ -130,6 +141,7 @@ function AdvancedControlsContent () {
           <label>
             <span>{getLocale('braveShieldsScriptsBlocked')}</span>
             <Toggle
+              brand="shields"
               onChange={handleIsNoScriptEnabledChange}
               isOn={siteSettings?.isNoscriptEnabled}
               size='sm'