summaryrefslogtreecommitdiffstats
path: root/browser/components/shopping
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
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')
-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
-rw-r--r--browser/components/shopping/metrics.yaml10
-rw-r--r--browser/components/shopping/tests/browser/browser_inprogress_analysis.js5
5 files changed, 49 insertions, 41 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"
diff --git a/browser/components/shopping/metrics.yaml b/browser/components/shopping/metrics.yaml
index b1869e859a..61be0c2985 100644
--- a/browser/components/shopping/metrics.yaml
+++ b/browser/components/shopping/metrics.yaml
@@ -29,6 +29,8 @@ shopping.settings:
send_in_pings:
- metrics
telemetry_mirror: SHOPPING_NIMBUS_DISABLED
+ no_lint:
+ - GIFFT_NON_PING_LIFETIME
component_opted_out:
type: boolean
@@ -49,6 +51,8 @@ shopping.settings:
send_in_pings:
- metrics
telemetry_mirror: SHOPPING_COMPONENT_OPTED_OUT
+ no_lint:
+ - GIFFT_NON_PING_LIFETIME
has_onboarded:
type: boolean
@@ -70,6 +74,8 @@ shopping.settings:
send_in_pings:
- metrics
telemetry_mirror: SHOPPING_HAS_ONBOARDED
+ no_lint:
+ - GIFFT_NON_PING_LIFETIME
disabled_ads:
type: boolean
@@ -90,6 +96,8 @@ shopping.settings:
send_in_pings:
- metrics
telemetry_mirror: SHOPPING_DISABLED_ADS
+ no_lint:
+ - GIFFT_NON_PING_LIFETIME
auto_open_user_disabled:
type: boolean
@@ -110,6 +118,8 @@ shopping.settings:
send_in_pings:
- metrics
telemetry_mirror: SHOPPING_AUTO_OPEN_USER_DISABLED
+ no_lint:
+ - GIFFT_NON_PING_LIFETIME
shopping:
surface_displayed:
diff --git a/browser/components/shopping/tests/browser/browser_inprogress_analysis.js b/browser/components/shopping/tests/browser/browser_inprogress_analysis.js
index d2d1ddeb8c..67d0b54be2 100644
--- a/browser/components/shopping/tests/browser/browser_inprogress_analysis.js
+++ b/browser/components/shopping/tests/browser/browser_inprogress_analysis.js
@@ -127,8 +127,9 @@ add_task(async function test_in_progress_analysis_stale() {
"shopping-message-bar should have progress"
);
- let messageBarEl =
- shoppingMessageBarEl?.shadowRoot.querySelector("message-bar");
+ let messageBarEl = shoppingMessageBarEl?.shadowRoot.getElementById(
+ "reanalysis-in-progress-message"
+ );
is(
messageBarEl?.getAttribute("style"),
"--analysis-progress-pcent: 50%;",