Bug 1387557 - Use a fatter progressbar when download is in progress. r=jaws
authorSam Foster <sfoster@mozilla.com>
Sun, 27 Aug 2017 16:19:19 -0700
changeset 654572 4f172b4e2aa96fdbffbaa5ec5cfe1773c49d3a22
parent 653735 4caca1d0ba0e35cbe57a88493ebf162aa2cb3144
push id76602
push userbmo:sfoster@mozilla.com
push dateMon, 28 Aug 2017 23:42:18 +0000
reviewersjaws
bugs1387557, 1394609
milestone57.0a1
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
browser/themes/shared/downloads/download-icons.svg
browser/themes/shared/downloads/indicator.inc.css
browser/themes/shared/downloads/inprogress-arrow.svg
browser/themes/shared/jar.inc.mn
--- 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)