From e23159c41bb58028237bfeb5c86a2594170ae9a0 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 24 Sep 2024 15:37:42 +0200
Subject: [PATCH] Increase the size of the toolbar depending on the uidensity
 (bug 1171799)

---
 web/toolbar.js  | 13 ++++++++++++-
 web/viewer.css  | 14 +++++++++++++-
 web/viewer.html |  4 ++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/toolbar.js b/web/toolbar.js
index 39f6acb6fbaff..fa0d589acbe28 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -126,7 +126,18 @@ class Toolbar {
     this.reset();
   }
 
-  #updateToolbarDensity() {}
+  #updateToolbarDensity({ value }) {
+    let name = "normal";
+    switch (value) {
+      case 1:
+        name = "compact";
+        break;
+      case 2:
+        name = "touch";
+        break;
+    }
+    document.documentElement.setAttribute("data-toolbar-density", name);
+  }
 
   #setAnnotationEditorUIManager(uiManager, parentContainer) {
     const colorPicker = new ColorPicker({ uiManager });
diff --git a/web/viewer.css b/web/viewer.css
index 2f6297a9c2090..45af921f9a824 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -227,6 +227,15 @@
   }
 }
 
+html {
+  &[data-toolbar-density="compact"] {
+    --toolbar-height: 30px;
+  }
+  &[data-toolbar-density="touch"] {
+    --toolbar-height: 44px;
+  }
+}
+
 html,
 body {
   height: 100%;
@@ -1093,6 +1102,10 @@ dialog :link {
     height: 100%;
   }
 
+  .menu {
+    padding-block: 5px;
+  }
+
   .menuContainer {
     width: 100%;
     height: auto;
@@ -1103,7 +1116,6 @@ dialog :link {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    padding-block: 5px;
     overflow-y: auto;
   }
 
diff --git a/web/viewer.html b/web/viewer.html
index 0ffbb4eadc5e4..92345ad211d44 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -307,7 +307,7 @@
                     <button id="editorStampButton" class="toolbarButton" type="button" disabled="disabled" title="Add or edit images" role="radio" aria-expanded="false" aria-haspopup="true" aria-controls="editorStampParamsToolbar" tabindex="0" data-l10n-id="pdfjs-editor-stamp-button">
                       <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
                     </button>
-                    <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
+                    <div class="editorParamsToolbar hidden doorHangerRight menu" id="editorStampParamsToolbar">
                       <div class="menuContainer">
                         <button id="editorStampAddImage" class="toolbarButton labeled" type="button" title="Add image" tabindex="0" data-l10n-id="pdfjs-editor-stamp-add-image-button">
                           <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add image</span>
@@ -335,7 +335,7 @@
                   <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" title="Tools" tabindex="0" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-haspopup="true" aria-controls="secondaryToolbar">
                     <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
                   </button>
-                  <div id="secondaryToolbar" class="hidden doorHangerRight">
+                  <div id="secondaryToolbar" class="hidden doorHangerRight menu">
                     <div id="secondaryToolbarButtonContainer" class="menuContainer">
 <!--#if GENERIC-->
                       <button id="secondaryOpenFile" class="toolbarButton labeled" type="button" title="Open File" tabindex="0" data-l10n-id="pdfjs-open-file-button">