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
index 7074d0a3e336..10a9dce9ead5 100644
--- 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
@@ -9,8 +9,20 @@
-
+
+
+
$i18n{braveShieldsDefaultsSectionTitle}
+
$i18n{braveShieldsDefaultsSectionDescription}
+
+
+
$i18n{adControlLabel}
diff --git a/browser/resources/settings/settings_resources.grd b/browser/resources/settings/settings_resources.grd
index 91da5fc83c4f..be3026ae4ab4 100644
--- a/browser/resources/settings/settings_resources.grd
+++ b/browser/resources/settings/settings_resources.grd
@@ -12,6 +12,7 @@
diff --git a/browser/ui/webui/brave_md_settings_ui.cc b/browser/ui/webui/brave_md_settings_ui.cc
index 0d1274326067..b8c5d40052b1 100644
--- a/browser/ui/webui/brave_md_settings_ui.cc
+++ b/browser/ui/webui/brave_md_settings_ui.cc
@@ -13,6 +13,7 @@
#include "brave/browser/ui/webui/settings/brave_default_extensions_handler.h"
#include "brave/browser/ui/webui/settings/brave_privacy_handler.h"
#include "brave/browser/ui/webui/settings/default_brave_shields_handler.h"
+#include "brave/browser/version_info.h"
#include "brave/common/brave_switches.h"
#include "chrome/browser/profiles/profile.h"
#include "chrome/browser/ui/webui/settings/metrics_reporting_handler.h"
@@ -53,4 +54,6 @@ void BraveMdSettingsUI::AddResources(content::WebUIDataSource* html_source,
*base::CommandLine::ForCurrentProcess();
html_source->AddBoolean("isSyncDisabled",
command_line.HasSwitch(switches::kDisableBraveSync));
+ html_source->AddString("braveProductVersion",
+ version_info::GetBraveVersionWithoutChromiumMajorVersion());
}
diff --git a/chromium_src/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc b/chromium_src/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
index 55f3a275ef2c..eab36d91bae8 100644
--- a/chromium_src/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
+++ b/chromium_src/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
@@ -12,6 +12,7 @@ void BraveAddLocalizedStrings(content::WebUIDataSource*, Profile*);
#include "../../../../../../chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc" // NOLINT
#include "brave/browser/ui/webui/brave_md_settings_ui.h"
+#include "brave/grit/brave_generated_resources.h"
namespace settings {
@@ -41,6 +42,10 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
IDS_SETTINGS_SITE_SETTINGS_AUTOPLAY_ASK},
{"siteSettingsAutoplayAskRecommended",
IDS_SETTINGS_SITE_SETTINGS_AUTOPLAY_ASK_RECOMMENDED},
+ {"braveGetStartedTitle",
+ IDS_SETTINGS_BRAVE_GET_STARTED_TITLE},
+ {"braveAdditionalSettingsTitle",
+ IDS_SETTINGS_BRAVE_ADDITIONAL_SETTINGS},
{"appearanceSettingsBraveTheme",
IDS_SETTINGS_APPEARANCE_SETTINGS_BRAVE_THEMES},
{"appearanceSettingsLocationBarIsWide",
@@ -49,8 +54,12 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
IDS_SETTINGS_HIDE_BRAVE_REWARDS_BUTTON_LABEL},
{"appearanceSettingsHideBraveRewardsButtonDesc",
IDS_SETTINGS_HIDE_BRAVE_REWARDS_BUTTON_DESC},
- {"braveShieldsDefaults",
+ {"braveShieldsTitle",
+ IDS_SETTINGS_BRAVE_SHIELDS_TITLE},
+ {"braveShieldsDefaultsSectionTitle",
IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_TITLE},
+ {"braveShieldsDefaultsSectionDescription",
+ IDS_SETTINGS_BRAVE_SHIELDS_DEFAULTS_DESCRIPTION},
{"socialBlocking",
IDS_SETTINGS_SOCIAL_BLOCKING_DEFAULTS_TITLE},
{"adControlLabel",
diff --git a/patches/chrome-browser-resources-bookmarks-bookmarks.html.patch b/patches/chrome-browser-resources-bookmarks-bookmarks.html.patch
new file mode 100644
index 000000000000..39ff82df9065
--- /dev/null
+++ b/patches/chrome-browser-resources-bookmarks-bookmarks.html.patch
@@ -0,0 +1,12 @@
+diff --git a/chrome/browser/resources/bookmarks/bookmarks.html b/chrome/browser/resources/bookmarks/bookmarks.html
+index b91e6202e695f7347963e1c0dbee0cea46622c62..47978779a4b4cf27b7715276fc068a6163d926df 100644
+--- a/chrome/browser/resources/bookmarks/bookmarks.html
++++ b/chrome/browser/resources/bookmarks/bookmarks.html
+@@ -28,6 +28,7 @@
+ height: var(--md-toolbar-height);
+ }
+
++
- html.loading::before {
- background: var(--md-toolbar-color);
- height: var(--md-toolbar-height);
-@@ -43,7 +43,11 @@
- html[dark].loading.in-dev-mode body::before {
- border-bottom: var(--md-toolbar-border);
- }
--
-+
-+ html.loading {
-+ border-top: var(--toolbar-height) solid;
-+ border-image: var(--md-toolbar-color);
-+ }
- html,
- body {
- height: 100%;
+
++
-
-
-
@@ -25,6 +37,11 @@
\ No newline at end of file
diff --git a/ui/webui/resources/css/md_colors.css b/ui/webui/resources/css/md_colors.css
index 063c4be80e77..d343ce458ae3 100644
--- a/ui/webui/resources/css/md_colors.css
+++ b/ui/webui/resources/css/md_colors.css
@@ -1,3 +1,13 @@
-:root {
- --md-toolbar-color: linear-gradient(to left, #b10e95, #e72f4e) !important;
-}
\ No newline at end of file
+html,
+html[dark] {
+ --brave-toolbar-gradient: linear-gradient(-90deg, #A3278F 0%, #E52F50 100%); /* linear gradient: red500 -> magenta600 */
+ --md-background-color: rgb(233, 236, 239); /* neutral200 */
+ --md-loading-message-color: #5E6175; /* grey700 */
+ --md-toolbar-color: rgb(200, 44, 109); /* not design system color. middle value of toolbar's linear gradient. */
+ /* --md-toolbar-color: linear-gradient(to left, #b10e95, #e72f4e) !important; */
+}
+
+html[dark] {
+ --md-background-color: rgb(30, 32, 41); /* grey900 */
+ --md-loading-message-color: #C2C4CF; /* grey400 */
+}
diff --git a/ui/webui/resources/css/paper_button_style.css b/ui/webui/resources/css/paper_button_style.css
index dc507a532f59..594ed2067fe9 100644
--- a/ui/webui/resources/css/paper_button_style.css
+++ b/ui/webui/resources/css/paper_button_style.css
@@ -16,6 +16,7 @@
paper-button {
--brave-hover-color: #e7e7ec;
+ --brave-active-color: white;
--paper-button-ink-color: #242536 !important;
/* normal button */
@@ -23,12 +24,12 @@ paper-button {
--border-color: var(--text-color) !important;
--hover-bg-color: var(--brave-hover-color) !important;
--hover-border-color: var(--text-color) !important;
+ --active-bg: var(--brave-active-color) !important;
/* action button */
--flat-text-color-action: white !important;
--flat-bg-action: var(--text-color) !important;
--hover-bg-action: var(--flat-bg-action) !important;
-
font-family: Poppins;
/* NOTE(petemill): some pages override default line-height for text,
but that shouldn't flow to buttons. It affects text centering. */
@@ -40,6 +41,36 @@ paper-button {
--flat-focus-shadow-color: rgba(255, 69, 48, .4) !important;
}
+[dark] paper-button,
+:host-context([dark]) paper-button {
+ /* --text-color: #AEB1C2 !important; */
+ --text-color: var(--cr-primary-text-color) !important;
+ --brave-hover-color: rgb(63, 63, 63) !important;
+ --flat-text-color-action: #242536 !important;
+}
+
+paper-button:not(.action-button):hover {
+ /* background handled in chromium but not foreground */
+ color: var(--hover-fg-color, var(--text-color));
+}
+
+paper-button:not(.action-button):active {
+ /* background handled in chromium but not foreground */
+ color: var(--active-fg-color, var(--text-color));
+}
+
+paper-button.warn {
+ --text-color: #E2052A !important;
+ /* normal (looks filled in on hover) */
+ --brave-active-color: #99022F;
+ --hover-fg-color: white;
+ --brave-hover-color: #BE032D;
+ --active-fg-color: white;
+ /* action */
+ --hover-bg-action: #BE032D !important;
+ --active-shadow-action-rgb: 153,2,47 !important;
+}
+
[dark] paper-button,
:host-context([dark]) paper-button {
--text-color: var(--cr-primary-text-color) !important;
diff --git a/ui/webui/resources/page_specific.grdp b/ui/webui/resources/page_specific.grdp
index 9dd7059f5a81..6a532308f42b 100644
--- a/ui/webui/resources/page_specific.grdp
+++ b/ui/webui/resources/page_specific.grdp
@@ -1,5 +1,8 @@
+
diff --git a/ui/webui/resources/page_specific/bookmarks/bookmarks_loading_shim.css b/ui/webui/resources/page_specific/bookmarks/bookmarks_loading_shim.css
new file mode 100644
index 000000000000..f6218b2f82fa
--- /dev/null
+++ b/ui/webui/resources/page_specific/bookmarks/bookmarks_loading_shim.css
@@ -0,0 +1,3 @@
+html.loading::before {
+ background-image: var(--brave-toolbar-gradient);
+}
\ No newline at end of file
diff --git a/ui/webui/resources/page_specific/downloads/downloads_loading_shim.css b/ui/webui/resources/page_specific/downloads/downloads_loading_shim.css
index 327855a55795..f6218b2f82fa 100644
--- a/ui/webui/resources/page_specific/downloads/downloads_loading_shim.css
+++ b/ui/webui/resources/page_specific/downloads/downloads_loading_shim.css
@@ -1,6 +1,3 @@
-@import url(chrome://brave-resources/css/md_colors.css);
-
-html.loading {
- border-image: var(--md-toolbar-color);
- border-image-slice: 2;
+html.loading::before {
+ background-image: var(--brave-toolbar-gradient);
}
\ No newline at end of file
diff --git a/ui/webui/resources/page_specific/extensions/extensions_loading_shim.css b/ui/webui/resources/page_specific/extensions/extensions_loading_shim.css
new file mode 100644
index 000000000000..6dc49aa2c4bd
--- /dev/null
+++ b/ui/webui/resources/page_specific/extensions/extensions_loading_shim.css
@@ -0,0 +1,3 @@
+html.loading::before {
+ background-image: var(--brave-toolbar-gradient);
+}
diff --git a/ui/webui/resources/page_specific/history/history_loading_shim.css b/ui/webui/resources/page_specific/history/history_loading_shim.css
new file mode 100644
index 000000000000..55867120e254
--- /dev/null
+++ b/ui/webui/resources/page_specific/history/history_loading_shim.css
@@ -0,0 +1,5 @@
+#loading-toolbar,
+html[dark] #loading-toolbar {
+ background: var(--brave-toolbar-gradient);
+ color: transparent;
+}
diff --git a/ui/webui/resources/page_specific/settings/settings_loading_shim.css b/ui/webui/resources/page_specific/settings/settings_loading_shim.css
index 327855a55795..f6218b2f82fa 100644
--- a/ui/webui/resources/page_specific/settings/settings_loading_shim.css
+++ b/ui/webui/resources/page_specific/settings/settings_loading_shim.css
@@ -1,6 +1,3 @@
-@import url(chrome://brave-resources/css/md_colors.css);
-
-html.loading {
- border-image: var(--md-toolbar-color);
- border-image-slice: 2;
+html.loading::before {
+ background-image: var(--brave-toolbar-gradient);
}
\ No newline at end of file
diff --git a/ui/webui/resources/polymer_overriding.html b/ui/webui/resources/polymer_overriding.html
index 7b5bc0e51009..ec05cafc69ac 100644
--- a/ui/webui/resources/polymer_overriding.html
+++ b/ui/webui/resources/polymer_overriding.html
@@ -1,2 +1,15 @@
+
+
+
+
diff --git a/ui/webui/resources/polymer_overriding.js b/ui/webui/resources/polymer_overriding.js
index c51c8314324c..e42dc3f594d8 100644
--- a/ui/webui/resources/polymer_overriding.js
+++ b/ui/webui/resources/polymer_overriding.js
@@ -1,15 +1,22 @@
+// 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/.
-// This is in global scope,
+// This module is in global scope,
// so create a temporary scope.
(function () {
- window.BravePatching = window.BravePatching || {}
+ const debug = false
+ // Re-write `Polymer(componentInfo)` function
const oldFn = window.Polymer._polymerFn
- function newPolymerFn(component){
+ function newPolymerFn(component) {
if (component && component.is) {
- AddBraveBehaviors(component)
+ if (debug) {
+ console.debug(`Polymer component registering: ${component.is}`, component)
+ }
+ addBraveBehaviors(component)
+ addBraveTemplateModifications(component)
+ addBraveStyleOverrides(component)
}
return oldFn(component)
}
@@ -17,17 +24,102 @@
const allBehaviorsMap = {}
- function AddBraveBehaviors(component) {
+ function addBraveBehaviors(component) {
if (allBehaviorsMap[component.is]) {
component.behaviors = component.behaviors || []
component.behaviors.push(...allBehaviorsMap[component.is])
+ delete allBehaviorsMap[component.is]
}
}
- function BraveRegisterComponentBehaviors(behaviorsMap) {
+ const allBraveTemplateModificationsMap = {}
+
+ function addBraveTemplateModifications(component) {
+ if (allBraveTemplateModificationsMap[component.is]) {
+ const moduleName = component.is
+ const domModule = Polymer.DomModule.import(moduleName)
+ if (domModule) {
+ const template = domModule.querySelector('template')
+ if (template) {
+ const templateContent = template.content
+ const t0 = performance.now()
+ allBraveTemplateModificationsMap[component.is](templateContent)
+ const t1 = performance.now()
+ console.debug(`Modifying template '${component.is}' took ${t1 - t0}ms`)
+ }
+ }
+ delete allBraveTemplateModificationsMap[component.is]
+ }
+ }
+
+ function addBraveStyleOverrides(component) {
+ // does have template style element?
+ const moduleName = component.is
+ const domModule = Polymer.DomModule.import(moduleName)
+ if (!domModule) {
+ return
+ }
+ // has override?
+ const overrideModuleName = `brave-override-style-${moduleName}`
+ const hasOverride = !!Polymer.DomModule.import(overrideModuleName)
+ if (!hasOverride) {
+ return
+ }
+ const template = domModule.querySelector('template')
+ if (!template) {
+ return
+ }
+ const styleElement = template.content.querySelector('style')
+ if (!styleElement) {
+ return
+ }
+ styleElement.setAttribute(
+ 'include',
+ `${styleElement.getAttribute('include')} ${overrideModuleName}`
+ )
+ }
+
+ function RegisterPolymerComponentBehaviors(behaviorsMap) {
Object.assign(allBehaviorsMap, behaviorsMap)
}
+ function RegisterPolymerTemplateModifications(modificationsMap) {
+ Object.assign(allBraveTemplateModificationsMap, modificationsMap)
+ }
+
+ function OverrideIronIcons(iconSetName, overridingIconSetName, iconOverrides) {
+ // Here, we change the underlying DOM.
+ // We cannot simply change `IconSet._icons` since
+ // there are occasions where this will get re-parsed from DOM elements.
+ const meta = Polymer.Base.create('iron-meta', {type: 'iconset'})
+ const srcIconSet = meta.byKey(iconSetName)
+ const overrideIconSet = meta.byKey(overridingIconSetName)
+ for (const chromiumIconName in iconOverrides) {
+ const chromiumIcon = srcIconSet.querySelector(`#${chromiumIconName}`)
+ if (!chromiumIcon) {
+ console.error(`[brave overrides] Could not find chromium icon '${chromiumIconName}' in iconset '${iconSetName}' for replacement!`)
+ continue
+ }
+ const braveIconName = iconOverrides[chromiumIconName]
+ const braveIcon = overrideIconSet.querySelector(`#${braveIconName}`)
+ if (!braveIcon) {
+ console.error(`[brave overrides] Could not find brave icon '${braveIconName}' in iconset '${overridingIconSetName}' for replacement!`)
+ continue
+ }
+ // replace
+ chromiumIcon.innerHTML = braveIcon.innerHTML
+ }
+ // Ensure icons get re-parsed if already parseds
+ // `getIconNames` ensures this._icons in iron-iconset-svg is re-parsed
+ // from DOM. If that changes, we'll need to find another way,
+ // perhaps `srcIconSet._icons = srcIconSet._createIconMap()`
+ srcIconSet.getIconNames()
+ }
+
// Accessible to other modules
- window.BravePatching.registerPolymerBehaviors = BraveRegisterComponentBehaviors
+ window.BravePatching = Object.assign({}, window.BravePatching, {
+ RegisterPolymerComponentBehaviors,
+ RegisterPolymerTemplateModifications,
+ OverrideIronIcons
+ })
})()