Skip to content

GitLab

T
tangled
Commit 8cf64121 authored by Kristi Park's avatar Kristi Park Committed by Commit Bot
Browse files
Options

[NTP] Allow dragging of shortcuts to the omnibox with grid layout 

Convert mouse events to drag events. This allows us to use DataTransfer
to set the URL data necessary for dragging and dropping links.

Screencast: https://drive.google.com/open?id=131GJk4um_TGzgXxQ3KeQcDfJ87jh-W19

Bug: 961569
Change-Id: I8460a5e101f167efa15f34ca810244c9edd46900
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1686789
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: default avatarKyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675802}
parent 050530ec
Show whitespace changes
Inline Side-by-side
Showing with 207 additions and 124 deletions
chrome/browser/resources/local_ntp/most_visited_single.css
View file @ 8cf64121
......@@ -106,11 +106,6 @@ html:not(.no-initial-fade) :-webkit-any(#mv-tiles, .mv-tiles-old) {
transition: transform 300ms ease-in-out;
}
/* Prevent navigation while we're reordering the tiles. */
body.reordering .grid-tile {
pointer-events: none;
}
/* Prevent transitions on the held tile in order for it to smoothly follow the
* mouse. */
.grid-reorder .grid-tile {
......
chrome/browser/resources/local_ntp/most_visited_single.js
View file @ 8cf64121
......@@ -489,15 +489,18 @@ class Grid {
// Listen for the drag event on the tile instead of the tile container. The
// tile container remains static during the reorder flow.
tile.firstChild.draggable = true;
// Prevent default drag events on the shortcut link.
const tileItem = tile.firstChild.firstChild;
tileItem.draggable = false;
tile.firstChild.addEventListener('dragstart', (event) => {
// Support link dragging (i.e. dragging the URL to the omnibox).
event.dataTransfer.setData('text/uri-list', tileItem.href);
// Remove the ghost image that appears when dragging.
const emptyImg = new Image();
event.dataTransfer.setDragImage(emptyImg, 0, 0);
this.startReorder_(tile, event, /*mouseMode=*/ true);
});
// Listen for the mouseover event on the tile container. If this is placed
// on the tile instead, it can be triggered while the tile is translated to
// its new position.
tile.addEventListener('mouseover', (event) => {
this.reorderToIndex_(index);
});
// Set up touch support.
tile.firstChild.addEventListener('touchstart', (startEvent) => {
......@@ -516,17 +519,12 @@ class Grid {
// Insert the held tile at the index we are hovering over.
const moveOver = (moveEvent) => {
// Touch events do not have a 'mouseover' equivalent, so we need to
// manually check if we are hovering over a tile.
// manually check if we are hovering over a tile. If so, insert the held
// tile there.
// Note: The first item in |changedTouches| is the current position.
const x = moveEvent.changedTouches[0].pageX;
const y = moveEvent.changedTouches[0].pageY;
const elements = document.elementsFromPoint(x, y);
for (let i = 0; i < elements.length; i++) {
if (elements[i].classList.contains('grid-tile-container')) {
this.reorderToIndex_(Number(elements[i].getAttribute('index')));
break;
}
}
this.reorderToIndexAtPoint_(x, y);
};
// Allow 'touchstart' events again when reordering stops/was never
// started.
......@@ -565,13 +563,24 @@ class Grid {
// Disable other hover/active styling for all tiles.
document.body.classList.add(CLASSES.REORDERING);
// Set up event listeners for the reorder flow. Listen for mouse events if
// Set up event listeners for the reorder flow. Listen for drag events if
// |mouseMode|, touch events otherwise.
if (mouseMode) {
const mouseMove = this.trackCursor_(tile, event.pageX, event.pageY, true);
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', mouseMove);
const trackCursor =
this.trackCursor_(tile, event.pageX, event.pageY, true);
// The 'dragover' event must be tracked at the document level, since the
// currently dragged tile will interfere with 'dragover' events on the
// other tiles.
const dragOver = (dragOverEvent) => {
trackCursor(dragOverEvent);
// Since the 'dragover' event is not tied to a specific tile, we need to
// manually check if we are hovering over a tile. If so, insert the held
// tile there.
this.reorderToIndexAtPoint_(dragOverEvent.pageX, dragOverEvent.pageY);
};
document.addEventListener('dragover', dragOver);
document.addEventListener('dragend', () => {
document.removeEventListener('dragover', dragOver);
this.stopReorder_(tile);
}, {once: true});
} else {
......@@ -580,7 +589,7 @@ class Grid {
const trackCursor = this.trackCursor_(
tile, event.changedTouches[0].pageX, event.changedTouches[0].pageY,
false);
const touchEnd = (event) => {
const touchEnd = (touchEndEvent) => {
tile.firstChild.removeEventListener('touchmove', trackCursor);
tile.firstChild.removeEventListener('touchend', touchEnd);
tile.firstChild.removeEventListener('touchcancel', touchEnd);
......@@ -616,6 +625,25 @@ class Grid {
this.newIndexOfItemToReorder_ = -1;
}
/**
* Attempts to insert the currently held tile at the index located at (x, y).
* Does nothing if there is no tile at (x, y) or the reorder flow is not
* ongoing.
* @param {number} x The x coordinate.
* @param {number} y The y coordinate.
* @private
*/
reorderToIndexAtPoint_(x, y) {
const elements = document.elementsFromPoint(x, y);
for (let i = 0; i < elements.length; i++) {
if (elements[i].classList.contains('grid-tile-container') &&
elements[i].getAttribute('index') !== null) {
this.reorderToIndex_(Number(elements[i].getAttribute('index')));
return;
}
}
}
/**
* Executed only when the reorder flow is ongoing. Inserts the currently held
* tile at |index| and shifts tiles accordingly.
......
chrome/test/data/local_ntp/most_visited_browsertest.js
View file @ 8cf64121
......@@ -362,8 +362,8 @@ test.mostVisited.testReorderStart = function() {
$(test.mostVisited.MOST_VISITED).appendChild(container);
test.mostVisited.initGridWithAdd(container, params, 10);
const dragStart = new Event('dragstart');
const mouseUp = new Event('mouseup');
const dragStart = test.mostVisited.mockDragStart();
const dragEnd = new Event('dragend');
const tiles = document.getElementsByClassName(
test.mostVisited.CLASSES.GRID_TILE_CONTAINER);
......@@ -387,7 +387,7 @@ test.mostVisited.testReorderStart = function() {
document.body.classList.contains(test.mostVisited.CLASSES.REORDERING));
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
assertFalse(tile.classList.contains(test.mostVisited.CLASSES.GRID_REORDER));
assertFalse(
......@@ -487,9 +487,9 @@ test.mostVisited.testReorderFollowCursor = function() {
$(test.mostVisited.MOST_VISITED).appendChild(container);
test.mostVisited.initGrid(container, params, 4);
const dragStart = new Event('dragstart');
const mouseMove = new Event('mousemove');
const mouseUp = new Event('mouseup');
const dragStart = test.mostVisited.mockDragStart();
const dragOver = new Event('dragover');
const dragEnd = new Event('dragend');
const tiles = document.getElementsByClassName(
test.mostVisited.CLASSES.GRID_TILE_CONTAINER);
......@@ -504,35 +504,35 @@ test.mostVisited.testReorderFollowCursor = function() {
// No style should be applied to the tile yet.
assertEquals('', tile.firstChild.style.transform);
// Move mouse 5px right and down. This should also move the tile 5px right and
// down.
mouseMove.pageX = 20;
mouseMove.pageY = 20;
// Move cursor 5px right and down. This should also move the tile 5px right
// and down.
dragOver.pageX = 20;
dragOver.pageY = 20;
let expectedTransform = 'translate(5px, 5px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Move mouse beyond the top right corner. This should move the tile to the
// Move cursor beyond the top right corner. This should move the tile to the
// top right corner of the grid but not beyond it.
mouseMove.pageX = 40;
mouseMove.pageY = 0;
dragOver.pageX = 40;
dragOver.pageY = 0;
expectedTransform = 'translate(10px, 0px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Move mouse beyond the bottom left corner. This should move the tile to the
// Move cursor beyond the bottom left corner. This should move the tile to the
// bottom left corner of the grid but not beyond it.
mouseMove.pageX = 0;
mouseMove.pageY = 40;
dragOver.pageX = 0;
dragOver.pageY = 40;
expectedTransform = 'translate(0px, 10px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Start the reorder flow on the center of the last tile.
......@@ -543,31 +543,35 @@ test.mostVisited.testReorderFollowCursor = function() {
// No style should be applied to the tile yet.
assertEquals('', tile.firstChild.style.transform);
// Move mouse 5px left and up. This should also move the tile 5px left and up.
mouseMove.pageX = 20;
mouseMove.pageY = 20;
// Move cursor 5px left and up. This should also move the tile 5px left and
// up.
dragOver.pageX = 20;
dragOver.pageY = 20;
expectedTransform = 'translate(-5px, -5px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Move mouse beyond the bottom left corner. This should move the tile to the
// Move cursor beyond the bottom left corner. This should move the tile to the
// bottom left corner of the grid but not beyond it.
mouseMove.pageX = 0;
mouseMove.pageY = 40;
dragOver.pageX = 0;
dragOver.pageY = 40;
expectedTransform = 'translate(-10px, 0px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Move mouse beyond the top right corner. This should move the tile to the
// Move cursor beyond the top right corner. This should move the tile to the
// top right corner of the grid but not beyond it.
mouseMove.pageX = 40;
mouseMove.pageY = 0;
dragOver.pageX = 40;
dragOver.pageY = 0;
expectedTransform = 'translate(0px, -10px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Stop the reorder flow.
document.dispatchEvent(dragEnd);
};
/**
......@@ -591,9 +595,9 @@ test.mostVisited.testReorderFollowCursorRtl = function() {
$(test.mostVisited.MOST_VISITED).appendChild(container);
test.mostVisited.initGrid(container, params, 4);
const dragStart = new Event('dragstart');
const mouseMove = new Event('mousemove');
const mouseUp = new Event('mouseup');
const dragStart = test.mostVisited.mockDragStart();
const dragOver = new Event('dragover');
const dragEnd = new Event('dragend');
const tiles = document.getElementsByClassName(
test.mostVisited.CLASSES.GRID_TILE_CONTAINER);
......@@ -608,26 +612,26 @@ test.mostVisited.testReorderFollowCursorRtl = function() {
// No style should be applied to the tile yet.
assertEquals('', tile.firstChild.style.transform);
// Move mouse beyond the top left corner. This should move the tile to the top
// left corner of the grid but not beyond it.
mouseMove.pageX = 0;
mouseMove.pageY = 0;
// Move cursor beyond the top left corner. This should move the tile to the
// top left corner of the grid but not beyond it.
dragOver.pageX = 0;
dragOver.pageY = 0;
expectedTransform = 'translate(-10px, 0px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Move mouse beyond the bottom right corner. This should move the tile to the
// bottom right corner of the grid but not beyond it.
mouseMove.pageX = 40;
mouseMove.pageY = 40;
// Move cursor beyond the bottom right corner. This should move the tile to
// the bottom right corner of the grid but not beyond it.
dragOver.pageX = 40;
dragOver.pageY = 40;
expectedTransform = 'translate(0px, 10px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Start the reorder flow on the center of the last tile.
......@@ -638,23 +642,26 @@ test.mostVisited.testReorderFollowCursorRtl = function() {
// No style should be applied to the tile yet.
assertEquals('', tile.firstChild.style.transform);
// Move mouse beyond the top left corner. This should move the tile to the top
// left corner of the grid but not beyond it.
mouseMove.pageX = 0;
mouseMove.pageY = 0;
// Move cursor beyond the top left corner. This should move the tile to the
// top left corner of the grid but not beyond it.
dragOver.pageX = 0;
dragOver.pageY = 0;
expectedTransform = 'translate(0px, -10px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Move mouse beyond the bottom right corner. This should move the tile to the
// bottom right corner of the grid but not beyond it.
mouseMove.pageX = 40;
mouseMove.pageY = 40;
// Move cursor beyond the bottom right corner. This should move the tile to
// the bottom right corner of the grid but not beyond it.
dragOver.pageX = 40;
dragOver.pageY = 40;
expectedTransform = 'translate(10px, 0px)';
document.dispatchEvent(mouseMove);
document.dispatchEvent(dragOver);
assertEquals(expectedTransform, tile.firstChild.style.transform);
// Stop the reorder flow.
document.dispatchEvent(dragEnd);
};
/**
......@@ -739,15 +746,24 @@ test.mostVisited.testReorderInsert = function() {
maxTiles: 6,
enableReorder: true
};
// Override for testing.
let testElementsFromPoint = [];
document.elementsFromPoint = (x, y) => {
return testElementsFromPoint;
};
// Create a grid with uneven rows.
let container = document.createElement('div');
$(test.mostVisited.MOST_VISITED).appendChild(container);
test.mostVisited.initGrid(container, params, 5);
const dragStart = new Event('dragstart');
const mouseOver = new Event('mouseover');
const mouseUp = new Event('mouseup');
const dragStart = test.mostVisited.mockDragStart();
dragStart.pageX = 0; // Point to some spot.
dragStart.pageY = 0;
const dragOver = new Event('dragover');
dragOver.pageX = 0; // Point to some spot.
dragOver.pageY = 0;
const dragEnd = new Event('dragend');
const tiles = document.getElementsByClassName(
test.mostVisited.CLASSES.GRID_TILE_CONTAINER);
......@@ -757,38 +773,41 @@ test.mostVisited.testReorderInsert = function() {
let tile = tiles[0];
tile.firstChild.dispatchEvent(dragStart);
// Mouseover the second tile. This should shift tiles as if the held tile
// Move over the second tile. This should shift tiles as if the held tile
// was inserted after.
let expectedLayout = [
'', 'translate(-10px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)',
'translate(0px, 0px)'
];
tiles[1].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[1]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
// Mouseover the last tile. This should shift tiles as if the held tile was
// Move over the last tile. This should shift tiles as if the held tile was
// inserted after.
expectedLayout = [
'', 'translate(-10px, 0px)', 'translate(-10px, 0px)',
'translate(15px, -10px)', 'translate(-10px, 0px)'
];
tiles[4].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[4]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
// Mouseover the first tile. This should shift tiles as if the held tile was
// Move over the first tile. This should shift tiles as if the held tile was
// inserted before.
expectedLayout = [
'', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)',
'translate(0px, 0px)'
];
tiles[0].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[0]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Check that the correct values were sent to the EmbeddedSearchAPI.
assertEquals(0, test.mostVisited.reorderRid);
assertEquals(0, test.mostVisited.reorderNewIndex);
......@@ -798,28 +817,30 @@ test.mostVisited.testReorderInsert = function() {
tile = tiles[3];
tile.firstChild.dispatchEvent(dragStart);
// Mouseover the first tile. This should shift tiles as if the held tile was
// Move over the first tile. This should shift tiles as if the held tile was
// inserted before.
expectedLayout = [
'translate(10px, 0px)', 'translate(10px, 0px)', 'translate(-15px, 10px)',
'', 'translate(0px, 0px)'
];
tiles[0].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[0]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 3);
// Mouseover the last tile. This should shift tiles as if the held tile was
// Move over the last tile. This should shift tiles as if the held tile was
// inserted after.
expectedLayout = [
'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', '',
'translate(-10px, 0px)'
];
tiles[4].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[4]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 3);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Check that the correct values were sent to the EmbeddedSearchAPI.
assertEquals(3, test.mostVisited.reorderRid);
assertEquals(4, test.mostVisited.reorderNewIndex);
......@@ -841,15 +862,24 @@ test.mostVisited.testReorderInsertRtl = function() {
maxTiles: 6,
enableReorder: true
};
// Override for testing.
let testElementsFromPoint = [];
document.elementsFromPoint = (x, y) => {
return testElementsFromPoint;
};
// Create a grid with uneven rows.
let container = document.createElement('div');
$(test.mostVisited.MOST_VISITED).appendChild(container);
test.mostVisited.initGrid(container, params, 5);
const dragStart = new Event('dragstart');
const mouseOver = new Event('mouseover');
const mouseUp = new Event('mouseup');
const dragStart = test.mostVisited.mockDragStart();
dragStart.pageX = 0; // Point to some spot.
dragStart.pageY = 0;
const dragOver = new Event('dragover');
dragOver.pageX = 0; // Point to some spot.
dragOver.pageY = 0;
const dragEnd = new Event('dragend');
const tiles = document.getElementsByClassName(
test.mostVisited.CLASSES.GRID_TILE_CONTAINER);
......@@ -859,38 +889,41 @@ test.mostVisited.testReorderInsertRtl = function() {
let tile = tiles[0];
tile.firstChild.dispatchEvent(dragStart);
// Mouseover the second tile. This should shift tiles as if the held tile
// Move over the second tile. This should shift tiles as if the held tile
// was inserted after.
let expectedLayout = [
'', 'translate(10px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)',
'translate(0px, 0px)'
];
tiles[1].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[1]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
// Mouseover the last tile. This should shift tiles as if the held tile was
// Move over the last tile. This should shift tiles as if the held tile was
// inserted after.
expectedLayout = [
'', 'translate(10px, 0px)', 'translate(10px, 0px)',
'translate(-15px, -10px)', 'translate(10px, 0px)'
];
tiles[4].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[4]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
// Mouseover the first tile. This should shift tiles as if the held tile was
// Move over the first tile. This should shift tiles as if the held tile was
// inserted before.
expectedLayout = [
'', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)',
'translate(0px, 0px)'
];
tiles[0].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[0]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Check that the correct values were sent to the EmbeddedSearchAPI.
assertEquals(0, test.mostVisited.reorderRid);
assertEquals(0, test.mostVisited.reorderNewIndex);
......@@ -900,28 +933,30 @@ test.mostVisited.testReorderInsertRtl = function() {
tile = tiles[3];
tile.firstChild.dispatchEvent(dragStart);
// Mouseover the first tile. This should shift tiles as if the held tile was
// Move over the first tile. This should shift tiles as if the held tile was
// inserted before.
expectedLayout = [
'translate(-10px, 0px)', 'translate(-10px, 0px)', 'translate(15px, 10px)',
'', 'translate(0px, 0px)'
];
tiles[0].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[0]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 3);
// Mouseover the last tile. This should shift tiles as if the held tile was
// Move over the last tile. This should shift tiles as if the held tile was
// inserted after.
expectedLayout = [
'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', '',
'translate(10px, 0px)'
];
tiles[4].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[4]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 3);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Check that the correct values were sent to the EmbeddedSearchAPI.
assertEquals(3, test.mostVisited.reorderRid);
assertEquals(4, test.mostVisited.reorderNewIndex);
......@@ -942,15 +977,24 @@ test.mostVisited.testReorderInsertWithAddButton = function() {
maxTiles: 6,
enableReorder: true
};
// Override for testing.
let testElementsFromPoint = [];
document.elementsFromPoint = (x, y) => {
return testElementsFromPoint;
};
// Create a grid with uneven rows.
let container = document.createElement('div');
$(test.mostVisited.MOST_VISITED).appendChild(container);
test.mostVisited.initGridWithAdd(container, params, 5);
const dragStart = new Event('dragstart');
const mouseOver = new Event('mouseover');
const mouseUp = new Event('mouseup');
const dragStart = test.mostVisited.mockDragStart();
dragStart.pageX = 0; // Point to some spot.
dragStart.pageY = 0;
const dragOver = new Event('dragover');
dragOver.pageX = 0; // Point to some spot.
dragOver.pageY = 0;
const dragEnd = new Event('dragend');
const tiles = document.getElementsByClassName(
test.mostVisited.CLASSES.GRID_TILE_CONTAINER);
......@@ -960,33 +1004,36 @@ test.mostVisited.testReorderInsertWithAddButton = function() {
let tile = tiles[1];
tile.firstChild.dispatchEvent(dragStart);
// Mouseover the first tile. This should shift tiles as if the held tile was
// Move over the first tile. This should shift tiles as if the held tile was
// inserted before.
let expectedLayout = [
'translate(10px, 0px)', '', 'translate(0px, 0px)', 'translate(0px, 0px)', ''
];
tiles[0].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[0]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 3);
test.mostVisited.assertReorderInsert(container, expectedLayout, 1);
// Mouseover the last tile (the add shortcut button). This should not shift
// Move over the last tile (the add shortcut button). This should not shift
// the tiles.
tiles[4].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[4]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 0);
test.mostVisited.assertReorderInsert(container, expectedLayout, 1);
// Mouseover the second to last tile. This should shift tiles as if the held
// Move over the second to last tile. This should shift tiles as if the held
// tile was inserted after.
expectedLayout = [
'translate(0px, 0px)', '', 'translate(-10px, 0px)',
'translate(15px, -10px)', ''
];
tiles[3].dispatchEvent(mouseOver);
testElementsFromPoint = [tiles[3]];
document.dispatchEvent(dragOver);
test.mostVisited.assertReorderInsert(container, expectedLayout, 3);
test.mostVisited.assertReorderInsert(container, expectedLayout, 1);
// Stop the reorder flow.
document.dispatchEvent(mouseUp);
document.dispatchEvent(dragEnd);
// Check that the correct values were sent to the EmbeddedSearchAPI.
assertEquals(1, test.mostVisited.reorderRid);
assertEquals(3, test.mostVisited.reorderNewIndex);
......@@ -1137,6 +1184,19 @@ test.mostVisited.appendTile = function(container, rid, isAddButton) {
container.appendChild(gridTile);
};
/**
* Returns a mock 'dragstart' event.
* @return {Event}
*/
test.mostVisited.mockDragStart = function() {
const dragStart = new Event('dragstart');
dragStart.dataTransfer = {
setData: (a, b) => {},
setDragImage: (a, b, c) => {},
};
return dragStart;
};
/**
* Assert that the tile layout matches |expectedLayout|.
* @param {!Element} container The grid container.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment