Bug 1853121 - Use CSS nesting for Tab To Search onboarding. r=emilio

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

browser/themes/shared/urlbar-dynamic-results.css

@@ -3,34 +3,32 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
- * UrlbarProviderTabToSearch
+ * Tab To Search onboarding
  */
 
 .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner {
   min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */
   align-items: center;
-}
 
-.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap {
-  align-items: center;
+  > .urlbarView-no-wrap {
+    align-items: center;
+
+    > .urlbarView-favicon {
+      min-width: 32px;
+      height: 32px;
+      -moz-context-properties: fill;
+    }
+  }
+
+  &:not([selected]) > .urlbarView-no-wrap > .urlbarView-favicon {
+    color: var(--urlbar-popup-url-color);
+  }
 }
 
 .urlbarView-row[dynamicType=onboardTabToSearch][selected] {
   fill-opacity: 1;
 }
 
-/* Icon */
-.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
-  min-width: 32px;
-  height: 32px;
-  color: var(--urlbar-popup-url-color);
-  -moz-context-properties: fill;
-}
-
-.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-favicon {
-  color: inherit;
-}
-
 .urlbarView-dynamic-onboardTabToSearch-text-container {
   display: flex;
   flex-direction: column;
@@ -41,19 +39,31 @@
   display: flex;
   align-items: baseline;
 }
-.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container {
-  flex-wrap: wrap;
+
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container {
+  > .urlbarView-dynamic-onboardTabToSearch-first-row-container {
+    flex-wrap: wrap;
+
+    > .urlbarView-action {
+      max-width: 100%;
+      flex-basis: 100%;
+    }
+
+    > .urlbarView-title-separator {
+      visibility: collapse;
+    }
+  }
+
+  > .urlbarView-dynamic-onboardTabToSearch-description {
+    max-width: 100%;
+    flex-basis: 100%;
+  }
 }
-.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > * {
-  max-width: 100%;
-  flex-basis: 100%;
-}
-.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-title-separator {
-  visibility: collapse;
-}
-.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action {
-  color: var(--autocomplete-popup-highlight-color);
+
+.urlbarView-row[dynamicType=onboardTabToSearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action {
+  color: inherit;
 }
+
 @media (prefers-reduced-motion: no-preference) {
   .urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action[slide-in] {
     animation-name: urlbarView-action-slide-in;
@@ -65,16 +75,16 @@
 /* Description text. */
 .urlbarView-dynamic-onboardTabToSearch-description {
   margin-block-start: 2px;
-}
-.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description {
-  max-width: 100%;
-  flex-basis: 100%;
-}
-.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner:not([selected]) > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description {
-  opacity: 0.6;
+
+  .urlbarView-row[dynamicType=onboardTabToSearch]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > & {
+    opacity: 0.6;
+  }
 }
 
-/* CSS for Calculator */
+/**
+ * Calculator
+ */
+
 .urlbarView-dynamic-calculator-action {
   font-size: .85em;
   font-weight: normal;
@@ -91,7 +101,9 @@
   opacity: 0.6;
 }
 
-/** UrlbarProviderUnitConversion **/
+/**
+ * Unit Conversion
+ */
 
 .urlbarView-row[dynamicType=unitConversion][selected] {
   fill-opacity: 1;
@@ -187,7 +199,7 @@
 }
 
 /**
- * UrlbarProviderContextualSearch
+ * Site-specific search
  */
 
 .urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow] {
@@ -365,7 +377,6 @@
   }
 }
 
-
 .urlbarView-dynamic-weather-summary {
   flex-grow: 1;
   flex-shrink: 1;
@@ -445,7 +456,7 @@
   }
 }
 
-/* Addons suggestions */
+/* Add-ons */
 .urlbarView-dynamic-addons-content {
   display: grid;
   grid-template-areas: "icon header"