Bug 787285 - Enhance the presence of the stop/resume/open buttons in the downloads views.

r=mak
This commit is contained in:
Mike Conley 2013-01-07 13:31:52 +01:00
parent 326fdafeb1
commit 66e24bc3ab
10 changed files with 278 additions and 44 deletions

View File

@ -51,11 +51,75 @@
.downloadButton.downloadCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
richlistitem.download[selected] > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 80px, 16px, 64px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 96px, 16px, 80px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 112px, 16px, 96px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 128px, 16px, 112px);
}
.downloadButton.downloadShow {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 32px, 32px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 48px, 32px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 64px, 32px, 48px);
}
richlistitem.download[selected] > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 80px, 32px, 64px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 96px, 32px, 80px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 112px, 32px, 96px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 128px, 32px, 112px);
}
.downloadButton.downloadRetry {
-moz-image-region: rect(32px, 16px, 48px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 32px, 48px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 64px, 48px, 48px);
}
richlistitem.download[selected] > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 80px, 48px, 64px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 96px, 48px, 80px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 112px, 48px, 96px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 128px, 48px, 112px);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -144,41 +144,42 @@ richlistitem[type="download"][state="1"]:hover {
.downloadButton.downloadCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
.downloadButton.downloadCancel:hover {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
.downloadButton.downloadCancel:active {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
.downloadButton.downloadShow {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
.downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 32px, 32px, 16px);
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 96px, 32px, 80px);
}
.downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 48px, 32px, 32px);
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 112px, 32px, 96px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 128px, 32px, 112px);
}
/** TODO: state="1"**/
.downloadButton.downloadRetry {
-moz-image-region: rect(32px, 16px, 48px, 0px);
}
.downloadButton.downloadRetry:hover {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 32px, 48px, 16px);
}
.downloadButton.downloadRetry:active {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-moz-image-region: rect(48px, 16px, 64px, 0px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-moz-image-region: rect(48px, 32px, 64px, 16px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-moz-image-region: rect(48px, 48px, 64px, 32px);
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 64px, 48px, 48px);
}
/*** Status and progress indicator ***/

View File

@ -51,11 +51,74 @@
.downloadButton.downloadCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
richlistitem.download[selected] > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 80px, 16px, 64px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 96px, 16px, 80px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 112px, 16px, 96px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 128px, 16px, 112px);
}
.downloadButton.downloadShow {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 32px, 32px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 48px, 32px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 64px, 32px, 48px);
}
richlistitem.download[selected] > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 80px, 32px, 64px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 96px, 32px, 80px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 112px, 32px, 96px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 128px, 32px, 112px);
}
.downloadButton.downloadRetry {
-moz-image-region: rect(32px, 16px, 48px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 32px, 48px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 64px, 48px, 48px);
}
richlistitem.download[selected] > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 80px, 48px, 64px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 96px, 48px, 80px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 112px, 48px, 96px);
}
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 128px, 48px, 112px);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

View File

@ -163,23 +163,41 @@ richlistitem[type="download"][state="1"]:hover {
.downloadButton.downloadCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
.downloadButton.downloadShow {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 32px, 32px, 16px);
-moz-image-region: rect(16px, 96px, 32px, 80px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 48px, 32px, 32px);
-moz-image-region: rect(16px, 112px, 32px, 96px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 64px, 32px, 48px);
-moz-image-region: rect(16px, 128px, 32px, 112px);
}
.downloadButton.downloadRetry {
-moz-image-region: rect(32px, 16px, 48px, 0px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 32px, 48px, 16px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 64px, 48px, 48px);
}
/*** Status and progress indicator ***/

View File

@ -57,10 +57,96 @@
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
.downloadButton.downloadShow {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 32px, 32px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 48px, 32px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 64px, 32px, 48px);
}
.downloadButton.downloadRetry {
-moz-image-region: rect(32px, 16px, 48px, 0px);
}
richlistitem.download:hover > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 32px, 48px, 16px);
}
richlistitem.download:hover > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem.download:hover > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 64px, 48px, 48px);
}
%ifndef WINSTRIPE_AERO
richlistitem.download[selected] > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 80px, 16px, 64px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 96px, 16px, 80px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 112px, 16px, 96px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 128px, 16px, 112px);
}
richlistitem.download[selected] > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 80px, 32px, 64px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 96px, 32px, 80px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 112px, 32px, 96px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 128px, 32px, 112px);
}
richlistitem.download[selected] > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 80px, 48px, 64px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 96px, 48px, 80px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 112px, 48px, 96px);
}
richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 128px, 48px, 112px);
}
%endif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -145,50 +145,52 @@ richlistitem[type="download"][state="1"]:hover {
.downloadButton.downloadCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
.downloadButton.downloadCancel:hover {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
.downloadButton.downloadCancel:active {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
.downloadButton.downloadShow {
-moz-image-region: rect(16px, 16px, 32px, 0px);
}
.downloadButton.downloadShow:hover {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 32px, 32px, 16px);
}
.downloadButton.downloadShow:active {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 48px, 32px, 32px);
}
richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 64px, 32px, 48px);
}
%ifndef WINSTRIPE_AERO
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-moz-image-region: rect(16px, 96px, 32px, 80px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-moz-image-region: rect(16px, 112px, 32px, 96px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-moz-image-region: rect(16px, 128px, 32px, 112px);
}
%endif
.downloadButton.downloadRetry {
-moz-image-region: rect(32px, 16px, 48px, 0px);
}
.downloadButton.downloadRetry:hover {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
-moz-image-region: rect(32px, 32px, 48px, 16px);
}
.downloadButton.downloadRetry:active {
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
-moz-image-region: rect(32px, 48px, 48px, 32px);
}
%ifdef WINSTRIPE_AERO
@media not all and (-moz-windows-default-theme) {
%endif
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-moz-image-region: rect(48px, 16px, 64px, 0px);
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
-moz-image-region: rect(32px, 64px, 48px, 48px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-moz-image-region: rect(48px, 32px, 64px, 16px);
}
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-moz-image-region: rect(48px, 48px, 64px, 32px);
}
%ifdef WINSTRIPE_AERO
}
%endif
/*** Status and progress indicator ***/