Adding upstream version 110.0.1.upstream/110.0.1upstream

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

10 files changed, 1119 insertions, 0 deletions

diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css
new file mode 100644
index 0000000000..bbe678fde9
--- /dev/null
+++ b/browser/themes/shared/downloads/allDownloadsView.inc.css
@@ -0,0 +1,98 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import "chrome://browser/skin/downloads/progressmeter.css";
+@import "chrome://browser/skin/downloads/download-blockedStates.css";
+
+/*** View and outer controls ***/
+
+#downloadsListBox {
+  margin: 0;
+}
+
+/*** List items ***/
+
+#downloadsListBox > richlistitem {
+  min-height: 4.5em;
+}
+
+.downloadTypeIcon {
+  margin: 8px 13px;
+  width: 32px;
+  height: 32px;
+}
+
+.downloadTarget {
+  margin: 0;
+}
+
+.downloadDetails {
+  opacity: 0.7;
+  font-size: 95%;
+  /* Use calc() to keep the height consistent with .downloadTarget, so that the
+     progress bar can be vertically centered. */
+  margin: 4px 0 calc(1em / 0.95 - 1em);
+}
+
+.downloadDetailsHover,
+.downloadDetailsButtonHover {
+  display: none;
+}
+
+.downloadButton {
+  appearance: none;
+  -moz-box-align: center;
+  background: transparent;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  border: none;
+  color: inherit;
+  padding: 0 12px;
+}
+
+.downloadButton > .button-box {
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.downloadButton > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.downloadButton > .button-box > .button-text {
+  display: none;
+}
+
+.downloadButton:hover > .button-box {
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.downloadButton:hover:active > .button-box {
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+/*** Button icons ***/
+
+.downloadIconCancel > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+.downloadIconShow > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+@media (-moz-platform: macos) {
+  .downloadIconShow > .button-box > .button-icon {
+    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+  }
+}
+
+.downloadIconRetry > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css
new file mode 100644
index 0000000000..c2e27b1d08
--- /dev/null
+++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+#contentAreaDownloadsView {
+  padding: 18px;
+}
+
+#downloadsListBox:empty {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.downloadButton:not([disabled="true"]):hover,
+.downloadButton:not([disabled="true"]):hover:active,
+.downloadButton:not([disabled]):hover:active {
+  background: transparent;
+  border: none;
+}
+
+#downloadsListEmptyDescription {
+  margin: 1em;
+  text-align: center;
+  color: var(--in-content-deemphasized-text);
+}
diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css
new file mode 100644
index 0000000000..7a68a381c0
--- /dev/null
+++ b/browser/themes/shared/downloads/download-blockedStates.css
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.downloadBlockedBadge {
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  margin-inline: 16px;
+}
+
+#downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image,
+#downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image,
+#downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge,
+#downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge {
+  background-image: url("chrome://global/skin/icons/error.svg");
+  -moz-context-properties: fill;
+  fill: #e22850;
+}
+
+:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge,
+:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge {
+  fill: #FF9AA2;
+}
+
+#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image,
+#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge {
+  -moz-context-properties: fill;
+  fill: #0090ED;
+  background-image: url("chrome://global/skin/icons/info-filled.svg");
+}
+
+:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge {
+  fill: #80EBFF;
+}
+
+.downloadsPanel-blockedSubview-image {
+  width: 16px;
+  background-repeat: no-repeat;
+  margin-inline-end: 25px;
+}
+
+.downloadsPanel-blockedSubview-title-box {
+  margin-block: 21.5px 0;
+}
+
+#downloadsPanel-blockedSubview-title {
+  -moz-box-flex: 1;
+}
+
+#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image,
+#downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image,
+#downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge,
+#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge  {
+  -moz-context-properties: fill;
+  fill: #ffbf00;
+  background-image: url("chrome://global/skin/icons/warning.svg");
+}
diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg
new file mode 100644
index 0000000000..c10ee95fcb
--- /dev/null
+++ b/browser/themes/shared/downloads/download-summary.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path fill="#fff" d="M26.2,31.4H6.8c-1.8,0-3.4-1.5-3.4-3.3V3.8c0-1.8,1.6-3.3,3.4-3.3H23l5.6,6.4V28C28.7,29.9,28,31.4,26.2,31.4z" />
+  <path fill="#939393" d="M26.2,31.9H6.8c-2,0-3.8-1.7-3.8-3.8V3.8C3,1.7,4.8,0,6.8,0h16.4L29,6.7v21.4C29,30.2,28.2,31.9,26.2,31.9z M6.8,1C5.2,1,4,2.3,4,3.8V28c0,1.6,1.4,3,2.9,3h19.2c1.6,0,2-1.5,2-3V7.1L22.7,1C22.7,1,6.8,1,6.8,1z" />
+  <path fill="#4c4c4c" d="M22.5,18.2L17,23.6c-0.3,0.3-0.6,0.4-1.1,0.4c-0.3,0-0.8-0.1-1.1-0.4l-5.5-5.4c-0.5-0.5-0.4-1.1,0.4-1.1H13 v-5.9c0-0.5,0.4-1,1-1h3.9c0.5,0,1,0.4,1,1v5.9h3.1C22.8,17.2,23,17.6,22.5,18.2z" />
+  <polygon fill="#939393" points="27,9 21,9 21,1.9 22,1.9 22,8 27,8" />
+</svg>
diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css
new file mode 100644
index 0000000000..64c3253bfb
--- /dev/null
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -0,0 +1,271 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import "chrome://browser/skin/downloads/progressmeter.css";
+@import "chrome://browser/skin/downloads/download-blockedStates.css";
+
+/*** Panel and outer controls ***/
+
+#downloadsListBox {
+  background: transparent;
+  color: inherit;
+  appearance: none;
+  border: 0;
+  margin: 0;
+  /* We have an explicit width set by l10n, but we still want to fill our
+   * container if it's wider. */
+  min-width: 100%;
+}
+
+@media not (prefers-contrast) {
+  #downloadsListBox[disabled] {
+    opacity: var(--downloads-item-disabled-opacity) !important;
+  }
+}
+
+@media (prefers-contrast) {
+  #downloadsListBox[disabled] {
+    color: GrayText;
+  }
+}
+
+#emptyDownloads {
+  padding: 1.5em 8px 2.1em;
+  margin: 0;
+  pointer-events: none;
+}
+
+#downloadsListBox > richlistitem {
+  /* Leave space for the 32x32 icon with 16px vertical padding, and/or
+   * the text in the item, with the same padding, whichever is bigger: */
+  min-height: max(48px, calc(16px + 2em));
+  padding-inline-end: 4px;
+  margin: 0 0 8px;
+  border-radius: 4px;
+}
+
+.downloadMainArea {
+  padding-block: 8px;
+  padding-inline-start: 4px;
+  border-radius: 4px;
+  min-width: 0;
+}
+
+.downloadContainer {
+  min-width: 0;
+}
+
+#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover,
+#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover,
+#downloadsListBox > richlistitem[verdict]:hover,
+#downloadsListBox > richlistitem.openWhenFinished:hover,
+.downloadsPanelFooterButton:hover {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
+#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active,
+#downloadsListBox > richlistitem[verdict]:hover:active,
+.downloadsPanelFooterButton[open="true"] {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+#downloadsListBox:focus-visible > richlistitem[selected],
+#downloadsListBox[force-focus-visible]:focus > richlistitem[selected],
+.downloadButton:focus-visible,
+#downloadsSummary:focus-visible,
+.downloadsPanelFooterButton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
+#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
+  color: #C50042;
+  /* The details text usually gets an opacity reduction, but for the error
+     states we disable that, because it would reduce the contrast too much. */
+  opacity: inherit;
+}
+
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
+  color: #FF848B;
+}
+
+.downloadTypeIcon {
+  margin-inline-end: 0.7em;
+}
+
+#downloadsPanel-blockedSubview-buttons {
+  margin-top: 1.5em;
+}
+
+#downloadsSummary {
+  background: var(--arrowpanel-dimmed);
+  border-top: 1px solid var(--panel-separator-color);
+  /* Reserve the same space as the button and separator in download items. */
+  padding-inline-end: 59px;
+  -moz-user-focus: normal;
+}
+
+#downloadsSummary > .downloadTypeIcon {
+  list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
+}
+
+#downloadsSummaryDescription {
+  color: -moz-nativehyperlinktext;
+}
+
+:root[lwt-popup-brighttext] #downloadsSummaryDescription {
+  color: #75baff; /* --blue-30 */
+}
+
+/*** List items and similar elements in the summary ***/
+#downloadsSummary {
+  min-height: var(--downloads-item-height);
+}
+
+#downloadsListBox > richlistitem {
+  background: transparent;
+  color: inherit;
+}
+
+#downloadsListBox > richlistitem:last-child {
+  margin-bottom: 0;
+}
+
+.downloadTypeIcon {
+  width: 32px;
+  height: 32px;
+}
+
+#downloadsSummaryDescription,
+.downloadTarget {
+  margin: 0;
+}
+
+#downloadsSummaryDetails,
+.downloadDetails {
+  font-size: calc(100% * var(--downloads-item-font-size-factor));
+  opacity: var(--downloads-item-details-opacity);
+  /* Use calc() to keep the height consistent with .downloadTarget, so that the
+     progress bar can be vertically centered. */
+  margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
+}
+
+/* When hovering the mouse pointer over the item, instead of the normal message
+   we display a more detailed one. For blocked downloads the entire area shows
+   the hover message, for other downloads only the main area does. */
+#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
+#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal,
+#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover {
+  display: none;
+}
+
+/* When hovering the action button in particular, instead of the usual hover
+   message we display the command associated with the button. */
+#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
+#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover {
+  display: none;
+}
+
+.downloadButton {
+  appearance: none;
+  min-width: 32px;
+  height: 32px;
+  margin: 0;
+  margin-inline-start: 4px;
+  border: 1px solid transparent;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  border-radius: 4px;
+  --button-hover-bgcolor: var(--panel-item-hover-bgcolor);
+  --button-hover-color: inherit;
+  --button-active-bgcolor: var(--panel-item-active-bgcolor);
+  --button-active-color: inherit;
+}
+
+.downloadButton > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  margin: 1px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.downloadButton > .button-box > .button-text {
+  margin: 0 !important;
+  padding: 0;
+}
+
+@media (prefers-contrast) {
+  .downloadButton {
+    background-color: ButtonFace;
+    color: ButtonText;
+    border-color: currentColor;
+    --button-hover-bgcolor: SelectedItem;
+    --button-hover-color: SelectedItemText;
+    --button-active-bgcolor: ButtonFace;
+    --button-active-color: ButtonText;
+  }
+}
+
+.downloadButton:hover:not(:active) {
+  background-color: var(--button-hover-bgcolor);
+  color: var(--button-hover-color);
+  border-color: var(--button-hover-bgcolor);
+}
+.downloadButton:hover:active {
+  background-color: var(--button-active-bgcolor);
+  color: var(--button-active-color);
+}
+
+/*** Button icons ***/
+
+.downloadIconCancel > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+.downloadIconShow > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+@media (-moz-platform: macos) {
+  .downloadIconShow > .button-box > .button-icon {
+    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+  }
+}
+
+.downloadIconRetry > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
+
+.downloadIconSubviewArrow > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) {
+  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+}
+
+/*** Blocked subview ***/
+#downloadsPanel-blockedSubview-title {
+  font-size: calc(100% * var(--downloads-item-font-size-factor));
+  margin-bottom: 1.5em;
+}
+
+#downloadsPanel-blockedSubview-details1,
+#downloadsPanel-blockedSubview-details2 {
+  font-size: calc(100% * var(--downloads-item-font-size-factor));
+  margin-bottom: 0.5em;
+  opacity: var(--downloads-item-details-opacity);
+}
+
+/*** Toolbarseparator ***/
+#downloadsFooterButtons > toolbarseparator {
+  margin-inline: 0;
+}
diff --git a/browser/themes/shared/downloads/downloads.svg b/browser/themes/shared/downloads/downloads.svg
new file mode 100644
index 0000000000..a62f31b7e7
--- /dev/null
+++ b/browser/themes/shared/downloads/downloads.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.25.625a.625.625 0 0 0-1.25 0l0 8.323-3.308-3.309a.626.626 0 0 0-.885.885L7.285 11l.681 0 4.477-4.476a.626.626 0 0 0-.885-.885L8.25 8.947l0-8.322z"/>
+  <path d="M12.25 15a2 2 0 0 0 2-2l0-1.375a.625.625 0 0 0-1.25 0l0 1.525-.6.6-9.55 0-.6-.6 0-1.525a.625.625 0 0 0-1.25 0L1 13a2 2 0 0 0 2 2l9.25 0z"/>
+</svg>
diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css
new file mode 100644
index 0000000000..875023f841
--- /dev/null
+++ b/browser/themes/shared/downloads/indicator.css
@@ -0,0 +1,211 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*** Status and progress indicator ***/
+#downloads-button {
+  --download-progress-pcent: 0%;
+}
+
+#downloads-indicator-anchor {
+  min-width: 16px;
+  min-height: 16px;
+  -moz-context-properties: fill, fill-opacity;
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon,
+#downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
+  visibility: hidden;
+}
+
+#wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
+  visibility: visible;
+}
+
+#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
+  fill: var(--toolbarbutton-icon-fill-attention);
+  fill-opacity: 1;
+}
+
+#downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box {
+  pointer-events: none;
+  -moz-context-properties: fill, fill-opacity, stroke;
+  grid-area: initial;
+  top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */
+  left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */
+  width: 20px; /* Width of each frame within the SVG sprite */
+  height: 20px; /* Height of each frame within the SVG sprite */
+  /* Animation is not directional and shouldn't be reversed in RTL */
+  direction: ltr;
+  /* Revert to the xul.css user agent stylesheet's z-index value (auto) for
+  stack children, to ensure the badge (the last child of the stack) appears in
+  front of the animatable boxes */
+  z-index: revert;
+}
+
+/* Hide progress and state animations in customize mode */
+toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box,
+toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
+  display: none;
+}
+
+#downloads-indicator-start-box > .toolbarbutton-animatable-image,
+#downloads-indicator-finish-box > .toolbarbutton-animatable-image {
+  visibility: hidden;
+}
+
+/* Button progress indication */
+#downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
+  visibility: hidden;
+  top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */
+  left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
+  visibility: visible;
+}
+
+#downloads-indicator-progress-inner {
+  width: 14px;
+  height: 14px;
+  /*
+    From javascript side we update the --download-progress-pcent variable to show the current progress
+   */
+  background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent));
+  border-radius: 50%;
+}
+
+/*** Status badges ***/
+
+#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: block;
+  box-shadow: none;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -7px 0 0 !important;
+  margin-inline-end: -4px !important;
+  min-width: 12px;
+  min-height: 12px;
+  -moz-context-properties: fill;
+  background-size: 12px;
+}
+
+#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://browser/skin/notification-fill-12.svg)  no-repeat center;
+  fill: var(--panel-banner-item-info-icon-bgcolor);
+}
+
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center;
+  fill: var(--warning-icon-bgcolor);
+}
+
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
+  fill: rgb(226,40,80);
+}
+
+toolbar[brighttext] #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  fill: rgb(255,132,138);
+}
+
+#downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  /* Don't display the badge until after the animation has cleared. */
+  display: none;
+}
+
+/*** Download notifications (transitions between downloading states) ***/
+
+#downloads-indicator-start-image {
+  --anim-steps: 16;
+
+  list-style-image: url("chrome://browser/skin/downloads/notification-start-animation.svg");
+  width: calc(20px * (var(--anim-steps) + 1));
+  height: 20px;
+
+  fill: currentColor;
+  fill-opacity: 1;
+  stroke: currentColor;
+
+  /* initial state for animation */
+  transform: translateX(0);
+}
+#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
+  /* Match the download icon color in the initial animation frames
+     to the current color of the indicator */
+  stroke: var(--toolbarbutton-icon-fill-attention);
+}
+#downloads-button[washidden] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
+  /* Hide the download icon in the first few animation frames, when the button was just un-hidden */
+  stroke: transparent;
+}
+
+#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
+  visibility: visible;
+  /* Upon changing the animation-duration below, please keep the
+     setTimeout() identical in indicator.js#_showNotification.
+  */
+  animation-name: downloadsButtonNotification;
+  animation-duration: calc(var(--anim-steps) * 16.667ms);
+  animation-timing-function: steps(var(--anim-steps));
+
+  /* end state for animation: */
+  transform: translateX(calc(var(--anim-steps) * -20px));
+}
+
+#downloads-indicator-finish-image {
+  --anim-frames: 26;
+  --anim-steps: calc(var(--anim-frames) + 100); /* Add 100 frames for doing the pause in the middle */
+
+  fill: var(--toolbarbutton-icon-fill-attention);
+  fill-opacity: 1;
+  stroke: var(--toolbarbutton-icon-fill-attention);
+
+  list-style-image: url("chrome://browser/skin/downloads/notification-finish-animation.svg");
+  width: calc(20px * (var(--anim-frames) + 1));
+  height: 20px;
+
+  /* initial state for animation */
+  transform: translateX(0);
+}
+#downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
+ stroke: currentColor;
+}
+
+#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
+  visibility: visible;
+  animation-name: downloadsButtonFinishedNotification;
+  animation-duration: calc(var(--anim-steps) * 16.667ms);
+
+  /* end state for animation: */
+  transform: translateX(calc(var(--anim-frames) * -20px));
+}
+
+@keyframes downloadsButtonNotification {
+  from {
+    transform: translateX(0);
+  }
+}
+
+@keyframes downloadsButtonFinishedNotification {
+  from {
+    animation-timing-function: steps(18);
+    transform: translateX(0);
+  }
+  14.28% { /* 18th frame (18/126) */
+    transform: translateX(calc(18 * -20px));
+  }
+  93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */
+    animation-timing-function: steps(8);
+    transform: translateX(calc(18 * -20px));
+  }
+}
diff --git a/browser/themes/shared/downloads/notification-finish-animation.svg b/browser/themes/shared/downloads/notification-finish-animation.svg
new file mode 100644
index 0000000000..cef56f13f8
--- /dev/null
+++ b/browser/themes/shared/downloads/notification-finish-animation.svg
@@ -0,0 +1,193 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="540" height="20">
+  <defs>
+    <path fill="context-stroke" d="M10.109 2.55a.618.618 0 0 0-.207-.39.641.641 0 0 0-.418-.16.636.636 0 0 0-.625.55c0 0 0 8.45 0 8.45 0 0-3.31-3.36-3.31-3.36a.633.633 0 0 0-.88 0 .606.606 0 0 0-.187.44.62.62 0 0 0 .187.44c0 0 4.47 4.48 4.47 4.48 0 0 .72 0 .72 0 0 0 4.47-4.48 4.47-4.48a.604.604 0 0 0 0-.88.633.633 0 0 0-.88 0c0 0-3.34 3.36-3.34 3.36 0 0 0-8.45 0-8.45z" id="ab"/>
+    <path fill="context-stroke" d="M14.125 17a2 2 0 0 0 2-2c0 0 0-1.45 0-1.45a.625.625 0 0 0-.209-.39.632.632 0 0 0-.416-.16.636.636 0 0 0-.625.55c0 0 0 1.6 0 1.6 0 0-.601.6-.601.6 0 0-9.549 0-9.549 0 0 0-.6-.6-.6-.6 0 0 0-1.6 0-1.6A.638.638 0 0 0 3.5 13a.636.636 0 0 0-.625.55c0 0 0 1.45 0 1.45a2 2 0 0 0 2 2c0 0 9.25 0 9.25 0z" id="aa"/>
+    <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 4.387-5.175 4.387-5.175" fill="none" id="i"/>
+    <path fill="#15141A" d="M-1.17 3c0 0-2.65-2.64-2.65-2.64a.625.625 0 0 1-.161-.7.638.638 0 0 1 .351-.35.625.625 0 0 1 .496.011.625.625 0 0 1 .204.149c0 0 2.07 2.08 2.07 2.08 0 0 3.79-3.8 3.79-3.8a.63.63 0 0 1 .89.89C3.82-1.36-.55 3-.55 3c0 0-.62 0-.62 0z" id="d"/>
+    <path stroke="context-fill" stroke-linecap="round" d="M9.991 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8z" fill="none" stroke-width="1.05" id="c"/>
+    <path fill="context-fill" d="M0-4.752a4.753 4.753 0 1 0 .001 9.505A4.753 4.753 0 0 0 0-4.752z" id="b"/>
+    <path fill="none" stroke="context-fill" stroke-linecap="round" d="M0-8A8 8 0 1 1 0 8 8 8 0 0 1 0-8z" id="a"/>
+  </defs>
+  <svg viewBox="0 0 20 20" width="20" height="20">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="20">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="40">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="60">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="80">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="100">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="120">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="140">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="160">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(1.20948)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="180">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(.8747)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="200">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(.4753)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="220">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(.14052)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="240">
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="260">
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="280">
+    <defs>
+      <mask id="e" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#e)">
+      <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 1.927 1.928 2.916 2.918" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="300">
+    <defs>
+      <mask id="f" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#f)">
+      <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 .802-.945 1.72-2.028" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="320">
+    <defs>
+      <mask id="g" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#g)">
+      <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 2.335-2.755 3.6-4.244" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="340">
+    <defs>
+      <mask id="h" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#h)">
+      <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="360">
+    <defs>
+      <mask id="W" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#W)">
+      <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="380">
+    <defs>
+      <mask id="X" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#X)">
+      <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="400">
+    <defs>
+      <mask id="Y" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" opacity=".74" stroke-width="1.05" href="#c"/>
+    <path fill="context-fill" d="M9.752 9.485a.046.046 0 0 0-.016-.03.048.048 0 0 0-.03-.011.047.047 0 0 0-.047.04c0 0 0 .627 0 .627 0 0-.245-.249-.245-.249a.047.047 0 0 0-.076.015.046.046 0 0 0 .01.05c0 0 .332.333.332.333 0 0 .053 0 .053 0 0 0 .332-.333.332-.333a.045.045 0 0 0 0-.065.047.047 0 0 0-.066 0c0 0-.247.25-.247.25 0 0 0-.627 0-.627z" opacity=".3"/>
+    <g mask="url(#Y)">
+      <path stroke="context-fill" stroke-width="1.67" d="M6.146 8.802c0 0 3.23 3.23 3.23 3.23 0 0 4.061-4.792 4.061-4.792" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="420">
+    <defs>
+      <mask id="Z" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <path fill="context-stroke" d="M10.465 18.111a.519.519 0 0 0 .52-.519c0 0 0-.376 0-.376a.164.164 0 0 0-.162-.143.165.165 0 0 0-.163.143c0 0 0 .415 0 .415 0 0-.156.156-.156.156 0 0-2.476 0-2.476 0 0 0-.156-.156-.156-.156 0 0 0-.415 0-.415a.163.163 0 0 0-.27-.101.16.16 0 0 0-.054.101c0 0 0 .376 0 .376a.519.519 0 0 0 .518.519c0 0 2.4 0 2.4 0z"/>
+    <path fill="context-stroke" d="M9.423 7.697a.16.16 0 0 0-.054-.1.166.166 0 0 0-.108-.042.165.165 0 0 0-.162.142c0 0 0 2.192 0 2.192 0 0-.859-.871-.859-.871a.164.164 0 0 0-.264.052.16.16 0 0 0 .036.176c0 0 1.16 1.162 1.16 1.162 0 0 .186 0 .186 0 0 0 1.16-1.162 1.16-1.162a.157.157 0 0 0 0-.228.164.164 0 0 0-.229 0c0 0-.866.871-.866.871 0 0 0-2.192 0-2.192z" opacity=".7"/>
+    <g style="display:block" mask="url(#Z)">
+      <path stroke="context-fill" stroke-width="1.33" d="M6.917 9.041c0 0 2.583 2.584 2.583 2.584 0 0 3.25-3.833 3.25-3.833" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="440">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <path fill="context-stroke" d="M11.655 17.75a1 1 0 0 0 1-1c0 0 0-.725 0-.725a.316.316 0 0 0-.313-.275.318.318 0 0 0-.312.275c0 0 0 .8 0 .8 0 0-.301.3-.301.3 0 0-4.775 0-4.775 0 0 0-.3-.3-.3-.3 0 0 0-.8 0-.8a.314.314 0 0 0-.52-.195.31.31 0 0 0-.104.195c0 0 0 .725 0 .725a1 1 0 0 0 1 1c0 0 4.625 0 4.625 0z"/>
+    <path fill="context-stroke" d="M9.646 6.025a.31.31 0 0 0-.104-.195.32.32 0 0 0-.209-.08.318.318 0 0 0-.312.275c0 0 0 4.225 0 4.225 0 0-1.655-1.68-1.655-1.68a.317.317 0 0 0-.509.1.308.308 0 0 0 .069.34c0 0 2.235 2.24 2.235 2.24 0 0 .36 0 .36 0 0 0 2.235-2.24 2.235-2.24a.302.302 0 0 0 0-.44.317.317 0 0 0-.44 0c0 0-1.67 1.68-1.67 1.68 0 0 0-4.225 0-4.225z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="460">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <path fill="context-stroke" d="M12.844 17.389a1.482 1.482 0 0 0 1.48-1.481c0 0 0-1.074 0-1.074a.468.468 0 0 0-.463-.407.471.471 0 0 0-.462.407c0 0 0 1.185 0 1.185 0 0-.445.444-.445.444 0 0-7.073 0-7.073 0 0 0-.444-.444-.444-.444 0 0 0-1.185 0-1.185a.466.466 0 0 0-.772-.289.459.459 0 0 0-.154.289c0 0 0 1.074 0 1.074a1.481 1.481 0 0 0 1.482 1.481c0 0 6.85 0 6.85 0z"/>
+    <path fill="context-stroke" d="M9.869 4.353a.458.458 0 0 0-.153-.29.475.475 0 0 0-.31-.118.47.47 0 0 0-.463.408c0 0 0 6.258 0 6.258 0 0-2.451-2.489-2.451-2.489a.469.469 0 0 0-.754.15.456.456 0 0 0 .102.502c0 0 3.31 3.318 3.31 3.318 0 0 .534 0 .534 0 0 0 3.31-3.318 3.31-3.318a.447.447 0 0 0 0-.652.469.469 0 0 0-.651 0c0 0-2.474 2.489-2.474 2.489 0 0 0-6.258 0-6.258z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="480">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <path fill="context-stroke" d="M13.759 17.111a1.852 1.852 0 0 0 1.851-1.851c0 0 0-1.343 0-1.343a.585.585 0 0 0-.579-.51.59.59 0 0 0-.578.51c0 0 0 1.481 0 1.481 0 0-.556.556-.556.556 0 0-8.841 0-8.841 0 0 0-.556-.556-.556-.556 0 0 0-1.481 0-1.481a.591.591 0 0 0-.579-.51.59.59 0 0 0-.578.51c0 0 0 1.343 0 1.343a1.851 1.851 0 0 0 1.852 1.851c0 0 8.564 0 8.564 0z"/>
+    <path fill="context-stroke" d="M10.04 3.065a.572.572 0 0 0-.191-.36.593.593 0 0 0-.387-.149.589.589 0 0 0-.579.51c0 0 0 7.823 0 7.823 0 0-3.065-3.111-3.065-3.111a.586.586 0 0 0-.814 0 .561.561 0 0 0-.173.407.574.574 0 0 0 .173.408c0 0 4.138 4.147 4.138 4.147 0 0 .667 0 .667 0 0 0 4.138-4.147 4.138-4.147a.559.559 0 0 0 0-.815.586.586 0 0 0-.814 0c0 0-3.093 3.11-3.093 3.11 0 0 0-7.823 0-7.823z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="500">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <use fill="context-stroke" href="#aa"/>
+    <use fill="context-stroke" href="#ab"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="520">
+    <use fill="context-fill" opacity=".26" stroke-width="1.05" href="#c"/>
+    <use fill="context-stroke" href="#aa"/>
+    <use fill="context-stroke" href="#ab"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/downloads/notification-start-animation.svg b/browser/themes/shared/downloads/notification-start-animation.svg
new file mode 100644
index 0000000000..14e3061657
--- /dev/null
+++ b/browser/themes/shared/downloads/notification-start-animation.svg
@@ -0,0 +1,144 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="340" height="20">
+  <defs>
+    <path d="M14.441 17a2 2 0 0 0 2-2c0 0 0-1.45 0-1.45a.625.625 0 0 0-.209-.39.632.632 0 0 0-.416-.16.636.636 0 0 0-.625.55c0 0 0 1.6 0 1.6 0 0-.601.6-.601.6 0 0-9.549 0-9.549 0 0 0-.6-.6-.6-.6 0 0 0-1.6 0-1.6a.638.638 0 0 0-.625-.55.636.636 0 0 0-.625.55c0 0 0 1.45 0 1.45a2 2 0 0 0 2 2c0 0 9.25 0 9.25 0z" id="tray"/>
+  </defs>
+  <defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.59 8.59 0 0 1-5.131-1.692" fill="none" stroke-width="1.15" id="q"/>
+    <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 .062 0 .062 0 0 0 0-5.562 0-5.562 0 0-.062 0-.062 0" id="h"/>
+  </defs>
+  <svg viewBox="0 0 20 20" width="20" height="20">
+    <use fill="context-stroke" href="#tray"/>
+    <path fill="context-stroke" d="M10.109 2.55a.618.618 0 0 0-.207-.39.641.641 0 0 0-.418-.16.636.636 0 0 0-.625.55c0 0 0 8.45 0 8.45 0 0-3.31-3.36-3.31-3.36a.633.633 0 0 0-.88 0 .606.606 0 0 0-.187.44.62.62 0 0 0 .187.44c0 0 4.47 4.48 4.47 4.48 0 0 .72 0 .72 0 0 0 4.47-4.48 4.47-4.48a.604.604 0 0 0 0-.88.633.633 0 0 0-.88 0c0 0-3.34 3.36-3.34 3.36 0 0 0-8.45 0-8.45z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="20">
+    <defs>
+      <clipPath id="b">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 13.41 0 13.41 0 0 0 0-5.562 0-5.562 0 0-13.41 0-13.41 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#b)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M10.1 2.621a.612.612 0 0 0-.205-.386.634.634 0 0 0-.414-.158.63.63 0 0 0-.619.544c0 0 0 8.364 0 8.364 0 0-3.276-3.326-3.276-3.326a.627.627 0 0 0-.87 0 .6.6 0 0 0-.186.436.614.614 0 0 0 .185.435c0 0 4.424 4.434 4.424 4.434 0 0 .713 0 .713 0 0 0 4.424-4.434 4.424-4.434a.597.597 0 0 0 0-.87.627.627 0 0 0-.87 0c0 0-3.307 3.325-3.307 3.325 0 0 0-8.364 0-8.364z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="40">
+    <defs>
+      <clipPath id="c">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 11.167 0 11.167 0 0 0 0-5.562 0-5.562 0 0-11.167 0-11.167 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#c)">
+        <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M10.064 2.889a.588.588 0 0 0-.197-.371.61.61 0 0 0-.398-.152.605.605 0 0 0-.594.523c0 0 0 8.038 0 8.038 0 0-3.149-3.196-3.149-3.196a.602.602 0 0 0-.837 0 .577.577 0 0 0-.178.418.59.59 0 0 0 .178.419c0 0 4.252 4.261 4.252 4.261 0 0 .685 0 .685 0 0 0 4.252-4.261 4.252-4.261a.574.574 0 0 0 0-.837.602.602 0 0 0-.837 0c0 0-3.177 3.196-3.177 3.196 0 0 0-8.038 0-8.038z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="60">
+    <defs>
+      <clipPath id="d">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 8.7 0 8.7 0 0 0 0-5.562 0-5.562 0 0-8.7 0-8.7 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#d)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.974 3.56a.528.528 0 0 0-.177-.333.548.548 0 0 0-.357-.136.543.543 0 0 0-.534.47c0 0 0 7.22 0 7.22 0 0-2.829-2.87-2.829-2.87a.541.541 0 0 0-.752 0 .518.518 0 0 0-.16.376.53.53 0 0 0 .16.376c0 0 3.82 3.828 3.82 3.828 0 0 .616 0 .616 0 0 0 3.82-3.828 3.82-3.828a.516.516 0 0 0 0-.753.541.541 0 0 0-.752 0c0 0-2.855 2.872-2.855 2.872 0 0 0-7.221 0-7.221z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="80">
+    <defs>
+      <clipPath id="e">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 6.174 0 6.174 0 0 0 0-5.562 0-5.562 0 0-6.174 0-6.174 0"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933a8.628 8.628 0 0 1-1.38-1.275" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#e)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.759 5.18a.384.384 0 0 0-.13-.242.398.398 0 0 0-.259-.1.395.395 0 0 0-.388.342c0 0 0 5.252 0 5.252 0 0-2.058-2.088-2.058-2.088a.393.393 0 0 0-.632.125.383.383 0 0 0 .085.422c0 0 2.779 2.784 2.779 2.784 0 0 .447 0 .447 0 0 0 2.778-2.784 2.778-2.784a.375.375 0 0 0 0-.547.393.393 0 0 0-.547 0c0 0-2.075 2.088-2.075 2.088 0 0 0-5.252 0-5.252z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="100">
+    <defs>
+      <clipPath id="f">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 3.707 0 3.707 0 0 0 0-5.562 0-5.562 0 0-3.707 0-3.707 0"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933a8.648 8.648 0 0 1-3.016-4.091" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#f)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.51 7.041a.219.219 0 0 0-.073-.138.227.227 0 0 0-.148-.056.225.225 0 0 0-.22.194c0 0 0 2.99 0 2.99 0 0-1.172-1.189-1.172-1.189a.224.224 0 0 0-.36.071.218.218 0 0 0 .05.24c0 0 1.58 1.585 1.58 1.585 0 0 .255 0 .255 0 0 0 1.581-1.585 1.581-1.585a.213.213 0 0 0 0-.311.224.224 0 0 0-.31 0c0 0-1.182 1.189-1.182 1.189 0 0 0-2.99 0-2.99z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="120">
+    <defs>
+      <clipPath id="g">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 1.464 0 1.464 0 0 0 0-5.562 0-5.562 0 0-1.464 0-1.464 0"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.612 8.612 0 0 1 1.375 10a8.58 8.58 0 0 1 1.569-4.961" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#g)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.375 8.06a.128.128 0 0 0-.043-.08.133.133 0 0 0-.087-.034.132.132 0 0 0-.13.114c0 0 0 1.75 0 1.75 0 0-.685-.695-.685-.695a.131.131 0 0 0-.21.041.128.128 0 0 0 .028.141c0 0 .926.928.926.928 0 0 .149 0 .149 0 0 0 .926-.928.926-.928a.125.125 0 0 0 0-.182.131.131 0 0 0-.182 0c0 0-.692.696-.692.696 0 0 0-1.75 0-1.75z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="140">
+    <defs>
+      <clipPath id="i">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375a8.623 8.623 0 0 1 7.542 4.437" fill="none" stroke-width="1.15"/>
+    <path fill="context-stroke" d="M9.296 8.65a.076.076 0 0 0-.025-.047.078.078 0 0 0-.051-.02.078.078 0 0 0-.077.067c0 0 0 1.033 0 1.033 0 0-.404-.41-.404-.41a.077.077 0 0 0-.125.024.075.075 0 0 0 .017.083c0 0 .547.548.547.548 0 0 .088 0 .088 0 0 0 .546-.548.546-.548a.074.074 0 0 0 0-.107.077.077 0 0 0-.107 0c0 0-.409.41-.409.41 0 0 0-1.033 0-1.033z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="160">
+    <defs>
+      <clipPath id="j">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10c0 1.918-.626 3.69-1.685 5.122" fill="none" stroke-width="1.15"/>
+    <path fill="context-stroke" d="M9.247 9.02a.043.043 0 0 0-.014-.028.044.044 0 0 0-.03-.011.044.044 0 0 0-.042.038c0 0 0 .585 0 .585 0 0-.23-.233-.23-.233a.044.044 0 0 0-.07.014.043.043 0 0 0 .01.047c0 0 .309.31.309.31 0 0 .05 0 .05 0 0 0 .31-.31.31-.31a.042.042 0 0 0 0-.06.044.044 0 0 0-.062 0c0 0-.23.232-.23.232 0 0 0-.585 0-.585z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="180">
+    <defs>
+      <clipPath id="k">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10a8.626 8.626 0 0 1-5.747 8.133" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#k)">
+      <use fill="context-fill" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.216 9.254a.022.022 0 0 0-.008-.014.023.023 0 0 0-.014-.006.023.023 0 0 0-.022.02c0 0 0 .3 0 .3 0 0-.118-.12-.118-.12a.022.022 0 0 0-.036.007.022.022 0 0 0 .005.024c0 0 .158.16.158.16 0 0 .026 0 .026 0 0 0 .158-.16.158-.16a.021.021 0 0 0 0-.031.022.022 0 0 0-.03 0c0 0-.12.12-.12.12 0 0 0-.3 0-.3z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="200">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10a8.624 8.624 0 0 1-8.865 8.622" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="220">
+    <defs>
+      <clipPath id="m">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625c-.8 0-1.574-.11-2.31-.313" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#m)">
+      <use fill="context-fill" href="#tray"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="240">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.582 8.582 0 0 1-3.633-.8" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="260">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.578 8.578 0 0 1-4.444-1.232" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="280">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.586 8.586 0 0 1-4.912-1.534" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="300">
+    <use stroke-linecap="round" stroke="context-fill" fill="none" stroke-width="1.15" href="#q"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="320">
+    <use stroke-linecap="round" stroke="context-fill" fill="none" stroke-width="1.15" href="#q"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css
new file mode 100644
index 0000000000..892cea7135
--- /dev/null
+++ b/browser/themes/shared/downloads/progressmeter.css
@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*** Common-styled progressmeter ***/
+
+:root {
+  --download-progress-fill-color: AccentColor;
+  --download-progress-paused-color: GrayText;
+  --download-progress-flare-color: rgba(255,255,255,0.75);
+}
+
+/* download progress bar is used in contexts which are not LightweightThemeConsumers and
+   do not get the lwt- theme variables. So we duplicate the fallbacks here. */
+:root:-moz-lwtheme {
+  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224));
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:-moz-lwtheme {
+    --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+  }
+  #contentAreaDownloadsView {
+    --download-progress-fill-color: var(--in-content-item-selected);
+  }
+}
+
+:root[lwt-popup-brighttext] panel,
+toolbar[brighttext]:-moz-lwtheme {
+  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+}
+
+/*
+ * Styling "html:progress" is limited by the fact that a number of properties
+ * are intentionally locked at the UA stylesheet level. We have to use a border
+ * instead of an outline because the latter would be drawn over the progress
+ * bar and we cannot change its z-index. This means we have to use a negative
+ * margin, except when the value is zero, and adjust the width calculation for
+ * the indeterminate state.
+ */
+
+.downloadProgress {
+  appearance: none;
+  display: -moz-box;
+  margin-block: 5px 1px;
+  /* This value is kinda odd, it's used to align with the edge of the badge,
+   * if shown, which is inside the edge of the image (the image gets 16px
+   * margin). */
+  margin-inline-end: 18px;
+  border: none;
+  height: 4px;
+  border-radius: 2px;
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+/* Ensure we have contrast in selected download items */
+#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar {
+  --download-progress-fill-color: currentColor;
+  --download-progress-flare-color: AccentColor;
+}
+
+.downloadProgress::-moz-progress-bar {
+  appearance: none;
+  background-color: var(--download-progress-fill-color);
+  border-radius: 2px;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+  background-color: var(--download-progress-paused-color);
+}
+
+.downloadProgress:indeterminate::-moz-progress-bar {
+  width: calc(100% + 2px);
+  /* Make a white reflecting animation.
+     Create a gradient with 2 identical patterns, and enlarge the size to 200%.
+     This allows us to animate background-position with percentage. */
+  background-color: var(--download-progress-fill-color);
+  background-image: linear-gradient(90deg, transparent 0%,
+                                           var(--download-progress-flare-color) 25%,
+                                           transparent 50%,
+                                           var(--download-progress-flare-color) 75%,
+                                           transparent 100%);
+  background-blend-mode: normal;
+  background-size: 200% 100%;
+  animation: downloadProgressSlideX 1.5s linear infinite;
+}
+
+@keyframes downloadProgressSlideX {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}