Persisted advanced controls area in Shields v2

browser/ui/webui/brave_shields/shields_panel_handler.cc

@@ -8,6 +8,8 @@
 #include <utility>
 
 #include "brave/browser/ui/brave_browser_window.h"
+#include "brave/components/constants/pref_names.h"
+#include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/browser_finder.h"
 #include "chrome/browser/ui/browser_tabstrip.h"
 #include "ui/gfx/geometry/vector2d.h"
@@ -16,10 +18,12 @@
 ShieldsPanelHandler::ShieldsPanelHandler(
     mojo::PendingReceiver<brave_shields::mojom::PanelHandler> receiver,
     ui::MojoBubbleWebUIController* webui_controller,
-    BraveBrowserWindow* brave_browser_window)
+    BraveBrowserWindow* brave_browser_window,
+    Profile* profile)
     : receiver_(this, std::move(receiver)),
       webui_controller_(webui_controller),
-      brave_browser_window_(brave_browser_window) {}
+      brave_browser_window_(brave_browser_window),
+      profile_(profile) {}
 
 ShieldsPanelHandler::~ShieldsPanelHandler() = default;
 
@@ -43,3 +47,18 @@ void ShieldsPanelHandler::GetPosition(GetPositionCallback callback) {
                     brave_browser_window_->GetShieldsBubbleRect().y());
   std::move(callback).Run(vec);
 }
+
+void ShieldsPanelHandler::SetAdvancedViewEnabled(bool is_enabled) {
+  DCHECK(profile_);
+
+  profile_->GetPrefs()->SetBoolean(kShieldsAdvancedViewEnabled, is_enabled);
+}
+
+void ShieldsPanelHandler::GetAdvancedViewEnabled(
+    GetAdvancedViewEnabledCallback callback) {
+  DCHECK(profile_);
+
+  bool is_enabled =
+      profile_->GetPrefs()->GetBoolean(kShieldsAdvancedViewEnabled);
+  std::move(callback).Run(is_enabled);
+}

browser/ui/webui/brave_shields/shields_panel_handler.h

@@ -18,14 +18,16 @@ namespace content {
 class WebUI;
 }  // namespace content
 
+class Profile;
 class BraveBrowserWindow;
 
 class ShieldsPanelHandler : public brave_shields::mojom::PanelHandler {
  public:
   ShieldsPanelHandler(
       mojo::PendingReceiver<brave_shields::mojom::PanelHandler> receiver,
       ui::MojoBubbleWebUIController* webui_controller,
-      BraveBrowserWindow* brave_browser_window);
+      BraveBrowserWindow* brave_browser_window,
+      Profile* profile);
 
   ShieldsPanelHandler(const ShieldsPanelHandler&) = delete;
   ShieldsPanelHandler& operator=(const ShieldsPanelHandler&) = delete;
@@ -35,11 +37,14 @@ class ShieldsPanelHandler : public brave_shields::mojom::PanelHandler {
   void ShowUI() override;
   void CloseUI() override;
   void GetPosition(GetPositionCallback callback) override;
+  void SetAdvancedViewEnabled(bool is_enabled) override;
+  void GetAdvancedViewEnabled(GetAdvancedViewEnabledCallback callback) override;
 
  private:
   mojo::Receiver<brave_shields::mojom::PanelHandler> receiver_;
   raw_ptr<ui::MojoBubbleWebUIController> const webui_controller_;
   raw_ptr<BraveBrowserWindow> brave_browser_window_ = nullptr;
+  raw_ptr<Profile> profile_ = nullptr;
 };
 
 #endif  // BRAVE_BROWSER_UI_WEBUI_BRAVE_SHIELDS_SHIELDS_PANEL_HANDLER_H_

browser/ui/webui/brave_shields/shields_panel_ui.cc

@@ -11,6 +11,7 @@
 #include "brave/browser/ui/brave_browser_window.h"
 #include "brave/components/brave_shields/common/brave_shield_constants.h"
 #include "brave/components/brave_shields/resources/panel/grit/brave_shields_panel_generated_map.h"
+#include "brave/components/constants/pref_names.h"
 #include "brave/components/constants/webui_url_constants.h"
 #include "brave/components/l10n/common/locale_util.h"
 #include "chrome/browser/profiles/profile.h"
@@ -39,6 +40,9 @@ ShieldsPanelUI::ShieldsPanelUI(content::WebUI* web_ui)
     source->AddString(str.name, l10n_str);
   }
 
+  source->AddBoolean("isAdvancedViewEnabled", profile_->GetPrefs()->GetBoolean(
+                                                  kShieldsAdvancedViewEnabled));
+
   content::URLDataSource::Add(
       profile_, std::make_unique<FaviconSource>(
                     profile_, chrome::FaviconUrlFormat::kFavicon2));
@@ -71,7 +75,7 @@ void ShieldsPanelUI::CreatePanelHandler(
 
   panel_handler_ = std::make_unique<ShieldsPanelHandler>(
       std::move(panel_receiver), this,
-      static_cast<BraveBrowserWindow*>(browser_->window()));
+      static_cast<BraveBrowserWindow*>(browser_->window()), profile);
   data_handler_ = std::make_unique<ShieldsPanelDataHandler>(
       std::move(data_handler_receiver), this, browser_->tab_strip_model());
 }

components/brave_shields/common/brave_shields_panel.mojom

@@ -24,6 +24,8 @@ interface PanelHandler {
   CloseUI();
 
   GetPosition() => (gfx.mojom.Vector2d vec);
+  SetAdvancedViewEnabled(bool is_enabled);
+  GetAdvancedViewEnabled() => (bool is_enabled);
 };
 
 // WebUI-side handler for requests from the browser.

components/brave_shields/resources/panel/components/main-panel/index.tsx

@@ -8,9 +8,10 @@ import { getLocale, splitStringForTag } from '../../../../../common/locale'
 import DataContext from '../../state/context'
 import getPanelBrowserAPI from '../../api/panel_browser_api'
 import Button from '$web-components/button'
+import { useIsExpanded } from '../../state/hooks'
 
 function MainPanel () {
-  const [isExpanded, setIsExpanded] = React.useState(false)
+  const { isExpanded, toggleIsExpanded } = useIsExpanded()
   const { siteBlockInfo, getSiteSettings } = React.useContext(DataContext)
 
   const braveShieldsStatusText = splitStringForTag(siteBlockInfo?.isShieldsEnabled ? getLocale('braveShieldsUp') : getLocale('braveShieldsDown'))
@@ -46,12 +47,12 @@ function MainPanel () {
     </S.Footnote>
   )
 
-  let advancedControlButtonElement = (
+  let advancedControlButtonElement = (isExpanded != null) && (
     <S.AdvancedControlsButton
       type="button"
       aria-expanded={isExpanded}
       aria-controls='advanced-controls-content'
-      onClick={() => setIsExpanded(x => !x)}
+      onClick={toggleIsExpanded}
     >
       <i>
         <svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M15.334 8.969H6a.667.667 0 1 1 0-1.334h9.334a.667.667 0 0 1 0 1.334Zm.005-5.377H5.962c-.368 0-.629-.255-.629-.623s.299-.667.667-.667h9.334c.367 0 .666.299.666.667 0 .368-.292.623-.66.623ZM2 15.635c-1.102 0-2-.897-2-2s.898-2 2-2c1.103 0 2 .897 2 2s-.897 2-2 2Zm0-2.666a.667.667 0 1 0 .001 1.334.667.667 0 0 0 0-1.334Zm0-2.667c-1.102 0-2-.897-2-2s.898-2 2-2c1.103 0 2 .897 2 2s-.897 2-2 2Zm0-2.667a.667.667 0 1 0 .002 1.335A.667.667 0 0 0 2 7.635Zm.398-3.604a.669.669 0 0 1-.96.12L.244 3.17a.666.666 0 1 1 .846-1.03l.65.533L2.798 1.24a.668.668 0 0 1 1.073.791l-1.472 2ZM6 12.969h9.334a.667.667 0 0 1 0 1.333H6a.667.667 0 1 1 0-1.333Z"/></svg>

components/brave_shields/resources/panel/state/hooks.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import getPanelBrowserAPI, { UIHandlerReceiver, SiteBlockInfo, SiteSettings } from '../api/panel_browser_api'
+import { loadTimeData } from '../../../../common/loadTimeData'
 
 export function useSiteBlockInfoData () {
   const [siteBlockInfo, setSiteBlockInfo] = React.useState<SiteBlockInfo>()
@@ -43,3 +44,30 @@ export function useSiteSettingsData () {
 
   return { siteSettings, getSiteSettings }
 }
+
+export function useIsExpanded () {
+  const [isExpanded, setIsExpanded] = React.useState<boolean | null>(loadTimeData.getBoolean('isAdvancedViewEnabled'))
+
+  const toggleIsExpanded = () => {
+    const newValue = !isExpanded
+    setIsExpanded(newValue)
+    getPanelBrowserAPI().panelHandler.setAdvancedViewEnabled(newValue)
+  }
+
+  React.useEffect(() => {
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        getPanelBrowserAPI().panelHandler.getAdvancedViewEnabled().then(res => setIsExpanded(res.isEnabled))
+      }
+    }
+
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    onVisibilityChange()
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  }, [])
+
+  return { isExpanded, toggleIsExpanded }
+}