[ProfilesReordering] Fix ripple effect translating the dragging element

The ripple effect made a UI issue when interacting with the drag and
drop functionality. The ripple effectivley made the ProfileCard bigger
the longer mouse is pressed - making the ripple even bigger.

Solution: Once the drag is started, directly disable the active ripple.

Screencast after:
https://screencast.googleplex.com/cast/NTc2MjkyNTE1NDI3MTIzMnw3Njg3ZmUzNS1iOA

Screencast before:
https://screencast.googleplex.com/cast/NDg2NzI3MTQ5ODM5OTc0NHw1YmM1NjhmYS0zNQ

Bug: 40276262
Change-Id: Ied9c61dd0f9a4d992edbb1bb1c295a4c56dc0ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5748494
Reviewed-by: Monica Basta <msalama@chromium.org>
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Commit-Queue: Ryan Sultanem <rsult@google.com>
Cr-Commit-Position: refs/heads/main@{#1335437}
diff --git a/chrome/browser/resources/signin/profile_picker/drag_drop_reorder_tile_list_delegate.ts b/chrome/browser/resources/signin/profile_picker/drag_drop_reorder_tile_list_delegate.ts
index 82797969..e6fb4e7 100644
--- a/chrome/browser/resources/signin/profile_picker/drag_drop_reorder_tile_list_delegate.ts
+++ b/chrome/browser/resources/signin/profile_picker/drag_drop_reorder_tile_list_delegate.ts
@@ -451,6 +451,8 @@
   // Prepare 'this.draggingTile_' member variable as the dragging tile.
   // It will used throughout each drag event cycle and reset in the
   // `resetDraggingTile_()` method which restore the tile to it's initial state.
+  // Notifies the tile that the drag event started to allow for UI
+  // modifications.
   private markDraggingTile_(element: HTMLElement) {
     this.draggingTile_ = element;
     this.draggingTile_.classList.add(DRAGGING_TAG);
@@ -462,6 +464,8 @@
     // element would be considered invisible and would not react to drag events
     // anymore. A value of '0.001' is enough to simulate the 'invisible' effect.
     this.draggingTile_.style.opacity = '0.001';
+
+    this.draggingTile_.dispatchEvent(new Event('drag-tile-start'));
   }
 
   // Restores `this.draggingTile_` to it's initial state.
diff --git a/chrome/browser/resources/signin/profile_picker/profile_card.html b/chrome/browser/resources/signin/profile_picker/profile_card.html
index fbab591..b2ca69ef 100644
--- a/chrome/browser/resources/signin/profile_picker/profile_card.html
+++ b/chrome/browser/resources/signin/profile_picker/profile_card.html
@@ -1,5 +1,5 @@
 <div id="profileCardContainer">
-  <cr-button @click="${this.onProfileClick_}"
+  <cr-button id="profileCardButton" @click="${this.onProfileClick_}"
       aria-label="${this.i18n(
           'profileCardButtonLabel', this.profileState.localProfileName)}">
     <div id="avatarContainer">
diff --git a/chrome/browser/resources/signin/profile_picker/profile_card.ts b/chrome/browser/resources/signin/profile_picker/profile_card.ts
index 7c260d0..700485b 100644
--- a/chrome/browser/resources/signin/profile_picker/profile_card.ts
+++ b/chrome/browser/resources/signin/profile_picker/profile_card.ts
@@ -9,6 +9,7 @@
 import 'chrome://resources/cr_elements/cr_input/cr_input.js';
 import 'chrome://resources/cr_elements/cr_tooltip/cr_tooltip.js';
 
+import type {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import type {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
 import type {CrTooltipElement} from 'chrome://resources/cr_elements/cr_tooltip/cr_tooltip.js';
 import {I18nMixinLit} from 'chrome://resources/cr_elements/i18n_mixin_lit.js';
@@ -27,6 +28,7 @@
     gaiaNameTooltip: CrTooltipElement,
     nameInput: CrInputElement,
     tooltip: CrTooltipElement,
+    profileCardButton: CrButtonElement,
   };
 }
 
@@ -61,6 +63,8 @@
     super.connectedCallback();
     this.addNameInputTooltipListeners_();
     this.addGaiaNameTooltipListeners_();
+
+    this.addEventListener('drag-tile-start', this.disableActiveRipple_);
   }
 
   private addNameInputTooltipListeners_() {
@@ -157,6 +161,21 @@
       this.$.nameInput.value = this.profileState.localProfileName;
     }
   }
+
+  /**
+   * Disables the ripple effect if any. This is needed when the tile is being
+   * dragged in order not to break the visual effect of the dragging tile and
+   * mouse positioning relative to the card.
+   */
+  private disableActiveRipple_(): void {
+    if (this.$.profileCardButton.hasRipple()) {
+      const buttonRipple = this.$.profileCardButton.getRipple();
+      // This sequence is equivalent to calling `buttonRipple.clear()` but also
+      // avoids the animation effect which is needed in this case.
+      buttonRipple.showAndHoldDown();
+      buttonRipple.holdDown = false;
+    }
+  }
 }
 
 declare global {