Merge pull request #2973 from brave/ca-4784

set shields interface views as a global default in settings

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>

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(kShieldsAdvancedViewEnabled, false);
   registry->RegisterBooleanPref(kGoogleLoginControlType, true);
   registry->RegisterBooleanPref(kFBEmbedControlType, true);
   registry->RegisterBooleanPref(kTwitterEmbedControlType, true);

browser/brave_profile_prefs_browsertest.cc

@@ -29,6 +29,9 @@ IN_PROC_BROWSER_TEST_F(BraveProfilePrefsBrowserTest, MiscBravePrefs) {
       kHTTPSEVerywhereControlType));
   EXPECT_FALSE(
       browser()->profile()->GetPrefs()->GetBoolean(kNoScriptControlType));
+  EXPECT_FALSE(
+      browser()->profile()->GetPrefs()->GetBoolean(
+        kShieldsAdvancedViewEnabled));
   EXPECT_TRUE(
       browser()->profile()->GetPrefs()->GetBoolean(kAdControlType));
   EXPECT_TRUE(

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)[kShieldsAdvancedViewEnabled] =
+      settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kAdControlType] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kHTTPSEVerywhereControlType] =

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,46 @@
         </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.shields.advanced_view_enabled}}">
+          <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">
+                <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">
+            <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>
     <settings-toggle-button id="adControlType"
         pref="{{prefs.brave.ad_default}}"
         label="$i18n{adControlLabel}"

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",

common/extensions/api/BUILD.gn

@@ -24,6 +24,7 @@ json_features("permission_features") {
   sources = [
     "//chrome/common/extensions/api/_permission_features.json",
     "//extensions/common/api/_permission_features.json",
+    "_permission_features.json",
   ]
 }
 

common/extensions/api/_permission_features.json

@@ -0,0 +1,24 @@
+// Copyright (c) 2019 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/.
+
+// TODO: Instead of duplicating chromium's entire properties from upstream
+//   _permissions_features.json, it would be better to merge additions here.
+
+{
+  "settingsPrivate": [{
+    "channel": "trunk",
+    "extension_types": ["extension", "platform_app"],
+    "location": "component"
+  },
+  {
+    "channel": "stable",
+    "extension_types": ["extension"],
+    "whitelist": [
+      "63ED55E43214C211F82122ED56407FF1A807F2A3",  // Media Router Dev
+      "226CF815E39A363090A1E547D53063472B8279FA",  // Media Router Release
+      "A321D47A2B4CA86898167A55CA8B2E02385EA7CD"   // Brave Shields
+    ]
+  }]
+}

common/pref_names.cc

@@ -42,6 +42,8 @@ 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 kShieldsAdvancedViewEnabled[] =
+    "brave.shields.advanced_view_enabled";
 const char kAdControlType[] = "brave.ad_default";
 const char kGoogleLoginControlType[] = "brave.google_login_default";
 const char kFBEmbedControlType[] = "brave.fb_embed_default";

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 kShieldsAdvancedViewEnabled[];
 extern const char kAdControlType[];
 extern const char kGoogleLoginControlType[];
 extern const char kFBEmbedControlType[];

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
-  }
-}

components/brave_extension/extension/brave_extension/background/api/shieldsAPI.ts

@@ -5,6 +5,7 @@
 import { ShieldDetails } from '../../types/actions/shieldsPanelActions'
 import { BlockOptions } from '../../types/other/blockTypes'
 import actions from '../actions/shieldsPanelActions'
+import * as SettingsPrivate from '../../../../../common/settingsPrivate'
 
 /**
  * Obtains the shields panel data for the specified tab data
@@ -160,3 +161,33 @@ export const setAllowScriptOriginsOnce = (origins: Array<string>, tabId: number)
       resolve()
     })
   })
+
+export type GetViewPreferencesData = {
+  showAdvancedView: boolean
+}
+
+const settingsKeys = {
+  showAdvancedView: { key: 'brave.shields.advanced_view_enabled', type: chrome.settingsPrivate.PrefType.BOOLEAN }
+}
+export async function getViewPreferences (): Promise<GetViewPreferencesData> {
+  const showAdvancedViewPref = await SettingsPrivate.getPreference(settingsKeys.showAdvancedView.key)
+  if (showAdvancedViewPref.type !== settingsKeys.showAdvancedView.type) {
+    throw new Error(`Unexpected settings type received for "${settingsKeys.showAdvancedView.key}". Expected: ${settingsKeys.showAdvancedView.type}, Received: ${showAdvancedViewPref.type}`)
+  }
+  return {
+    showAdvancedView: showAdvancedViewPref.value
+  }
+}
+
+export type SetViewPreferencesData = {
+  showAdvancedView?: boolean
+}
+export async function setViewPreferences (preferences: SetViewPreferencesData): Promise<void> {
+  const setOps = []
+  if (preferences.showAdvancedView !== undefined) {
+    setOps.push(
+      SettingsPrivate.setPreference(settingsKeys.showAdvancedView.key, preferences.showAdvancedView)
+    )
+  }
+  await Promise.all(setOps)
+}

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 => {

components/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)) {

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

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, {}> {

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>
     )