Bug 1387557 - Use a fatter progressbar when download is in progress. r=jaws
* inprogress-arrow split out into its own file
*
bug 1394609 filed to do the same for the other parts
* no animations/transitions between the progressbar states in this patch
MozReview-Commit-ID: DUIVdt4sDBe
--- a/browser/themes/shared/downloads/download-icons.svg
+++ b/browser/themes/shared/downloads/download-icons.svg
@@ -6,17 +6,17 @@
:root > use:not(:target),
:root > g:not(:target) {
display: none;
}
</style>
<defs>
<path id="arrow-icon" d="M7.293 12.725a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.413L9 9.605V1.019a1 1 0 0 0-2 0v8.586L3.707 6.312a1 1 0 0 0-1.414 1.413l5 5z"/>
<path id="short-bar-icon" d="m 13,14 a 1,1 0 1 1 0,2 h -10 a 1,1 0 1 1 0,-2 z"/>
- <path id="long-bar-icon" d="m 14,14 a 1,1 0 1 1 0,2 h -12 a 1,1 0 1 1 0,-2"/>
+ <path id="long-bar-icon" d="M14.193 13.32h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0 -2.7z"/>
</defs>
<use id="arrow" fill="context-fill" href="#arrow-icon"/>
<g id="arrow-with-bar" fill="context-fill">
<use href="#arrow-icon"/>
<use href="#short-bar-icon"/>
</g>
<use id="default-bar" fill="context-fill" href="#short-bar-icon"/>
<use id="progress-bar-bg" fill="context-fill" fill-opacity="0.2" href="#long-bar-icon"/>
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -8,35 +8,43 @@
min-width: 16px;
min-height: 16px;
}
#downloads-indicator-progress-outer {
width: 16px;
height: 16px;
background-size: 16px;
+ background-repeat: no-repeat;
+ background-position: center;
-moz-context-properties: fill;
- background: url("chrome://browser/skin/downloads/download-icons.svg#default-bar") center no-repeat;
+ background-image: url("chrome://browser/skin/downloads/download-icons.svg#default-bar");
}
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
fill: var(--toolbarbutton-icon-fill-attention);
}
#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
- background: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-bg") center no-repeat;
+ background-image: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-bg");
}
#downloads-indicator-icon {
-moz-context-properties: fill;
- background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow");
+ background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow"),
+ url("chrome://browser/skin/downloads/inprogress-arrow.svg");
+ background-size: 16px, 0px;
width: 16px;
height: 16px;
}
+#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+ background-size: 0px, 16px;
+}
+
#downloads-indicator-progress-inner {
background: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-fg") left no-repeat;
margin-right: 16px;
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill-attention);
background-size: 16px;
/* From javascript side we use animation delay from 0s to -100s to show
* corresponding frames needed for progress.
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/inprogress-arrow.svg
@@ -0,0 +1,6 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.24 11.4a .900,.900 0 0 0 1.27 0l4.50-4.50a .900,.900 0 0 0-1.27-1.27l-2.96 2.96v-7.73a .900,.900 0 0 0-1.80 0v7.73l-2.96-2.96a .900,.900 0 0 0-1.27 .0200a .900,.900 0 0 0 0 1.25l4.50 4.50z"/>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -41,16 +41,17 @@
skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
skin/classic/browser/customizableui/whimsy.png (../shared/customizableui/whimsy.png)
skin/classic/browser/customizableui/whimsy@2x.png (../shared/customizableui/whimsy@2x.png)
skin/classic/browser/downloads/contentAreaDownloadsView.css (../shared/downloads/contentAreaDownloadsView.css)
skin/classic/browser/downloads/download-blocked.svg (../shared/downloads/download-blocked.svg)
skin/classic/browser/downloads/download-summary.svg (../shared/downloads/download-summary.svg)
skin/classic/browser/downloads/download-icons.svg (../shared/downloads/download-icons.svg)
skin/classic/browser/downloads/notification-start-animation.svg (../shared/downloads/notification-start-animation.svg)
+ skin/classic/browser/downloads/inprogress-arrow.svg (../shared/downloads/inprogress-arrow.svg)
skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg)
skin/classic/browser/fullscreen/insecure.svg (../shared/fullscreen/insecure.svg)
skin/classic/browser/fullscreen/secure.svg (../shared/fullscreen/secure.svg)
skin/classic/browser/connection-secure.svg (../shared/identity-block/connection-secure.svg)
skin/classic/browser/connection-mixed-passive-loaded.svg (../shared/identity-block/connection-mixed-passive-loaded.svg)
skin/classic/browser/connection-mixed-active-loaded.svg (../shared/identity-block/connection-mixed-active-loaded.svg)
skin/classic/browser/identity-icon.svg (../shared/identity-block/identity-icon.svg)
skin/classic/browser/identity-icon-notice.svg (../shared/identity-block/identity-icon-notice.svg)