Group and scope the findbar rules using CSS nesting

The findbar CSS rules predate the general availability of CSS nesting,
which makes them more difficult to understand and change safely. The
primary issues are that the findbar rules are spread all over the
`viewer.css` file, they share blocks with non-findbar elements and the
scope of the rules is sometimes bigger than necessary.

This refactoring groups all findbar-related CSS rules together, scoped
to the top-level `#findbar` element, for improved overview and
isolation. Note that this patch only intends to move the existing rules
around and not change any behavior yet, but it does lay the foundation
for e.g. making the findbar respect the `browser.uidensity` preference
in Firefox in follow-up work.

Co-authored-by: Calixte Denizet <[email protected]>

Author: timvandermeij

web/viewer.css

@@ -333,7 +333,7 @@ body {
   font: message-box;
 }
 
-:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
+:is(.toolbar, .editorParamsToolbar, #sidebarContainer)
   :is(input, button, select),
 .secondaryToolbar :is(input, button, a, select) {
   outline: none;
@@ -362,7 +362,6 @@ body {
 }
 
 #toolbarContainer,
-.findbar,
 .secondaryToolbar,
 .editorParamsToolbar {
   position: relative;
@@ -448,7 +447,6 @@ body {
   transition-duration: 0s;
 }
 
-.findbar,
 .secondaryToolbar,
 .editorParamsToolbar {
   top: var(--toolbar-height);
@@ -464,64 +462,6 @@ body {
   cursor: default;
 }
 
-.findbar {
-  inset-inline-start: 64px;
-  min-width: 300px;
-  background-color: var(--toolbar-bg-color);
-}
-.findbar > div {
-  height: var(--toolbar-height);
-}
-.findbar > div#findbarInputContainer {
-  margin-inline-end: 4px;
-}
-.findbar.wrapContainers > div,
-.findbar.wrapContainers > div#findbarMessageContainer > * {
-  clear: both;
-}
-.findbar.wrapContainers > div#findbarMessageContainer {
-  height: auto;
-}
-
-.findbar input[type="checkbox"] {
-  pointer-events: none;
-}
-
-.findbar label {
-  user-select: none;
-}
-
-.findbar label:hover,
-.findbar input:focus-visible + label {
-  color: var(--toggled-btn-color);
-  background-color: var(--button-hover-color);
-}
-
-.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
-  background-color: var(--toggled-btn-bg-color) !important;
-  color: var(--toggled-btn-color);
-}
-
-#findInput {
-  width: 200px;
-
-  /*#if !MOZCENTRAL*/
-  &::-webkit-input-placeholder {
-    color: rgb(191 191 191);
-  }
-  /*#endif*/
-  &::placeholder {
-    font-style: normal;
-  }
-  .loadingInput:has(> &[data-status="pending"])::after {
-    display: block;
-    visibility: visible;
-  }
-  &[data-status="notFound"] {
-    background-color: rgb(255 102 102);
-  }
-}
-
 .secondaryToolbar,
 .editorParamsToolbar {
   padding: 6px 0 10px;
@@ -654,22 +594,6 @@ body {
   margin-inline-end: -9px;
 }
 
-#findResultsCount {
-  background-color: rgb(217 217 217);
-  color: rgb(82 82 82);
-  text-align: center;
-  padding: 4px 5px;
-  margin: 5px;
-}
-
-#findMsg[data-status="notFound"] {
-  font-weight: bold;
-}
-
-:is(#findResultsCount, #findMsg):empty {
-  display: none;
-}
-
 #toolbarViewerMiddle {
   position: absolute;
   left: 50%;
@@ -689,8 +613,7 @@ body {
 #toolbarViewerMiddle > *,
 #toolbarViewerRight > *,
 #toolbarSidebarLeft *,
-#toolbarSidebarRight *,
-.findbar * {
+#toolbarSidebarRight * {
   position: relative;
   float: var(--inline-start);
 }
@@ -895,14 +818,6 @@ body {
   transform: scaleX(var(--dir-factor));
 }
 
-#findPrevious::before {
-  mask-image: var(--findbarButton-previous-icon);
-}
-
-#findNext::before {
-  mask-image: var(--findbarButton-next-icon);
-}
-
 #previous::before {
   mask-image: var(--toolbarButton-pageUp-icon);
 }
@@ -1430,6 +1345,144 @@ dialog :link {
   z-index: 50000; /* should be higher than anything else in PDF.js! */
 }
 
+#findbar {
+  background-color: var(--toolbar-bg-color);
+  cursor: default;
+  font: message-box;
+  font-size: 12px;
+  height: auto;
+  inset-inline-start: 64px;
+  line-height: 14px;
+  margin: 4px 2px;
+  min-width: 300px;
+  padding: 0 4px;
+  position: absolute;
+  text-align: left;
+  top: var(--toolbar-height);
+  z-index: 30000;
+
+  * {
+    float: var(--inline-start);
+    position: relative;
+  }
+
+  > div {
+    height: var(--toolbar-height);
+  }
+
+  button {
+    font: message-box;
+    outline: none;
+  }
+
+  input {
+    font: message-box;
+    outline: none;
+
+    &:focus-visible + label {
+      background-color: var(--button-hover-color);
+      color: var(--toggled-btn-color);
+    }
+
+    &[type="checkbox"] {
+      pointer-events: none;
+
+      &:checked + .toolbarLabel {
+        background-color: var(--toggled-btn-bg-color) !important;
+        color: var(--toggled-btn-color);
+      }
+    }
+  }
+
+  label {
+    user-select: none;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+      color: var(--toggled-btn-color);
+    }
+  }
+
+  #findbarInputContainer {
+    margin-inline-end: 4px;
+
+    #findInput {
+      width: 200px;
+
+      /*#if !MOZCENTRAL*/
+      &::-webkit-input-placeholder {
+        color: rgb(191 191 191);
+      }
+      /*#endif*/
+
+      &::placeholder {
+        font-style: normal;
+      }
+
+      .loadingInput:has(> &[data-status="pending"])::after {
+        display: block;
+        visibility: visible;
+      }
+
+      &[data-status="notFound"] {
+        background-color: rgb(255 102 102);
+      }
+    }
+
+    #findPrevious::before {
+      mask-image: var(--findbarButton-previous-icon);
+    }
+
+    #findNext::before {
+      mask-image: var(--findbarButton-next-icon);
+    }
+  }
+
+  #findbarMessageContainer {
+    #findResultsCount {
+      background-color: rgb(217 217 217);
+      color: rgb(82 82 82);
+      margin: 5px;
+      padding: 4px 5px;
+      text-align: center;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    #findMsg {
+      &[data-status="notFound"] {
+        font-weight: bold;
+      }
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  &.wrapContainers {
+    > div {
+      clear: both;
+    }
+
+    > #findbarMessageContainer {
+      height: auto;
+
+      > * {
+        clear: both;
+      }
+    }
+  }
+
+  @media all and (max-width: 690px) {
+    & {
+      inset-inline-start: 34px;
+    }
+  }
+}
+
 @page {
   margin: 0;
 }
@@ -1531,9 +1584,6 @@ dialog :link {
   .toolbarButtonSpacer {
     width: 0;
   }
-  .findbar {
-    inset-inline-start: 34px;
-  }
 }
 
 @media all and (max-width: 560px) {