Bug 1867610 - Using nested CSS in browser/extensions/formautofill/content/formautofill.css r=credential-management-reviewers,desktop-theme-reviewers,mtigley,Itiel

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

browser/extensions/formautofill/content/formautofill.css

@@ -2,43 +2,46 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-profile"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-footer"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-clear-button"] {
-  display: block;
-  margin: 0;
-  padding: 0;
-  height: auto;
-  min-height: auto;
-}
+#PopupAutoComplete {
+  &[resultstyles~="autofill-profile"] {
+    min-width: 150px !important;
+  }
 
-/* Treat @collpased="true" as display: none similar to how it is for XUL elements.
- * https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values */
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-profile"][collapsed="true"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-footer"][collapsed="true"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"][collapsed="true"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-clear-button"][collapsed="true"] {
-  display: none;
-}
+  &[resultstyles~="autofill-insecureWarning"] {
+    min-width: 200px !important;
+  }
 
-#PopupAutoComplete[resultstyles~="autofill-profile"] {
-  min-width: 150px !important;
-}
+  > richlistbox > richlistitem {
+    &[originaltype="autofill-profile"],
+    &[originaltype="autofill-footer"],
+    &[originaltype="autofill-insecureWarning"],
+    &[originaltype="autofill-clear-button"] {
+      display: block;
+      margin: 0;
+      padding: 0;
+      height: auto;
+      min-height: auto;
 
-#PopupAutoComplete[resultstyles~="autofill-insecureWarning"] {
-  min-width: 200px !important;
-}
+      /* Treat @collpased="true" as display: none similar to how it is for XUL elements.
+      * https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values */
+      &[collapsed="true"] {
+        display: none;
+      }
+    }
 
-#PopupAutoComplete > richlistbox > richlistitem[disabled="true"] {
-  opacity: 0.5;
+    &[disabled="true"] {
+      opacity: 0.5;
+    }
+  }
 }
 
 /* Form Autofill Doorhanger */
+
 #autofill-address-notification popupnotificationcontent > .desc-message-box,
 #autofill-credit-card-notification popupnotificationcontent > .desc-message-box {
   margin-block-end: 12px;
 }
+
 #autofill-credit-card-notification popupnotificationcontent > .desc-message-box > image {
   -moz-context-properties: fill;
   fill: currentColor;
@@ -46,6 +49,7 @@
   height: auto;
   list-style-image: url(chrome://formautofill/content/icon-credit-card-generic.svg);
 }
+
 #autofill-address-notification popupnotificationcontent > .desc-message-box > description,
 #autofill-address-notification popupnotificationcontent > .desc-message-box > additional-description,
 #autofill-credit-card-notification popupnotificationcontent > .desc-message-box > description {