Merge pull request #17827 from calixteman/divider

[Editor] Add a divider before the show all button

web/annotation_editor_layer_builder.css

@@ -1251,8 +1251,33 @@
 
   #editorHighlightVisibility {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
+    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;
+    }
   }
 }

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>
+              <div class="divider"></div>
-              <button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
+              <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>