mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-23 12:51:06 +00:00
Bug 1384692 - Update the download doorhanger style. ui-r=amylee, r=Paolo.
MozReview-Commit-ID: 4pY9JxnLNYk --HG-- extra : rebase_source : a6573e33298e84fca2fc8de92c932f770dcc53b2
This commit is contained in:
Blake Winton
parent
1243cb04e0
commit
fff59923b4
@ -200,63 +200,3 @@ richlistitem.download 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;
|
||||
}
|
||||
|
||||
@ -1571,13 +1571,6 @@ var DownloadsBlockedSubview = {
|
||||
* An array of strings with information about the block.
|
||||
*/
|
||||
toggle(element, title, details) {
|
||||
if (this.view.showingSubView) {
|
||||
this.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
this.element = element;
|
||||
element.setAttribute("showingsubview", "true");
|
||||
DownloadsView.subViewOpen = true;
|
||||
DownloadsViewController.updateCommands();
|
||||
|
||||
@ -1598,16 +1591,19 @@ var DownloadsBlockedSubview = {
|
||||
// Without this, the mainView is more narrow than the panel once all
|
||||
// downloads are removed from the panel.
|
||||
document.getElementById("downloadsPanel-mainView").style.minWidth =
|
||||
window.getComputedStyle(this.view).width;
|
||||
window.getComputedStyle(this.subview).width;
|
||||
},
|
||||
|
||||
handleEvent(event) {
|
||||
switch (event.type) {
|
||||
case "ViewHiding":
|
||||
this.subview.removeEventListener(event.type, this);
|
||||
this.element.removeAttribute("showingsubview");
|
||||
DownloadsView.subViewOpen = false;
|
||||
delete this.element;
|
||||
// If we're going back to the main panel, use showPanel to
|
||||
// focus the proper element.
|
||||
if (this.view.current !== this.subview) {
|
||||
DownloadsPanel.showPanel();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
DownloadsCommon.log("Unhandled DownloadsBlockedSubview event: " +
|
||||
@ -1616,16 +1612,6 @@ var DownloadsBlockedSubview = {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Slides out the blocked subview and shows the main view.
|
||||
*/
|
||||
hide() {
|
||||
this.view.showMainView();
|
||||
// The point of this is to focus the proper element in the panel now that
|
||||
// the main view is showing again. showPanel handles that.
|
||||
DownloadsPanel.showPanel();
|
||||
},
|
||||
|
||||
/**
|
||||
* Deletes the download and hides the entire panel.
|
||||
*/
|
||||
|
||||
@ -106,8 +106,8 @@
|
||||
accesskey="&cmd.clearList2.accesskey;"/>
|
||||
</menupopup>
|
||||
|
||||
<panelmultiview id="downloadsPanel-multiView"
|
||||
mainViewId="downloadsPanel-mainView">
|
||||
<photonpanelmultiview id="downloadsPanel-multiView"
|
||||
mainViewId="downloadsPanel-mainView">
|
||||
|
||||
<panelview id="downloadsPanel-mainView">
|
||||
<vbox class="panel-view-body-unscrollable">
|
||||
@ -154,7 +154,9 @@
|
||||
</panelview>
|
||||
|
||||
<panelview id="downloadsPanel-blockedSubview"
|
||||
descriptionheightworkaround="true">
|
||||
descriptionheightworkaround="true"
|
||||
class="PanelUI-subView"
|
||||
title="&downloadDetails.label;">
|
||||
<vbox class="panel-view-body-unscrollable">
|
||||
<description id="downloadsPanel-blockedSubview-title"/>
|
||||
<description id="downloadsPanel-blockedSubview-details1"/>
|
||||
@ -176,7 +178,7 @@
|
||||
</hbox>
|
||||
</panelview>
|
||||
|
||||
</panelmultiview>
|
||||
</photonpanelmultiview>
|
||||
|
||||
</panel>
|
||||
</popupset>
|
||||
|
||||
@ -134,6 +134,12 @@
|
||||
<!ENTITY downloadsHistory.label "Show All Downloads">
|
||||
<!ENTITY downloadsHistory.accesskey "S">
|
||||
|
||||
<!-- LOCALIZATION NOTE (downloadDetails.label):
|
||||
This string is shown at the top of the Download Details Panel, to indicate
|
||||
that we are showing the details of a single download.
|
||||
-->
|
||||
<!ENTITY downloadDetails.label "Download Details">
|
||||
|
||||
<!-- LOCALIZATION NOTE (openDownloadsFolder.label):
|
||||
This command is not currently available in the user interface, but the
|
||||
string was preserved by bug 1362207 to be used in a future version.
|
||||
|
||||
@ -270,16 +270,8 @@ richlistitem[type="download"]:last-child {
|
||||
background-color: var(--arrowpanel-dimmed-further);
|
||||
}
|
||||
|
||||
@item@[showingsubview] {
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
transition: background-color var(--panelui-subview-transition-duration),
|
||||
color var(--panelui-subview-transition-duration);
|
||||
}
|
||||
|
||||
@item@[verdict="Malware"]:hover,
|
||||
@item@[verdict="Malware"]:hover:active,
|
||||
@item@[verdict="Malware"][showingsubview] {
|
||||
@item@[verdict="Malware"]:hover:active {
|
||||
background-color: #aa1b08;
|
||||
color: white;
|
||||
}
|
||||
@ -312,27 +304,7 @@ richlistitem[type="download"]:last-child {
|
||||
|
||||
/*** Blocked subview ***/
|
||||
|
||||
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
|
||||
/* When the main view is showing, the shadow on the left edge of the subview is
|
||||
barely visible on the right edge of the main view, so set it to none. */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* When the subview is showing, turn the download button into an arrow pointing
|
||||
back to the main view. */
|
||||
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
|
||||
color: HighlightText;
|
||||
}
|
||||
|
||||
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
|
||||
list-style-image: url("chrome://browser/skin/panel-icon-arrow-left.svg");
|
||||
}
|
||||
|
||||
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
|
||||
list-style-image: url("chrome://browser/skin/panel-icon-arrow-right.svg");
|
||||
}
|
||||
|
||||
#downloadsPanel-blockedSubview {
|
||||
#downloadsPanel-blockedSubview > .panel-view-body-unscrollable {
|
||||
background-image: url("chrome://browser/skin/warning.svg");
|
||||
background-size: 32px 32px;
|
||||
background-position: 16px 16px;
|
||||
@ -343,7 +315,7 @@ richlistitem[type="download"]:last-child {
|
||||
background-position: calc(100% - 16px) 16px;
|
||||
}
|
||||
|
||||
#downloadsPanel-blockedSubview[verdict=Malware] {
|
||||
#downloadsPanel-blockedSubview[verdict=Malware] > .panel-view-body-unscrollable {
|
||||
background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user