From e79eeb5ca40c4b3be12570c44afd639e43b65895 Mon Sep 17 00:00:00 2001 From: taher Date: Tue, 12 Apr 2022 12:56:50 -0700 Subject: [PATCH 1/3] Favicon and color fixes for Shields v2 --- .../shields_panel_data_handler.cc | 25 +++++++++++-------- .../shields_panel_data_handler.h | 1 + .../common/brave_shields_panel.mojom | 1 + .../advanced-controls-content/style.ts | 18 ++++++++++--- .../panel/components/main-panel/index.tsx | 4 +-- .../panel/components/main-panel/style.ts | 18 +++++++------ .../panel/components/tree-list/style.ts | 7 +++--- .../resources/panel/shields_panel.tsx | 1 + .../resources/panel/theme/shields-dark.ts | 11 +++++--- .../resources/panel/theme/shields-light.ts | 9 +++++-- .../resources/panel/theme/shields-theme.ts | 9 +++++++ 11 files changed, 73 insertions(+), 31 deletions(-) create mode 100644 components/brave_shields/resources/panel/theme/shields-theme.ts diff --git a/browser/ui/webui/brave_shields/shields_panel_data_handler.cc b/browser/ui/webui/brave_shields/shields_panel_data_handler.cc index 80dff58c41d5..df4e0d8c3c39 100644 --- 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 index 04f919cecb04..0a6cca8ff11b 100644 --- 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 index 26991af69cf9..6da46083781c 100644 --- 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 index c05974a2319e..a0af3a7c9a70 100644 --- 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,7 +106,7 @@ 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; @@ -102,7 +114,7 @@ export const CountButton = styled.button` 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 index 4c23c898b911..0f8d3aa65043 100644 --- a/components/brave_shields/resources/panel/components/main-panel/index.tsx +++ b/components/brave_shields/resources/panel/components/main-panel/index.tsx @@ -61,7 +61,7 @@ function MainPanel () { const renderAdvancedControlButton = () => { if (!siteBlockInfo?.isShieldsEnabled) { return ( - @@ -69,7 +69,7 @@ function MainPanel () { {getLocale('braveShieldsChangeDefaults')} - + ) } diff --git a/components/brave_shields/resources/panel/components/main-panel/style.ts b/components/brave_shields/resources/panel/components/main-panel/style.ts index b678839ac936..ec9654b0f368 100644 --- 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,14 +213,13 @@ 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 { @@ -225,6 +227,8 @@ export const AdvancedControlsButton = styled.button` } ` +export const GlobalDefaultsButton = styled(AdvancedControlsButton)`` + export const CaratIcon = styled(CaratStrongDownIcon)` --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 index 88f58846aeb3..5c17b1d28f8a 100644 --- 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 index dc1c00200892..3c71108ce027 100644 --- 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 index 0be4a778f7b5..0aaf2bf9889d 100644 --- 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 index 0c21ee97022d..05d4ae80a993 100644 --- 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 new file mode 100644 index 000000000000..098af50134a7 --- /dev/null +++ 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: { + } +} From 3c39849cae3960c37aed321028dbe490fdbb2500 Mon Sep 17 00:00:00 2001 From: taher Date: Wed, 13 Apr 2022 12:44:25 -0700 Subject: [PATCH 2/3] Cleanup shields v2 inactive state --- .../resources/panel/components/main-panel/index.tsx | 2 +- .../resources/panel/components/main-panel/style.ts | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/components/brave_shields/resources/panel/components/main-panel/index.tsx b/components/brave_shields/resources/panel/components/main-panel/index.tsx index 0f8d3aa65043..7c06cc0f50f0 100644 --- a/components/brave_shields/resources/panel/components/main-panel/index.tsx +++ b/components/brave_shields/resources/panel/components/main-panel/index.tsx @@ -36,10 +36,10 @@ function MainPanel () { if (!siteBlockInfo?.isShieldsEnabled) { return ( -

{getLocale('braveShieldsDownDesc')}

{getLocale('braveShieldsReportSiteDesc')}