Bug 1376515 - Move shared download indicator rules to indicator.inc.css. r=paolo
MozReview-Commit-ID: Jnw9jl3zBOV
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -1,125 +1,5 @@
/* 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/. */
%include ../../shared/downloads/indicator.inc.css
-
-/*** Status and progress indicator ***/
-
-#downloads-animation-container {
- min-height: 1px;
- min-width: 1px;
- height: 1px;
- margin-bottom: -1px;
- /* Makes the outermost animation container element positioned, so that its
- contents are rendered over the main browser window in the Z order.
- This is required by the animated event notification. */
- position: relative;
- /* The selected tab may overlap #downloads-indicator-notification */
- z-index: 5;
-}
-
-/*** Main indicator icon ***/
-
-#downloads-button {
-%ifdef MOZ_PHOTON_THEME
- --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
-%else
- --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-%endif
-}
-
-#downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
- background: var(--downloads-indicator-image) center no-repeat;
- -moz-context-properties: fill;
- fill: var(--toolbarbutton-icon-fill);
- width: 16px;
- height: 16px;
- background-size: 16px;
-}
-
-toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
- fill: var(--toolbarbutton-icon-fill-inverted);
-}
-
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- display: -moz-box;
- height: 8px;
- width: 8px;
- min-width: 0;
- border-radius: 50%;
- /* "!important" is necessary to override the rule in toolbarbutton.css */
- margin-top: -1px !important;
- margin-right: -2px !important;
-}
-
-#downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- height: 7px;
- width: 7px;
-}
-
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- background: #D90000;
-}
-
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- background: #FFBF00;
-}
-
-#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
-#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
- filter: none;
-}
-
-#downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
- fill: var(--toolbarbutton-icon-fill-attention);
-}
-
-#downloads-button[cui-areatype="menu-panel"][attention="success"] {
- list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
- -moz-image-region: auto;
-}
-
-#downloads-indicator-notification {
- opacity: 0;
- background-size: 16px;
- background-position: center;
- background-repeat: no-repeat;
- width: 16px;
- height: 16px;
-}
-
-@keyframes downloadsIndicatorNotificationStartRight {
- from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
- 20% { opacity: .85; animation-timing-function: ease-out; }
- to { opacity: 0; transform: translate(0) scale(1); }
-}
-
-@keyframes downloadsIndicatorNotificationStartLeft {
- from { opacity: 0; transform: translate(128px, 128px) scale(8); }
- 20% { opacity: .85; animation-timing-function: ease-out; }
- to { opacity: 0; transform: translate(0) scale(1); }
-}
-
-#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
- background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
- animation-name: downloadsIndicatorNotificationStartRight;
- animation-duration: 1s;
-}
-
-#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
- animation-name: downloadsIndicatorNotificationStartLeft;
-}
-
-@keyframes downloadsIndicatorNotificationFinish {
- from { opacity: 0; transform: scale(1); }
- 20% { opacity: .65; animation-timing-function: ease-in; }
- to { opacity: 0; transform: scale(8); }
-}
-
-#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
- background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
- animation-name: downloadsIndicatorNotificationFinish;
- animation-duration: 1s;
-}
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -1,150 +1,26 @@
/* 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/. */
%include ../../shared/downloads/indicator.inc.css
-/*** Status and progress indicator ***/
-
-#downloads-indicator-anchor {
- min-width: 16px;
- min-height: 16px;
-}
-
-#downloads-animation-container {
- min-height: 1px;
- min-width: 1px;
- height: 1px;
- margin-bottom: -1px;
- /* Makes the outermost animation container element positioned, so that its
- contents are rendered over the main browser window in the Z order.
- This is required by the animated event notification. */
- position: relative;
- /* The selected tab may overlap #downloads-indicator-notification */
- z-index: 5;
-}
-
-/*** Main indicator icon ***/
-
-#downloads-button {
-%ifdef MOZ_PHOTON_THEME
- --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
-%else
- --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-%endif
-}
-
-#downloads-indicator-icon {
- background: var(--downloads-indicator-image) center no-repeat;
- -moz-context-properties: fill;
- fill: var(--toolbarbutton-icon-fill);
- background-size: 16px;
-}
-
-toolbar[brighttext] #downloads-indicator-icon {
- fill: var(--toolbarbutton-icon-fill-inverted);
-}
-
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- display: -moz-box;
- height: 8px;
- width: 8px;
- min-width: 0;
- border-radius: 50%;
- /* "!important" is necessary to override the rule in toolbarbutton.css */
- margin-top: -1px !important;
- margin-right: -2px !important;
-}
-
-#downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- height: 7px;
- width: 7px;
-}
-
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- background: #D90000;
-}
-
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- background: #FFBF00;
-}
-
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
- filter: none;
-}
-
-#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
- fill: var(--toolbarbutton-icon-fill-attention);
-}
-
-#downloads-button[cui-areatype="menu-panel"][attention="success"] {
- list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
- -moz-image-region: auto;
-}
@media (min-resolution: 2dppx) {
#downloads-button[cui-areatype="menu-panel"][attention="success"] {
list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png");
}
}
-/*** Download notifications ***/
-
-#downloads-indicator-notification {
- opacity: 0;
- background-size: 16px;
- background-position: center;
- background-repeat: no-repeat;
- width: 16px;
- height: 16px;
-}
-
-/*** Progress bar and text ***/
-
-@keyframes downloadsIndicatorNotificationStartRight {
- from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
- 20% { opacity: .85; animation-timing-function: ease-out; }
- to { opacity: 0; transform: translate(0) scale(1); }
-}
-
-@keyframes downloadsIndicatorNotificationStartLeft {
- from { opacity: 0; transform: translate(128px, 128px) scale(8); }
- 20% { opacity: .85; animation-timing-function: ease-out; }
- to { opacity: 0; transform: translate(0) scale(1); }
-}
-
-#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
- background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
- animation-name: downloadsIndicatorNotificationStartRight;
- animation-duration: 1s;
-}
@media (min-resolution: 2dppx) {
#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
background-image: url("chrome://browser/skin/downloads/download-notification-start@2x.png");
}
}
-#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
- animation-name: downloadsIndicatorNotificationStartLeft;
-}
-
-@keyframes downloadsIndicatorNotificationFinish {
- from { opacity: 0; transform: scale(1); }
- 20% { opacity: .65; animation-timing-function: ease-in; }
- to { opacity: 0; transform: scale(8); }
-}
-
-#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
- background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
- animation-name: downloadsIndicatorNotificationFinish;
- animation-duration: 1s;
-}
@media (min-resolution: 2dppx) {
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png");
}
}
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,12 +1,49 @@
/* 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 {
+%ifdef MOZ_PHOTON_THEME
+ --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
+%else
+ --downloads-indicator-image: url("chrome://browser/skin/download.svg");
+%endif
+}
+
+#downloads-indicator-anchor {
+ min-width: 16px;
+ min-height: 16px;
+}
+
+#downloads-indicator-icon {
+ background: var(--downloads-indicator-image) center no-repeat;
+ -moz-context-properties: fill;
+ fill: var(--toolbarbutton-icon-fill);
+ width: 16px;
+ height: 16px;
+ background-size: 16px;
+}
+
+toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
+ fill: var(--toolbarbutton-icon-fill-inverted);
+}
+
+#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+ fill: var(--toolbarbutton-icon-fill-attention);
+}
+
+#downloads-button[attention="success"] {
+ list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
+ -moz-image-region: auto;
+}
+
#downloads-indicator-progress-icon {
background: var(--downloads-indicator-image) bottom no-repeat;
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill-attention);
background-size: 16px;
margin-top: 16px;
/* From javascript side we use animation delay from 0s to -100s to show
* corresponding frames needed for progress.
@@ -40,16 +77,51 @@ toolbar[brighttext] #downloads-indicator
filter: brightness(0.7);
}
100% {
margin-top: 2px;
filter: brightness(1);
}
}
+/*** Status badges ***/
+
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ display: -moz-box;
+ height: 8px;
+ width: 8px;
+ min-width: 0;
+ border-radius: 50%;
+ /* "!important" is necessary to override the rule in toolbarbutton.css */
+ margin-top: -1px !important;
+ margin-right: -2px !important;
+}
+
+#downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ height: 7px;
+ width: 7px;
+}
+
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ background: #D90000;
+}
+
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ background: #FFBF00;
+}
+
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
+ filter: none;
+}
+
+
+/*** Download notifications ***/
+
#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
animation-name: downloadsIndicatorStartJump;
/* Upon changing the overall duration below, please keep the delay time of
setTimeout() identical in indicator.js for this animation. */
animation-duration: 0.5s;
animation-delay: 1s;
animation-iteration-count: 2;
}
@@ -62,8 +134,64 @@ toolbar[brighttext] #downloads-indicator
50% {
transform: translateY(-3px);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0);
}
}
+
+#downloads-animation-container {
+ min-height: 1px;
+ min-width: 1px;
+ height: 1px;
+ margin-bottom: -1px;
+ /* Makes the outermost animation container element positioned, so that its
+ contents are rendered over the main browser window in the Z order.
+ This is required by the animated event notification. */
+ position: relative;
+ /* The selected tab may overlap #downloads-indicator-notification */
+ z-index: 5;
+}
+
+#downloads-indicator-notification {
+ opacity: 0;
+ background-size: 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+}
+
+@keyframes downloadsIndicatorNotificationStartRight {
+ from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
+ 20% { opacity: .85; animation-timing-function: ease-out; }
+ to { opacity: 0; transform: translate(0) scale(1); }
+}
+
+@keyframes downloadsIndicatorNotificationStartLeft {
+ from { opacity: 0; transform: translate(128px, 128px) scale(8); }
+ 20% { opacity: .85; animation-timing-function: ease-out; }
+ to { opacity: 0; transform: translate(0) scale(1); }
+}
+
+@keyframes downloadsIndicatorNotificationFinish {
+ from { opacity: 0; transform: scale(1); }
+ 20% { opacity: .65; animation-timing-function: ease-in; }
+ to { opacity: 0; transform: scale(8); }
+}
+
+#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
+ background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
+ animation-name: downloadsIndicatorNotificationStartRight;
+ animation-duration: 1s;
+}
+
+#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
+ animation-name: downloadsIndicatorNotificationStartLeft;
+}
+
+#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
+ background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
+ animation-name: downloadsIndicatorNotificationFinish;
+ animation-duration: 1s;
+}
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -1,127 +1,5 @@
/* 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/. */
%include ../../shared/downloads/indicator.inc.css
-
-/*** Status and progress indicator ***/
-
-#downloads-animation-container {
- min-height: 1px;
- min-width: 1px;
- height: 1px;
- margin-bottom: -1px;
- /* Makes the outermost animation container element positioned, so that its
- contents are rendered over the main browser window in the Z order.
- This is required by the animated event notification. */
- position: relative;
- /* The selected tab may overlap #downloads-indicator-notification */
- z-index: 5;
-}
-
-/*** Main indicator icon ***/
-
-#downloads-button {
-%ifdef MOZ_PHOTON_THEME
- --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
-%else
- --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-%endif
-}
-
-#downloads-indicator-icon {
- background: var(--downloads-indicator-image) center no-repeat;
- -moz-context-properties: fill;
- fill: var(--toolbarbutton-icon-fill);
- width: 16px;
- height: 16px;
- background-size: 16px;
-}
-
-toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
- fill: var(--toolbarbutton-icon-fill-inverted);
-}
-
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- display: -moz-box;
- height: 8px;
- width: 8px;
- min-width: 0;
- border-radius: 50%;
- /* "!important" is necessary to override the rule in toolbarbutton.css */
- margin-top: -1px !important;
- margin-right: -2px !important;
-}
-
-#downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- height: 7px;
- width: 7px;
-}
-
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- background: #D90000;
-}
-
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
- background: #FFBF00;
-}
-
-#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
-#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
- filter: none;
-}
-
-#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
- fill: var(--toolbarbutton-icon-fill-attention);
-}
-
-#downloads-button[cui-areatype="menu-panel"][attention="success"] {
- list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
- -moz-image-region: auto;
-}
-
-/*** Download notifications ***/
-
-#downloads-indicator-notification {
- opacity: 0;
- background-size: 16px;
- background-position: center;
- background-repeat: no-repeat;
- width: 16px;
- height: 16px;
-}
-
-@keyframes downloadsIndicatorNotificationStartRight {
- from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
- 20% { opacity: .85; animation-timing-function: ease-out; }
- to { opacity: 0; transform: translate(0) scale(1); }
-}
-
-@keyframes downloadsIndicatorNotificationStartLeft {
- from { opacity: 0; transform: translate(128px, 128px) scale(8); }
- 20% { opacity: .85; animation-timing-function: ease-out; }
- to { opacity: 0; transform: translate(0) scale(1); }
-}
-
-#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
- background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
- animation-name: downloadsIndicatorNotificationStartRight;
- animation-duration: 1s;
-}
-
-#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
- animation-name: downloadsIndicatorNotificationStartLeft;
-}
-
-@keyframes downloadsIndicatorNotificationFinish {
- from { opacity: 0; transform: scale(1); }
- 20% { opacity: .65; animation-timing-function: ease-in; }
- to { opacity: 0; transform: scale(8); }
-}
-
-#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
- background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
- animation-name: downloadsIndicatorNotificationFinish;
- animation-duration: 1s;
-}