[ProfilePicker]: Add tooltip for the profile name + gaia name.

This CL adds a tooltip for the local profile name as well as the gaia
name on the profile card on picker main view. The CL for the local
profile name is disabled if an inline profile name editing is in
progress for this card.

Fixed: 1168173
Change-Id: Id5e028e0decfbf6c0a368b6a0ab78ba82bec0af3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2637518Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845125}

chrome/browser/resources/signin/profile_picker/BUILD.gn

@@ -211,6 +211,7 @@ js_library("profile_card") {
   deps = [
     ":manage_profiles_browser_proxy",
     ":profile_card_menu",
+    "//third_party/polymer/v3_0/components-chromium/paper-tooltip:paper-tooltip",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/js:i18n_behavior.m",

chrome/browser/resources/signin/profile_picker/profile_card.html

-<style include="profile-picker-shared cr-hidden-style">
+<style include="profile-picker-shared cr-hidden-style cr-shared-style">
   #profileCardContainer {
     border-radius: inherit;
     height: 100%;
@@ -99,6 +99,13 @@
     width: 130px;
   }
 
+  paper-tooltip {
+    --paper-tooltip-delay-in: 100ms;
+    --paper-tooltip-duration-in: 100ms;
+    --paper-tooltip-duration-out: 100ms;
+    --paper-tooltip-min-width: none;
+  }
+
   @media (prefers-color-scheme: dark) {
     #iconContainer {
       background-color: var(--md-background-color);
@@ -130,6 +137,9 @@
         hidden="[[profileState.needsSignin]]">
       [[profileState.gaiaName]]
     </div>
+    <paper-tooltip for="gaiaName" offset="-16">
+      [[profileState.gaiaName]]
+    </paper-tooltip>
     <div id="forceSigninContainer" class="profile-card-info secondary-text"
         hidden="[[!profileState.needsSignin]]">
       <div>$i18n{needsSigninPrompt}</div>
@@ -144,6 +154,9 @@
         auto-validate spellcheck="false" required>
     </cr-input>
     <div id="hoverUnderline"></div>
+    <paper-tooltip id="tooltip" for="nameInput" manual-mode offset="-10">
+      [[profileState.localProfileName]]
+    </paper-tooltip>
   </div>
   <profile-card-menu profile-state="[[profileState]]"></profile-card-menu>
 </div>

chrome/browser/resources/signin/profile_picker/profile_card.js

@@ -5,9 +5,11 @@
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import './profile_card_menu.js';
 import './profile_picker_shared_css.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
+import 'chrome://resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -42,6 +44,30 @@ Polymer({
         ManageProfilesBrowserProxyImpl.getInstance();
   },
 
+  /** @override */
+  attached() {
+    this.addNameInputTooltipListeners_();
+  },
+
+  /** @private */
+  addNameInputTooltipListeners_() {
+    const showTooltip = () => {
+      // Disable tooltip if the local name editing is in progress.
+      if (this.$.nameInput.hasAttribute('focused_')) {
+        this.$.tooltip.hide();
+      } else {
+        this.$.tooltip.show();
+      }
+    };
+    const hideTooltip = () => this.$.tooltip.hide();
+    const target = this.$.tooltip.target;
+    target.addEventListener('mouseenter', showTooltip);
+    target.addEventListener('focus', hideTooltip);
+    target.addEventListener('mouseleave', hideTooltip);
+    target.addEventListener('click', hideTooltip);
+    this.$.tooltip.addEventListener('mouseenter', hideTooltip);
+  },
+
   /** @private */
   onProfileClick_() {
     this.manageProfilesBrowserProxy_.launchSelectedProfile(