chore(editor): remove edgeless element toolbar (#10900)

tests/blocksuite/e2e/edgeless/auto-complete.spec.ts

@@ -134,10 +134,12 @@ test.describe('auto-complete', () => {
       await edgelessCommonSetup(page);
       await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
       await assertSelectedBound(page, [0, 0, 100, 100]);
-      await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
+      await triggerComponentToolbarAction(page, 'changeShapeColor');
       await changeShapeStrokeColor(page, 'MediumRed');
-      await triggerComponentToolbarAction(page, 'changeShapeFillColor');
       await changeShapeFillColor(page, 'HeavyGreen');
+      // Closes color pickers
+      await triggerComponentToolbarAction(page, 'changeShapeColor');
+
       await dragBetweenViewCoords(page, [120, 50], [200, 0]);
 
       const noteButton = getAutoCompletePanelButton(page, 'note');

tests/blocksuite/e2e/edgeless/color-picker.spec.ts

@@ -20,8 +20,8 @@ async function setupWithColorPickerFunction(page: Page) {
   await switchEditorMode(page);
 }
 
-function getColorPickerButtonWithClass(page: Page, classes: string) {
-  return page.locator(`edgeless-color-picker-button.${classes}`);
+function getColorPanelWithLabel(page: Page, label: string) {
+  return page.locator(`edgeless-color-panel[aria-label="${label}"]`);
 }
 
 function getCurrentColorUnitButton(locator: Locator) {
@@ -71,12 +71,12 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    await expect(fillColorButton).toBeVisible();
-
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const customButton = getCustomButton(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    await expect(fillColorPanel).toBeVisible();
+
+    const customButton = getCustomButton(fillColorPanel);
     await expect(customButton).toBeVisible();
   });
 
@@ -91,12 +91,13 @@ test.describe('basic functions', () => {
 
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+    const colorPickerPanel = getColorPickerPanel(toolbar);
 
     await expect(colorPickerPanel).toBeVisible();
   });
@@ -112,17 +113,18 @@ test.describe('basic functions', () => {
 
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const currentColorUnit = getCurrentColorUnitButton(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const currentColorUnit = getCurrentColorUnitButton(fillColorPanel);
 
     const value = await getCurrentColor(currentColorUnit);
     await expect(currentColorUnit.locator('svg')).toHaveCSS('fill', value);
 
-    const customButton = getCustomButton(fillColorButton);
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+    const colorPickerPanel = getColorPickerPanel(toolbar);
 
     await expect(colorPickerPanel).toBeVisible();
 
@@ -143,14 +145,16 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
+    const colorPickerPanel = getColorPickerPanel(toolbar);
     await expect(colorPickerPanel).toBeVisible();
 
     await page.mouse.click(0, 0);
@@ -159,7 +163,7 @@ test.describe('basic functions', () => {
 
     await dragBetweenCoords(page, { x: 125, y: 75 }, { x: 175, y: 225 });
 
-    await fillColorButton.click();
+    await toolbar.getByLabel(/^Color$/).click();
 
     await expect(customButton).toBeVisible();
     await expect(colorPickerPanel).toBeHidden();
@@ -174,14 +178,16 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
+    const colorPickerPanel = getColorPickerPanel(toolbar);
     const paletteControl = getPaletteControl(colorPickerPanel);
     const hexInput = getHexInput(colorPickerPanel);
 
@@ -203,14 +209,16 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
+    const colorPickerPanel = getColorPickerPanel(toolbar);
     const hueControl = getHueControl(colorPickerPanel);
     const hexInput = getHexInput(colorPickerPanel);
 
@@ -230,14 +238,16 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
+    const colorPickerPanel = getColorPickerPanel(toolbar);
     const hexInput = getHexInput(colorPickerPanel);
 
     await hexInput.fill('fff');
@@ -266,14 +276,16 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
+    const colorPickerPanel = getColorPickerPanel(toolbar);
     const alphaControl = getAlphaControl(colorPickerPanel);
     const alphaInput = getAlphaInput(colorPickerPanel);
 
@@ -295,14 +307,16 @@ test.describe('basic functions', () => {
     const end0 = { x: 150, y: 200 };
     await addBasicShapeElement(page, start0, end0, Shape.Square);
 
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const customButton = getCustomButton(fillColorButton);
-    const colorPickerPanel = getColorPickerPanel(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+    const customButton = getCustomButton(fillColorPanel);
 
     await customButton.click();
 
+    const colorPickerPanel = getColorPickerPanel(toolbar);
     const alphaInput = getAlphaInput(colorPickerPanel);
 
     await alphaInput.fill('101');
@@ -336,8 +350,9 @@ test.describe('basic functions', () => {
 
     await triggerComponentToolbarAction(page, 'changeShapeFillColor');
 
-    const fillColorButton = getColorPickerButtonWithClass(page, 'fill-color');
-    const currentColorUnit = getCurrentColorUnitButton(fillColorButton);
+    const fillColorPanel = getColorPanelWithLabel(page, 'Fill color');
+
+    const currentColorUnit = getCurrentColorUnitButton(fillColorPanel);
 
     const value = await getCurrentColor(currentColorUnit);
     let rgba = parseStringToRgba(value);

tests/blocksuite/e2e/edgeless/connector/connector.spec.ts

@@ -146,7 +146,7 @@ test('change connector line width', async ({ page }) => {
   await addBasicConnectorElement(page, start, end);
 
   await page.mouse.click(start.x + 5, start.y);
-  await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
+  await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeColor(page, 'MediumGrey');
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
@@ -171,7 +171,7 @@ test('change connector stroke style', async ({ page }) => {
   await addBasicConnectorElement(page, start, end);
 
   await page.mouse.click(start.x + 5, start.y);
-  await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
+  await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeColor(page, 'MediumGrey');
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');

tests/blocksuite/e2e/edgeless/element-toolbar.spec.ts

@@ -75,14 +75,15 @@ test('should be hidden when resizing element', async ({ page }) => {
   const toolbar = locatorComponentToolbar(page);
   await expect(toolbar).toBeVisible();
 
-  await resizeElementByHandle(page, { x: 400, y: 300 }, 'top-left', 30);
+  await resizeElementByHandle(
+    page,
+    { x: 400, y: 300 },
+    'top-left',
+    30,
+    async () => {
+      await expect(toolbar).toBeHidden();
+    }
+  );
 
-  await page.mouse.move(450, 300);
-  await expect(toolbar).toBeEmpty();
-
-  await page.mouse.move(320, 220);
-  await expect(toolbar).toBeEmpty();
-
-  await page.mouse.up();
   await expect(toolbar).toBeVisible();
 });

tests/blocksuite/e2e/edgeless/frame/clipboard.spec.ts

@@ -107,8 +107,13 @@ test.describe('frame copy and paste', () => {
     const frameTitles = page.locator('affine-frame-title');
 
     await frameTitles.nth(0).click();
-    await page.locator('edgeless-more-button').click();
-    await page.locator('editor-menu-action', { hasText: 'Duplicate' }).click();
+
+    const moreMenu = page.getByLabel('more-menu');
+
+    await moreMenu.click();
+    await moreMenu
+      .locator('editor-menu-action', { hasText: 'Duplicate' })
+      .click();
     await pressEscape(page);
 
     await frameTitles.nth(0).click();

tests/blocksuite/e2e/edgeless/frame/frame.spec.ts

@@ -388,8 +388,8 @@ test('delete frame by click ungroup should not delete its children', async ({
 
   const frameTitle = page.locator('affine-frame-title');
   await frameTitle.click();
-  const elementToolbar = page.locator('edgeless-element-toolbar-widget');
-  const ungroupButton = elementToolbar.getByLabel('Ungroup');
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  const ungroupButton = toolbar.getByLabel('Ungroup');
   await ungroupButton.click();
 
   await assertCanvasElementsCount(page, 1);

tests/blocksuite/e2e/edgeless/group/group.spec.ts

@@ -6,6 +6,7 @@ import {
   dragBetweenViewCoords,
   edgelessCommonSetup,
   getFirstContainerId,
+  locatorComponentToolbar,
   Shape,
   shiftClickView,
   triggerComponentToolbarAction,
@@ -45,15 +46,16 @@ test.describe('group', () => {
       page,
     }) => {
       await clickView(page, [50, 50]);
-      await expect(
-        page.locator('edgeless-element-toolbar-widget')
-      ).toBeVisible();
-      await expect(page.locator('edgeless-add-group-button')).not.toBeVisible();
+      const toolbar = locatorComponentToolbar(page);
+      await expect(toolbar).toBeVisible();
+      await expect(toolbar.getByLabel(/^Group$/)).not.toBeVisible();
     });
 
     test('create button show up when multi select', async ({ page }) => {
       await selectAllByKeyboard(page);
-      await expect(page.locator('edgeless-add-group-button')).toBeVisible();
+      const toolbar = locatorComponentToolbar(page);
+      await expect(toolbar).toBeVisible();
+      await expect(toolbar.getByLabel(/^Group$/)).toBeVisible();
     });
 
     test('create group by component toolbar', async ({ page }) => {

tests/blocksuite/e2e/edgeless/lock.spec.ts

@@ -42,12 +42,10 @@ import { test } from '../utils/playwright.js';
 
 test.describe('lock', () => {
   const getButtons = (page: Page) => {
-    const elementToolbar = page.locator('edgeless-element-toolbar-widget');
+    const toolbar = page.locator('affine-toolbar-widget');
     return {
-      lock: elementToolbar.locator('edgeless-lock-button[data-locked="false"]'),
-      unlock: elementToolbar.locator(
-        'edgeless-lock-button[data-locked="true"]'
-      ),
+      lock: toolbar.getByTestId('lock'),
+      unlock: toolbar.getByTestId('unlock'),
     };
   };
 

tests/blocksuite/e2e/edgeless/note/note.spec.ts

@@ -262,7 +262,7 @@ test('duplicate note should work correctly', async ({ page }) => {
 
   await triggerComponentToolbarAction(page, 'duplicate');
   await waitNextFrame(page, 200); // wait viewport fit animation
-  const moreActionsContainer = page.locator('.more-actions-container');
+  const moreActionsContainer = page.getByLabel('more-menu').getByRole('menu');
   await expect(moreActionsContainer).toBeHidden();
 
   const noteLocator = page.locator('affine-edgeless-note');

tests/blocksuite/e2e/edgeless/note/scale.spec.ts

@@ -35,7 +35,7 @@ async function openScalePanel(page: Page, noteId: string) {
   await selectNoteInEdgeless(page, noteId);
   await triggerComponentToolbarAction(page, 'changeNoteScale');
   await waitNextFrame(page);
-  const scalePanel = page.locator('edgeless-scale-panel');
+  const scalePanel = page.locator('.scale-menu');
   await expect(scalePanel).toBeVisible();
   return scalePanel;
 }
@@ -90,7 +90,7 @@ test.describe('note scale', () => {
     const noteId = await setupAndAddNote(page);
     const scalePanel = await openScalePanel(page, noteId);
 
-    const scaleInput = scalePanel.locator('.scale-input');
+    const scaleInput = scalePanel.locator('input');
     await scaleInput.click();
     await page.keyboard.type('50');
     await page.keyboard.press('Enter');
@@ -102,7 +102,7 @@ test.describe('note scale', () => {
     const noteId = await setupAndAddNote(page);
     const scalePanel = await openScalePanel(page, noteId);
 
-    const scaleInput = scalePanel.locator('.scale-input');
+    const scaleInput = scalePanel.locator('input');
     await scaleInput.click();
     await page.keyboard.type('50');
     await selectAllByKeyboard(page);

tests/blocksuite/e2e/edgeless/shape.spec.ts

@@ -8,7 +8,6 @@ import {
   changeShapeStrokeColor,
   changeShapeStrokeStyle,
   changeShapeStrokeWidth,
-  changeShapeStyle,
   clickComponentToolbarMoreMenuButton,
   getEdgelessSelectedRect,
   locatorComponentToolbar,
@@ -347,17 +346,16 @@ test('change shape stroke width', async ({ page }) => {
   await addBasicRectShapeElement(page, start, end);
 
   await page.mouse.click(start.x + 5, start.y + 5);
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
+  await triggerComponentToolbarAction(page, 'changeShapeColor');
   await changeShapeStrokeColor(page, 'MediumMagenta');
 
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   await changeShapeStrokeWidth(page);
   await page.mouse.click(start.x + 5, start.y + 5);
   await assertEdgelessSelectedRect(page, [100, 150, 100, 100]);
 
   await waitNextFrame(page);
 
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
+  await triggerComponentToolbarAction(page, 'changeShapeColor');
 });
 
 test('change shape stroke style', async ({ page }) => {
@@ -370,14 +368,12 @@ test('change shape stroke style', async ({ page }) => {
   await addBasicRectShapeElement(page, start, end);
 
   await page.mouse.click(start.x + 5, start.y + 5);
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
+  await triggerComponentToolbarAction(page, 'changeShapeColor');
   await changeShapeStrokeColor(page, 'MediumBlue');
 
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   await changeShapeStrokeStyle(page, 'dash');
   await waitNextFrame(page);
 
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   const activeButton = locatorShapeStrokeStyleButton(page, 'dash');
   const className = await activeButton.evaluate(ele => ele.className);
   expect(className.includes(' active')).toBeTruthy();
@@ -552,12 +548,12 @@ test('change shape style', async ({ page }) => {
   await addBasicRectShapeElement(page, start, end);
 
   await page.mouse.click(start.x + 5, start.y + 5);
-  await triggerComponentToolbarAction(page, 'changeShapeStyle');
-  await changeShapeStyle(page, 'general');
+  await triggerComponentToolbarAction(page, 'changeShapeColor');
+  // The style switching feature has been removed.
+  //await changeShapeStyle(page, 'general');
   await waitNextFrame(page);
 
   await page.mouse.click(start.x + 5, start.y + 5);
-  await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
   const color = 'LightPurple';
   await changeShapeStrokeColor(page, color);
   await page.waitForTimeout(50);
@@ -638,8 +634,11 @@ test.describe('shape hit test', () => {
     await addBasicRectShapeElement(page, rect.start, rect.end);
 
     await page.mouse.click(rect.start.x + 5, rect.start.y + 5);
-    await triggerComponentToolbarAction(page, 'changeShapeFillColor');
+    // opens color picker
+    await triggerComponentToolbarAction(page, 'changeShapeColor');
     await changeShapeFillColorToTransparent(page);
+    // closes color picker
+    await triggerComponentToolbarAction(page, 'changeShapeColor');
     await page.waitForTimeout(50);
   }
 
@@ -715,15 +714,15 @@ test.describe('shape hit test', () => {
     await pressEscape(page);
     await waitNextFrame(page);
 
-    const textAlignBtn = locatorComponentToolbar(page).getByRole('button', {
+    const alignmentMenu =
+      locatorComponentToolbar(page).getByLabel('alignment-menu');
+
+    const textAlignBtn = alignmentMenu.getByRole('button', {
       name: 'Alignment',
     });
     await textAlignBtn.click();
 
-    await page
-      .locator('edgeless-align-panel')
-      .getByRole('button', { name: 'Left' })
-      .click();
+    await alignmentMenu.getByRole('button', { name: 'Left' }).click();
 
     // creates an edgeless-text
     await page.mouse.dblclick(rect.start.x + 80, rect.start.y + 20);