Group and scope the secondary toolbar button container/icon rules usi…

…ng CSS nesting The secondary toolbar 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 rules are spread over the `viewer.css` file, they share blocks with other elements and the scope of the rules is sometimes bigger than necessary. This refactoring groups all CSS rules for the secondary toolbar button container/icons together, scoped to the top-level `#secondaryToolbar` element, for improved overview and isolation. Note that this patch only intends to move the existing rules around and not change any behavior. Moreover, this patch does not move the rules for the secondary toolbar itself and the secondary toolbar buttons; those will be part of a follow-up patch and will be easier once this is in place first. Co-authored-by: Calixte Denizet <[email protected]>
mozilla · Aug 11, 2024 · 97b761d · 97b761d
1 parent e44e4db
commit 97b761d
Showing 1 changed file with 94 additions and 84 deletions.
diff --git a/web/viewer.css b/web/viewer.css
@@ -524,14 +524,6 @@ body {
   background-color: white;
 }
 
-#secondaryToolbarButtonContainer {
-  max-width: 220px;
-  min-height: 26px;
-  max-height: calc(var(--viewer-container-height) - 40px);
-  overflow-y: auto;
-  margin-bottom: -4px;
-}
-
 #editorStampParamsToolbar {
   inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px);
 }
@@ -834,10 +826,6 @@ body {
   mask-image: var(--toolbarButton-zoomIn-icon);
 }
 
-#presentationMode::before {
-  mask-image: var(--toolbarButton-presentationMode-icon);
-}
-
 #editorFreeText::before {
   mask-image: var(--toolbarButton-editorFreeText-icon);
 }
@@ -854,17 +842,11 @@ body {
   mask-image: var(--toolbarButton-editorStamp-icon);
 }
 
-:is(#print, #secondaryPrint)::before {
+#print::before {
   mask-image: var(--toolbarButton-print-icon);
 }
 
-/*#if GENERIC*/
-#secondaryOpenFile::before {
-  mask-image: var(--toolbarButton-openFile-icon);
-}
-/*#endif*/
-
-:is(#download, #secondaryDownload)::before {
+#download::before {
   mask-image: var(--toolbarButton-download-icon);
 }
 
@@ -877,10 +859,6 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   pointer-events: none;
 }
 
-#viewBookmark::before {
-  mask-image: var(--toolbarButton-bookmark-icon);
-}
-
 #viewThumbnail::before {
   mask-image: var(--toolbarButton-viewThumbnail-icon);
 }
@@ -939,66 +917,6 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   padding-inline-end: 4px;
 }
 
-#firstPage::before {
-  mask-image: var(--secondaryToolbarButton-firstPage-icon);
-}
-
-#lastPage::before {
-  mask-image: var(--secondaryToolbarButton-lastPage-icon);
-}
-
-#pageRotateCcw::before {
-  mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
-}
-
-#pageRotateCw::before {
-  mask-image: var(--secondaryToolbarButton-rotateCw-icon);
-}
-
-#cursorSelectTool::before {
-  mask-image: var(--secondaryToolbarButton-selectTool-icon);
-}
-
-#cursorHandTool::before {
-  mask-image: var(--secondaryToolbarButton-handTool-icon);
-}
-
-#scrollPage::before {
-  mask-image: var(--secondaryToolbarButton-scrollPage-icon);
-}
-
-#scrollVertical::before {
-  mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
-}
-
-#scrollHorizontal::before {
-  mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
-}
-
-#scrollWrapped::before {
-  mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
-}
-
-#spreadNone::before {
-  mask-image: var(--secondaryToolbarButton-spreadNone-icon);
-}
-
-#spreadOdd::before {
-  mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
-}
-
-#spreadEven::before {
-  mask-image: var(--secondaryToolbarButton-spreadEven-icon);
-}
-
-#documentProperties::before {
-  mask-image: var(--secondaryToolbarButton-documentProperties-icon);
-}
-
-#imageAltTextSettings::before {
-  mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon);
-}
-
 .verticalToolbarSeparator {
   display: block;
   margin: 5px 2px;
@@ -1345,6 +1263,98 @@ dialog :link {
   z-index: 50000; /* should be higher than anything else in PDF.js! */
 }
 
+#secondaryToolbar {
+  #secondaryToolbarButtonContainer {
+    margin-bottom: -4px;
+    max-height: calc(var(--viewer-container-height) - 40px);
+    max-width: 220px;
+    min-height: 26px;
+    overflow-y: auto;
+
+    /*#if GENERIC*/
+    #secondaryOpenFile::before {
+      mask-image: var(--toolbarButton-openFile-icon);
+    }
+    /*#endif*/
+
+    #secondaryPrint::before {
+      mask-image: var(--toolbarButton-print-icon);
+    }
+
+    #secondaryDownload::before {
+      mask-image: var(--toolbarButton-download-icon);
+    }
+
+    #presentationMode::before {
+      mask-image: var(--toolbarButton-presentationMode-icon);
+    }
+
+    #viewBookmark::before {
+      mask-image: var(--toolbarButton-bookmark-icon);
+    }
+
+    #firstPage::before {
+      mask-image: var(--secondaryToolbarButton-firstPage-icon);
+    }
+
+    #lastPage::before {
+      mask-image: var(--secondaryToolbarButton-lastPage-icon);
+    }
+
+    #pageRotateCcw::before {
+      mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
+    }
+
+    #pageRotateCw::before {
+      mask-image: var(--secondaryToolbarButton-rotateCw-icon);
+    }
+
+    #cursorSelectTool::before {
+      mask-image: var(--secondaryToolbarButton-selectTool-icon);
+    }
+
+    #cursorHandTool::before {
+      mask-image: var(--secondaryToolbarButton-handTool-icon);
+    }
+
+    #scrollPage::before {
+      mask-image: var(--secondaryToolbarButton-scrollPage-icon);
+    }
+
+    #scrollVertical::before {
+      mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
+    }
+
+    #scrollHorizontal::before {
+      mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
+    }
+
+    #scrollWrapped::before {
+      mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
+    }
+
+    #spreadNone::before {
+      mask-image: var(--secondaryToolbarButton-spreadNone-icon);
+    }
+
+    #spreadOdd::before {
+      mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
+    }
+
+    #spreadEven::before {
+      mask-image: var(--secondaryToolbarButton-spreadEven-icon);
+    }
+
+    #imageAltTextSettings::before {
+      mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon);
+    }
+
+    #documentProperties::before {
+      mask-image: var(--secondaryToolbarButton-documentProperties-icon);
+    }
+  }
+}
+
 #findbar {
   background-color: var(--toolbar-bg-color);
   cursor: default;