Bug 1893193 - re-implement icons in <div> based shopping message bars r=shopping-reviewers,niklas

This patch ensures that the expected icons still display for shopping message bars even though they are no longer using a <message-bar> element under the hood.

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

browser/components/shopping/content/shopping-message-bar.css

@@ -34,45 +34,37 @@ button {
   margin-inline-start: 0;
 }
 
-message-bar::part(container) {
-  align-items: start;
-  padding: 0.5rem 0.75rem;
+.shopping-message-bar {
+  display: flex;
+  align-items: center;
+  padding-block: 0.5rem;
   gap: 0.75rem;
+
+  &.analysis-in-progress {
+    align-items: start;
+  }
+
+  .icon {
+    --message-bar-icon-url: url("chrome://global/skin/icons/info-filled.svg");
+    width: var(--icon-size-default);
+    height: var(--icon-size-default);
+    flex-shrink: 0;
+    appearance: none;
+    -moz-context-properties: fill, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+    color: var(--icon-color);
+    background-image: var(--message-bar-icon-url);
+  }
 }
 
-message-bar::part(icon) {
-  padding: 0;
-}
-
-:host([type=analysis-in-progress]) message-bar::part(icon),
-:host([type=reanalysis-in-progress]) message-bar::part(icon) {
-  border: 1px solid var(--icon-color);
-  border-radius: 50%;
-}
-
-:host([type=analysis-in-progress]) message-bar::part(icon)::after,
-:host([type=reanalysis-in-progress]) message-bar::part(icon)::after {
+:host([type=analysis-in-progress]) .icon,
+:host([type=reanalysis-in-progress]) .icon {
   --message-bar-icon-url: conic-gradient(var(--icon-color-information) var(--analysis-progress-pcent, 0%), transparent var(--analysis-progress-pcent, 0%));
+  border: 1px solid var(--icon-color);
   border-radius: 50%;
   margin-block: 1px 0;
   margin-inline: 1px 0;
-  width: calc(var(--icon-size) - 2px);
-  height: calc(var(--icon-size) - 2px);
-}
-
-:host([type=reanalysis-in-progress]) message-bar::part(container),
-:host([type=stale]) message-bar::part(container) {
-  align-items: center;
-  background-color: transparent;
-  padding: 0;
-}
-
-:host([type=thank-you-for-feedback]) message-bar::part(icon) {
-  --message-bar-icon-url: url("chrome://global/skin/icons/check-filled.svg");
-}
-
-:host([type=thank-you-for-feedback]) message-bar::part(container) {
-  text-align: start;
-  align-items: center;
-  gap: 12px;
+  width: calc(var(--icon-size-default) - 2px);
+  height: calc(var(--icon-size-default) - 2px);
 }

browser/components/shopping/content/shopping-message-bar.mjs

@@ -95,7 +95,8 @@ class ShoppingMessageBar extends MozLitElement {
   }
 
   staleWarningTemplate() {
-    return html`<div>
+    return html`<div class="shopping-message-bar">
+      <span class="icon"></span>
       <article id="message-bar-container" aria-labelledby="header">
         <span
           data-l10n-id="shopping-message-bar-warning-stale-analysis-message-2"
@@ -164,10 +165,12 @@ class ShoppingMessageBar extends MozLitElement {
 
   analysisInProgressTemplate() {
     return html`<div
+      class="shopping-message-bar analysis-in-progress"
       style=${styleMap({
         "--analysis-progress-pcent": `${this.progress}%`,
       })}
     >
+      <span class="icon"></span>
       <article
         id="message-bar-container"
         aria-labelledby="header"
@@ -189,11 +192,13 @@ class ShoppingMessageBar extends MozLitElement {
 
   reanalysisInProgressTemplate() {
     return html`<div
+      class="shopping-message-bar"
       id="reanalysis-in-progress-message"
       style=${styleMap({
         "--analysis-progress-pcent": `${this.progress}%`,
       })}
     >
+      <span class="icon"></span>
       <article
         id="message-bar-container"
         aria-labelledby="header"