set shields interface views as a global default in settings

close brave/brave-browser#4784
brave · Jul 30, 2019 · 62420d4 · 62420d4
1 parent cde4417
commit 62420d4
Show file tree

Hide file tree

Showing 25 changed files with 176 additions and 105 deletions.
diff --git a/app/brave_generated_resources.grd b/app/brave_generated_resources.grd
@@ -300,6 +300,15 @@ By installing this extension, you are agreeing to the Google Widevine Terms of U
       <message name="IDS_SETTINGS_SOCIAL_BLOCKING_DEFAULTS_TITLE" desc="The title the settings section which has options for blocking third-party embeds, commonly from social media sites">
         Social media blocking
       </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_DEFAULT_VIEW_LABEL" desc="Default Brave view title label">
+        Default view
+      </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_SIMPLE_VIEW_LABEL" desc="Default Brave simple view title label">
+        Simple view
+      </message>
+      <message name="IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_ADVANCED_VIEW_LABEL" desc="Default Brave advanced view title label">
+        Advanced view
+      </message>
       <message name="IDS_SETTINGS_BRAVE_SHIELDS_AD_CONTROL_LABEL" desc="Default Brave block cross-site trackers control setting label">
         Block cross-site trackers
       </message>

diff --git a/browser/brave_profile_prefs.cc b/browser/brave_profile_prefs.cc
@@ -65,6 +65,7 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
   registry->RegisterBooleanPref(kHTTPSEVerywhereControlType, true);
   registry->RegisterBooleanPref(kNoScriptControlType, false);
   registry->RegisterBooleanPref(kAdControlType, true);
+  registry->RegisterBooleanPref(kAdvancedViewControlType, false);
   registry->RegisterBooleanPref(kGoogleLoginControlType, true);
   registry->RegisterBooleanPref(kFBEmbedControlType, true);
   registry->RegisterBooleanPref(kTwitterEmbedControlType, true);

diff --git a/browser/brave_profile_prefs_browsertest.cc b/browser/brave_profile_prefs_browsertest.cc
@@ -29,6 +29,8 @@ IN_PROC_BROWSER_TEST_F(BraveProfilePrefsBrowserTest, MiscBravePrefs) {
       kHTTPSEVerywhereControlType));
   EXPECT_FALSE(
       browser()->profile()->GetPrefs()->GetBoolean(kNoScriptControlType));
+  EXPECT_FALSE(
+      browser()->profile()->GetPrefs()->GetBoolean(kAdvancedViewControlType));
   EXPECT_TRUE(
       browser()->profile()->GetPrefs()->GetBoolean(kAdControlType));
   EXPECT_TRUE(

diff --git a/browser/extensions/api/settings_private/brave_prefs_util.cc b/browser/extensions/api/settings_private/brave_prefs_util.cc
@@ -35,6 +35,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetWhitelistedKeys() {
   (*s_brave_whitelist)[::prefs::kImportDialogWindows] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   // Default Brave shields
+  (*s_brave_whitelist)[kAdvancedViewControlType] =
+      settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kAdControlType] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kHTTPSEVerywhereControlType] =

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
@@ -18,6 +18,26 @@
       .label.shields-secondary-title {
         padding-bottom: 1em;
       }
+      .flex-center {
+        display: flex;
+        align-items: center;
+      }
+      .shields-view-col {
+        margin: 16px 0 24px;
+        padding: 0 24px;
+        height: 98px;
+        border-radius: 6px;
+        border: var(--cr-section_-_border-top);
+        width: calc(50% - 58px);
+        float: left;
+      }
+      .shields-view-col:last-of-type {
+        margin: 16px 0 24px 16px;
+      }
+       .shields-view-label {
+         margin: 0 20px;
+         cursor: pointer;
+       }
     </style>
     <div class="settings-box first">
       <div class="flex">
@@ -28,6 +48,58 @@
         </div>
       </div>
     </div>
+    <div class="settings-box">
+      <div class="flex">
+        <div class="label shields-primary-title">$i18n{defaultView}</div>
+        <settings-radio-group
+          pref="{{prefs.brave.advanced_view_default}}">
+          <controlled-radio-button class="shields-view-col" name="false">
+            <div class="flex-center">
+              <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <defs>
+                  <path d="M2 0h46a2 2 0 0 1 2 2v46a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" id="simpleViewImgPath"/>
+                </defs>
+                <g fill="none" fill-rule="evenodd">
+                  <mask id="b" fill="#fff">
+                    <use xlink:href="#simpleViewImgPath"/>
+                  </mask>
+                  <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">
+            <div class="flex-center">
+              <svg width="50" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <defs>
+                  <path d="M2 0h46a2 2 0 0 1 2 2v76a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" id="advViewImgPath" />
+                </defs>
+                <g fill="none" fill-rule="evenodd">
+                  <mask id="b" fill="#fff">
+                    <use xlink:href="#advViewImgPath"/>
+                  </mask>
+                  <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>
     <settings-toggle-button id="adControlType"
         pref="{{prefs.brave.ad_default}}"
         label="$i18n{adControlLabel}"

diff --git a/chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc b/chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc
@@ -66,6 +66,12 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
       IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_DESCRIPTION_3},
     {"socialBlocking",
       IDS_SETTINGS_SOCIAL_BLOCKING_DEFAULTS_TITLE},
+    {"defaultView",
+      IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_DEFAULT_VIEW_LABEL},
+    {"simpleView",
+      IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_SIMPLE_VIEW_LABEL},
+    {"advancedView",
+      IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_ADVANCED_VIEW_LABEL},
     {"adControlLabel",
       IDS_SETTINGS_BRAVE_SHIELDS_AD_CONTROL_LABEL},
     {"cookieControlLabel",

diff --git a/common/pref_names.cc b/common/pref_names.cc
@@ -42,6 +42,7 @@ const char kReferralCheckedForPromoCodeFile[] =
     "brave.referral.checked_for_promo_code_file";
 const char kHTTPSEVerywhereControlType[] = "brave.https_everywhere_default";
 const char kNoScriptControlType[] = "brave.no_script_default";
+const char kAdvancedViewControlType[] = "brave.advanced_view_default";
 const char kAdControlType[] = "brave.ad_default";
 const char kGoogleLoginControlType[] = "brave.google_login_default";
 const char kFBEmbedControlType[] = "brave.fb_embed_default";

diff --git a/common/pref_names.h b/common/pref_names.h
@@ -35,6 +35,7 @@ extern const char kReferralHeaders[];
 extern const char kReferralCheckedForPromoCodeFile[];
 extern const char kHTTPSEVerywhereControlType[];
 extern const char kNoScriptControlType[];
+extern const char kAdvancedViewControlType[];
 extern const char kAdControlType[];
 extern const char kGoogleLoginControlType[];
 extern const char kFBEmbedControlType[];

diff --git a/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts b/components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts
@@ -125,9 +125,3 @@ export const setAdvancedViewFirstAccess: actions.SetAdvancedViewFirstAccess = ()
     type: types.SET_ADVANCED_VIEW_FIRST_ACCESS
   }
 }
-
-export const toggleAdvancedView: actions.ToggleAdvancedView = () => {
-  return {
-    type: types.TOGGLE_ADVANCED_VIEW
-  }
-}
diff --git a/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts b/components/brave_extension/extension/brave_extension/background/api/storageAPI.ts
@@ -8,8 +8,7 @@ import * as Shields from '../../types/state/shieldsPannelState'
 const keyName = 'shields-persistent-data'
 
 export const defaultPersistentData: Shields.PersistentData = {
-  isFirstAccess: true,
-  advancedView: false
+  isFirstAccess: true
 }
 
 export const loadPersistentData = (): Shields.PersistentData => {

diff --git a/...ents/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts b/...ents/brave_extension/extension/brave_extension/background/reducers/shieldsPanelReducer.ts
@@ -321,12 +321,6 @@ export default function shieldsPanelReducer (
       state = shieldsPanelState.updatePersistentData(state, { isFirstAccess: false })
       break
     }
-    case shieldsPanelTypes.TOGGLE_ADVANCED_VIEW: {
-      state = shieldsPanelState.updatePersistentData(state, {
-        advancedView: !state.persistentData.advancedView
-      })
-      break
-    }
   }
 
   if (!areObjectsEqual(state.persistentData, initialPersistentData)) {

diff --git a/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx b/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx
@@ -10,6 +10,7 @@ import { Provider } from 'react-redux'
 import { Store } from 'react-chrome-redux'
 import BraveCoreThemeProvider from '../../../common/BraveCoreThemeProvider'
 import BraveShields from './containers/braveShields'
+import { getViewPreferences } from './background/api/shieldsAPI'
 require('../../../fonts/muli.css')
 require('../../../fonts/poppins.css')
 
@@ -19,9 +20,17 @@ const store: any = new Store({
 
 Promise.all([
   store.ready(),
-  new Promise(resolve => chrome.braveTheme.getBraveThemeType(resolve))
+  new Promise(resolve => chrome.braveTheme.getBraveThemeType(resolve)),
+  getViewPreferences()
 ])
-.then(([ , themeType ]: [ undefined, chrome.braveTheme.ThemeType ]) => {
+.then((
+  [ , themeType, settings ]:
+  [
+    undefined,
+    chrome.braveTheme.ThemeType,
+    chrome.braveShields.BraveShieldsViewPreferences
+  ]
+) => {
   const mountNode: HTMLElement | null = document.querySelector('#root')
   ReactDOM.render(
     <Provider store={store}>
@@ -30,7 +39,7 @@ Promise.all([
         dark={shieldsDarkTheme}
         light={shieldsLightTheme}
       >
-        <BraveShields />
+        <BraveShields settings={settings} />
       </BraveCoreThemeProvider>
     </Provider>,
     mountNode

diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/footer.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/footer.tsx
@@ -4,10 +4,6 @@
 
 import * as React from 'react'
 
-// Types
-
-import { ToggleAdvancedView } from '../../types/actions/shieldsPanelActions'
-
 // Feature-specific components
 import { MainFooter, Link } from 'brave-ui/features/shields'
 
@@ -19,7 +15,7 @@ import { getLocale } from '../../background/api/localeAPI'
 
 export interface Props {
   isBlockedListOpen: boolean
-  toggleAdvancedView: ToggleAdvancedView
+  toggleAdvancedView: () => void
 }
 
 export default class Footer extends React.PureComponent<Props, {}> {

diff --git a/components/brave_extension/extension/brave_extension/components/advancedView/index.tsx b/components/brave_extension/extension/brave_extension/components/advancedView/index.tsx
@@ -32,8 +32,7 @@ import {
   SetGroupedScriptsBlockedCurrentState,
   SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState,
-  SetAdvancedViewFirstAccess,
-  ToggleAdvancedView
+  SetAdvancedViewFirstAccess
 } from '../../types/actions/shieldsPanelActions'
 
 interface Props {
@@ -50,10 +49,10 @@ interface Props {
     setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
     setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
-    toggleAdvancedView: ToggleAdvancedView
   }
   shieldsPanelTabData: Tab
   persistentData: PersistentData
+  toggleAdvancedView: () => void
 }
 
 interface State {
@@ -81,7 +80,7 @@ export default class Shields extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { shieldsPanelTabData, persistentData, actions } = this.props
+    const { shieldsPanelTabData, persistentData, toggleAdvancedView, actions } = this.props
     const { isBlockedListOpen } = this.state
 
     if (!shieldsPanelTabData) {
@@ -159,7 +158,7 @@ export default class Shields extends React.PureComponent<Props, State> {
         }
         <Footer
           isBlockedListOpen={isBlockedListOpen}
-          toggleAdvancedView={actions.toggleAdvancedView}
+          toggleAdvancedView={toggleAdvancedView}
         />
       </ShieldsPanel>
     )

diff --git a/components/brave_extension/extension/brave_extension/components/braveShields.tsx b/components/brave_extension/extension/brave_extension/components/braveShields.tsx
@@ -12,6 +12,9 @@ import AdvancedView from './advancedView'
 import SimpleView from './simpleView'
 import ReadOnlyView from './readOnlyView'
 
+// API
+import * as shieldsAPI from '../background/api/shieldsAPI'
+
 // Types
 import { Tab, PersistentData } from '../types/state/shieldsPannelState'
 import {
@@ -26,8 +29,7 @@ import {
   SetGroupedScriptsBlockedCurrentState,
   SetAllScriptsBlockedCurrentState,
   SetFinalScriptsBlockedState,
-  SetAdvancedViewFirstAccess,
-  ToggleAdvancedView
+  SetAdvancedViewFirstAccess
 } from '../types/actions/shieldsPanelActions'
 
 interface Props {
@@ -44,37 +46,51 @@ interface Props {
     setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
     setFinalScriptsBlockedState: SetFinalScriptsBlockedState
     setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
-    toggleAdvancedView: ToggleAdvancedView
   }
   shieldsPanelTabData: Tab
   persistentData: PersistentData
+  settings: any
 }
 
 interface State {
   showReadOnlyView: boolean
+  showAdvancedView: boolean
 }
 
 export default class Shields extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = { showReadOnlyView: false }
+    this.state = {
+      showReadOnlyView: false,
+      showAdvancedView: props.settings.showAdvancedView
+    }
   }
 
   toggleReadOnlyView = () => {
     this.setState({ showReadOnlyView: !this.state.showReadOnlyView })
   }
 
+  toggleAdvancedView = () => {
+    const { showAdvancedView } = this.state
+    shieldsAPI.setViewPreferences({ showAdvancedView: !showAdvancedView })
+      // change local state so the component can trigger an update
+      // otherwise change will be visible only after shields closes
+      .then(() => this.setState({ showAdvancedView: !showAdvancedView }))
+      .catch((err) => console.log('[Shields] Unable to toggle advanced view interface:', err))
+  }
+
   render () {
     const { shieldsPanelTabData, persistentData, actions } = this.props
-    const { showReadOnlyView } = this.state
+    const { showAdvancedView, showReadOnlyView } = this.state
     if (!shieldsPanelTabData) {
       return null
     }
-    return persistentData.advancedView
+    return showAdvancedView
       ? (
         <AdvancedView
           shieldsPanelTabData={shieldsPanelTabData}
           persistentData={persistentData}
+          toggleAdvancedView={this.toggleAdvancedView}
           actions={actions}
         />
       ) : showReadOnlyView
@@ -88,6 +104,7 @@ export default class Shields extends React.PureComponent<Props, State> {
           shieldsPanelTabData={shieldsPanelTabData}
           persistentData={persistentData}
           actions={actions}
+          toggleAdvancedView={this.toggleAdvancedView}
           toggleReadOnlyView={this.toggleReadOnlyView}
         />
       )

diff --git a/components/brave_extension/extension/brave_extension/components/simpleView/footer.tsx b/components/brave_extension/extension/brave_extension/components/simpleView/footer.tsx
@@ -12,10 +12,9 @@ import * as tabsAPI from '../../background/api/tabsAPI'
 
 // Locale
 import { getLocale } from '../../background/api/localeAPI'
-import { ToggleAdvancedView } from '../../types/actions/shieldsPanelActions'
 
 export interface Props {
-  toggleAdvancedView: ToggleAdvancedView
+  toggleAdvancedView: () => void
 }
 
 export default class Footer extends React.PureComponent<Props, {}> {