WebUI Tab Strip: Add placeholder for dropping a tab

When a user drags a tab or tab group from another browser, a placeholder
is created and appended to the end of the tab list to suggest that the
tab or group will be dropped at the very end.

This is a temporary solution for not being able to directly place tabs
in a specific index.

Bug: 1005560
Change-Id: I283862086531a2b21222d43e9a6b650af5b9219a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2032057Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#737202}

chrome/browser/resources/tab_strip/tab_list.html

@@ -106,6 +106,15 @@
     right: auto;
   }
 
+  #dropPlaceholder {
+    background: var(--tabstrip-tab-background-color);
+    border-radius: var(--tabstrip-tab-border-radius);
+    height: var(--tabstrip-tab-height);
+    margin-inline-end: var(--tabstrip-tab-spacing);
+    opacity: 0.5;
+    width: var(--tabstrip-tab-width);
+  }
+
   #demoOptions {
     bottom: 15px;
     display: none;

chrome/browser/resources/tab_strip/tab_list.js

@@ -110,6 +110,10 @@ class TabListElement extends CustomElement {
      */
     this.draggedItem_;
 
+    /** @private {!Element} */
+    this.dropPlaceholder_ = document.createElement('div');
+    this.dropPlaceholder_.id = 'dropPlaceholder';
+
     /** @private @const {!FocusOutlineManager} */
     this.focusOutlineManager_ = FocusOutlineManager.forDocument(document);
 
@@ -182,6 +186,7 @@ class TabListElement extends CustomElement {
         'dragstart', (e) => this.onDragStart_(/** @type {!DragEvent} */ (e)));
     this.addEventListener(
         'dragend', (e) => this.onDragEnd_(/** @type {!DragEvent} */ (e)));
+    this.addEventListener('dragleave', () => this.onDragLeave_());
     this.addEventListener(
         'dragover', (e) => this.onDragOver_(/** @type {!DragEvent} */ (e)));
     this.addEventListener(
@@ -500,6 +505,11 @@ class TabListElement extends CustomElement {
     this.draggedItem_ = undefined;
   }
 
+  /** @private */
+  onDragLeave_() {
+    this.dropPlaceholder_.remove();
+  }
+
   /**
    * @param {!DragEvent} event
    * @private
@@ -508,16 +518,17 @@ class TabListElement extends CustomElement {
     event.preventDefault();
 
     if (!this.draggedItem_) {
-      // Invalid drag.
+      this.unpinnedTabsElement_.appendChild(this.dropPlaceholder_);
+      this.animateScrollPosition_(this.dropPlaceholder_.offsetLeft);
       return;
     }
 
     event.dataTransfer.dropEffect = 'move';
     if (isTabGroupElement(this.draggedItem_)) {
       this.onDragOverWithGroupElement_(event);
-      return;
+    } else if (isTabElement(this.draggedItem_)) {
+      this.onDragOverWithTabElement_(event);
     }
-    this.onDragOverWithTabElement_(event);
   }
 
   /**
@@ -624,6 +635,8 @@ class TabListElement extends CustomElement {
       return;
     }
 
+    this.dropPlaceholder_.remove();
+
     if (event.dataTransfer.types.includes(getTabIdDataType())) {
       const tabId = Number(event.dataTransfer.getData(getTabIdDataType()));
       if (Number.isNaN(tabId)) {

chrome/test/data/webui/tab_strip/tab_list_test.js

@@ -695,6 +695,22 @@ suite('TabList', () => {
     assertEquals(1, index);
   });
 
+  test('DragTabIntoListFromOutside', () => {
+    const mockDataTransfer = new MockDataTransfer();
+    mockDataTransfer.setData(strings.tabIdDataType, '1000');
+    const dragOverEvent = new DragEvent('dragover', {
+      bubbles: true,
+      composed: true,
+      dataTransfer: mockDataTransfer,
+    });
+    tabList.dispatchEvent(dragOverEvent);
+    assertTrue(
+        tabList.$('#unpinnedTabs').lastElementChild.id === 'dropPlaceholder');
+
+    tabList.dispatchEvent(new DragEvent('drop', dragOverEvent));
+    assertEquals(null, tabList.$('dropPlaceholder'));
+  });
+
   test('DropTabIntoList', async () => {
     const droppedTabId = 9000;
     const mockDataTransfer = new MockDataTransfer();