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);

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -284,7 +284,7 @@ export function locatorEdgelessComponentToolButton(
     more: 'More',
   }[type];
   const button = page
-    .locator('edgeless-element-toolbar-widget editor-icon-button')
+    .locator('affine-toolbar-widget editor-toolbar editor-icon-button')
     .filter({
       hasText: text,
     });
@@ -592,7 +592,8 @@ export async function resizeElementByHandle(
     | 'top-right'
     | 'bottom-right'
     | 'bottom-left' = 'top-left',
-  steps = 1
+  steps = 1,
+  beforeMouseUp?: () => Promise<void>
 ) {
   const handle = page.locator(`.handle[aria-label="${corner}"] .resize`);
   const box = await handle.boundingBox();
@@ -604,6 +605,7 @@ export async function resizeElementByHandle(
     { x: box.x + delta.x + offset, y: box.y + delta.y + offset },
     {
       steps,
+      beforeMouseUp,
     }
   );
 }
@@ -757,14 +759,11 @@ export function locatorNoteDisplayModeButton(
   page: Page,
   mode: NoteDisplayMode
 ) {
-  return page
-    .locator('edgeless-change-note-button')
-    .locator('note-display-mode-panel')
-    .locator(`.item.${mode}`);
+  return page.locator('note-display-mode-panel').locator(`.item.${mode}`);
 }
 
 export function locatorScalePanelButton(page: Page, scale: number) {
-  return page.locator('edgeless-scale-panel').locator(`.scale-${scale}`);
+  return page.locator('affine-size-dropdown-menu').getByLabel(String(scale));
 }
 
 export async function changeNoteDisplayMode(page: Page, mode: NoteDisplayMode) {
@@ -796,9 +795,9 @@ export async function updateExistedBrushElementSize(
 }
 
 export async function openComponentToolbarMoreMenu(page: Page) {
-  const btn = page.locator(
-    'edgeless-element-toolbar-widget edgeless-more-button editor-menu-button'
-  );
+  const btn = page
+    .locator('affine-toolbar-widget editor-toolbar')
+    .getByLabel('more-menu');
 
   await btn.click();
 }
@@ -1020,13 +1019,11 @@ export async function deleteAllConnectors(page: Page) {
 }
 
 export function locatorComponentToolbar(page: Page) {
-  return page.locator('edgeless-element-toolbar-widget');
+  return page.locator('affine-toolbar-widget editor-toolbar');
 }
 
 export function locatorComponentToolbarMoreButton(page: Page) {
-  const moreButton = locatorComponentToolbar(page).locator(
-    'edgeless-more-button'
-  );
+  const moreButton = locatorComponentToolbar(page).getByLabel('more-menu');
   return moreButton;
 }
 type Action =
@@ -1037,10 +1034,10 @@ type Action =
   | 'copyAsPng'
   | 'changeNoteColor'
   | 'changeShapeStyle'
+  | 'changeShapeColor'
   | 'changeShapeFillColor'
   | 'changeShapeStrokeColor'
   | 'changeShapeStrokeStyles'
-  | 'changeConnectorStrokeColor'
   | 'changeConnectorStrokeStyles'
   | 'changeConnectorShape'
   | 'addFrame'
@@ -1075,11 +1072,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Bring to Front',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Bring to Front',
+      });
       await actionButton.click();
       break;
     }
@@ -1087,11 +1082,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Bring Forward',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Bring Forward',
+      });
       await actionButton.click();
       break;
     }
@@ -1099,11 +1092,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Send Backward',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Send Backward',
+      });
       await actionButton.click();
       break;
     }
@@ -1111,11 +1102,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Send to Back',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Send to Back',
+      });
       await actionButton.click();
       break;
     }
@@ -1123,11 +1112,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Copy as PNG',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Copy as PNG',
+      });
       await actionButton.click();
       break;
     }
@@ -1135,11 +1122,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Frame Section',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Frame Section',
+      });
       await actionButton.click();
       break;
     }
@@ -1147,68 +1132,48 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Duplicate',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Duplicate',
+      });
       await actionButton.click();
       break;
     }
-    case 'changeShapeFillColor': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-shape-button')
-        .getByRole('button', { name: 'Fill color' });
-      await button.click();
-      break;
-    }
+    case 'changeShapeColor':
+    case 'changeShapeFillColor':
     case 'changeShapeStrokeColor':
     case 'changeShapeStrokeStyles': {
       const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-shape-button')
-        .getByRole('button', { name: 'Border style' });
+        .locator('edgeless-shape-color-picker')
+        .getByLabel(/^Color$/);
       await button.click();
       break;
     }
     case 'changeShapeStyle': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-shape-button')
-        .getByRole('button', { name: /^Style$/ });
-      await button.click();
-      break;
-    }
-    case 'changeConnectorStrokeColor': {
-      const button = page
-        .locator('edgeless-change-connector-button')
-        .getByRole('button', { name: 'Stroke style' });
+      const button = locatorComponentToolbar(page).getByLabel(/^Style$/);
       await button.click();
       break;
     }
     case 'changeConnectorStrokeStyles': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-connector-button')
-        .getByRole('button', { name: 'Stroke style' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Stroke style',
+      });
       await button.click();
       break;
     }
     case 'changeConnectorShape': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-connector-button')
-        .getByRole('button', { name: 'Shape' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Shape',
+      });
       await button.click();
       break;
     }
     case 'addFrame': {
-      const button = locatorComponentToolbar(page).locator(
-        'edgeless-add-frame-button'
-      );
+      const button = locatorComponentToolbar(page).getByLabel(/^Frame$/);
       await button.click();
       break;
     }
     case 'addGroup': {
-      const button = locatorComponentToolbar(page).locator(
-        'edgeless-add-group-button'
-      );
+      const button = locatorComponentToolbar(page).getByLabel(/^Group$/);
       await button.click();
       break;
     }
@@ -1223,67 +1188,64 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Group Section',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Group Section',
+      });
       await actionButton.click();
       break;
     }
     case 'ungroup': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-group-button')
-        .getByRole('button', { name: 'Ungroup' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Ungroup',
+      });
       await button.click();
       break;
     }
     case 'renameGroup': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-group-button')
-        .getByRole('button', { name: 'Rename' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Rename',
+      });
       await button.click();
       break;
     }
     case 'releaseFromGroup': {
-      const button = locatorComponentToolbar(page).locator(
-        'edgeless-release-from-group-button'
-      );
+      const button =
+        locatorComponentToolbar(page).getByLabel('Release from group');
       await button.click();
       break;
     }
     case 'changeNoteColor': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-note-button')
-        .getByRole('button', { name: 'Background' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Background',
+      });
       await button.click();
       break;
     }
     case 'changeNoteDisplayMode': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-note-button')
-        .getByRole('button', { name: 'Mode' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Mode',
+      });
       await button.click();
       break;
     }
     case 'changeNoteSlicerSetting': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-note-button')
-        .getByRole('button', { name: 'Slicer' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Slicer',
+      });
       await button.click();
       break;
     }
     case 'changeNoteScale': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-note-button')
-        .getByRole('button', { name: 'Scale' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Scale',
+      });
       await button.click();
       break;
     }
     case 'autoSize': {
-      const button = locatorComponentToolbar(page)
-        .locator('edgeless-change-note-button')
-        .getByRole('button', { name: 'Size' });
+      const button = locatorComponentToolbar(page).getByRole('button', {
+        name: 'Size',
+      });
       await button.click();
       break;
     }
@@ -1305,11 +1267,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Turn into linked doc',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Turn into linked doc',
+      });
       await actionButton.click();
       break;
     }
@@ -1317,11 +1277,9 @@ export async function triggerComponentToolbarAction(
       const moreButton = locatorComponentToolbarMoreButton(page);
       await moreButton.click();
 
-      const actionButton = moreButton
-        .locator('.more-actions-container editor-menu-action')
-        .filter({
-          hasText: 'Create linked doc',
-        });
+      const actionButton = moreButton.locator('editor-menu-action').filter({
+        hasText: 'Create linked doc',
+      });
       await actionButton.click();
       break;
     }
@@ -1356,24 +1314,18 @@ export async function triggerComponentToolbarAction(
       break;
     }
     case 'autoArrange': {
-      const button = locatorComponentToolbar(page).locator(
-        'edgeless-align-button'
-      );
+      const toolbar = locatorComponentToolbar(page);
+      const button = toolbar.getByLabel('Align objects');
       await button.click();
-      const arrange = button.locator('editor-icon-button').filter({
-        hasText: 'Auto arrange',
-      });
+      const arrange = toolbar.getByLabel('Auto arrange');
       await arrange.click();
       break;
     }
     case 'autoResize': {
-      const button = locatorComponentToolbar(page).locator(
-        'edgeless-align-button'
-      );
+      const toolbar = locatorComponentToolbar(page);
+      const button = toolbar.getByLabel('Align objects');
       await button.click();
-      const resize = button.locator('editor-icon-button').filter({
-        hasText: 'Resize & Align',
-      });
+      const resize = toolbar.getByLabel('Resize & Align');
       await resize.click();
       break;
     }
@@ -1382,7 +1334,7 @@ export async function triggerComponentToolbarAction(
 
 export async function changeEdgelessNoteBackground(page: Page, label: string) {
   const colorButton = page
-    .locator('edgeless-change-note-button')
+    .locator('edgeless-color-picker-button')
     .locator('edgeless-color-panel')
     .locator(`.color-unit[aria-label="${label}"]`);
   await colorButton.click();
@@ -1390,18 +1342,16 @@ export async function changeEdgelessNoteBackground(page: Page, label: string) {
 
 export async function changeShapeFillColor(page: Page, label: string) {
   const colorButton = page
-    .locator('edgeless-change-shape-button')
-    .locator('edgeless-color-picker-button.fill-color')
-    .locator('edgeless-color-panel')
+    .locator('edgeless-shape-color-picker')
+    .locator('edgeless-color-panel[aria-label="Fill color"]')
     .locator(`.color-unit[aria-label="${label}"]`);
   await colorButton.click({ force: true });
 }
 
 export async function changeShapeFillColorToTransparent(page: Page) {
   const colorButton = page
-    .locator('edgeless-change-shape-button')
-    .locator('edgeless-color-picker-button.fill-color')
-    .locator('edgeless-color-panel')
+    .locator('edgeless-shape-color-picker')
+    .locator('edgeless-color-panel[aria-label="Fill color"]')
     .locator('edgeless-color-custom-button');
   await colorButton.click({ force: true });
 
@@ -1417,9 +1367,8 @@ export async function changeShapeFillColorToTransparent(page: Page) {
 
 export async function changeShapeStrokeColor(page: Page, color: string) {
   const colorButton = page
-    .locator('edgeless-change-shape-button')
-    .locator('edgeless-color-picker-button.border-style')
-    .locator('edgeless-color-panel')
+    .locator('edgeless-shape-color-picker')
+    .locator('edgeless-color-panel[aria-label="Border color"]')
     .locator(`.color-unit[aria-label="${color}"]`);
   await colorButton.click();
 }
@@ -1446,10 +1395,13 @@ export async function resizeConnectorByStartCapitalHandler(
 }
 
 export function getEdgelessLineWidthPanel(page: Page) {
-  return page
-    .locator('edgeless-change-shape-button')
-    .locator('edgeless-line-width-panel')
-    .locator('.line-width-panel');
+  return (
+    page
+      .locator('affine-toolbar-widget editor-toolbar')
+      // TODO(@fundon): remove ` edgeless-line-width-panel`
+      .locator('affine-edgeless-line-width-panel')
+      .locator('.line-width-panel')
+  );
 }
 export async function changeShapeStrokeWidth(page: Page) {
   const lineWidthPanel = getEdgelessLineWidthPanel(page);
@@ -1468,7 +1420,7 @@ export function locatorShapeStrokeStyleButton(
   mode: 'solid' | 'dash' | 'none'
 ) {
   return page
-    .locator('edgeless-change-shape-button')
+    .locator('affine-toolbar-widget editor-toolbar')
     .locator(`.line-style-button.mode-${mode}`);
 }
 
@@ -1485,7 +1437,7 @@ export function locatorShapeStyleButton(
   style: 'general' | 'scribbled'
 ) {
   return page
-    .locator('edgeless-change-shape-button')
+    .locator('affine-toolbar-widget editor-toolbar')
     .locator('edgeless-shape-style-panel')
     .getByRole('button', { name: style });
 }
@@ -1499,8 +1451,7 @@ export async function changeShapeStyle(
 }
 
 export async function changeConnectorStrokeColor(page: Page, color: string) {
-  const colorButton = page
-    .locator('edgeless-change-connector-button')
+  const colorButton = locatorComponentToolbar(page)
     .locator('edgeless-color-panel')
     .getByLabel(color);
   await colorButton.click();
@@ -1510,10 +1461,12 @@ export function locatorConnectorStrokeWidthButton(
   page: Page,
   buttonPosition: number
 ) {
-  return page
-    .locator('edgeless-change-connector-button')
-    .locator(`edgeless-line-width-panel`)
-    .locator(`.line-width-button:nth-child(${buttonPosition})`);
+  return (
+    locatorComponentToolbar(page)
+      // TODO(@fundon): remove redundant components
+      .locator('affine-edgeless-line-width-panel')
+      .locator(`.line-width-button:nth-child(${buttonPosition})`)
+  );
 }
 export async function changeConnectorStrokeWidth(
   page: Page,
@@ -1527,9 +1480,9 @@ export function locatorConnectorStrokeStyleButton(
   page: Page,
   mode: 'solid' | 'dash' | 'none'
 ) {
-  return page
-    .locator('edgeless-change-connector-button')
-    .locator(`.line-style-button.mode-${mode}`);
+  return locatorComponentToolbar(page).locator(
+    `.line-style-button.mode-${mode}`
+  );
 }
 export async function changeConnectorStrokeStyle(
   page: Page,

tests/blocksuite/e2e/utils/asserts.ts

@@ -1197,7 +1197,7 @@ export async function assertConnectorStrokeColor(
   color: string
 ) {
   const colorButton = page
-    .locator('edgeless-change-connector-button')
+    .locator('affine-toolbar-widget editor-toolbar')
     .locator('edgeless-color-panel')
     .locator(`.color-unit[aria-label="${label}"]`)
     .locator('svg');