From a1bf12537c7181effb101a8c4c328d9d0e9cd6ed Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Thu, 18 Jan 2024 22:38:42 +0100
Subject: [PATCH] [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         | 15 ++++++--
 test/integration/highlight_editor_spec.mjs | 42 ++++++++++++++++++++++
 web/annotation_editor_layer_builder.css    |  4 +++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/display/editor/color_picker.js b/src/display/editor/color_picker.js
index f01c1d52e1378..c1d6b9cae72db 100644
--- a/src/display/editor/color_picker.js
+++ b/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() {
diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs
index e8e39bf6b0d95..d8ea512bc072d 100644
--- a/test/integration/highlight_editor_spec.mjs
+++ b/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`
+          );
+        })
+      );
+    });
+  });
 });
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index a82628d0bcef9..232886e41b069 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/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 {