Merge profile settings (#3140)

Settings WebUI: Allow editing profile name and icon

app/brave_generated_resources.grd

@@ -224,6 +224,10 @@ By installing this extension, you are agreeing to the Google Widevine Terms of U
       <message name="IDS_UNVETTED_EXTENSION_INSTALL_PROMPT_TITLE" desc="Titlebar of the extension or app installation prompt which was not vetted by Brave. Asks the user if they want to install a particular extension or app.">
         Brave has not reviewed this extension for security and safety. Only install this extension if you trust the developer.
       </message>
+      <!-- Settings / Get Started -->
+      <message name="IDS_SETTINGS_BRAVE_EDIT_PROFILE" desc="Title to edit the profile user name and picture">
+        Profile name and icon
+      </message>
       <!-- Appearance -->
       <message name="IDS_SETTINGS_APPEARANCE_SETTINGS_BRAVE_THEMES" desc="The label for brave theme change setting options">
         Brave colors

browser/resources/settings/brave_settings_overrides.html

@@ -16,12 +16,16 @@
     <settings-people-page prefs="{{prefs}}"
       page-visibility="[[pageVisibility]]">
     </settings-people-page>
-    <settings-default-browser-page></settings-default-browser-page>
-    <div class="settings-box">$i18n{onStartup}</div>
-    <div class="settings-box continuation">
-      <settings-on-startup-page prefs="{{prefs}}">
-      </settings-on-startup-page>
-    </div>
+    <settings-animated-pages id="pages" section="getStarted">
+      <div route-path="default">
+        <settings-default-browser-page></settings-default-browser-page>
+        <div class="settings-box">$i18n{onStartup}</div>
+        <div class="settings-box continuation">
+          <settings-on-startup-page prefs="{{prefs}}">
+          </settings-on-startup-page>
+        </div>
+      </div>
+    </settings-animated-pages>
   </template>
 </dom-module>
 
@@ -31,20 +35,33 @@
     <style>
       :host {
         display: inline-block;
-        --settings-card-max-width: 790px !important;
+        /* we will enforce sizing at the container level and let children fill 100% of parent
+          top-down, rather than chromium's strategy of children setting their max width
+          bottom-up, which can be confusing, especially when our layout is different. */
+        --cr-centered-card-container_-_max-width: 100% !important; /* was 680px */
+        --brave-settings-content-max-width: 708px;
+        --brave-settings-menu-width: var(--settings-menu-width);
+        --brave-settings-menu-margin: 12px;
       }
       cr-drawer {
         display: none !important;
       }
       #container {
-        display: flex !important;
-        flex-direction: row;
+        /* menu and content next to each other in the horizontal center */
         justify-content: center;
-        align-items: flex-start;
         background: #F1F3F5; /* neutral100 */
       }
-      #left, #main, #right {
-        flex: unset !important;
+      #left {
+        /* fixed size menu */
+        flex: 0 0 calc(var(--settings-menu-width) + var(--brave-settings-menu-margin) * 2)  !important;
+      }
+      #main {
+        /* Take up rest of container up to a max */
+        flex: 0 1 var(--brave-settings-content-max-width) !important;
+      }
+      #right {
+        /* this element is only a space filler in chromium */
+        display: none;
       }
       :host-context([dark]) #container {
         background: #1E2127;
@@ -70,7 +87,7 @@
         --settings-nav-item-color: #424242 !important;
         position: sticky;
         top: var(--brave-settings-menu-margin-v);
-        margin: 0 12px 0 12px !important;
+        margin: 0 var(--brave-settings-menu-margin) !important;
         max-height: calc(100vh - 56px - (var(--brave-settings-menu-margin-v) * 2) - (var(--brave-settings-menu-padding) * 2));
         min-width: 172px;
         border-radius: 6px;

browser/resources/settings/brave_settings_overrides.js

@@ -200,6 +200,8 @@ BravePatching.RegisterPolymerTemplateModifications({
       console.error('[Brave Settings Overrides] Routes: could not find BASIC page')
     }
     r.GET_STARTED = r.BASIC.createSection('/getStarted', 'getStarted')
+    // bring back people's /manageProfile (now in getStarted)
+    r.MANAGE_PROFILE = r.GET_STARTED.createChild('/manageProfile');
     r.SHIELDS = r.BASIC.createSection('/shields', 'shields')
     r.SOCIAL_BLOCKING = r.BASIC.createSection('/socialBlocking', 'socialBlocking')
     r.EXTENSIONS = r.BASIC.createSection('/extensions', 'extensions')
@@ -325,12 +327,27 @@ BravePatching.RegisterPolymerTemplateModifications({
     }
   },
   'settings-people-page': (templateContent) => {
-    // Import item needs to know it's the first in the section
-    const importItem = templateContent.querySelector('#importDataDialogTrigger[on-click="onImportDataTap_"]')
-    if (!importItem) {
-      console.error('[Brave Settings Overrides] Could not find import item in people_page')
+    // People page needs to think it's in the getStarted section, since it is
+    // (we remove the People section as a separate section).
+    const page = templateContent.querySelector('settings-animated-pages[section=people]')
+    page.setAttribute('section', 'getStarted')
+    const profileTemplate = templateContent.querySelector('template[is="dom-if"][if="[[diceEnabled_]]"]')
+    // In chromium, the whole 'manage profile' section is only
+    // displayed if dice is enabled.
+    // Instead, always show it, but remove the google account specific entry.
+    profileTemplate.setAttribute('if', 'true')
+    const manageGoogleAccount = profileTemplate.content.querySelector('#manage-google-account')
+    if (!manageGoogleAccount) {
+      console.error('[Brave Settings Overrides] Could not find the google account settings item')
     }
-    importItem.classList.add('first')
+    manageGoogleAccount.remove()
+    // Edit profile item needs to know it's the first in the section
+    const firstItem = profileTemplate.content.querySelector('#edit-profile')
+    if (!firstItem) {
+      console.error('[Brave Settings Overrides] Could not find #edit-profile item in people_page')
+      return
+    }
+    firstItem.classList.add('first')
   },
   'settings-payments-section': (templateContent) => {
     const manageLink = templateContent.querySelector('#manageLink')

chromium_src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -9,11 +9,20 @@
 namespace settings {
 void BraveAddLocalizedStrings(content::WebUIDataSource*, Profile*);
 }  // namespace settings
-#include "../../../../../../chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc"  // NOLINT
 
-#include "brave/browser/ui/webui/brave_settings_ui.h"
+// Override some chromium strings
 #include "brave/grit/brave_generated_resources.h"
+#include "chrome/grit/chromium_strings.h"
+#include "chrome/grit/generated_resources.h"
+
+#undef IDS_SETTINGS_EDIT_PERSON
+#define IDS_SETTINGS_EDIT_PERSON IDS_SETTINGS_BRAVE_EDIT_PROFILE
+#undef IDS_SETTINGS_PROFILE_NAME_AND_PICTURE
+#define IDS_SETTINGS_PROFILE_NAME_AND_PICTURE IDS_SETTINGS_BRAVE_EDIT_PROFILE
 
+#include "../../../../../../chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc"  // NOLINT
+
+#include "brave/browser/ui/webui/brave_settings_ui.h"
 namespace settings {
 
 void BraveAddImportDataStrings(content::WebUIDataSource* html_source) {

chromium_src/chrome/grit/generated_resources.h

@@ -1,2 +1,12 @@
+// 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/.
+
+#ifndef BRAVE_CHROMIUM_SRC_CHROME_GRIT_GENERATED_RESOURCES_H_
+#define BRAVE_CHROMIUM_SRC_CHROME_GRIT_GENERATED_RESOURCES_H_
+
 #include "brave/grit/brave_generated_resources.h"
 #include "../gen/chrome/grit/generated_resources.h"
+
+#endif  // BRAVE_CHROMIUM_SRC_CHROME_GRIT_GENERATED_RESOURCES_H_