From 82464294b9845d159b390686111c6d534cfeb030 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Tue, 19 Dec 2023 10:01:16 +0100
Subject: [PATCH] Toggle the visibility of the `outlineOptionsContainer`, in
 the sidebar, using only CSS

Now that `:has()` is available we no longer need to use JavaScript to toggle the visibility of this DOM element.
---
 web/pdf_sidebar.js | 9 ---------
 web/viewer.css     | 8 ++++++++
 web/viewer.html    | 2 +-
 web/viewer.js      | 3 ---
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js
index 8c3e53bd17fbe..d61c2bc518699 100644
--- a/web/pdf_sidebar.js
+++ b/web/pdf_sidebar.js
@@ -59,8 +59,6 @@ const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
  *   the attachments are placed.
  * @property {HTMLDivElement} layersView - The container in which
  *   the layers are placed.
- * @property {HTMLDivElement} outlineOptionsContainer - The container in which
- *   the outline view-specific option button(s) are placed.
  * @property {HTMLButtonElement} currentOutlineItemButton - The button used to
  *   find the current outline item.
  */
@@ -107,7 +105,6 @@ class PDFSidebar {
     this.attachmentsView = elements.attachmentsView;
     this.layersView = elements.layersView;
 
-    this._outlineOptionsContainer = elements.outlineOptionsContainer;
     this._currentOutlineItemButton = elements.currentOutlineItemButton;
 
     this.eventBus = eventBus;
@@ -227,12 +224,6 @@ class PDFSidebar {
       this.layersView
     );
 
-    // Finally, update view-specific CSS classes.
-    this._outlineOptionsContainer.classList.toggle(
-      "hidden",
-      view !== SidebarView.OUTLINE
-    );
-
     if (forceOpen && !this.isOpen) {
       this.open();
       return; // Opening will trigger rendering and dispatch the event.
diff --git a/web/viewer.css b/web/viewer.css
index 626d141f88150..43325ad7d63f9 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -1301,6 +1301,14 @@ a:focus > .thumbnail > .thumbnailImage,
   color: var(--treeitem-hover-color);
 }
 
+#outlineOptionsContainer {
+  display: none;
+
+  #sidebarContainer:has(#outlineView:not(.hidden)) & {
+    display: inherit;
+  }
+}
+
 .dialogButton {
   width: auto;
   margin: 3px 4px 2px !important;
diff --git a/web/viewer.html b/web/viewer.html
index 4eaf14bf67b66..5c201db032e4c 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -113,7 +113,7 @@
           </div>
 
           <div id="toolbarSidebarRight">
-            <div id="outlineOptionsContainer" class="hidden">
+            <div id="outlineOptionsContainer">
               <div class="verticalToolbarSeparator"></div>
 
               <button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
diff --git a/web/viewer.js b/web/viewer.js
index 4bead0b0289c3..65fb35928b41e 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -115,9 +115,6 @@ function getViewerConfiguration() {
       attachmentsView: document.getElementById("attachmentsView"),
       layersView: document.getElementById("layersView"),
       // View-specific options
-      outlineOptionsContainer: document.getElementById(
-        "outlineOptionsContainer"
-      ),
       currentOutlineItemButton: document.getElementById("currentOutlineItem"),
     },
     findBar: {