[Editor] Change the arrow direction when the dropdown is visible in the color picker (bug 1875357)

and hide the dropdown when the user click outside of the color picker.

src/display/editor/color_picker.js

@@ -20,6 +20,8 @@ import { noContextMenu } from "../display_utils.js";
 class ColorPicker {
   #boundKeyDown = this.#keyDown.bind(this);
 
+  #boundPointerDown = this.#pointerDown.bind(this);
+
   #button = null;
 
   #buttonSwatch = null;
@@ -177,18 +179,25 @@ class ColorPicker {
     }
     this.#button.addEventListener("keydown", this.#boundKeyDown);
     this.#dropdownWasFromKeyboard = event.detail === 0;
+    window.addEventListener("pointerdown", this.#boundPointerDown);
     if (this.#dropdown) {
       this.#dropdown.classList.remove("hidden");
       return;
     }
-    const root = (this.#dropdown = this.#getDropdownRoot(
-      AnnotationEditorParamsType.HIGHLIGHT_COLOR
-    ));
+    const root = (this.#dropdown = this.#getDropdownRoot());
     this.#button.append(root);
   }
 
+  #pointerDown(event) {
+    if (this.#dropdown?.contains(event.target)) {
+      return;
+    }
+    this.hideDropdown();
+  }
+
   hideDropdown() {
     this.#dropdown?.classList.add("hidden");
+    window.removeEventListener("pointerdown", this.#boundPointerDown);
   }
 
   _hideDropdownFromKeyboard() {

test/integration/highlight_editor_spec.mjs

@@ -488,4 +488,46 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Color picker and click outside", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the dropdown is hidden", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+          const sel = getEditorSelector(0);
+
+          const rect = await getSpanRectFromText(page, 1, "Abstract");
+          const x = rect.x + rect.width / 2;
+          const y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2 });
+
+          await page.waitForSelector(sel);
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlightOutline.selected`
+          );
+
+          await page.waitForSelector(`${sel} .editToolbar button.colorPicker`);
+          await page.click(`${sel} .editToolbar button.colorPicker`);
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Red"]`
+          );
+          await page.mouse.click(x, y - rect.height);
+          await page.waitForSelector(
+            `${sel} .editToolbar button.colorPicker .dropdown.hidden`
+          );
+        })
+      );
+    });
+  });
 });

web/annotation_editor_layer_builder.css

@@ -1032,6 +1032,10 @@
 
           &:has(.dropdown:not(.hidden)) {
             background-color: var(--editor-toolbar-hover-bg-color);
+
+            &::after {
+              scale: -1;
+            }
           }
 
           .dropdown {