From f0bfcf5a89a97654289162ffcdb451bf3fe033b1 Mon Sep 17 00:00:00 2001 From: Brian Clifton Date: Tue, 11 Sep 2018 11:29:35 -0700 Subject: [PATCH 1/2] First steps towards solving https://github.com/brave/brave-browser/issues/958 Making good progress :) - `Settings` header added over primary items (and restyled `Advanced` to match) - Padding and margin appear to match spec - Specified different font; page needs to be wired to properly include it - Sidebar has white background + borders with radius - Colors: - active items use `brandBrave` orange and bold the text - header incidently is now orange also - inactive items use `subtleInteracting` - `About Brave` text uses `subtle` - Product version (ex: 0.55.2) shown under `About Brave` along with a default icon - `Extensions` moved up under `Settings` - `Appearance` moved to last item before `Advanced` --- .../settings/brave_settings_menu/icons.html | 36 ++++ .../resources/settings/settings_resources.grd | 1 + package-lock.json | 2 +- ...ngs-settings_main-settings_main.html.patch | 15 ++ ...ngs-settings_menu-settings_menu.html.patch | 164 +++++++++++++++++- ...ettings-settings_ui-settings_ui.html.patch | 49 ++++++ ...-settings-settings_ui-settings_ui.js.patch | 48 +++++ ...r-ui-webui-settings-about_handler.cc.patch | 21 +++ ...mmon-resources-interstitial_core.css.patch | 15 ++ ...nts-chromium-paper-styles-color.html.patch | 19 ++ 10 files changed, 366 insertions(+), 4 deletions(-) create mode 100644 browser/resources/settings/brave_settings_menu/icons.html create mode 100644 patches/chrome-browser-resources-settings-settings_main-settings_main.html.patch create mode 100644 patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch create mode 100644 patches/chrome-browser-resources-settings-settings_ui-settings_ui.js.patch create mode 100644 patches/chrome-browser-ui-webui-settings-about_handler.cc.patch create mode 100644 patches/components-security_interstitials-core-common-resources-interstitial_core.css.patch create mode 100644 patches/third_party-polymer-v1_0-components-chromium-paper-styles-color.html.patch diff --git a/browser/resources/settings/brave_settings_menu/icons.html b/browser/resources/settings/brave_settings_menu/icons.html new file mode 100644 index 000000000000..2c4da4150bb2 --- /dev/null +++ b/browser/resources/settings/brave_settings_menu/icons.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/resources/settings/settings_resources.grd b/browser/resources/settings/settings_resources.grd index f672dbe30f85..2d5ea93e7357 100644 --- a/browser/resources/settings/settings_resources.grd +++ b/browser/resources/settings/settings_resources.grd @@ -32,6 +32,7 @@ + diff --git a/package-lock.json b/package-lock.json index 95e57630a118..917da8d5251e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6279,7 +6279,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "requires": { "minimist": "0.0.8" diff --git a/patches/chrome-browser-resources-settings-settings_main-settings_main.html.patch b/patches/chrome-browser-resources-settings-settings_main-settings_main.html.patch new file mode 100644 index 000000000000..aa864727b957 --- /dev/null +++ b/patches/chrome-browser-resources-settings-settings_main-settings_main.html.patch @@ -0,0 +1,15 @@ +diff --git a/chrome/browser/resources/settings/settings_main/settings_main.html b/chrome/browser/resources/settings/settings_main/settings_main.html +index 87bd32f2d53f3a7d5c0f1576e268a574d54aa1e9..6313f1eaf84b3767f423286587d489e80df63477 100644 +--- a/chrome/browser/resources/settings/settings_main/settings_main.html ++++ b/chrome/browser/resources/settings/settings_main/settings_main.html +@@ -18,6 +18,10 @@ + + + diff --git a/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch b/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch new file mode 100644 index 000000000000..0bef29a4e058 --- /dev/null +++ b/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch @@ -0,0 +1,49 @@ +diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html +index 88d91ba73e146bdefdb2c51b84f49ea4be934aad..2cac764ba9a2687c365ecaa52fe3deb16f5ff397 100644 +--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html ++++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html +@@ -48,6 +48,10 @@ + flex: 1; + overflow: overlay; + position: relative; ++ text-align: center; ++ } ++ #container > * { ++ text-align: left; + } + + +@@ -61,23 +65,17 @@ + role="banner" + show-menu> + +- +-
+- +-
+- +
++ ++ + { +- this.$.drawerTemplate.if = true; +- }); ++ // listenOnce(this.$.drawer, 'open-changed', () => { ++ // this.$.drawerTemplate.if = true; ++ // }); + +- window.addEventListener('popstate', e => { +- this.$.drawer.closeDrawer(); +- }); ++ // window.addEventListener('popstate', e => { ++ // this.$.drawer.closeDrawer(); ++ // }); + + CrPolicyStrings = { + controlledSettingExtension: +@@ -273,16 +273,17 @@ Polymer({ + * @private + */ + onIronActivate_: function(event) { +- if (event.detail.item.id != 'advancedSubmenu') +- this.$.drawer.closeDrawer(); ++ // if (event.detail.item.id != 'advancedSubmenu') ++ // this.$.drawer.closeDrawer(); + }, + + /** @private */ +- onMenuButtonTap_: function() { +- this.$.drawer.toggle(); +- }, ++ // onMenuButtonTap_: function() { ++ // console.log('BSC]] LOL TOGGLING') ++ // this.$.drawer.toggle(); ++ // }, + +- /** @private */ ++ // /** @private */ + onMenuClosed_: function() { + // Add tab index so that the container can be focused. + this.$.container.setAttribute('tabindex', '-1'); diff --git a/patches/chrome-browser-ui-webui-settings-about_handler.cc.patch b/patches/chrome-browser-ui-webui-settings-about_handler.cc.patch new file mode 100644 index 000000000000..ec30ed84ab11 --- /dev/null +++ b/patches/chrome-browser-ui-webui-settings-about_handler.cc.patch @@ -0,0 +1,21 @@ +diff --git a/chrome/browser/ui/webui/settings/about_handler.cc b/chrome/browser/ui/webui/settings/about_handler.cc +index 06c2c95e34e6140e9e82667fcb093b8f2e0d3809..013428d9d24aa91d2bfb9c08c3af28d90659b6b6 100644 +--- a/chrome/browser/ui/webui/settings/about_handler.cc ++++ b/chrome/browser/ui/webui/settings/about_handler.cc +@@ -288,6 +288,16 @@ AboutHandler* AboutHandler::Create(content::WebUIDataSource* html_source, + ? IDS_VERSION_UI_64BIT + : IDS_VERSION_UI_32BIT))); + ++ std::string brave_product_version = version_info::GetVersionNumber(); ++ size_t chromium_index = brave_product_version.find("Chromium:"); ++ if (chromium_index != std::string::npos) { ++ brave_product_version = std::string("v").append( ++ brave_product_version.substr(0, chromium_index) ++ ); ++ } ++ html_source->AddString("braveProductVersion", ++ base::UTF8ToUTF16(brave_product_version)); ++ + html_source->AddString( + "aboutProductCopyright", + base::i18n::MessageFormatter::FormatWithNumberedArgs( diff --git a/patches/components-security_interstitials-core-common-resources-interstitial_core.css.patch b/patches/components-security_interstitials-core-common-resources-interstitial_core.css.patch new file mode 100644 index 000000000000..b506e21cd6fb --- /dev/null +++ b/patches/components-security_interstitials-core-common-resources-interstitial_core.css.patch @@ -0,0 +1,15 @@ +diff --git a/components/security_interstitials/core/common/resources/interstitial_core.css b/components/security_interstitials/core/common/resources/interstitial_core.css +index ef124ab28e29040114cb6a3c9fdba73555269d69..cfe4003ebbb87ccb10f05cb613015671794b7478 100644 +--- a/components/security_interstitials/core/common/resources/interstitial_core.css ++++ b/components/security_interstitials/core/common/resources/interstitial_core.css +@@ -7,8 +7,8 @@ a { + } + + body { +- --google-blue-600: #1A73E8; +- --google-blue-700: #1967D2; ++ --google-blue-600: #C72E03; ++ --google-blue-700: #992802; + background-color: #fff; + color: rgb(100, 100, 100); + word-wrap: break-word; diff --git a/patches/third_party-polymer-v1_0-components-chromium-paper-styles-color.html.patch b/patches/third_party-polymer-v1_0-components-chromium-paper-styles-color.html.patch new file mode 100644 index 000000000000..d649525c5c0d --- /dev/null +++ b/patches/third_party-polymer-v1_0-components-chromium-paper-styles-color.html.patch @@ -0,0 +1,19 @@ +diff --git a/third_party/polymer/v1_0/components-chromium/paper-styles/color.html b/third_party/polymer/v1_0/components-chromium/paper-styles/color.html +index 67eae3e27e81a5df894d497e40e94e6db1ff61bd..077a0ae2b733cb225a2c38726dd3d88e102071fe 100644 +--- a/third_party/polymer/v1_0/components-chromium/paper-styles/color.html ++++ b/third_party/polymer/v1_0/components-chromium/paper-styles/color.html +@@ -21,10 +21,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN + --google-red-500: #db4437; + --google-red-700: #c53929; + +- --google-blue-100: #c6dafc; +- --google-blue-300: #7baaf7; +- --google-blue-500: #4285f4; +- --google-blue-700: #3367d6; ++ --google-blue-100: #FCD4CD; ++ --google-blue-300: #F88469; ++ --google-blue-500: #F43405; ++ --google-blue-700: #FB542B; + + --google-green-100: #b7e1cd; + --google-green-300: #57bb8a; From a4f1022b8833dac9552a39a969c3509f1cb9e752 Mon Sep 17 00:00:00 2001 From: Ross Moody Date: Mon, 29 Oct 2018 20:30:00 -0700 Subject: [PATCH 2/2] icon updates and light css - fixed render issues with current icons - did some light css but looped in pete and found it might be diminishing return so stopped - made the top banner a gradient - rebased against master 2019 Jan 10 --- .../settings/brave_settings_menu/icons.html | 26 ++-- ...ces-settings-settings_icons_css.html.patch | 27 ++++ ...ngs-settings_menu-settings_menu.html.patch | 140 ++++++++++++------ ...ettings-settings_ui-settings_ui.html.patch | 21 ++- ...-settings-settings_ui-settings_ui.js.patch | 35 ++--- ...r-ui-webui-settings-about_handler.cc.patch | 12 +- ...mmon-resources-interstitial_core.css.patch | 12 +- ..._elements-cr_toolbar-cr_toolbar.html.patch | 22 +++ 8 files changed, 198 insertions(+), 97 deletions(-) create mode 100644 patches/chrome-browser-resources-settings-settings_icons_css.html.patch create mode 100644 patches/ui-webui-resources-cr_elements-cr_toolbar-cr_toolbar.html.patch diff --git a/browser/resources/settings/brave_settings_menu/icons.html b/browser/resources/settings/brave_settings_menu/icons.html index 2c4da4150bb2..f9742e27a308 100644 --- a/browser/resources/settings/brave_settings_menu/icons.html +++ b/browser/resources/settings/brave_settings_menu/icons.html @@ -7,30 +7,30 @@ If they would be useful on other pages, let's consider moving them to a better place and having a common "icons" html --> - + - - - + + + - + - - - - - - + + + < + + + - - + + diff --git a/patches/chrome-browser-resources-settings-settings_icons_css.html.patch b/patches/chrome-browser-resources-settings-settings_icons_css.html.patch new file mode 100644 index 000000000000..2d2ab4b76eaf --- /dev/null +++ b/patches/chrome-browser-resources-settings-settings_icons_css.html.patch @@ -0,0 +1,27 @@ +diff --git a/chrome/browser/resources/settings/settings_icons_css.html b/chrome/browser/resources/settings/settings_icons_css.html +index 7a4e72d47e8e79a89aacd2f84fa47575d122e0a8..5a4c8832a7b91499f19b4d08468639f1dc453383 100644 +--- a/chrome/browser/resources/settings/settings_icons_css.html ++++ b/chrome/browser/resources/settings/settings_icons_css.html +@@ -4,14 +4,14 @@ + + + diff --git a/patches/chrome-browser-resources-settings-settings_menu-settings_menu.html.patch b/patches/chrome-browser-resources-settings-settings_menu-settings_menu.html.patch index 8f9210a2684d..c712e5d3d74d 100644 --- a/patches/chrome-browser-resources-settings-settings_menu-settings_menu.html.patch +++ b/patches/chrome-browser-resources-settings-settings_menu-settings_menu.html.patch @@ -1,8 +1,8 @@ diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chrome/browser/resources/settings/settings_menu/settings_menu.html -index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a0c8136be 100644 +index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..d116ae93881505cfc720fdeb6b334efb91fb17ec 100644 --- a/chrome/browser/resources/settings/settings_menu/settings_menu.html +++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html -@@ -10,23 +10,32 @@ +@@ -10,44 +10,69 @@ @@ -18,11 +18,11 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a - margin-top: 8px; + display: inline-block; + vertical-align: top; -+ margin: 12px; -+ padding: 12px 60px 20px 0; ++ margin: 30px 12px; ++ padding: 30px; + background-color: #fff; + border: 1px solid #e8e8ef; -+ border-radius: 7px; ++ border-radius: 12px; + font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } @@ -37,12 +37,14 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a + color: #A0A1B2; /* brave: subtleInteracting */ display: flex; - font-weight: 500; +- margin-inline-end: 2px; /* Margin so selected outline is visible. */ +- margin-inline-start: 1px; +- min-height: 20px; +- padding-bottom: 10px; +- padding-inline-start: 23px; /* 24px - 1px from margin for outline. */ +- padding-top: 10px; + font-weight: normal; - margin-inline-end: 2px; /* Margin so selected outline is visible. */ - margin-inline-start: 1px; - min-height: 20px; -@@ -35,10 +44,32 @@ - padding-top: 10px; ++ margin: 0 20px 20px 0; } - a[href].iron-selected { @@ -51,8 +53,8 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a } + a[href].iron-selected { -+ color: #000; -+ font-weight: bold; ++ color: #424242; ++ font-weight: 500; + } + + #settingsHeader, @@ -62,20 +64,21 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a + }; + align-items: center; + font-weight: normal; -+ margin-inline-end: 2px; /* Margin so selected outline is visible. */ -+ margin-inline-start: 1px; -+ min-height: 20px; -+ padding-bottom: 10px; -+ padding-inline-start: 23px; /* 24px - 1px from margin for outline. */ -+ padding-top: 10px; + font-size: larger; -+ color: #000; ++ color: #424242; ++ margin-bottom: 20px; ++ font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + } + iron-icon { --iron-icon-fill-color: var(--settings-nav-grey); - margin-inline-end: 24px; -@@ -48,6 +79,7 @@ +- margin-inline-end: 24px; ++ margin-inline-end: 16px; + pointer-events: none; + vertical-align: top; ++ width: 24px; ++ height: 24px; + } .iron-selected > iron-icon { fill: var(--google-blue-700); @@ -83,15 +86,31 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a } #advancedButton { -@@ -77,7 +109,6 @@ - #advancedButton > iron-icon, - #extensionsLink > iron-icon { +@@ -55,9 +80,9 @@ + border: none; + border-radius: initial; + height: unset; +- margin-top: 8px; +- padding-inline-end: 0; ++ padding: 0; + text-transform: none; ++ margin-top: 30px; + } + + #advancedButton:focus { +@@ -74,10 +99,8 @@ + flex: 1; + } + +- #advancedButton > iron-icon, +- #extensionsLink > iron-icon { ++ #advancedButton > iron-icon { @apply --cr-icon-height-width; - margin-inline-end: 14px; /* 16px - 2px from margin for outline. */ } #menuSeparator { -@@ -86,10 +117,19 @@ +@@ -86,10 +109,21 @@ margin-bottom: 8px; margin-top: 8px; } @@ -100,6 +119,8 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a + display: flex; + flex-direction: column; + color: #C5C5D3; /* brave: subtle */ ++ font-size: 12px; ++ line-height: 16px; + } -@@ -114,11 +150,12 @@ +@@ -106,7 +140,7 @@ + + + + $i18n{autofillPageTitle} @@ -119,26 +149,29 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a - hidden="[[!pageVisibility.appearance]]"> - - $i18n{appearancePageTitle} -- + + + $i18n{extensionsPageTitle} -+ + - -@@ -148,11 +185,20 @@ - $i18n{defaultBrowser} +@@ -125,8 +160,12 @@ + $i18n{devicePageTitle} -+ ++ ++ Shields + - +- ++ + $i18n{searchPageTitle} + + +@@ -153,6 +192,11 @@ $i18n{onStartup} @@ -150,20 +183,33 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a - - - -@@ -202,13 +250,13 @@ @@ -175,7 +221,7 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a - - $i18n{aboutPageTitle} + -+ ++ +
+
$i18n{aboutPageTitle}
+
$i18n{braveProductVersion}
diff --git a/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch b/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch index 0bef29a4e058..a9ec1b7a0109 100644 --- a/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch +++ b/patches/chrome-browser-resources-settings-settings_ui-settings_ui.html.patch @@ -1,24 +1,34 @@ diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html -index 88d91ba73e146bdefdb2c51b84f49ea4be934aad..2cac764ba9a2687c365ecaa52fe3deb16f5ff397 100644 +index 04069b85b3e1df39ea3ac0075901164d9f622e88..9aa9a5e30d5a964c7c0dcfc4910faf7aea47fab3 100644 --- a/chrome/browser/resources/settings/settings_ui/settings_ui.html +++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html -@@ -48,6 +48,10 @@ +@@ -39,7 +39,7 @@ + cr-toolbar { + @apply --layout-center; + --iron-icon-fill-color: white; +- background-color: var(--google-blue-700); ++ background-image: linear-gradient(-90deg, #F73A1C, #BF14A2); + color: white; + min-height: 56px; + z-index: 2; +@@ -49,6 +49,11 @@ flex: 1; overflow: overlay; position: relative; + text-align: center; + } ++ + #container > * { + text-align: left; } -@@ -61,23 +65,17 @@ +@@ -62,22 +67,17 @@ role="banner" show-menu> -- +- -
-