summaryrefslogtreecommitdiffstats
path: root/browser/components/shopping/content
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-06-12 05:35:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-06-12 05:35:29 +0000
commit59203c63bb777a3bacec32fb8830fba33540e809 (patch)
tree58298e711c0ff0575818c30485b44a2f21bf28a0 /browser/components/shopping/content
parentAdding upstream version 126.0.1. (diff)
downloadfirefox-59203c63bb777a3bacec32fb8830fba33540e809.tar.xz
firefox-59203c63bb777a3bacec32fb8830fba33540e809.zip
Adding upstream version 127.0.upstream/127.0
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/shopping/content')
-rw-r--r--browser/components/shopping/content/shopping-message-bar.css56
-rw-r--r--browser/components/shopping/content/shopping-message-bar.mjs18
-rw-r--r--browser/components/shopping/content/shopping.html1
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"