From 8910c81ab6e0e2d7d4e5ac65fb26601f2490aeed Mon Sep 17 00:00:00 2001 From: Sam Foster Date: Tue, 27 Jun 2017 13:15:00 -0700 Subject: [PATCH] Bug 1376515 - Move shared download indicator rules to indicator.inc.css. r=Paolo MozReview-Commit-ID: Jnw9jl3zBOV --HG-- extra : rebase_source : 77189ad2f7fce77813a3d8b4c16d746af5ba1093 --- browser/themes/linux/downloads/indicator.css | 120 ---------------- browser/themes/osx/downloads/indicator.css | 124 ----------------- .../themes/shared/downloads/indicator.inc.css | 128 ++++++++++++++++++ .../themes/windows/downloads/indicator.css | 122 ----------------- 4 files changed, 128 insertions(+), 366 deletions(-) diff --git a/browser/themes/linux/downloads/indicator.css b/browser/themes/linux/downloads/indicator.css index 2fd88c8b3a5c..d48188e548e6 100644 --- a/browser/themes/linux/downloads/indicator.css +++ b/browser/themes/linux/downloads/indicator.css @@ -3,123 +3,3 @@ * 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; -} diff --git a/browser/themes/osx/downloads/indicator.css b/browser/themes/osx/downloads/indicator.css index e2a0bb32f67e..3cb43e4f5929 100644 --- a/browser/themes/osx/downloads/indicator.css +++ b/browser/themes/osx/downloads/indicator.css @@ -4,85 +4,6 @@ %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"] { @@ -90,36 +11,6 @@ toolbar[brighttext] #downloads-indicator-icon { } } -/*** 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 { @@ -127,21 +18,6 @@ toolbar[brighttext] #downloads-indicator-icon { } } -#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 { diff --git a/browser/themes/shared/downloads/indicator.inc.css b/browser/themes/shared/downloads/indicator.inc.css index 9d9c50ca2fb0..ee68304cbeb2 100644 --- a/browser/themes/shared/downloads/indicator.inc.css +++ b/browser/themes/shared/downloads/indicator.inc.css @@ -2,6 +2,43 @@ * 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; @@ -45,6 +82,41 @@ toolbar[brighttext] #downloads-indicator-progress-icon { } } +/*** 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 @@ -67,3 +139,59 @@ toolbar[brighttext] #downloads-indicator-progress-icon { 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; +} diff --git a/browser/themes/windows/downloads/indicator.css b/browser/themes/windows/downloads/indicator.css index 5c8da99fdb1a..d48188e548e6 100644 --- a/browser/themes/windows/downloads/indicator.css +++ b/browser/themes/windows/downloads/indicator.css @@ -3,125 +3,3 @@ * 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; -}