From 5193adf1fd9d9e8281a8c9aecc9f743562982ef9 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Sun, 11 Aug 2024 18:16:51 +0200
Subject: [PATCH] Group and scope the secondary toolbar rules using 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 remaining secondary toolbar rules 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.

Co-authored-by: Calixte Denizet <calixte.denizet@gmail.com>
---
 web/viewer.css | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 7b1236e1078ae..c12cd44307a9e 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -334,8 +334,7 @@ body {
 }
 
 :is(.toolbar, .editorParamsToolbar, #sidebarContainer)
-  :is(input, button, select),
-.secondaryToolbar :is(input, button, a, select) {
+  :is(input, button, select) {
   outline: none;
   font: message-box;
 }
@@ -362,7 +361,6 @@ body {
 }
 
 #toolbarContainer,
-.secondaryToolbar,
 .editorParamsToolbar {
   position: relative;
   height: var(--toolbar-height);
@@ -447,7 +445,6 @@ body {
   transition-duration: 0s;
 }
 
-.secondaryToolbar,
 .editorParamsToolbar {
   top: var(--toolbar-height);
   position: absolute;
@@ -462,7 +459,6 @@ body {
   cursor: default;
 }
 
-.secondaryToolbar,
 .editorParamsToolbar {
   padding: 6px 0 10px;
   inset-inline-end: 4px;
@@ -1223,6 +1219,25 @@ dialog :link {
 }
 
 #secondaryToolbar {
+  background-color: var(--doorhanger-bg-color);
+  cursor: default;
+  font: message-box;
+  font-size: 12px;
+  height: auto;
+  inset-inline-end: 4px;
+  line-height: 14px;
+  margin: 4px 2px;
+  padding: 6px 0 10px;
+  position: absolute;
+  text-align: left;
+  top: var(--toolbar-height);
+  z-index: 30000;
+
+  :is(button, a) {
+    font: message-box;
+    outline: none;
+  }
+
   .toolbarButton {
     border-radius: 0;
     display: inline-block;