Merge pull request #17441 from Snuffleupagus/outlineOptionsContainer-…

…CSS-toggle Toggle the visibility of the `outlineOptionsContainer`, in the sidebar, using only CSS
mozilla · Dec 20, 2023 · 7ea0e40 · 7ea0e40
2 parents 13da916 + 8246429
commit 7ea0e40
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: {