From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 11:22:09 +0200 Subject: Adding upstream version 110.0.1. Signed-off-by: Daniel Baumann --- .../shared/downloads/allDownloadsView.inc.css | 98 ++++++++ .../shared/downloads/contentAreaDownloadsView.css | 27 ++ .../shared/downloads/download-blockedStates.css | 62 +++++ .../themes/shared/downloads/download-summary.svg | 11 + browser/themes/shared/downloads/downloads.inc.css | 271 +++++++++++++++++++++ browser/themes/shared/downloads/downloads.svg | 7 + browser/themes/shared/downloads/indicator.css | 211 ++++++++++++++++ .../downloads/notification-finish-animation.svg | 193 +++++++++++++++ .../downloads/notification-start-animation.svg | 144 +++++++++++ browser/themes/shared/downloads/progressmeter.css | 95 ++++++++ 10 files changed, 1119 insertions(+) create mode 100644 browser/themes/shared/downloads/allDownloadsView.inc.css create mode 100644 browser/themes/shared/downloads/contentAreaDownloadsView.css create mode 100644 browser/themes/shared/downloads/download-blockedStates.css create mode 100644 browser/themes/shared/downloads/download-summary.svg create mode 100644 browser/themes/shared/downloads/downloads.inc.css create mode 100644 browser/themes/shared/downloads/downloads.svg create mode 100644 browser/themes/shared/downloads/indicator.css create mode 100644 browser/themes/shared/downloads/notification-finish-animation.svg create mode 100644 browser/themes/shared/downloads/notification-start-animation.svg create mode 100644 browser/themes/shared/downloads/progressmeter.css (limited to 'browser/themes/shared/downloads') 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 @@ + + + + + + + + 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 @@ + + + + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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; + } +} -- cgit v1.2.3