Merge pull request #20748 from calixteman/add_file_button

Make the 'add file' button not hidden but just not visible in order to fix the layout

web/app.js

@@ -604,6 +604,7 @@ const PDFViewerApplication = {
         enableHWA,
         enableSplitMerge: AppOptions.get("enableSplitMerge"),
         manageMenu: appConfig.viewsManager.manageMenu,
+        addFileButton: appConfig.viewsManager.viewsManagerAddFileButton,
       });
       renderingQueue.setThumbnailViewer(this.pdfThumbnailViewer);
     }

web/pdf_thumbnail_viewer.js

@@ -70,7 +70,8 @@ const SPACE_FOR_DRAG_MARKER_WHEN_NO_NEXT_ELEMENT = 15;
  *   The default value is `false`.
  * @property {Object} [manageMenu] - The menu elements to manage saving edited
  *   PDF.
- */
+ * @property {HTMLButtonElement} addFileButton - The button that opens a dialog
+ *   to add a PDF file to merge with the current one.
 
 /**
  * Viewer control to display thumbnails for pages in a PDF document.
@@ -141,6 +142,7 @@ class PDFThumbnailViewer {
     enableHWA,
     enableSplitMerge,
     manageMenu,
+    addFileButton,
   }) {
     this.scrollableContainer = container.parentElement;
     this.container = container;
@@ -152,6 +154,8 @@ class PDFThumbnailViewer {
     this.pageColors = pageColors || null;
     this.enableHWA = enableHWA || false;
     this.#enableSplitMerge = enableSplitMerge || false;
+    // TODO: uncomment when the "add file" feature is implemented.
+    // this.#addFileButton = addFileButton;
 
     if (this.#enableSplitMerge && manageMenu) {
       const { button, menu, copy, cut, delete: del, saveAs } = manageMenu;

web/views_manager.css

@@ -247,10 +247,11 @@
     background-color: var(--header-bg);
 
     .viewsManagerLabel {
-      flex: 1 0 0;
+      flex: 0;
       color: var(--text-color);
       text-align: center;
       height: fit-content;
+      width: fit-content;
       user-select: none;
 
       font: menu;
@@ -338,6 +339,8 @@
       }
 
       #viewsManagerAddFileButton {
+        visibility: hidden;
+
         background: var(--button-no-bg);
         width: 32px;
         height: 32px;

web/views_manager.js

@@ -89,6 +89,7 @@ class ViewsManager extends Sidebar {
       outlinesView,
       attachmentsView,
       layersView,
+      viewsManagerAddFileButton,
       viewsManagerCurrentOutlineButton,
       viewsManagerSelectorButton,
       viewsManagerSelectorOptions,
@@ -134,6 +135,7 @@ class ViewsManager extends Sidebar {
     this.attachmentsView = attachmentsView;
     this.layersView = layersView;
 
+    this.viewsManagerAddFileButton = viewsManagerAddFileButton;
     this.viewsManagerCurrentOutlineButton = viewsManagerCurrentOutlineButton;
     this.viewsManagerHeaderLabel = viewsManagerHeaderLabel;
     this.viewsManagerStatus = viewsManagerStatus;
@@ -251,6 +253,7 @@ class ViewsManager extends Sidebar {
     }
 
     this.viewsManagerStatus.hidden = view !== SidebarView.THUMBS;
+    this.viewsManagerAddFileButton.hidden = view !== SidebarView.THUMBS;
     this.viewsManagerCurrentOutlineButton.hidden = view !== SidebarView.OUTLINE;
     this.viewsManagerHeaderLabel.setAttribute(
       "data-l10n-id",