From 77b2a456d108f5f32517e8a84e235def669e341b 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 | 29 +++++++++++++++++++++++--
 web/viewer.html                         |  7 ++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 6d96de291..eb0ea0885 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -1251,8 +1251,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: #d7d7db;
+
+      @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 002c647ef..963818a1d 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -185,8 +185,11 @@ See https://github.com/adobe-type-tools/cmap-resources
               </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>