From 973248708600361d09aa8062a17ea77f51f233ec Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Fri, 22 Mar 2024 21:40:13 +0100
Subject: [PATCH] [Editor] Add a divider before the show all button

I overlooked it when implementing the toggle button.
---
 web/annotation_editor_layer_builder.css | 30 +++++++++++++++++++++++--
 web/viewer.html                         |  7 ++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index a05357aba77126..769f717c068da6 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -1217,6 +1217,7 @@
 
       @media (prefers-color-scheme: dark) {
         --example-color: #80808e;
+        --divider-color: #8f8f9d;
       }
 
       @media screen and (forced-colors: active) {
@@ -1249,8 +1250,33 @@
 
   #editorHighlightVisibility {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     align-self: stretch;
+
+    .divider {
+      --divider-color: #f0f0f4;
+
+      @media (prefers-color-scheme: dark) {
+        --divider-color: #8f8f9d;
+      }
+
+      @media screen and (forced-colors: active) {
+        --divider-color: CanvasText;
+      }
+
+      margin-block: 4px;
+      width: 100%;
+      height: 1px;
+      background-color: var(--divider-color);
+    }
+
+    .toggler {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+    }
   }
 }
diff --git a/web/viewer.html b/web/viewer.html
index 002c647ef62508..963818a1d2051a 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -185,8 +185,11 @@
               </div>
             </div>
             <div id="editorHighlightVisibility">
-              <label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
-              <button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
+              <div class="divider"></div>
+              <div class="toggler">
+                <label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
+                <button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
+              </div>
             </div>
           </div>
         </div>