[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 {