[Profiles]: Fix profile picker buttons (#30215)

This commit is contained in:
Jay Harris
2025-07-23 14:52:21 +09:00
committed by GitHub
parent fa5d017c12
commit 3c9feb569b
7 changed files with 196 additions and 35 deletions
@@ -0,0 +1,14 @@
// Copyright (c) 2025 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 https://mozilla.org/MPL/2.0/.
import { mangle } from 'lit_mangler'
mangle(fragment => {
const button = fragment.querySelector('#profileCardButton')
if (!button) {
throw new Error('profileCardButton not found')
}
button.classList.add('plain')
}, t => t.text.includes('id="profileCardButton"'))
@@ -0,0 +1,14 @@
// Copyright (c) 2025 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 https://mozilla.org/MPL/2.0/.
import { mangle } from 'lit_mangler'
mangle(fragment => {
const button = fragment.querySelector('#addProfile')
if (!button) {
throw new Error('addProfile not found')
}
button.classList.add('plain')
}, t => t.text.includes('id="addProfile"'))
@@ -0,0 +1,14 @@
/* Copyright (c) 2025 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 https://mozilla.org/MPL/2.0/. */
/* #css_wrapper_metadata_start
* #type=style-lit
* #import=./profile_picker_shared-chromium.css.js
* #include=profile-picker-shared-chromium
* #css_wrapper_metadata_end */
cr-button.plain {
--leo-button-color: transparent;
}
@@ -1,13 +0,0 @@
diff --git a/chrome/browser/resources/signin/profile_picker/profile_card.html.ts b/chrome/browser/resources/signin/profile_picker/profile_card.html.ts
index 1aaf591af5d51f3268fdf1413592cb95c3a60066..286c6db5fc27b75e9db2fbe3ebeacbd5f9950cdc 100644
--- a/chrome/browser/resources/signin/profile_picker/profile_card.html.ts
+++ b/chrome/browser/resources/signin/profile_picker/profile_card.html.ts
@@ -10,7 +10,7 @@ import {isGlicVersion} from './profile_picker_flags.js';
export function getHtml(this: ProfileCardElement) {
return html`<!--_html_template_start_-->
<div id="profileCardContainer">
- <cr-button id="profileCardButton" @click="${this.onProfileClick_}"
+ <cr-button id="profileCardButton" class="plain" @click="${this.onProfileClick_}"
aria-label="${this.profileState.profileCardButtonLabel}">
<div id="avatarContainer">
<img class="profile-avatar" alt="" .src="${this.profileState.avatarIcon}">
@@ -1,21 +0,0 @@
diff --git a/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html.ts b/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html.ts
index e3b5ead78f763d2394c73ba19b13247d689e3183..24b6abd27004ac1548f3b8ac3b70aaf3af517e30 100644
--- a/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html.ts
+++ b/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html.ts
@@ -31,7 +31,7 @@ ${function() {
data-index="${index}">
</profile-card>
`)}
- <cr-button id="addProfile" class="profile-item"
+ <cr-button id="addProfile" class="profile-item plain"
@click="${this.onAddProfileClick_}"
?hidden="${!this.profileCreationAllowed_}"
aria-labelledby="addProfileButtonLabel">
@@ -46,7 +46,6 @@ ${function() {
<if expr="enable_glic">
<div id="footer-text" class="subtitle"
?hidden="${this.shouldHideFooterText_()}">
- $i18nRaw{glicAddProfileHelper}
</div>
</if>
</div>
@@ -385,6 +385,159 @@ exports[`mangled files should have up to date snapshots ./chromium_src/chrome/br
"
`;
exports[`mangled files should have up to date snapshots ./chromium_src/chrome/browser/resources/signin/profile_picker/profile_card.html.ts.lit_mangler.ts should match snapshot 1`] = `
"===================================================================
--- ../chrome/browser/resources/signin/profile_picker/profile_card.html.ts
+++ gen/chrome/browser/resources/signin/profile_picker/preprocessed/profile_card.html.ts
@@ -5,53 +5,37 @@
export function getHtml(this: ProfileCardElement) {
return html\`<!--_html_template_start_-->
<div id=\\"profileCardContainer\\">
- <cr-button id=\\"profileCardButton\\" @click=\\"\${this.onProfileClick_}\\"
- aria-label=\\"\${this.profileState.profileCardButtonLabel}\\">
+ <cr-button id=\\"profileCardButton\\" @click=\\"\${this.onProfileClick_}\\" aria-label=\\"\${this.profileState.profileCardButtonLabel}\\" class=\\"plain\\">
<div id=\\"avatarContainer\\">
<img class=\\"profile-avatar\\" alt=\\"\\" .src=\\"\${this.profileState.avatarIcon}\\">
- <div id=\\"iconContainer\\"
- ?hidden=\\"\${!this.profileState.avatarBadge.length}\\">
+ <div id=\\"iconContainer\\" ?hidden=\\"\${!this.profileState.avatarBadge.length}\\">
<cr-icon icon=\\"\${this.profileState.avatarBadge}\\"></cr-icon>
</div>
</div>
- <div id=\\"gaiaName\\" class=\\"profile-card-info secondary-text\\"
- ?hidden=\\"\${this.profileState.needsSignin}\\">
+ <div id=\\"gaiaName\\" class=\\"profile-card-info secondary-text\\" ?hidden=\\"\${this.profileState.needsSignin}\\">
\${this.profileState.gaiaName}
</div>
- <div id=\\"forceSigninContainer\\" class=\\"profile-card-info secondary-text\\"
- ?hidden=\\"\${!this.profileState.needsSignin}\\">
+ <div id=\\"forceSigninContainer\\" class=\\"profile-card-info secondary-text\\" ?hidden=\\"\${!this.profileState.needsSignin}\\">
<div>$i18n{needsSigninPrompt}</div>
<cr-icon id=\\"forceSigninIcon\\" icon=\\"profiles:lock\\"></cr-icon>
</div>
</cr-button>
<div id=\\"profileNameInputWrapper\\">
- <cr-input class=\\"profile-card-info prominent-text\\" id=\\"nameInput\\"
- aria-label=\\"$i18n{profileCardInputLabel}\\"
- .value=\\"\${this.profileState.localProfileName}\\"
- @change=\\"\${this.onProfileNameChanged_}\\"
- @keydown=\\"\${this.onProfileNameKeydown_}\\"
- @blur=\\"\${this.onProfileNameInputBlur_}\\" pattern=\\"\${this.pattern_}\\"
- auto-validate spellcheck=\\"false\\"
- @pointerenter=\\"\${this.onNameInputPointerEnter_}\\"
- @pointerleave=\\"\${this.onNameInputPointerLeave_}\\"
- ?disabled=\\"\${
- isGlicVersion() || this.profileState.hasEnterpriseLabel}\\" required>
+ <cr-input class=\\"profile-card-info prominent-text\\" id=\\"nameInput\\" aria-label=\\"$i18n{profileCardInputLabel}\\" .value=\\"\${this.profileState.localProfileName}\\" @change=\\"\${this.onProfileNameChanged_}\\" @keydown=\\"\${this.onProfileNameKeydown_}\\" @blur=\\"\${this.onProfileNameInputBlur_}\\" pattern=\\"\${this.pattern_}\\" auto-validate=\\"\\" spellcheck=\\"false\\" @pointerenter=\\"\${this.onNameInputPointerEnter_}\\" @pointerleave=\\"\${this.onNameInputPointerLeave_}\\" ?disabled=\\"\${
+ isGlicVersion() || this.profileState.hasEnterpriseLabel}\\" required=\\"\\">
</cr-input>
<div id=\\"hoverUnderline\\" ?hidden=\\"\${
isGlicVersion() || this.profileState.hasEnterpriseLabel}\\"></div>
</div>
- <profile-card-menu .profileState=\\"\${this.profileState}\\"
- ?hidden=\\"\${isGlicVersion()}\\">
+ <profile-card-menu .profilestate=\\"\${this.profileState}\\" ?hidden=\\"\${isGlicVersion()}\\">
</profile-card-menu>
</div>
-<cr-tooltip id=\\"gaiaNameTooltip\\" for=\\"gaiaName\\" manual-mode offset=\\"0\\"
- position=\\"bottom\\" aria-hidden=\\"true\\">
+<cr-tooltip id=\\"gaiaNameTooltip\\" for=\\"gaiaName\\" manual-mode=\\"\\" offset=\\"0\\" position=\\"bottom\\" aria-hidden=\\"true\\">
\${this.profileState.gaiaName}
</cr-tooltip>
-<cr-tooltip id=\\"tooltip\\" for=\\"nameInput\\" manual-mode offset=\\"-10\\"
- aria-hidden=\\"true\\">
+<cr-tooltip id=\\"tooltip\\" for=\\"nameInput\\" manual-mode=\\"\\" offset=\\"-10\\" aria-hidden=\\"true\\">
\${this.getNameInputTooltipText()}
</cr-tooltip>
<!--_html_template_end_-->\`;
}
"
`;
exports[`mangled files should have up to date snapshots ./chromium_src/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html.ts.lit_mangler.ts should match snapshot 1`] = `
"===================================================================
--- ../chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html.ts
+++ gen/chrome/browser/resources/signin/profile_picker/preprocessed/profile_picker_main_view.html.ts
@@ -14,49 +14,35 @@
}
}()}
<div class=\\"flex-container\\">
<div class=\\"title-container\\">
- <img id=\\"picker-logo\\" @click=\\"\${this.onProductLogoClick_}\\"
- src=\\"picker_logo.svg\\" role=\\"presentation\\">
- <h1 class=\\"title\\" .innerHTML=\\"\${this.getTitle_()}\\"></h1>
- <div class=\\"subtitle\\" .innerHTML=\\"\${this.getSubtitle_()}\\"></div>
+ <img id=\\"picker-logo\\" @click=\\"\${this.onProductLogoClick_}\\" src=\\"picker_logo.svg\\" role=\\"presentation\\">
+ <h1 class=\\"title\\" .innerhtml=\\"\${this.getTitle_()}\\"></h1>
+ <div class=\\"subtitle\\" .innerhtml=\\"\${this.getSubtitle_()}\\"></div>
</div>
<div id=\\"profilesWrapper\\" ?hidden=\\"\${(this.shouldHideProfilesWrapper_())}\\">
<div id=\\"profilesContainer\\" class=\\"custom-scrollbar\\">
\${this.profilesList_.map((item, index) => html\`
<profile-card class=\\"profile-item\\" .profileState=\\"\${item}\\"
data-index=\\"\${index}\\">
</profile-card>
\`)}
- <cr-button id=\\"addProfile\\" class=\\"profile-item\\"
- @click=\\"\${this.onAddProfileClick_}\\"
- ?hidden=\\"\${!this.profileCreationAllowed_}\\"
- aria-labelledby=\\"addProfileButtonLabel\\">
- <div id=\\"addProfileButtonLabel\\"
- class=\\"profile-card-info prominent-text\\">
+ <cr-button id=\\"addProfile\\" class=\\"profile-item plain\\" @click=\\"\${this.onAddProfileClick_}\\" ?hidden=\\"\${!this.profileCreationAllowed_}\\" aria-labelledby=\\"addProfileButtonLabel\\">
+ <div id=\\"addProfileButtonLabel\\" class=\\"profile-card-info prominent-text\\">
$i18n{addSpaceButton}
</div>
<cr-icon icon=\\"profiles:add\\"></cr-icon>
</cr-button>
</div>
</div>
-<if expr=\\"enable_glic\\">
- <div id=\\"footer-text\\" class=\\"subtitle\\"
- ?hidden=\\"\${this.shouldHideFooterText_()}\\">
- $i18nRaw{glicAddProfileHelper}
- </div>
-</if>
+
</div>
<div class=\\"footer\\">
- <cr-button id=\\"browseAsGuestButton\\"
- @click=\\"\${this.onLaunchGuestProfileClick_}\\"
- ?hidden=\\"\${!this.guestModeEnabled_}\\">
+ <cr-button id=\\"browseAsGuestButton\\" @click=\\"\${this.onLaunchGuestProfileClick_}\\" ?hidden=\\"\${!this.guestModeEnabled_}\\">
<cr-icon icon=\\"profiles:account-circle\\" slot=\\"prefix-icon\\"></cr-icon>
$i18n{browseAsGuestButton}
</cr-button>
- <cr-checkbox id=\\"askOnStartup\\" ?checked=\\"\${this.askOnStartup_}\\"
- @checked-changed=\\"\${this.onAskOnStartupChangedByUser_}\\"
- ?hidden=\\"\${this.hideAskOnStartup_}\\">
+ <cr-checkbox id=\\"askOnStartup\\" ?checked=\\"\${this.askOnStartup_}\\" @checked-changed=\\"\${this.onAskOnStartupChangedByUser_}\\" ?hidden=\\"\${this.hideAskOnStartup_}\\">
$i18n{askOnStartupCheckboxText}
</cr-checkbox>
</div>
@@ -66,15 +52,12 @@
<div slot=\\"body\\" id=\\"dialog-body\\" class=\\"warning-message\\">
\${this.forceSigninErrorDialogBody_}
</div>
<div slot=\\"button-container\\" class=\\"button-container\\">
- <cr-button id=\\"cancel-button\\"
- @click=\\"\${this.onForceSigninErrorDialogOkButtonClicked_}\\">
+ <cr-button id=\\"cancel-button\\" @click=\\"\${this.onForceSigninErrorDialogOkButtonClicked_}\\">
$i18n{ok}
</cr-button>
- <cr-button id=\\"button-sign-in\\" class=\\"action-button\\"
- @click=\\"\${this.onReauthClicked_}\\"
- ?hidden=\\"\${!this.shouldShownSigninButton_}\\">
+ <cr-button id=\\"button-sign-in\\" class=\\"action-button\\" @click=\\"\${this.onReauthClicked_}\\" ?hidden=\\"\${!this.shouldShownSigninButton_}\\">
$i18n{needsSigninPrompt}
</cr-button>
</div>
</cr-dialog>
"
`;
exports[`mangled files should have up to date snapshots ./chromium_src/components/webui/chrome_urls/resources/app.html.ts.lit_mangler.ts should match snapshot 1`] = `
"===================================================================
--- ../components/webui/chrome_urls/resources/app.html.ts
@@ -44,7 +44,7 @@ const runTypecheck = (genDir: string, files: string[]) => {
const result = childProcess.spawnSync('tsc', ['-p', getTsConfigForFiles(genDir, files)])
// Note: tsc in Windows doesn't return a status code on success (i.e. status === null).
if (result.status ?? 0 !== 0) {
console.error('Typechecking failed:\n', result.stderr?.toString())
console.error('Typechecking failed:\n', result.stdout?.toString(), result.stderr?.toString())
process.exit(1)
}
}