gecko-dev/browser/components/downloads/content/downloads.css
Sean Lee 15f00ba1a2 Bug 1282664 - Redesign the right-menu on a download item in Downloads Panel.; r=Paolo
MozReview-Commit-ID: DyTisE3dX1A

--HG--
extra : rebase_source : d87b91cb9a8b7875eddc42c4e2bad6234f433af7
2016-10-14 14:07:00 +08:00

276 lines
12 KiB
CSS

/* 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/. */
/*** Downloads Panel ***/
richlistitem[type="download"] {
-moz-binding: url('chrome://browser/content/downloads/download.xml#download');
}
richlistitem[type="download"]:not([selected]) button {
/* Only focus buttons in the selected item. */
-moz-user-focus: none;
}
.downloadsHideDropmarker > #downloadsFooterButtonsSplitter,
.downloadsHideDropmarker > #downloadsFooterDropmarker {
display: none;
}
richlistitem[type="download"].download-state[state="1"]:not([exists]) > .downloadButtonArea,
richlistitem[type="download"].download-state[state="1"]:not([exists]) > toolbarseparator {
display: none;
}
#downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryProgress,
#downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryDetails,
#downloadsFooter:not([showingsummary]) #downloadsSummary {
display: none;
}
#downloadsFooter[showingdropdown] > stack > #downloadsSummary,
#downloadsFooter[showingsummary] > stack:hover > #downloadsSummary,
#downloadsFooter[showingsummary]:not([showingdropdown]) > stack:not(:hover) > #downloadsFooterButtons {
/* If we used "visibility: hidden;" then the mouseenter event of
#downloadsHistory wouldn't be triggered immediately, and the hover styling
of the button would not apply until the mouse is moved again.
"-moz-user-focus: ignore;" prevents the elements with "opacity: 0;" from
being focused with the keyboard. */
opacity: 0;
-moz-user-focus: ignore;
}
/*** Downloads View ***/
/**
* The downloads richlistbox may list thousands of items, and it turns out
* XBL binding attachment, and even more so detachment, is a performance hog.
* This hack makes sure we don't apply any binding to inactive items (inactive
* items are history downloads that haven't been in the visible area).
* We can do this because the richlistbox implementation does not interact
* much with the richlistitem binding. However, this may turn out to have
* some side effects (see bug 828111 for the details).
*
* We might be able to do away with this workaround once bug 653881 is fixed.
*/
richlistitem.download {
-moz-binding: none;
}
richlistitem.download[active] {
-moz-binding: url("chrome://browser/content/downloads/download.xml#download");
}
richlistitem.download button {
/* These buttons should never get focus, as that would "disable"
the downloads view controller (it's only used when the richlistbox
is focused). */
-moz-user-focus: none;
}
/*** Visibility of controls inside download items ***/
.download-state:not(:-moz-any([state="6"], /* Blocked (parental) */
[state="8"], /* Blocked (dirty) */
[state="9"]) /* Blocked (policy) */)
.downloadBlockedBadge,
.download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
[state="5"], /* Starting (queued) */
[state="0"], /* Downloading */
[state="4"], /* Paused */
[state="7"]) /* Scanning */)
.downloadProgress,
.download-state:not( [state="0"] /* Downloading */)
.downloadPauseMenuItem,
.download-state:not( [state="4"] /* Paused */)
.downloadResumeMenuItem,
/* Blocked (dirty) downloads that have not been confirmed and
have temporary data. */
.download-state:not( [state="8"] /* Blocked (dirty) */)
.downloadUnblockMenuItem,
.download-state[state="8"]:not(.temporary-block)
.downloadUnblockMenuItem,
.download-state:not(:-moz-any([state="1"], /* Finished */
[state="2"], /* Failed */
[state="3"], /* Canceled */
[state="6"], /* Blocked (parental) */
[state="8"], /* Blocked (dirty) */
[state="9"]) /* Blocked (policy) */)
.downloadRemoveFromHistoryMenuItem,
.download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
[state="0"], /* Downloading */
[state="1"], /* Finished */
[state="4"], /* Paused */
[state="5"]) /* Starting (queued) */)
.downloadShowMenuItem,
.download-state[state="1"]:not([exists])
.downloadShowMenuItem,
.download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
[state="0"], /* Downloading */
[state="1"], /* Finished */
[state="4"], /* Paused */
[state="5"], /* Starting (queued) */
[state="8"]) /* Blocked (dirty) */)
.downloadCommandsSeparator,
.download-state[state="1"]:not([exists])
.downloadCommandsSeparator,
.download-state[state="8"]:not(.temporary-block)
.downloadCommandsSeparator
{
display: none;
}
/*** Visibility of download buttons ***/
.download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
[state="5"], /* Starting (queued) */
[state="0"], /* Downloading */
[state="4"]) /* Paused */)
.downloadCancel,
/* Blocked (dirty) downloads that have not been confirmed and
have temporary data, for the Malware case. */
.download-state:not( [state="8"] /* Blocked (dirty) */)
.downloadConfirmBlock,
.download-state[state="8"]:not(.temporary-block)
.downloadConfirmBlock,
.download-state[state="8"].temporary-block:not([verdict="Malware"])
.downloadConfirmBlock,
/* Blocked (dirty) downloads that have not been confirmed and
have temporary data, for the Potentially Unwanted case. */
.download-state:not( [state="8"] /* Blocked (dirty) */)
.downloadChooseUnblock,
.download-state[state="8"]:not(.temporary-block)
.downloadChooseUnblock,
.download-state[state="8"].temporary-block:not([verdict="PotentiallyUnwanted"])
.downloadChooseUnblock,
/* Blocked (dirty) downloads that have not been confirmed and
have temporary data, for the Uncommon case. */
.download-state:not( [state="8"] /* Blocked (dirty) */)
.downloadChooseOpen,
.download-state[state="8"]:not(.temporary-block)
.downloadChooseOpen,
.download-state[state="8"].temporary-block:not([verdict="Uncommon"])
.downloadChooseOpen,
.download-state:not(:-moz-any([state="2"], /* Failed */
[state="3"]) /* Canceled */)
.downloadRetry,
.download-state:not( [state="1"] /* Finished */)
.downloadShow,
.download-state:-moz-any( [state="6"], /* Blocked (parental) */
[state="7"], /* Scanning */
[state="9"]) /* Blocked (policy) */
> toolbarseparator,
/* The "show blocked info" button is shown only in the downloads panel. */
.downloadShowBlockedInfo
{
display: none;
}
/*** Downloads panel ***/
#downloadsPanel[hasdownloads] #emptyDownloads,
#downloadsPanel:not([hasdownloads]) #downloadsListBox {
display: none;
}
/*** Downloads panel multiview (main view and blocked-downloads subview) ***/
/* Hide all the usual buttons. */
#downloadsPanel-mainView .download-state[state="8"] .downloadCancel,
#downloadsPanel-mainView .download-state[state="8"] .downloadConfirmBlock,
#downloadsPanel-mainView .download-state[state="8"] .downloadChooseUnblock,
#downloadsPanel-mainView .download-state[state="8"] .downloadChooseOpen,
#downloadsPanel-mainView .download-state[state="8"] .downloadRetry,
#downloadsPanel-mainView .download-state[state="8"] .downloadShow {
display: none;
}
/* Make the panel wide enough to show the download list items without improperly
truncating them. */
#downloadsPanel-multiView > .panel-viewcontainer,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-mainview {
max-width: unset;
}
/* Show the "show blocked info" button. */
#downloadsPanel-mainView .download-state[state="8"] .downloadShowBlockedInfo {
display: inline;
}
/** When the main view is showing... **/
/* The subview should be off to the right and not visible at all. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
transform: translateX(101%);
transition: transform var(--panelui-subview-transition-duration);
}
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews:-moz-locale-dir(rtl) {
transform: translateX(-101%);
}
/** When the subview is showing... **/
/* Hide the buttons of all downloads except the one that triggered the
subview. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state:not([showingsubview]) .downloadButton {
visibility: hidden;
}
/* For the download that triggered the subview, move its button farther to the
right by removing padding so that a minimum amount of the main view's right
edge needs to be shown. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] {
padding: 0;
}
/* The main view should slide to the left and its right edge should remain
visible. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=subview] > .panel-mainview {
transform: translateX(calc(-100% + 38px));
transition: transform var(--panelui-subview-transition-duration);
}
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=subview] > .panel-mainview:-moz-locale-dir(rtl) {
transform: translateX(calc(100% - 38px));
}
/* The subview should leave the right edge of the main view uncovered. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
/* Use a margin instead of a transform like above so that the subview's width
isn't wider than the panel. */
-moz-margin-start: 38px !important;
}
/* Prevent keyboard interaction in the main view by preventing all elements in
the main view from being focused... */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] > .panel-mainview #downloadsListBox,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] > .panel-mainview richlistitem,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] > .panel-mainview .downloadButton,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] > .panel-mainview .downloadsPanelFooterButton,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] > .panel-mainview #downloadsSummary {
-moz-user-focus: ignore;
}
/* ... except for the downloadShowBlockedInfo button in the blocked download.
Selecting it with the keyboard should show the main view again. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadShowBlockedInfo {
-moz-user-focus: normal;
}