Skip to content

Commit

Permalink
First steps towards solving brave/brave-browser#958
Browse files Browse the repository at this point in the history
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`
  • Loading branch information
bsclifton committed Jan 11, 2019
1 parent 2c9f78a commit 637ec1a
Show file tree
Hide file tree
Showing 10 changed files with 366 additions and 4 deletions.
36 changes: 36 additions & 0 deletions browser/resources/settings/brave_settings_menu/icons.html

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions browser/resources/settings/settings_resources.grd
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
<structure name="IDR_SETTINGS_BRAVE_DEFAULT_EXTENSIONS_BROWSER_PROXY_JS" file="brave_default_extensions_page/brave_default_extensions_browser_proxy.js" type="chrome_html" preprocess="true" />
<structure name="IDR_SETTINGS_BRAVE_DEFAULT_EXTENSIONS_PAGE_JS" file="brave_default_extensions_page/brave_default_extensions_page.js" type="chrome_html" preprocess="true" />
<structure name="IDR_SETTINGS_BRAVE_DEFAULT_EXTENSIONS_PAGE_HTML" file="brave_default_extensions_page/brave_default_extensions_page.html" type="chrome_html" preprocess="true" allowexternalscript="true" />
<structure name="IDR_SETTINGS_BRAVE_SETTINGS_MENU_ICONS_HTML" file="brave_settings_menu/icons.html" type="chrome_html" />
</structures>
<includes>
<include name="IDR_SETTINGS_BRAVE_STAMP" file="brave_unpack.stamp" type="BINDATA" />
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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 @@
<dom-module id="settings-main">
<template>
<style include="cr-hidden-style">
+ :host {
+ display: inline-block;
+ }
+
#overscroll {
margin-top: 64px;
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,135 @@
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chrome/browser/resources/settings/settings_menu/settings_menu.html
index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..892f1693a46f0f7df9172ecd7be2dc65fe263b7f 100644
index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a0c8136be 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.html
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html
@@ -148,6 +148,10 @@
@@ -10,23 +10,32 @@
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">

+<if expr="not _google_chrome">
+<link rel="import" href="../brave_settings_menu/icons.html">
+</if>
+
<dom-module id="settings-menu">
<template>
<style include="settings-shared">
:host {
- display: block;
- margin-top: 8px;
+ display: inline-block;
+ vertical-align: top;
+ margin: 12px;
+ padding: 12px 60px 20px 0;
+ background-color: #fff;
+ border: 1px solid #e8e8ef;
+ border-radius: 7px;
+ font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

- a[href],
- #advancedButton {
+ a[href] {
--cr-selectable-focus: {
outline: auto 5px -webkit-focus-ring-color;
};
align-items: center;
- color: var(--settings-nav-grey);
+ color: #A0A1B2; /* brave: subtleInteracting */
display: flex;
- font-weight: 500;
+ 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;
}

- a[href].iron-selected {
+ a[href].iron-selected > iron-icon {
color: var(--google-blue-700);
}

+ a[href].iron-selected {
+ color: #000;
+ font-weight: bold;
+ }
+
+ #settingsHeader,
+ #advancedButton {
+ --cr-selectable-focus: {
+ outline: auto 5px -webkit-focus-ring-color;
+ };
+ 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;
+ }
+
iron-icon {
--iron-icon-fill-color: var(--settings-nav-grey);
margin-inline-end: 24px;
@@ -48,6 +79,7 @@

.iron-selected > iron-icon {
fill: var(--google-blue-700);
+ font-weight: bold;
}

#advancedButton {
@@ -77,7 +109,6 @@
#advancedButton > iron-icon,
#extensionsLink > iron-icon {
@apply --cr-icon-height-width;
- margin-inline-end: 14px; /* 16px - 2px from margin for outline. */
}

#menuSeparator {
@@ -86,10 +117,19 @@
margin-bottom: 8px;
margin-top: 8px;
}
+
+ #aboutMenuText {
+ display: flex;
+ flex-direction: column;
+ color: #C5C5D3; /* brave: subtle */
+ }
</style>
<iron-selector id="topMenu" selectable="a:not(#extensionsLink)"
attr-for-selected="href" on-iron-activate="onSelectorActivate_"
role="navigation" on-click="onLinkClick_">
+ <div id="settingsHeader">
+ <span>$i18n{settings}</span>
+ </div>
<if expr="chromeos">
<a href="/internet">
<iron-icon icon="settings:network-wifi"></iron-icon>
@@ -114,11 +150,12 @@
<iron-icon icon="settings:assignment"></iron-icon>
$i18n{autofillPageTitle}
</a>
- <a id="appearance" href="/appearance"
- hidden="[[!pageVisibility.appearance]]">
- <iron-icon icon="settings:palette"></iron-icon>
- $i18n{appearancePageTitle}
- </a>
+ <a id="extensionsLink" href="chrome://extensions" target="_blank"
+ on-click="onExtensionsLinkClick_"
+ title="$i18n{extensionsLinkTooltip}">
+ <iron-icon icon="brave_settings:misc-extensions"></iron-icon>
+ $i18n{extensionsPageTitle}
+ </a>
<if expr="chromeos">
<a href="/device">
<iron-icon icon="settings:laptop-chromebook"></iron-icon>
@@ -148,11 +185,20 @@
$i18n{defaultBrowser}
</a>
</if>
Expand All @@ -13,7 +140,17 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..892f1693a46f0f7df9172ecd7be2dc65
<a id="onStartup" href="/onStartup"
hidden="[[!pageVisibility.onStartup]]">
<iron-icon icon="settings:power-settings-new"></iron-icon>
@@ -185,10 +189,12 @@
$i18n{onStartup}
</a>
+ <a id="appearance" href="/appearance"
+ hidden="[[!pageVisibility.appearance]]">
+ <iron-icon icon="brave_settings:square-tab-settings"></iron-icon>
+ $i18n{appearancePageTitle}
+ </a>
<paper-button toggles id="advancedButton"
aria-active-attribute="aria-expanded" active="{{advancedOpened}}"
hidden="[[!pageVisibility.advancedSettings]]">
@@ -185,10 +231,12 @@
<iron-icon icon="cr:print"></iron-icon>
$i18n{printingPageTitle}
</a>
Expand All @@ -26,3 +163,24 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..892f1693a46f0f7df9172ecd7be2dc65
<if expr="not chromeos">
<a href="/system">
<iron-icon icon="settings:build"></iron-icon>
@@ -202,13 +250,13 @@
</iron-selector>
</iron-collapse>
<div id="menuSeparator"></div>
- <a id="extensionsLink" href="chrome://extensions" target="_blank"
- on-click="onExtensionsLinkClick_"
- title="$i18n{extensionsLinkTooltip}">
- <span>$i18n{extensionsPageTitle}</span>
- <iron-icon class="cr-icon icon-external" actionable></iron-icon>
- </a>
- <a id="about-menu" href="/help">$i18n{aboutPageTitle}</a>
+ <a id="about-menu" href="/help">
+ <iron-icon icon="brave_settings:full-color-brave-lion"></iron-icon>
+ <div id="aboutMenuText">
+ <div>$i18n{aboutPageTitle}</div>
+ <div>$i18n{braveProductVersion}</div>
+ </div>
+ </a>
</iron-selector>
</template>
<script src="settings_menu.js"></script>
Original file line number Diff line number Diff line change
@@ -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;
}
</style>
<settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
@@ -61,23 +65,17 @@
role="banner"
show-menu>
</cr-toolbar>
- <cr-drawer id="drawer" on-close="onMenuClosed_"
- heading="$i18n{settings}" align="$i18n{textdirection}">
- <div class="drawer-content">
- <template is="dom-if" id="drawerTemplate">
- <settings-menu page-visibility="[[pageVisibility_]]"
- show-android-apps="[[showAndroidApps_]]"
- show-crostini="[[showCrostini_]]"
- show-multidevice="[[showMultidevice_]]"
- have-play-store-app="[[havePlayStoreApp_]]"
- autofill-home-enabled="[[autofillHomeEnabled_]]"
- on-iron-activate="onIronActivate_"
- advanced-opened="{{advancedOpened_}}">
- </settings-menu>
- </template>
- </div>
- </cr-drawer>
<div id="container" class="no-outline">
+ <settings-menu
+ page-visibility="[[pageVisibility_]]"
+ show-android-apps="[[showAndroidApps_]]"
+ show-crostini="[[showCrostini_]]"
+ show-multidevice="[[showMultidevice_]]"
+ have-play-store-app="[[havePlayStoreApp_]]"
+ autofill-home-enabled="[[autofillHomeEnabled_]]"
+ on-iron-activate="onIronActivate_"
+ advanced-opened="{{advancedOpened_}}">
+ </settings-menu>
<settings-main id="main" prefs="{{prefs}}"
toolbar-spinner-active="{{toolbarSpinnerActive_}}"
page-visibility="[[pageVisibility_]]"
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.js b/chrome/browser/resources/settings/settings_ui/settings_ui.js
index 37ebe94a48728893daf84613aab94be6ddf89df7..2318718b653cad4db62664044611aeef3ed956e1 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.js
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.js
@@ -92,13 +92,13 @@ Polymer({
*/
ready: function() {
// Lazy-create the drawer the first time it is opened or swiped into view.
- listenOnce(this.$.drawer, 'open-changed', () => {
- 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');
21 changes: 21 additions & 0 deletions patches/chrome-browser-ui-webui-settings-about_handler.cc.patch
Original file line number Diff line number Diff line change
@@ -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(
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 637ec1a

Please sign in to comment.