Bug 1001324 - The Downloads Panel footer should use the same style as the application menu. r=jaws
MozReview-Commit-ID: JFM2gmpqyNL
--- a/browser/components/downloads/content/downloadsOverlay.xul
+++ b/browser/components/downloads/content/downloadsOverlay.xul
@@ -122,17 +122,18 @@
onmouseout="DownloadsView.onDownloadMouseOut(event);"
oncontextmenu="DownloadsView.onDownloadContextMenu(event);"
ondragstart="DownloadsView.onDownloadDragStart(event);"/>
<description id="emptyDownloads"
mousethrough="always">
&downloadsPanelEmpty.label;
</description>
<spacer flex="1"/>
- <vbox id="downloadsFooter">
+ <vbox id="downloadsFooter"
+ class="downloadsPanelFooter">
<hbox id="downloadsSummary"
align="center"
orient="horizontal"
onkeydown="DownloadsSummary.onKeyDown(event);"
onclick="DownloadsSummary.onClick(event);">
<image class="downloadTypeIcon" />
<vbox id="downloadsSummaryChildBox">
<description id="downloadsSummaryDescription"
@@ -143,38 +144,40 @@
max="100"
mode="normal" />
<description id="downloadsSummaryDetails"
style="width: &downloadDetails.width;"
crop="end"/>
</vbox>
</hbox>
<button id="downloadsHistory"
- class="plain"
+ class="plain downloadsPanelFooterButton"
label="&downloadsHistory.label;"
accesskey="&downloadsHistory.accesskey;"
oncommand="DownloadsPanel.showDownloadsHistory();"/>
</vbox>
</panelview>
<panelview id="downloadsPanel-blockedSubview"
orient="vertical"
flex="1">
<description id="downloadsPanel-blockedSubview-title"/>
<description id="downloadsPanel-blockedSubview-details1"/>
<description id="downloadsPanel-blockedSubview-details2"/>
<spacer flex="1"/>
<hbox id="downloadsPanel-blockedSubview-buttons"
+ class="downloadsPanelFooter"
align="stretch">
<button id="downloadsPanel-blockedSubview-openButton"
- class="plain"
+ class="plain downloadsPanelFooterButton"
command="downloadsCmd_chooseOpen"
flex="1"/>
+ <toolbarseparator/>
<button id="downloadsPanel-blockedSubview-deleteButton"
- class="plain"
+ class="plain downloadsPanelFooterButton"
oncommand="DownloadsBlockedSubview.confirmBlock();"
default="true"
flex="1"/>
</hbox>
</panelview>
</panelmultiview>
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -1,33 +1,19 @@
/* 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/downloads.inc.css
/*** Panel and outer controls ***/
-#downloadsFooter,
-#downloadsPanel-blockedSubview-buttons {
- border-top: 1px solid ThreeDShadow;
- background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
-}
-
-#downloadsHistory,
-#downloadsPanel-blockedSubview-openButton {
- color: -moz-nativehyperlinktext;
-}
-
@keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus > .button-box {
+@keyfocus@ .downloadsPanelFooterButton:focus {
outline: 1px -moz-dialogtext dotted;
-}
-
-@keyfocus@ #downloadsSummary:focus {
outline-offset: -5px;
}
/*** List items and similar elements in the summary ***/
:root {
--downloads-item-height: 6em;
--downloads-item-border-top-color: hsla(0,0%,100%,.2);
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -5,55 +5,22 @@
%include ../../shared/downloads/downloads.inc.css
/*** Panel and outer controls ***/
#downloadsPanel {
margin-top: -1px;
}
-#downloadsFooter,
-#downloadsPanel-blockedSubview-buttons {
- background: #e5e5e5;
- border-top: 1px solid hsla(0,0%,0%,.1);
- box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
-}
-
-#downloadsFooter,
-#downloadsPanel-multiView .panel-subviews {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-
-#downloadsHistory,
-#downloadsPanel-blockedSubview-buttons > button {
- color: #808080;
-}
-
@keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus,
-@keyfocus@ #downloadsPanel-blockedSubview-buttons > button:focus {
+@keyfocus@ .downloadsPanelFooterButton:focus {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
}
-@keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus {
- -moz-outline-radius-bottomleft: 4px;
- -moz-outline-radius-bottomright: 4px;
-}
-
-@keyfocus@ #downloadsPanel-blockedSubview-deleteButton:-moz-locale-dir(ltr):focus {
- -moz-outline-radius-bottomright: 4px;
-}
-
-@keyfocus@ #downloadsPanel-blockedSubview-deleteButton:-moz-locale-dir(rtl):focus {
- -moz-outline-radius-bottomleft: 4px;
-}
-
/*** List items and similar elements in the summary ***/
:root {
--downloads-item-height: 7em;
--downloads-item-border-top-color: hsla(0,0%,100%,.07);
--downloads-item-border-bottom-color: hsla(0,0%,0%,.2);
--downloads-item-font-size-factor: 0.95;
--downloads-item-target-margin-bottom: 6px;
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -8,16 +8,21 @@
%define notKeyfocus #downloadsPanel:not([keyfocus])
%define item richlistitem[type="download"]
%define itemFinished @item@[state="1"]
%define itemNotFinished @item@:not([state="1"])
%define itemFocused #downloadsListBox:focus > @item@[selected]
/*** Panel and outer controls ***/
+#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
+ overflow: hidden;
+ display: block;
+}
+
#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
padding: 0;
}
#downloadsListBox {
background: transparent;
padding: 4px;
@@ -26,16 +31,62 @@
#emptyDownloads {
padding: 10px 20px;
/* The panel can be wider than this description after the blocked subview is
shown, so center the text. */
text-align: center;
}
+.downloadsPanelFooter {
+ background-color: hsla(210,4%,10%,.07);
+ border-top: 1px solid hsla(210,4%,10%,.14);
+}
+
+.downloadsPanelFooter > toolbarseparator {
+ margin: 0;
+ border-width: 0;
+ min-width: 0;
+ border-left: 1px solid hsla(210,4%,10%,.14);
+ -moz-appearance: none !important;
+}
+
+.downloadsPanelFooterButton {
+ -moz-appearance: none;
+ background-color: transparent;
+ color: black;
+ margin: 0;
+ padding: 0;
+ min-height: 40px;
+}
+
+.downloadsPanelFooterButton:hover {
+ outline: 1px solid hsla(210,4%,10%,.07);
+ background-color: hsla(210,4%,10%,.07);
+}
+
+.downloadsPanelFooterButton:hover:active {
+ outline: 1px solid hsla(210,4%,10%,.12);
+ background-color: hsla(210,4%,10%,.12);
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+.downloadsPanelFooterButton[default] {
+ background-color: #0996f8;
+ color: white;
+}
+
+.downloadsPanelFooterButton[default]:hover {
+ background-color: #0675d3;
+}
+
+.downloadsPanelFooterButton[default]:hover:active {
+ background-color: #0568ba;
+}
+
#downloadsSummary {
--summary-padding-end: 38px;
--summary-padding-start: 12px;
padding: 8px var(--summary-padding-end) 8px var(--summary-padding-start);
cursor: pointer;
-moz-user-focus: normal;
}
@@ -60,25 +111,16 @@
}
}
%endif
#downloadsSummaryDescription {
color: -moz-nativehyperlinktext;
}
-#downloadsHistory {
- background: transparent;
- cursor: pointer;
-}
-
-#downloadsHistory > .button-box {
- margin: 1em;
-}
-
/*** List items and similar elements in the summary ***/
#downloadsSummary,
richlistitem[type="download"] {
height: var(--downloads-item-height);
padding-inline-end: 0;
color: inherit;
}
@@ -226,25 +268,8 @@ richlistitem[type="download"]:last-child
}
#downloadsPanel-blockedSubview-title,
#downloadsPanel-blockedSubview-details1,
#downloadsPanel-blockedSubview-details2 {
-moz-margin-start: 64px;
-moz-margin-end: 16px;
}
-
-#downloadsPanel-blockedSubview-buttons {
- height: 41px;
- cursor: pointer;
-}
-
-#downloadsPanel-blockedSubview-buttons > button {
- -moz-appearance: none;
- padding: 0;
- margin: 0;
- background-color: transparent;
-}
-
-#downloadsPanel-blockedSubview-buttons > button[default] {
- background-color: Highlight;
- color: HighlightText;
-}
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -1,86 +1,66 @@
/* 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/downloads.inc.css
/*** Panel and outer controls ***/
-#downloadsFooter,
-#downloadsPanel-blockedSubview-openButton {
+#downloadsSummary {
background-color: hsla(210,4%,10%,.04);
box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
transition-duration: 150ms;
transition-property: background-color;
}
-#downloadsFooter:hover,
-#downloadsPanel-blockedSubview-openButton:hover {
+#downloadsSummary:hover {
background-color: hsla(210,4%,10%,.05);
}
-#downloadsFooter:hover:active,
-#downloadsPanel-blockedSubview-openButton:hover:active {
+#downloadsSummary:hover:active {
background-color: hsla(210,4%,10%,.1);
box-shadow: 0 2px 0 0 hsla(210,4%,10%,.1) inset;
}
@media (-moz-os-version: windows-xp),
(-moz-os-version: windows-vista),
(-moz-os-version: windows-win7) {
- #downloadsHistory,
- #downloadsPanel-blockedSubview-buttons > button {
- color: -moz-nativehyperlinktext;
- }
-
@media (-moz-windows-default-theme) {
- #downloadsFooter,
- #downloadsPanel-multiView .panel-subviews {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- transition-duration: 0s;
- }
-
- #downloadsFooter,
- #downloadsFooter:hover,
- #downloadsFooter:hover:active,
- #downloadsPanel-blockedSubview-openButton,
- #downloadsPanel-blockedSubview-openButton:hover,
- #downloadsPanel-blockedSubview-openButton:hover:active {
+ #downloadsSummary,
+ #downloadsSummary:hover,
+ #downloadsSummary:hover:active {
background-color: #f1f5fb;
box-shadow: 0px 1px 2px rgb(204,214,234) inset;
+ transition-duration: 0s;
+ cursor: pointer;
}
@media (-moz-os-version: windows-xp) {
- #downloadsFooter,
- #downloadsFooter:hover,
- #downloadsFooter:hover:active,
- #downloadsPanel-blockedSubview-openButton,
- #downloadsPanel-blockedSubview-openButton:hover,
- #downloadsPanel-blockedSubview-openButton:hover:active {
+ #downloadsSummary,
+ #downloadsSummary:hover,
+ #downloadsSummary:hover:active {
background-color: hsla(216,45%,88%,.98);
}
}
}
}
@keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus {
+@keyfocus@ .downloadsPanelFooterButton:focus {
outline: 1px -moz-dialogtext dotted;
outline-offset: -1px;
}
@keyfocus@ #downloadsSummary:focus {
outline-offset: -5px;
}
-#downloadsHistory > .button-box,
-#downloadsPanel-blockedSubview-buttons > button > .button-box {
+.downloadsPanelFooterButton > .button-box {
/* Hide the border so we don't display an inner focus ring. */
border: none;
}
/*** List items and similar elements in the summary ***/
:root {
--downloads-item-height: 7em;