Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shields UI fixes (uplift to 1.38x) #12894

Merged
merged 2 commits into from
Apr 8, 2022
Merged

Shields UI fixes (uplift to 1.38x) #12894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8923678
Merge pull request #12775 from brave/shields_strings
nullhook Mar 30, 2022
cbcbf96
Merge pull request #12885 from brave/shields_ui_follow_ups
nullhook Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/brave_generated_resources.grd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,7 @@ Or change later at <ph name="SETTINGS_EXTENIONS_LINK">$2<ex>brave://settings/ext
Block cookies
</message>
<message name="IDS_SETTINGS_BRAVE_SHIELDS_FINGERPRINTING_CONTROL_LABEL" desc="Default Brave fingerprinting control setting label">
Fingerprinting blocking
Block fingerprinting
</message>
<message name="IDS_SETTINGS_BRAVE_SHIELDS_HTTPS_EVERYWHERE_CONTROL_LABEL" desc="Default Brave upgrade connections to HTTPS control setting label">
Upgrade connections to HTTPS
Expand Down
65 changes: 10 additions & 55 deletions browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,6 @@
display: flex;
align-items: center;
}
.default-view-item {
padding-top: 20px;
}
.shields-view-col {
margin: 16px 0 24px;
padding: 0 24px;
Expand Down Expand Up @@ -59,48 +56,6 @@
pref="{{prefs.brave.shields.stats_badge_visible}}"
label="$i18n{showStatsBlockedBadgeLabel}">
</settings-toggle-button>
<div class="settings-box continuation default-view-item">
<div class="flex">
<div class="label">$i18n{defaultView}</div>
<settings-radio-group
pref="{{prefs.brave.shields.advanced_view_enabled}}">
<controlled-radio-button class="shields-view-col" name="false"
pref="[[prefs.brave.shields.advanced_view_enabled]]">
<div class="flex-center">
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path stroke="#CED0DB" d="M2 .5A1.5 1.5 0 0 0 .5 2v46A1.5 1.5 0 0 0 2 49.5h46a1.5 1.5 0 0 0 1.5-1.5V2A1.5 1.5 0 0 0 48 .5H2z"/>
<ellipse fill="#CED0DB" mask="url(#b)" cx="25" cy="7.5" rx="49" ry="21.5"/>
</g>
</svg>
<label class="shields-view-label">$i18n{simpleView}</label>
</div>
</controlled-radio-button>
<div class="vertical-separator"></div>
<controlled-radio-button class="shields-view-col" name="true"
pref="[[prefs.brave.shields.advanced_view_enabled]]">
<div class="flex-center">
<svg width="50" height="80" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path stroke="#CED0DB" d="M2 .5A1.5 1.5 0 0 0 .5 2v76A1.5 1.5 0 0 0 2 79.5h46a1.5 1.5 0 0 0 1.5-1.5V2A1.5 1.5 0 0 0 48 .5H2z"/>
<ellipse fill="#CED0DB" mask="url(#b)" cx="25" cy="7.5" rx="49" ry="21.5"/>
<path d="M36 38h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z" fill="#CED0DB" fill-rule="nonzero"/>
<rect fill="#CED0DB" x="6" y="38" width="18" height="2" rx="1"/>
<circle fill="#CED0DB" fill-rule="nonzero" cx="42" cy="39" r="3"/>
<path d="M36 52h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z" fill="#CED0DB" fill-rule="nonzero"/>
<rect fill="#CED0DB" x="6" y="52" width="22" height="2" rx="1"/>
<circle fill="#CED0DB" fill-rule="nonzero" cx="42" cy="53" r="3"/>
<path d="M36 66h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z" fill="#CED0DB" fill-rule="nonzero"/>
<rect fill="#CED0DB" x="6" y="66" width="12" height="2" rx="1"/>
<circle fill="#CED0DB" fill-rule="nonzero" cx="42" cy="67" r="3"/>
</g>
</svg>
<label class="shields-view-label">$i18n{advancedView}</label>
</div>
</controlled-radio-button>
</settings-radio-group>
</div>
</div>
<div class="settings-box">
<div class="start">$i18n{adControlLabel}</div>
<select id="adControlType" class="md-select"
Expand All @@ -126,24 +81,24 @@
on-settings-boolean-control-change="onNoScriptControlChange_">
</settings-toggle-button>
<div class="settings-box">
<div class="start">$i18n{cookieControlLabel}</div>
<select id="cookieControlType" class="md-select"
on-change="onCookieControlChange_">
<template is="dom-repeat" items="[[cookieControlTypes_]]">
<div class="start">$i18n{fingerprintingControlLabel}</div>
<select id="fingerprintingControlType" class="md-select"
on-change="onFingerprintingControlChange_">
<template is="dom-repeat" items="[[fingerprintingControlTypes_]]">
<option value="[[item.value]]"
selected="[[controlEqual(item.value, cookieControlType_)]]">
selected="[[controlEqual(item.value, fingerprintingControlType_)]]">
[[item.name]]
</option>
</template>
</select>
</div>
<div class="settings-box">
<div class="start">$i18n{fingerprintingControlLabel}</div>
<select id="fingerprintingControlType" class="md-select"
on-change="onFingerprintingControlChange_">
<template is="dom-repeat" items="[[fingerprintingControlTypes_]]">
<div class="start">$i18n{cookieControlLabel}</div>
<select id="cookieControlType" class="md-select"
on-change="onCookieControlChange_">
<template is="dom-repeat" items="[[cookieControlTypes_]]">
<option value="[[item.value]]"
selected="[[controlEqual(item.value, fingerprintingControlType_)]]">
selected="[[controlEqual(item.value, cookieControlType_)]]">
[[item.name]]
</option>
</template>
Expand Down
4 changes: 2 additions & 2 deletions components/brave_shields/common/brave_shield_constants.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
IDS_BRAVE_SHIELDS_TRACKERS_AND_ADS_ALLOW_ALL},
{"braveShieldsCrossCookiesBlocked",
IDS_BRAVE_SHIELDS_CROSS_COOKIES_BLOCKED},
{"braveShieldsCookiesBlocked", IDS_BRAVE_SHIELDS_COOKIES_BLOCKED},
{"braveShieldsCookiesBlockedAll", IDS_BRAVE_SHIELDS_COOKIES_BLOCKED_ALL},
{"braveShieldsCookiesBlockAll", IDS_BRAVE_SHIELDS_COOKIES_BLOCKED},
{"braveShieldsCookiesAllowedAll", IDS_BRAVE_SHIELDS_COOKIES_ALLOWED_ALL},
{"braveShieldsFingerprintingBlocked",
IDS_BRAVE_SHIELDS_FINGERPRINTING_BLOCKED},
{"braveShieldsFingerprintingBlockedStd",
Expand Down
10 changes: 4 additions & 6 deletions components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ const adBlockModeOptions = [
]

const cookieBlockModeOptions = [
{ value: CookieBlockMode.BLOCKED, text: getLocale('braveShieldsCookiesBlockAll') },
{ value: CookieBlockMode.CROSS_SITE_BLOCKED, text: getLocale('braveShieldsCrossCookiesBlocked') },
{ value: CookieBlockMode.BLOCKED, text: getLocale('braveShieldsCookiesBlocked') },
{ value: CookieBlockMode.ALLOW, text: getLocale('braveShieldsCookiesBlockedAll') }
{ value: CookieBlockMode.ALLOW, text: getLocale('braveShieldsCookiesAllowedAll') }
]

const fingerprintModeOptions = [
{ value: FingerprintMode.STANDARD, text: getLocale('braveShieldsFingerprintingBlockedStd') },
{ value: FingerprintMode.STRICT, text: getLocale('braveShieldsFingerprintingBlockedAgg') },
{ value: FingerprintMode.STANDARD, text: getLocale('braveShieldsFingerprintingBlockedStd') },
{ value: FingerprintMode.ALLOW, text: getLocale('braveShieldsFingerprintingAllowAll') }
]

Expand Down Expand Up @@ -125,7 +125,6 @@ function AdvancedControlsContent () {
<label>
<span>{getLocale('braveShieldsConnectionsUpgraded')}</span>
<Toggle
brand="shields"
onChange={handleHTTPSEverywhereEnabledChange}
isOn={siteSettings?.isHttpsEverywhereEnabled}
size='sm'
Expand All @@ -145,7 +144,6 @@ function AdvancedControlsContent () {
<label>
<span>{getLocale('braveShieldsScriptsBlocked')}</span>
<Toggle
brand="shields"
onChange={handleIsNoScriptEnabledChange}
isOn={siteSettings?.isNoscriptEnabled}
size='sm'
Expand Down Expand Up @@ -180,7 +178,7 @@ function AdvancedControlsContent () {
<div className="col-2">
<Select
value={siteSettings?.cookieBlockMode}
ariaLabel={getLocale('braveShieldsCookiesBlocked')}
ariaLabel={getLocale('braveShieldsCookiesBlockAll')}
onChange={handleCookieBlockModeChange}
>
{cookieBlockModeOptions.map(entry => {
Expand Down
11 changes: 8 additions & 3 deletions components/brave_shields/resources/panel/components/tree-list/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const Footer = styled.section`

export const SiteTitleBox = styled.div`
display: grid;
grid-template-columns: 24px 1fr;
grid-template-columns: 26px 1fr;
grid-gap: 10px;
align-items: center;
margin-bottom: 15px;
Expand Down Expand Up @@ -105,11 +105,16 @@ export const BackButton = styled.button`

export const Grid = styled.div`
display: grid;
grid-template-columns: 20px 2fr 0.5fr;
grid-gap: 5px;
grid-template-columns: 26px 2fr 0.5fr;
grid-gap: 10px;
align-items: center;
font-family: ${(p) => p.theme.fontFamily.heading};
color: ${(p) => p.theme.color.text01};
font-size: 14px;
font-weight: 600;

span:first-child {
text-align: center;
overflow: hidden;
}
`
18 changes: 9 additions & 9 deletions components/brave_shields/resources/panel/stories/locale.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ provideStrings({
braveShieldsDown: 'Shields are DOWN $1for$2',
braveShieldsBroken: 'If this site seems broken, try Shields down. $1Note: this may reduce Brave\'s privacy protections.$2',
braveShieldsBlockedNote: 'Trackers, ads, and more blocked $1Learn more$2',
braveShieldsAdvancedCtrls: 'Advanced Controls',
braveShieldsAdvancedCtrls: 'Advanced controls',
braveShieldSettingsDescription: 'Changing these settings might break sites.',
braveShieldsGlobalSettingsTitle: 'Global Shield settings',
braveShieldsChangeDefaults: 'Global defaults',
Expand All @@ -17,16 +17,16 @@ provideStrings({
braveShieldsScriptsBlocked: 'Block scripts',
braveShieldsScriptsBlockedEnable: 'Enable Scripts Blocked',
braveShieldsTrackersAndAds: 'Trackers & ads',
braveShieldsTrackersAndAdsBlockedStd: 'Trackers & ads blocked (standard)',
braveShieldsTrackersAndAdsBlockedAgg: 'Trackers & ads blocked (aggressive)',
braveShieldsTrackersAndAdsBlockedStd: 'Block trackers & ads',
braveShieldsTrackersAndAdsBlockedAgg: 'Aggressively block trackers & ads',
braveShieldsTrackersAndAdsAllowAll: 'Allow all trackers & ads',
braveShieldsCrossCookiesBlocked: 'Cross-site cookies blocked',
braveShieldsCookiesBlocked: 'Cookies blocked',
braveShieldsCookiesBlockedAll: 'All cookies blocked',
braveShieldsCrossCookiesBlocked: 'Block cross-site cookies',
braveShieldsCookiesBlockAll: 'Block all cookies',
braveShieldsCookiesAllowedAll: 'Allow all cookies',
braveShieldsFingerprintingBlocked: 'Fingerprinting blocked',
braveShieldsFingerprintingBlockedStd: 'Fingerprinting blocked (standard)',
braveShieldsFingerprintingBlockedAgg: 'Fingerprinting blocked (strict, sites may break)',
braveShieldsFingerprintingAllowAll: 'Allow all Fingerprinting',
braveShieldsFingerprintingBlockedStd: 'Block fingerprinting',
braveShieldsFingerprintingBlockedAgg: 'Aggressively block fingerprinting',
braveShieldsFingerprintingAllowAll: 'Allow fingerprinting',
braveShieldsReportSite: 'Report site',
braveShieldsReportSiteDesc: 'Tell us if the site wasn\'t working properly with Shields up.',
braveShieldsDownDesc: 'You are viewing this site without Brave\'s privacy protection'
Expand Down
22 changes: 11 additions & 11 deletions components/resources/brave_shields_strings.grdp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</message>

<message name="IDS_BRAVE_SHIELDS_ADVANCED_CTRLS" desc="A button label to expand/collapse more options.">
Advanced Controls
Advanced controls
</message>

<message name="IDS_BRAVE_SHIELD_SETTINGS_DESCRIPTION" desc="A description to explain the various options below will effect web compatibility.">
Expand All @@ -42,7 +42,7 @@
</message>

<message name="IDS_BRAVE_SHIELDS_CUSTOMIZE_ADBLOCK_LISTS" desc="A link that redirects to Adblock lists.">
Filter Lists
Filter lists
</message>

<message name="IDS_BRAVE_SHIELDS_CONNECTIONS_UPGRADED" desc="A label to describe expand/collapse button for the HTTPS section.">
Expand All @@ -66,43 +66,43 @@
</message>

<message name="IDS_BRAVE_SHIELDS_TRACKERS_AND_ADS_BLOCKED_STD" desc="Menu option that would block some trackers and advertisement website scripts.">
Trackers &amp; ads blocked (standard)
Block trackers &amp; ads
</message>

<message name="IDS_BRAVE_SHIELDS_TRACKERS_AND_ADS_BLOCKED_AGG" desc="Menu option that would block all trackers and advertisement website scripts.">
Trackers &amp; ads blocked (aggressive)
Aggressively block trackers &amp; ads
</message>

<message name="IDS_BRAVE_SHIELDS_TRACKERS_AND_ADS_ALLOW_ALL" desc="Menu option that would stop blocking all trackers and advertisement website scripts">
Allow all trackers &amp; ads
</message>

<message name="IDS_BRAVE_SHIELDS_CROSS_COOKIES_BLOCKED" desc="Menu option that would block cross website cookies.">
Cross-site cookies blocked
Block cross-site cookies
</message>

<message name="IDS_BRAVE_SHIELDS_COOKIES_BLOCKED" desc="Menu option that would block current website cookies.">
Cookies blocked
Block all cookies
</message>

<message name="IDS_BRAVE_SHIELDS_COOKIES_BLOCKED_ALL" desc="Menu option that would allow all cookies.">
All cookies allowed
<message name="IDS_BRAVE_SHIELDS_COOKIES_ALLOWED_ALL" desc="Menu option that would allow all cookies on the current website.">
Allow all cookies
</message>

<message name="IDS_BRAVE_SHIELDS_FINGERPRINTING_BLOCKED" desc="An accessible label for expand/collapse button.">
Fingerprinting blocked
</message>

<message name="IDS_BRAVE_SHIELDS_FINGERPRINTING_BLOCKED_STD" desc="Menu option that would block some fingerprinting website scripts.">
Fingerprinting blocked (standard)
Block fingerprinting
</message>

<message name="IDS_BRAVE_SHIELDS_FINGERPRINTING_BLOCKED_AGG" desc="Menu option that would block all fingerprinting website scripts.">
Fingerprinting blocked (strict, sites may break)
Aggressively block fingerprinting
</message>

<message name="IDS_BRAVE_SHIELDS_FINGERPRINTING_ALLOW_ALL" desc="Menu option that would stop blocking all fingerprinting website scripts.">
Allow all Fingerprinting
Allow fingerprinting
</message>

<message name="IDS_BRAVE_SHIELDS_REPORT_SITE" desc="An accessible label for reporting broken sites.">
Expand Down
40 changes: 14 additions & 26 deletions components/web-components/toggle/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,17 @@ export const ToggleBox = styled.button.attrs<ToggleProps>({
border-radius: 50px;
background: var(--bg-color);
background-size: 400% 400%;
animation: var(--animation-name) 5s ease infinite;

${p => p.isOn && css`
--knob-left: initial;
--knob-right: 2px;
--animation-name: ${moveBg};
--knob-color: #4C54D2;
--bg-color: #E1E2F6;
--knob-color: #4436E1;

@media (prefers-color-scheme: dark) {
--knob-color: #4436E1;
--bg-color: #7679B1;
}
`}

${p => !p.isOn && css`
Expand Down Expand Up @@ -83,32 +86,17 @@ export const ToggleBox = styled.button.attrs<ToggleProps>({
${({ brand, isOn }) => {
if (!isOn) return

if (brand === 'vpn') {
if (brand === 'shields' || brand === 'vpn') {
return css`
animation: ${moveBg} 5s ease infinite;
--knob-color: white;
--bg-color: linear-gradient(
135deg,
#381e85 0%,
#6845d1 30%,
#737ade 100%,
#4d56d0 75%,
#0e1bd1 100%
);
`
}
--bg-color: linear-gradient(305.95deg, #381e85 0%, #6845d1 98.59%, #737ade 100%, #4d56d0 75%, #0e1bd1 100%);

if (brand === 'shields') {
return css`
--knob-color: white;
--bg-color: linear-gradient(
305.95deg,
#BF14A2 0%,
#F73A1C 98.59%,
#737ade 100%,
#4d56d0 75%,
#0e1bd1 100%
);
`
@media (prefers-color-scheme: dark) {
--knob-color: white;
--bg-color: linear-gradient(305.95deg, #381e85 0%, #6845d1 98.59%, #737ade 100%, #4d56d0 75%, #0e1bd1 100%);
}
`
}

return css``
Expand Down