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

@@ -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.

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;

web/viewer.html

@@ -113,7 +113,7 @@ See https://github.com/adobe-type-tools/cmap-resources
           </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">

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: {