diff options
Diffstat (limited to 'browser/components/shopping/content')
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" |