[ProfilePicker]: Limit the tooltip to truncated names.

The tooltip is only useful when the profile name or the gaia name is
long enough to be truncated.

This CL also fixes the flickering of the profile card container and
profile card cursor at the bottom of the card due to the gaia name
tooltip.

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

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

@@ -100,10 +100,11 @@
   }
 
   paper-tooltip {
-    --paper-tooltip-delay-in: 100ms;
-    --paper-tooltip-duration-in: 100ms;
-    --paper-tooltip-duration-out: 100ms;
+    --paper-tooltip-delay-in: 200ms;
+    --paper-tooltip-duration-in: 200ms;
+    --paper-tooltip-duration-out: 200ms;
     --paper-tooltip-min-width: none;
+    overflow-wrap: break-word;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -137,9 +138,6 @@
         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>
@@ -154,9 +152,13 @@
         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>
+<paper-tooltip id="gaiaNameTooltip" for="gaiaName" manual-mode offset="0"
+    position="bottom">
+  [[profileState.gaiaName]]
+</paper-tooltip>
+<paper-tooltip id="tooltip" for="nameInput" manual-mode offset="-10">
+  [[profileState.localProfileName]]
+</paper-tooltip>

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

@@ -47,17 +47,21 @@ Polymer({
   /** @override */
   attached() {
     this.addNameInputTooltipListeners_();
+    this.addGaiaNameTooltipListeners_();
   },
 
   /** @private */
   addNameInputTooltipListeners_() {
     const showTooltip = () => {
+      const inputElement =
+          /** @type {!HTMLInputElement} */ (this.$.tooltip.target.inputElement);
       // Disable tooltip if the local name editing is in progress.
-      if (this.$.nameInput.hasAttribute('focused_')) {
-        this.$.tooltip.hide();
-      } else {
+      if (this.isNameTruncated_(inputElement) &&
+          !this.$.nameInput.hasAttribute('focused_')) {
         this.$.tooltip.show();
+        return;
       }
+      this.$.tooltip.hide();
     };
     const hideTooltip = () => this.$.tooltip.hide();
     const target = this.$.tooltip.target;
@@ -68,6 +72,34 @@ Polymer({
     this.$.tooltip.addEventListener('mouseenter', hideTooltip);
   },
 
+  /** @private */
+  addGaiaNameTooltipListeners_() {
+    const showTooltip = () => {
+      if (this.isNameTruncated_(this.$.gaiaName)) {
+        this.$.gaiaNameTooltip.show();
+        return;
+      }
+      this.$.gaiaNameTooltip.hide();
+    };
+    const hideTooltip = () => this.$.gaiaNameTooltip.hide();
+    const target = this.$.gaiaNameTooltip.target;
+    target.addEventListener('mouseenter', showTooltip);
+    target.addEventListener('focus', showTooltip);
+    target.addEventListener('mouseleave', hideTooltip);
+    target.addEventListener('blur', hideTooltip);
+    target.addEventListener('tap', hideTooltip);
+    this.$.gaiaNameTooltip.addEventListener('mouseenter', hideTooltip);
+  },
+
+  /**
+   * @param {!Element} element
+   * @return {boolean}
+   * @private
+   */
+  isNameTruncated_(element) {
+    return !!element && element.scrollWidth > element.offsetWidth;
+  },
+
   /** @private */
   onProfileClick_() {
     this.manageProfilesBrowserProxy_.launchSelectedProfile(

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

@@ -50,7 +50,7 @@
     }
 
     .profile-card-info.secondary-text {
-      padding: 10px 10px 16px 16px;
+      padding: 16px 10px;
       width: 142px;
     }