Merge pull request #12894 from brave/shields-ui-fixes-1.38.x

Shields UI fixes (uplift to 1.38x)
brave · Apr 8, 2022 · 7ce47f3 · 7ce47f3
2 parents f2e182f + cbcbf96
commit 7ce47f3
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 113 deletions.
diff --git a/app/brave_generated_resources.grd b/app/brave_generated_resources.grd
@@ -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

diff --git a/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html b/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html
@@ -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;
@@ -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"
@@ -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>

diff --git a/components/brave_shields/common/brave_shield_constants.h b/components/brave_shields/common/brave_shield_constants.h
@@ -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",

diff --git a/components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx b/components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx
@@ -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') }
 ]
 
@@ -125,7 +125,6 @@ function AdvancedControlsContent () {
           <label>
             <span>{getLocale('braveShieldsConnectionsUpgraded')}</span>
             <Toggle
-              brand="shields"
               onChange={handleHTTPSEverywhereEnabledChange}
               isOn={siteSettings?.isHttpsEverywhereEnabled}
               size='sm'
@@ -145,7 +144,6 @@ function AdvancedControlsContent () {
           <label>
             <span>{getLocale('braveShieldsScriptsBlocked')}</span>
             <Toggle
-              brand="shields"
               onChange={handleIsNoScriptEnabledChange}
               isOn={siteSettings?.isNoscriptEnabled}
               size='sm'
@@ -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 => {

diff --git a/components/brave_shields/resources/panel/components/tree-list/style.ts b/components/brave_shields/resources/panel/components/tree-list/style.ts
@@ -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;
@@ -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;
+  }
 `
diff --git a/components/brave_shields/resources/panel/stories/locale.ts b/components/brave_shields/resources/panel/stories/locale.ts
@@ -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',
@@ -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'

diff --git a/components/resources/brave_shields_strings.grdp b/components/resources/brave_shields_strings.grdp
@@ -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.">
@@ -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.">
@@ -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.">

diff --git a/components/web-components/toggle/style.ts b/components/web-components/toggle/style.ts
@@ -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`
@@ -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``