Favicon and color fixes for Shields v2

brave · Apr 13, 2022 · 6974cda · 6974cda
1 parent 602e27c
commit 6974cda
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 31 deletions.
diff --git a/browser/ui/webui/brave_shields/shields_panel_data_handler.cc b/browser/ui/webui/brave_shields/shields_panel_data_handler.cc
@@ -115,6 +115,20 @@ void ShieldsPanelDataHandler::OpenWebCompatWindow() {
   OpenWebcompatReporterDialog(shields_data_ctrlr->web_contents());
 }
 
+void ShieldsPanelDataHandler::UpdateFavicon() {
+  auto* shields_data_ctrlr = GetActiveShieldsDataController();
+  if (!shields_data_ctrlr)
+    return;
+
+  // TODO(nullhook): Don't update favicon if previous site is the current site
+  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());
+  }
+}
+
 BraveShieldsDataController*
 ShieldsPanelDataHandler::GetActiveShieldsDataController() {
   auto* profile = Profile::FromWebUI(webui_controller_->web_ui());
@@ -167,16 +181,7 @@ void ShieldsPanelDataHandler::OnResourcesChanged() {
 }
 
 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());
-  }
+  UpdateFavicon();
 }
 
 void ShieldsPanelDataHandler::OnTabStripModelChanged(

diff --git a/browser/ui/webui/brave_shields/shields_panel_data_handler.h b/browser/ui/webui/brave_shields/shields_panel_data_handler.h
@@ -47,6 +47,7 @@ class ShieldsPanelDataHandler : public brave_shields::mojom::DataHandler,
   void SetHTTPSEverywhereEnabled(bool is_enabled) override;
   void SetBraveShieldsEnabled(bool is_enabled) override;
   void OpenWebCompatWindow() override;
+  void UpdateFavicon() override;
 
  private:
   BraveShieldsDataController* GetActiveShieldsDataController();

diff --git a/components/brave_shields/common/brave_shields_panel.mojom b/components/brave_shields/common/brave_shields_panel.mojom
@@ -39,6 +39,7 @@ interface DataHandler {
   SetHTTPSEverywhereEnabled(bool is_enabled);
   SetBraveShieldsEnabled(bool is_enabled);
   OpenWebCompatWindow();
+  UpdateFavicon();
 };
 
 struct SiteBlockInfo {

diff --git a/components/brave_shields/resources/panel/components/advanced-controls-content/style.ts b/components/brave_shields/resources/panel/components/advanced-controls-content/style.ts
@@ -18,17 +18,28 @@ export const FooterActionBox = styled.div`
   }
 
   button {
+    --svg-color: ${(p) => p.theme.color.interactive05};
+    --text-color: ${(p) => p.theme.color.interactive06};
     background-color: transparent;
     padding: 0;
     margin: 0;
     border:0;
-    color: ${(p) => p.theme.color.interactive05};
+    color: var(--text-color);
     font-size: 13px;
     font-weight: 500;
     text-decoration: none;
     display: flex;
     align-items: center;
     cursor: pointer;
+
+    svg > path {
+      fill: var(--svg-color);
+    }
+
+    &:hover {
+      --text-color: ${(p) => p.theme.color.interactive07};
+      --svg-color: ${(p) => p.theme.color.interactive08};
+    }
   }
   
   i {
@@ -79,6 +90,7 @@ export const ControlGroup = styled.div`
     font-size: 12px;
     color: ${(p) => p.theme.color.text01};
     text-indent: 8px;
+    cursor: pointer;
 
     span {
       margin-right: 5px;
@@ -94,15 +106,15 @@ export const CountButton = styled.button`
   font-family: ${(p) => p.theme.fontFamily.heading};
   font-size: 18px;
   font-weight: 500;
-  color: ${(p) => p.theme.color.interactive05};
+  color: ${(p) => p.theme.color.interactive06};
   padding: 5px 6px;
   max-width: 100%;
   border-radius: 4px;
   border: 2px solid transparent;
   cursor: pointer;
 
   &:hover {
-    background-color: ${(p) => p.theme.color.disabled};
+    background-color: ${(p) => p.theme.color.background03};
   }
 
   &:focus-visible {

diff --git a/components/brave_shields/resources/panel/components/main-panel/index.tsx b/components/brave_shields/resources/panel/components/main-panel/index.tsx
@@ -61,15 +61,15 @@ function MainPanel () {
   const renderAdvancedControlButton = () => {
     if (!siteBlockInfo?.isShieldsEnabled) {
       return (
-        <S.AdvancedControlsButton
+        <S.GlobalDefaultsButton
           type="button"
           onClick={onSettingsClick}
         >
           <i className="icon-globe">
             <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>
           </i>
           <span>{getLocale('braveShieldsChangeDefaults')}</span>
-        </S.AdvancedControlsButton>
+        </S.GlobalDefaultsButton>
       )
     }
 

diff --git a/components/brave_shields/resources/panel/components/main-panel/style.ts b/components/brave_shields/resources/panel/components/main-panel/style.ts
@@ -24,7 +24,7 @@ export const Box = styled.div`
 `
 
 export const HeaderBox = styled.section`
-  background-color: ${(p) => p.theme.color.background01};
+  background-color: ${(p) => p.theme.color.background03};
   padding: 22px 17px 22px 17px;
 `
 
@@ -187,11 +187,13 @@ export const PanelContent = styled.section`
 
 export const AdvancedControlsButton = styled.button`
   --border: 3px solid transparent;
-  --text-color: ${(p) => p.theme.color.text01};
+  --svg-color: ${(p) => p.theme.color.interactive05};
+  --text-color: ${(p) => p.theme.color.interactive06};
 
   background-color: ${(p) => p.theme.color.background03};
   font-family: ${(p) => p.theme.fontFamily.heading};
   font-size: 14px;
+  font-weight: 500;
   color: var(--text-color);
   width: 100%;
   padding: 10px 17px;
@@ -201,6 +203,7 @@ export const AdvancedControlsButton = styled.button`
   grid-gap: 10px;
   align-items: center;
   text-align: left;
+  cursor: pointer;
 
   i { 
     grid-column: 1;
@@ -210,21 +213,22 @@ export const AdvancedControlsButton = styled.button`
     grid-column: 2;
   }
 
-  .icon-globe {
-    path {
-      fill: ${(p) => p.theme.color.interactive05};
-    }
+  svg > path {
+    fill: var(--svg-color);
   }
 
   &:hover {
-    --text-color: ${(p) => p.theme.color.interactive05};
+    --text-color: ${(p) => p.theme.color.interactive07};
+    --svg-color: ${(p) => p.theme.color.interactive08};
   }
 
   &:focus-visible {
     --border: 3px solid ${(p) => p.theme.color.focusBorder};
   }
 `
 
+export const GlobalDefaultsButton = styled(AdvancedControlsButton)``
+
 export const CaratIcon = styled(CaratStrongDownIcon)<CaratIconProps>`
   --rotate: rotate(0deg);
 

diff --git a/components/brave_shields/resources/panel/components/tree-list/style.ts b/components/brave_shields/resources/panel/components/tree-list/style.ts
@@ -53,7 +53,7 @@ export const Footer = styled.section`
 export const SiteTitleBox = styled.div`
   display: grid;
   grid-template-columns: 26px 1fr;
-  grid-gap: 10px;
+  grid-gap: 5px;
   align-items: center;
   margin-bottom: 15px;
 `
@@ -104,9 +104,8 @@ export const BackButton = styled.button`
 `
 
 export const Grid = styled.div`
-  display: grid;
-  grid-template-columns: 26px 2fr 0.5fr;
-  grid-gap: 10px;
+  display: flex;
+  gap: 8px;
   align-items: center;
   font-family: ${(p) => p.theme.fontFamily.heading};
   color: ${(p) => p.theme.color.text01};

diff --git a/components/brave_shields/resources/panel/shields_panel.tsx b/components/brave_shields/resources/panel/shields_panel.tsx
@@ -38,6 +38,7 @@ function App () {
     const onVisibilityChange = () => {
       if (document.visibilityState === 'visible') {
         getPanelBrowserAPI().panelHandler.showUI()
+        getPanelBrowserAPI().dataHandler.updateFavicon()
         // Reset the view type back to main panel
         setViewType(ViewType.Main)
       }

diff --git a/components/brave_shields/resources/panel/theme/shields-dark.ts b/components/brave_shields/resources/panel/theme/shields-dark.ts
@@ -5,14 +5,19 @@
 
  import ITheme from 'brave-ui/theme/theme-interface'
  import defaultDarkTheme from 'brave-ui/theme/brave-dark'
+ import IThemeShields from './shields-theme'
 
- const shieldsDarkTheme: ITheme = {
+ const shieldsDarkTheme: ITheme & IThemeShields = {
    ...defaultDarkTheme,
    name: 'Shields Dark',
    color: {
      ...defaultDarkTheme.color,
-     background03: '#3B3E4F',
-     text01: '#F0F2FF'
+     background03: '#313341',
+     text01: '#F0F2FF',
+     interactive05: '#737ADE',
+     interactive06: '#A0A5EB',
+     interactive07: '#737ADE',
+     interactive08: '#4C54D2'
    }
  }
 

diff --git a/components/brave_shields/resources/panel/theme/shields-light.ts b/components/brave_shields/resources/panel/theme/shields-light.ts
@@ -5,15 +5,20 @@
 
  import ITheme from 'brave-ui/theme/theme-interface'
  import defaultTheme from 'brave-ui/theme/brave-default'
+ import IThemeShields from './shields-theme'
 
- const shieldsLightTheme: ITheme = {
+ const shieldsLightTheme: ITheme & IThemeShields = {
    ...defaultTheme,
    name: 'Shields light',
    color: {
      ...defaultTheme.color,
      background03: '#F8F9FA',
      text01: '#212529',
-     warningIcon: '#EA3A0D'
+     warningIcon: '#EA3A0D',
+     interactive05: '#4C54D2',
+     interactive06: '#737ADE',
+     interactive07: '#4C54D2',
+     interactive08: '#353DAB'
    }
  }
 

diff --git a/components/brave_shields/resources/panel/theme/shields-theme.ts b/components/brave_shields/resources/panel/theme/shields-theme.ts
@@ -0,0 +1,9 @@
+/* Copyright (c) 2022 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 http://mozilla.org/MPL/2.0/. */
+
+ export default interface IThemeShields {
+  color: {
+  }
+}