chore: remove custom drag&drop implementation for chromium

Author: dgozman

packages/playwright-core/src/server/chromium/crDragDrop.ts

@@ -22,15 +22,13 @@ import { toButtonsMask, toModifiersMask } from './crProtocolHelper';
 
 import type * as types from '../types';
 import type { CRSession } from './crConnection';
-import type { DragManager } from './crDragDrop';
 import type { CRPage } from './crPage';
 
 
 export class RawKeyboardImpl implements input.RawKeyboard {
   constructor(
     private _client: CRSession,
     private _isMac: boolean,
-    private _dragManger: DragManager,
   ) { }
 
   _commandsForCode(code: string, modifiers: Set<types.KeyboardModifier>) {
@@ -54,8 +52,8 @@ export class RawKeyboardImpl implements input.RawKeyboard {
 
   async keydown(modifiers: Set<types.KeyboardModifier>, keyName: string, description: input.KeyDescription, autoRepeat: boolean): Promise<void> {
     const { code, key, location, text } = description;
-    if (code === 'Escape' && await this._dragManger.cancelDrag())
-      return;
+    if (code === 'Escape')
+      await this._client.send('Input.cancelDragging', {});
     const commands = this._commandsForCode(code, modifiers);
     await this._client.send('Input.dispatchKeyEvent', {
       type: text ? 'keyDown' : 'rawKeyDown',
@@ -92,37 +90,25 @@ export class RawKeyboardImpl implements input.RawKeyboard {
 export class RawMouseImpl implements input.RawMouse {
   private _client: CRSession;
   private _page: CRPage;
-  private _dragManager: DragManager;
 
-  constructor(page: CRPage, client: CRSession, dragManager: DragManager) {
+  constructor(page: CRPage, client: CRSession) {
     this._page = page;
     this._client = client;
-    this._dragManager = dragManager;
   }
 
   async move(x: number, y: number, button: types.MouseButton | 'none', buttons: Set<types.MouseButton>, modifiers: Set<types.KeyboardModifier>, forClick: boolean): Promise<void> {
-    const actualMove = async () => {
-      await this._client.send('Input.dispatchMouseEvent', {
-        type: 'mouseMoved',
-        button,
-        buttons: toButtonsMask(buttons),
-        x,
-        y,
-        modifiers: toModifiersMask(modifiers),
-        force: buttons.size > 0 ? 0.5 : 0,
-      });
-    };
-    if (forClick) {
-      // Avoid extra protocol calls related to drag and drop, because click relies on
-      // move-down-up protocol commands being sent synchronously.
-      return actualMove();
-    }
-    await this._dragManager.interceptDragCausedByMove(x, y, button, buttons, modifiers, actualMove);
+    await this._client.send('Input.dispatchMouseEvent', {
+      type: 'mouseMoved',
+      button,
+      buttons: toButtonsMask(buttons),
+      x,
+      y,
+      modifiers: toModifiersMask(modifiers),
+      force: buttons.size > 0 ? 0.5 : 0,
+    });
   }
 
   async down(x: number, y: number, button: types.MouseButton, buttons: Set<types.MouseButton>, modifiers: Set<types.KeyboardModifier>, clickCount: number): Promise<void> {
-    if (this._dragManager.isDragging())
-      return;
     await this._client.send('Input.dispatchMouseEvent', {
       type: 'mousePressed',
       button,
@@ -136,10 +122,6 @@ export class RawMouseImpl implements input.RawMouse {
   }
 
   async up(x: number, y: number, button: types.MouseButton, buttons: Set<types.MouseButton>, modifiers: Set<types.KeyboardModifier>, clickCount: number): Promise<void> {
-    if (this._dragManager.isDragging()) {
-      await this._dragManager.drop(x, y, modifiers);
-      return;
-    }
     await this._client.send('Input.dispatchMouseEvent', {
       type: 'mouseReleased',
       button,

packages/playwright-core/src/server/chromium/crInput.ts

@@ -31,7 +31,6 @@ import { registry } from '../registry';
 import { getAccessibilityTree } from './crAccessibility';
 import { CRBrowserContext } from './crBrowser';
 import { CRCoverage } from './crCoverage';
-import { DragManager } from './crDragDrop';
 import { createHandle, CRExecutionContext } from './crExecutionContext';
 import { RawKeyboardImpl, RawMouseImpl, RawTouchscreenImpl } from './crInput';
 import { CRNetworkManager } from './crNetworkManager';
@@ -86,9 +85,8 @@ export class CRPage implements PageDelegate {
     this._targetId = targetId;
     this._opener = opener;
     this._isBackgroundPage = bits.isBackgroundPage;
-    const dragManager = new DragManager(this);
-    this.rawKeyboard = new RawKeyboardImpl(client, browserContext._browser._platform() === 'mac', dragManager);
-    this.rawMouse = new RawMouseImpl(this, client, dragManager);
+    this.rawKeyboard = new RawKeyboardImpl(client, browserContext._browser._platform() === 'mac');
+    this.rawMouse = new RawMouseImpl(this, client);
     this.rawTouchscreen = new RawTouchscreenImpl(client);
     this._pdf = new CRPDF(client);
     this._coverage = new CRCoverage(client);

packages/playwright-core/src/server/chromium/crPage.ts

@@ -53,9 +53,7 @@ it.describe('Drag and drop', () => {
     ]);
   });
 
-  it('should not send dragover on the first mousemove', async ({ server, page, browserName }) => {
-    it.fixme(browserName !== 'chromium');
-
+  it.fixme('should not send dragover on the first mousemove', async ({ server, page, browserName }) => {
     await page.goto(server.PREFIX + '/drag-n-drop.html');
     const events = await trackEvents(await page.$('body'));
     await page.hover('#source');
@@ -115,14 +113,15 @@ it.describe('Drag and drop', () => {
       browserName === 'firefox' ? 'dragstart at 120;86' : 'mousemove at 240;350',
       browserName === 'firefox' ? 'mousemove at 240;350' : 'dragstart at 120;86',
       'dragenter at 240;350',
-      browserName === 'chromium' ? null : 'dragover at 240;350',
+      'dragover at 240;350',
+      browserName === 'chromium' ? 'dragleave at 240;350' : null,
       'dragend',
       'mouseup at 240;350',
     ].filter(Boolean));
   });
 
   it.describe('iframe', () => {
-    it.fixme(true, 'implement dragging with iframes');
+    it.fixme(({ browserName }) => browserName !== 'chromium', 'iframes dragging is not implemented');
 
     it('should drag into an iframe', async ({ server, page, browserName }) => {
       await page.goto(server.PREFIX + '/drag-n-drop.html');
@@ -133,7 +132,6 @@ it.describe('Drag and drop', () => {
         iframe.style.marginLeft = '500px';
         iframe.style.marginTop = '60px';
       });
-      await page.waitForTimeout(5000);
       const pageEvents = await trackEvents(await page.$('body'));
       const frameEvents = await trackEvents(await frame.$('body'));
       await page.hover('#source');
@@ -142,21 +140,28 @@ it.describe('Drag and drop', () => {
       await page.mouse.up();
       expect(await frame.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
       expect(await pageEvents.jsonValue()).toEqual([
-        'mousemove',
-        'mousedown',
-        browserName === 'firefox' ? 'dragstart' : 'mousemove',
-        browserName === 'firefox' ? 'mousemove' : 'dragstart',
+        'mousemove at 120;86',
+        'mousedown at 120;86',
+        'mousemove at 742;412',
+        'dragstart at 120;86',
+        'dragend',
       ]);
       expect(await frameEvents.jsonValue()).toEqual([
-        'dragenter',
-        'dragover',
-        'drop',
+        'dragenter at 240;350',
+        'dragover at 240;350',
+        'drop at 240;350',
       ]);
     });
 
     it('should drag out of an iframe', async ({ server, page }) => {
       await page.goto(server.PREFIX + '/drag-n-drop.html');
       const frame = await attachFrame(page, 'oopif', server.PREFIX + '/drag-n-drop.html');
+      await page.$eval('iframe', iframe => {
+        iframe.style.width = '500px';
+        iframe.style.height = '600px';
+        iframe.style.marginLeft = '500px';
+        iframe.style.marginTop = '60px';
+      });
       const pageEvents = await trackEvents(await page.$('body'));
       const frameEvents = await trackEvents(await frame.$('body'));
       await frame.hover('#source');
@@ -165,15 +170,15 @@ it.describe('Drag and drop', () => {
       await page.mouse.up();
       expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
       expect(await frameEvents.jsonValue()).toEqual([
-        'mousemove',
-        'mousedown',
-        'dragstart',
+        'mousemove at 120;86',
+        'mousedown at 120;86',
+        'dragstart at 120;86',
         'dragend',
       ]);
       expect(await pageEvents.jsonValue()).toEqual([
-        'dragenter',
-        'dragover',
-        'drop',
+        'dragenter at 240;350',
+        'dragover at 240;350',
+        'drop at 240;350',
       ]);
     });
   });