From fb90ef7b28911537e91b5c27c5500599c3bc651e Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Tue, 19 Apr 2022 13:43:24 +0200
Subject: [PATCH] [GENERIC viewer] Simplify the styling of the previous/next
 findbar buttons

The styling of the previous/next-buttons and the findInput, with the elements being "glued" together, was supposed to mimic the styling used in the Firefox *browser* findbar. However, after the most recent re-styling of the Firefox browser UI these elements are now visually separated.
Hence it makes sense, as far as I'm concerned, to try and follow this styling for the findbar used in the GENERIC viewer. One benefit of doing this is that we get more consistent styling, since the buttons now look/behave identically in both the main toolbar and the findbar. Additionally this also simplifies the CSS a bit, since a lot of the existing findbar-specific rules can be removed.
---
 web/viewer.css  | 41 +++++------------------------------------
 web/viewer.html |  4 ++--
 2 files changed, 7 insertions(+), 38 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index f667f5b98..3d504b5e4 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -51,7 +51,6 @@
   --field-color: rgba(6, 6, 6, 1);
   --field-bg-color: rgba(255, 255, 255, 1);
   --field-border-color: rgba(187, 187, 188, 1);
-  --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
   --treeitem-color: rgba(0, 0, 0, 0.8);
   --treeitem-hover-color: rgba(0, 0, 0, 0.9);
   --treeitem-selected-color: rgba(0, 0, 0, 0.9);
@@ -135,7 +134,6 @@
     --field-color: rgba(250, 250, 250, 1);
     --field-bg-color: rgba(64, 64, 68, 1);
     --field-border-color: rgba(115, 115, 115, 1);
-    --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
     --treeitem-color: rgba(255, 255, 255, 0.8);
     --treeitem-hover-color: rgba(255, 255, 255, 0.9);
     --treeitem-selected-color: rgba(255, 255, 255, 0.9);
@@ -444,6 +442,9 @@ select {
 .findbar > div {
   height: 32px;
 }
+.findbar > div#findbarInputContainer {
+  margin-inline-end: 4px;
+}
 .findbar.wrapContainers > div,
 .findbar.wrapContainers > div#findbarMessageContainer > * {
   clear: both;
@@ -452,30 +453,6 @@ select {
   height: auto;
 }
 
-.findbar .splitToolbarButton {
-  margin-top: 3px;
-  margin-inline: 0 5px;
-}
-
-.findbar .splitToolbarButton > .toolbarButton {
-  background-color: var(--findbar-nextprevious-btn-bg-color);
-  border-radius: 0;
-  height: 26px;
-  border-top: 1px solid var(--field-border-color);
-  border-bottom: 1px solid var(--field-border-color);
-}
-
-.findbar .splitToolbarButton > .toolbarButton::before {
-  top: 5px;
-}
-
-.findbar .splitToolbarButton > .findNext {
-  width: 29px;
-  border-start-end-radius: 2px;
-  border-end-end-radius: 2px;
-  border-inline-end: 1px solid var(--field-border-color);
-}
-
 .findbar input[type="checkbox"] {
   pointer-events: none;
 }
@@ -497,8 +474,6 @@ select {
 
 #findInput {
   width: 200px;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
 }
 #findInput::-webkit-input-placeholder {
   color: rgba(191, 191, 191, 1);
@@ -686,12 +661,6 @@ select {
   margin: 4px 0;
 }
 
-.findbar .splitToolbarButtonSeparator {
-  background-color: var(--field-border-color);
-  margin: 0;
-  padding: 13px 0;
-}
-
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
@@ -841,11 +810,11 @@ select {
   transform: scaleX(var(--dir-factor));
 }
 
-.toolbarButton.findPrevious::before {
+#findPrevious.toolbarButton::before {
   mask-image: var(--findbarButton-previous-icon);
 }
 
-.toolbarButton.findNext::before {
+#findNext.toolbarButton::before {
   mask-image: var(--findbarButton-next-icon);
 }
 
diff --git a/web/viewer.html b/web/viewer.html
index d33a36855..c820ac244 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -118,11 +118,11 @@ See https://github.com/adobe-type-tools/cmap-resources
           <div id="findbarInputContainer">
             <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input" aria-invalid="false">
             <div class="splitToolbarButton">
-              <button id="findPrevious" class="toolbarButton findPrevious" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
+              <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
                 <span data-l10n-id="find_previous_label">Previous</span>
               </button>
               <div class="splitToolbarButtonSeparator"></div>
-              <button id="findNext" class="toolbarButton findNext" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
+              <button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
                 <span data-l10n-id="find_next_label">Next</span>
               </button>
             </div>