Adding upstream version 127.0.upstream/127.0

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

3 files changed, 36 insertions, 39 deletions

diff --git a/browser/components/shopping/content/shopping-message-bar.css b/browser/components/shopping/content/shopping-message-bar.css
index f88b18be45..fe3320310f 100644
--- a/browser/components/shopping/content/shopping-message-bar.css
+++ b/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;
-}
 
-message-bar::part(icon) {
-  padding: 0;
-}
+  &.analysis-in-progress {
+    align-items: start;
+  }
 
-: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%;
+  .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);
+  }
 }
 
-: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);
 }
diff --git a/browser/components/shopping/content/shopping-message-bar.mjs b/browser/components/shopping/content/shopping-message-bar.mjs
index d6ec9c0888..c8d6510d5e 100644
--- a/browser/components/shopping/content/shopping-message-bar.mjs
+++ b/browser/components/shopping/content/shopping-message-bar.mjs
@@ -95,7 +95,8 @@ class ShoppingMessageBar extends MozLitElement {
   }
 
   staleWarningTemplate() {
-    return html`<message-bar>
+    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"
@@ -107,7 +108,7 @@ class ShoppingMessageBar extends MozLitElement {
           @click=${this.onClickAnalysisButton}
         ></button>
       </article>
-    </message-bar>`;
+    </div>`;
   }
 
   genericErrorTemplate() {
@@ -163,11 +164,13 @@ class ShoppingMessageBar extends MozLitElement {
   }
 
   analysisInProgressTemplate() {
-    return html`<message-bar
+    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"
@@ -184,15 +187,18 @@ class ShoppingMessageBar extends MozLitElement {
           data-l10n-id="shopping-message-bar-analysis-in-progress-message2"
         ></span>
       </article>
-    </message-bar>`;
+    </div>`;
   }
 
   reanalysisInProgressTemplate() {
-    return html`<message-bar
+    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"
@@ -206,7 +212,7 @@ class ShoppingMessageBar extends MozLitElement {
           })}"
         ></span>
       </article>
-    </message-bar>`;
+    </div>`;
   }
 
   pageNotSupportedTemplate() {
diff --git a/browser/components/shopping/content/shopping.html b/browser/components/shopping/content/shopping.html
index 1c5d627869..8c5da71a96 100644
--- a/browser/components/shopping/content/shopping.html
+++ b/browser/components/shopping/content/shopping.html
@@ -30,7 +30,6 @@
       href="chrome://browser/content/shopping/shopping-page.css"
     />
 
-    <script src="chrome://global/content/elements/message-bar.js"></script>
     <script
       type="module"
       src="chrome://browser/content/shopping/onboarding.mjs"