Bug 1864277 - Use nested CSS on primaryToolbar.css. r=vineet

Differential Revision: https://phabricator.services.mozilla.com/D193356

--HG--
extra : rebase_source : 4d3c0048368d9455c17e763437fbb3c6090e8ad2

mail/themes/shared/mail/primaryToolbar.css

@@ -8,10 +8,8 @@
 .contentTabToolbox {
   appearance: none;
   background-color: var(--toolbar-bgcolor);
-}
 
-.mail-toolbox:-moz-lwtheme,
+  &:-moz-lwtheme {
-.contentTabToolbox:-moz-lwtheme {
     color: var(--toolbar-color, inherit);
     background-color: var(--lwt-accent-color);
     background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent),
@@ -19,6 +17,7 @@
                       linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
                       var(--lwt-header-image, none);
     background-position: right top, var(--lwt-background-alignment);
+  }
 }
 
 .mail-toolbox > toolbar {
@@ -26,131 +25,31 @@
   counter-reset: smallicons;
 }
 
-#button-getmsg {
-  list-style-image: var(--icon-cloud-download);
-}
-
-#button-newmsg {
-  list-style-image: var(--icon-pencil);
-}
-
-#button-address {
-  list-style-image: var(--icon-address-book);
-}
-
-#button-reply {
-  list-style-image: var(--icon-reply);
-}
-
-#button-replyall {
-  list-style-image: var(--icon-reply-all);
-}
-
-#button-replylist {
-  list-style-image: var(--icon-reply-list);
-}
-
-#button-forward {
-  list-style-image: var(--icon-forward);
-}
-
-#button-redirect {
-  list-style-image: var(--icon-redirect);
-}
-
-.delete-button {
-  list-style-image: var(--icon-trash);
-}
-
-.junk-button {
-  list-style-image: var(--icon-spam);
-}
-
-#button-print {
-  list-style-image: var(--icon-print);
-}
-
-#button-stop {
-  list-style-image: var(--icon-close);
-}
-
-#button-file {
-  list-style-image: var(--icon-file);
-}
-
-#button-nextUnread {
-  list-style-image: var(--icon-nav-down-unread);
-}
-
-#button-previousUnread {
-  list-style-image: var(--icon-nav-up-unread);
-}
-
-#button-mark {
-  list-style-image: var(--icon-unread);
-}
-
-#button-tag {
-  list-style-image: var(--icon-tag);
-}
-
-#button-goback {
-  list-style-image: var(--icon-nav-back);
-}
-
-#button-goforward {
-  list-style-image: var(--icon-nav-forward);
-}
-
-#button-compact {
-  list-style-image: var(--icon-compress);
-}
-
-#button-archive {
-  list-style-image: var(--icon-archive);
-}
-
-#button-chat {
-  -moz-context-properties: fill, stroke, fill-opacity;
-}
-
-#button-nextMsg {
-  list-style-image: var(--icon-nav-down);
-}
-
-#button-previousMsg {
-  list-style-image: var(--icon-nav-up);
-}
-
-#qfb-show-filter-bar {
-  list-style-image: var(--icon-filter);
-}
-
-#button-showconversation {
-  list-style-image: var(--icon-conversation);
-}
-
-#button-addons {
-  list-style-image: var(--icon-extension);
-}
-
 .button-appmenu {
   list-style-image: var(--icon-app-menu);
   min-width: 35px !important;
   margin-inline: 4px;
-}
 
-.button-appmenu[badge-status] {
+  &[badge-status] {
     list-style-image: var(--icon-app-menu-badged);
+  }
+
+  & .toolbarbutton-text {
+    display: none;
+  }
+
+  toolbar[mode="text"] & .toolbarbutton-icon {
+    display: flex;
+  }
 }
 
 #button-chat[unreadMessages="true"] {
   fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
   stroke: var(--toolbarbutton-icon-fill-attention);
-}
 
-toolbar[mode="text"] > #button-chat[unreadMessages="true"] {
+  toolbar[mode="text"] > & {
     color: var(--toolbarbutton-icon-fill-attention);
+  }
 }
 
 #button-newMsgPopup .menuitem-iconic {
@@ -163,14 +62,6 @@ toolbar[mode="text"] > #button-chat[unreadMessages="true"] {
   display: none;
 }
 
-.button-appmenu .toolbarbutton-text {
-  display: none;
-}
-
-toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
-  display: flex;
-}
-
 #folder-location-container {
   flex: 2 2;
 }
@@ -186,11 +77,11 @@ toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
 
 #palette-box #button-chat {
   background: var(--icon-chat) no-repeat center;
-}
 
-/* Hide the toolbarbutton-icon when the button is removed from the toolbar */
+  /* Hide the toolbarbutton-icon when the button is removed from the toolbar */
-#palette-box #button-chat > stack > .toolbarbutton-icon {
+  & > stack > .toolbarbutton-icon {
     display: none;
+  }
 }
 
 /* ::::: message notification bar style rules ::::: */

mail/themes/windows/mail/primaryToolbar.css

@@ -9,24 +9,6 @@
   appearance: none;
 }
 
-@media not (prefers-contrast) {
-  #menubar-items > #mail-menubar > menu[disabled="true"] {
-    background-color: transparent;
-  }
-
-  #menubar-items > #mail-menubar >
-    menu:not([disabled="true"])[_moz-menuactive="true"] {
-    background-color: hsla(0, 0%, 0%, .12);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    #menubar-items > #mail-menubar >
-      menu:not([disabled="true"])[_moz-menuactive="true"] {
-      background-color: hsla(0, 0%, 100%, .2);
-    }
-  }
-}
-
 .mail-toolbox::after,
 .contentTabToolbox::after {
   content: "";
@@ -38,13 +20,3 @@
 .mail-toolbox > toolbar:not([type="menubar"]) {
   padding: 1px;
 }
-
-/* ::::: toolbar buttons on tabbar toolbar ::::: */
-
-@media not (prefers-contrast) {
-  #navigation-toolbox > #toolbar-menubar {
-    background-color: transparent;
-    padding-top: 0;
-    padding-bottom: 0 !important;
-  }
-}