diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl index 8e99f1083..2f7d94b92 100644 --- a/l10n/en-US/viewer.ftl +++ b/l10n/en-US/viewer.ftl @@ -324,6 +324,10 @@ pdfjs-highlight-floating-button1 = .title = Highlight .aria-label = Highlight pdfjs-highlight-floating-button-label = Highlight +pdfjs-comment-floating-button = + .title = Comment + .aria-label = Comment +pdfjs-comment-floating-button-label = Comment pdfjs-editor-signature-button = .title = Add signature pdfjs-editor-signature-button-label = Add signature diff --git a/src/display/editor/toolbar.js b/src/display/editor/toolbar.js index 5e428596b..7fada5354 100644 --- a/src/display/editor/toolbar.js +++ b/src/display/editor/toolbar.js @@ -123,7 +123,7 @@ class EditorToolbar { const { editorType, _uiManager } = this.#editor; const button = document.createElement("button"); - button.className = "delete"; + button.classList.add("basic", "deleteButton"); button.tabIndex = 0; button.setAttribute("data-l10n-id", EditorToolbar.#l10nRemove[editorType]); this.#addListenersToElement(button); @@ -214,7 +214,7 @@ class EditorToolbar { } } -class HighlightToolbar { +class FloatingToolbar { #buttons = null; #toolbar = null; @@ -237,7 +237,25 @@ class HighlightToolbar { buttons.className = "buttons"; editToolbar.append(buttons); - this.#addHighlightButton(); + if (this.#uiManager.hasCommentManager()) { + this.#makeButton( + "commentButton", + `pdfjs-comment-floating-button`, + "pdfjs-comment-floating-button-label", + () => { + this.#uiManager.commentSelection("floating_button"); + } + ); + } + + this.#makeButton( + "highlightButton", + `pdfjs-highlight-floating-button1`, + "pdfjs-highlight-floating-button-label", + () => { + this.#uiManager.highlightSelection("floating_button"); + } + ); return editToolbar; } @@ -279,26 +297,20 @@ class HighlightToolbar { this.#toolbar.remove(); } - #addHighlightButton() { + #makeButton(buttonClass, l10nId, labelL10nId, clickHandler) { const button = document.createElement("button"); - button.className = "highlightButton"; + button.classList.add("basic", buttonClass); button.tabIndex = 0; - button.setAttribute("data-l10n-id", `pdfjs-highlight-floating-button1`); + button.setAttribute("data-l10n-id", l10nId); const span = document.createElement("span"); button.append(span); span.className = "visuallyHidden"; - span.setAttribute("data-l10n-id", "pdfjs-highlight-floating-button-label"); + span.setAttribute("data-l10n-id", labelL10nId); const signal = this.#uiManager._signal; button.addEventListener("contextmenu", noContextMenu, { signal }); - button.addEventListener( - "click", - () => { - this.#uiManager.highlightSelection("floating_button"); - }, - { signal } - ); + button.addEventListener("click", clickHandler, { signal }); this.#buttons.append(button); } } -export { EditorToolbar, HighlightToolbar }; +export { EditorToolbar, FloatingToolbar }; diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js index 200498f7a..541585dd7 100644 --- a/src/display/editor/tools.js +++ b/src/display/editor/tools.js @@ -34,7 +34,7 @@ import { PixelsPerInch, stopEvent, } from "../display_utils.js"; -import { HighlightToolbar } from "./toolbar.js"; +import { FloatingToolbar } from "./toolbar.js"; function bindEvents(obj, element, names) { for (const name of names) { @@ -631,7 +631,7 @@ class AnnotationEditorUIManager { #highlightWhenShiftUp = false; - #highlightToolbar = null; + #floatingToolbar = null; #idManager = new IdManager(); @@ -908,8 +908,8 @@ class AnnotationEditorUIManager { this.#altTextManager?.destroy(); this.#commentManager?.destroy(); this.#signatureManager?.destroy(); - this.#highlightToolbar?.hide(); - this.#highlightToolbar = null; + this.#floatingToolbar?.hide(); + this.#floatingToolbar = null; this.#mainHighlightColorPicker?.destroy(); this.#mainHighlightColorPicker = null; if (this.#focusMainContainerTimeoutId) { @@ -1157,7 +1157,7 @@ class AnnotationEditorUIManager { return null; } - highlightSelection(methodOfCreation = "") { + highlightSelection(methodOfCreation = "", comment = false) { const selection = document.getSelection(); if (!selection || selection.isCollapsed) { return; @@ -1175,7 +1175,7 @@ class AnnotationEditorUIManager { const layer = this.#getLayerForTextLayer(textLayer); const isNoneMode = this.#mode === AnnotationEditorType.NONE; const callback = () => { - layer?.createAndAddNewEditor({ x: 0, y: 0 }, false, { + const editor = layer?.createAndAddNewEditor({ x: 0, y: 0 }, false, { methodOfCreation, boxes, anchorNode, @@ -1187,6 +1187,9 @@ class AnnotationEditorUIManager { if (isNoneMode) { this.showAllEditors("highlight", true, /* updateButton = */ true); } + if (comment) { + editor?.editComment(); + } }; if (isNoneMode) { this.switchToMode(AnnotationEditorType.HIGHLIGHT, callback); @@ -1195,7 +1198,11 @@ class AnnotationEditorUIManager { callback(); } - #displayHighlightToolbar() { + commentSelection(methodOfCreation = "") { + this.highlightSelection(methodOfCreation, /* comment */ true); + } + + #displayFloatingToolbar() { const selection = document.getSelection(); if (!selection || selection.isCollapsed) { return; @@ -1206,8 +1213,8 @@ class AnnotationEditorUIManager { if (!boxes) { return; } - this.#highlightToolbar ||= new HighlightToolbar(this); - this.#highlightToolbar.show(textLayer, boxes, this.direction === "ltr"); + this.#floatingToolbar ||= new FloatingToolbar(this); + this.#floatingToolbar.show(textLayer, boxes, this.direction === "ltr"); } /** @@ -1241,7 +1248,7 @@ class AnnotationEditorUIManager { const selection = document.getSelection(); if (!selection || selection.isCollapsed) { if (this.#selectedTextNode) { - this.#highlightToolbar?.hide(); + this.#floatingToolbar?.hide(); this.#selectedTextNode = null; this.#dispatchUpdateStates({ hasSelectedText: false, @@ -1258,7 +1265,7 @@ class AnnotationEditorUIManager { const textLayer = anchorElement.closest(".textLayer"); if (!textLayer) { if (this.#selectedTextNode) { - this.#highlightToolbar?.hide(); + this.#floatingToolbar?.hide(); this.#selectedTextNode = null; this.#dispatchUpdateStates({ hasSelectedText: false, @@ -1267,7 +1274,7 @@ class AnnotationEditorUIManager { return; } - this.#highlightToolbar?.hide(); + this.#floatingToolbar?.hide(); this.#selectedTextNode = anchorNode; this.#dispatchUpdateStates({ hasSelectedText: true, @@ -1315,7 +1322,7 @@ class AnnotationEditorUIManager { if (this.#mode === AnnotationEditorType.HIGHLIGHT) { this.highlightSelection(methodOfCreation); } else if (this.#enableHighlightFloatingButton) { - this.#displayHighlightToolbar(); + this.#displayFloatingToolbar(); } } @@ -1606,6 +1613,9 @@ class AnnotationEditorUIManager { case "highlightSelection": this.highlightSelection("context_menu"); break; + case "commentSelection": + this.commentSelection("context_menu"); + break; } } diff --git a/test/integration/freetext_editor_spec.mjs b/test/integration/freetext_editor_spec.mjs index 21d800622..df7301df1 100644 --- a/test/integration/freetext_editor_spec.mjs +++ b/test/integration/freetext_editor_spec.mjs @@ -2591,7 +2591,7 @@ describe("FreeText Editor", () => { await commit(page); // Delete it in using the button. - await page.click(`${editorSelector} button.delete`); + await page.click(`${editorSelector} button.deleteButton`); await page.waitForFunction( sel => !document.querySelector(sel), {}, @@ -2644,7 +2644,7 @@ describe("FreeText Editor", () => { await selectAll(page); // Delete it in using the button. - await page.focus(`${editorSelector} button.delete`); + await page.focus(`${editorSelector} button.deleteButton`); await page.keyboard.press("Enter"); await page.waitForFunction( sel => !document.querySelector(sel), @@ -2885,8 +2885,8 @@ describe("FreeText Editor", () => { await commit(page); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); @@ -2935,8 +2935,8 @@ describe("FreeText Editor", () => { await commit(page); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( @@ -3271,8 +3271,8 @@ describe("FreeText Editor", () => { await commit(page); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -3299,8 +3299,8 @@ describe("FreeText Editor", () => { await commit(page); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForFunction(() => { @@ -3332,8 +3332,8 @@ describe("FreeText Editor", () => { await commit(page); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs index 426b65a4b..4a5977747 100644 --- a/test/integration/highlight_editor_spec.mjs +++ b/test/integration/highlight_editor_spec.mjs @@ -1168,9 +1168,9 @@ describe("Highlight Editor", () => { const editorSelector = getEditorSelector(0); await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); - await page.focus(`${editorSelector} button.delete`); + await page.focus(`${editorSelector} button.deleteButton`); await page.keyboard.press(" "); await waitForSerialized(page, 0); @@ -1565,8 +1565,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await kbUndo(page); @@ -1611,8 +1611,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); @@ -1673,8 +1673,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( @@ -2022,8 +2022,8 @@ describe("Highlight Editor", () => { const editorSelector = getEditorSelector(0); await page.waitForSelector(editorSelector); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 1); const serialized = await getSerialized(page); @@ -2204,8 +2204,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2234,8 +2234,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2260,8 +2260,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2286,8 +2286,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2314,8 +2314,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2337,8 +2337,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2360,8 +2360,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2383,8 +2383,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2407,8 +2407,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2430,8 +2430,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); const pdfPath = path.join(__dirname, "../pdfs/basicapi.pdf"); @@ -2490,8 +2490,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForFunction(() => { @@ -2529,8 +2529,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(getEditorSelector(1)); await selectAll(page); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForFunction(() => { @@ -2567,8 +2567,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2583,8 +2583,8 @@ describe("Highlight Editor", () => { `.page[data-page-number = "1"] svg.highlight[fill = "#FFFF00"]` ); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -2614,8 +2614,8 @@ describe("Highlight Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); diff --git a/test/integration/ink_editor_spec.mjs b/test/integration/ink_editor_spec.mjs index 9badf78d3..3a205cec9 100644 --- a/test/integration/ink_editor_spec.mjs +++ b/test/integration/ink_editor_spec.mjs @@ -345,8 +345,8 @@ describe("Ink Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await kbUndo(page); @@ -389,8 +389,8 @@ describe("Ink Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); @@ -446,8 +446,8 @@ describe("Ink Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( @@ -897,8 +897,8 @@ describe("Ink Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -931,8 +931,8 @@ describe("Ink Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForFunction(() => { @@ -970,8 +970,8 @@ describe("Ink Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -1101,8 +1101,8 @@ describe("Ink Editor", () => { await dragAndDrop(page, editorSelector, [[0, -30]], /* steps = */ 10); await waitForSerialized(page, 2); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 1); await page.waitForSelector("#editorUndoBar", { visible: true }); diff --git a/test/integration/stamp_editor_spec.mjs b/test/integration/stamp_editor_spec.mjs index 5f551cb4c..23c309a29 100644 --- a/test/integration/stamp_editor_spec.mjs +++ b/test/integration/stamp_editor_spec.mjs @@ -183,8 +183,8 @@ describe("Stamp Editor", () => { await waitForImage(page, editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await kbUndo(page); @@ -677,8 +677,8 @@ describe("Stamp Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await kbUndo(page); @@ -709,8 +709,8 @@ describe("Stamp Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); @@ -754,8 +754,8 @@ describe("Stamp Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( @@ -1532,8 +1532,8 @@ describe("Stamp Editor", () => { let serialized = await getSerialized(page); expect(serialized).withContext(`In ${browserName}`).toEqual([]); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 1); serialized = await getSerialized(page); @@ -1606,8 +1606,8 @@ describe("Stamp Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); @@ -1631,8 +1631,8 @@ describe("Stamp Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForFunction(() => { @@ -1657,8 +1657,8 @@ describe("Stamp Editor", () => { await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${editorSelector} button.delete`); - await page.click(`${editorSelector} button.delete`); + await page.waitForSelector(`${editorSelector} button.deleteButton`); + await page.click(`${editorSelector} button.deleteButton`); await waitForSerialized(page, 0); await page.waitForSelector("#editorUndoBar", { visible: true }); diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index f8a96aba6..f0a76e934 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -321,41 +321,33 @@ margin-inline: 2px; } - .highlightButton { + .basic { width: var(--editor-toolbar-height); &::before { content: ""; + mask-repeat: no-repeat; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 100%; + height: 100%; + } + + &:hover::before { + background-color: var(--editor-toolbar-hover-fg-color); + } + + &.highlightButton::before { mask-image: var(--editor-toolbar-highlight-image); - mask-repeat: no-repeat; - mask-position: center; - display: inline-block; - background-color: var(--editor-toolbar-fg-color); - width: 100%; - height: 100%; } - &:hover::before { - background-color: var(--editor-toolbar-hover-fg-color); + &.commentButton::before { + mask-image: var(--editor-toolbar-comment-edit-image); } - } - .delete { - width: var(--editor-toolbar-height); - - &::before { - content: ""; + &.deleteButton::before { mask-image: var(--editor-toolbar-delete-image); - mask-repeat: no-repeat; - mask-position: center; - display: inline-block; - background-color: var(--editor-toolbar-fg-color); - width: 100%; - height: 100%; - } - - &:hover::before { - background-color: var(--editor-toolbar-hover-fg-color); } }