Bug 950058 - Split each download item so that all of the right part of it activates the action.
MozReview-Commit-ID: AQlZdAWlJ0u
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -11,49 +11,53 @@
<bindings id="downloadBindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="download"
extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
<content orient="horizontal"
- align="center"
onclick="DownloadsView.onDownloadClick(event);">
- <xul:stack>
- <xul:image class="downloadTypeIcon"
- validate="always"
- xbl:inherits="src=image"/>
- <xul:image class="downloadBlockedBadge" />
- </xul:stack>
- <xul:vbox pack="center"
+ <xul:hbox class="downloadMainArea"
flex="1"
- class="downloadContainer"
- style="width: &downloadDetails.width;">
- <!-- We're letting localizers put a min-width in here primarily
- because of the downloads summary at the bottom of the list of
- download items. An element in the summary has the same min-width
- on a description, and we don't want the panel to change size if the
- summary isn't being displayed, so we ensure that items share the
- same minimum width.
- -->
- <xul:description class="downloadTarget"
- crop="center"
- style="min-width: &downloadsSummary.minWidth2;"
- xbl:inherits="value=displayName,tooltiptext=displayName"/>
- <xul:progressmeter anonid="progressmeter"
- class="downloadProgress"
- min="0"
- max="100"
- xbl:inherits="mode=progressmode,value=progress"/>
- <xul:description class="downloadDetails"
- crop="end"
- xbl:inherits="value=status,tooltiptext=statusTip"/>
- </xul:vbox>
- <xul:stack>
+ align="center">
+ <xul:stack>
+ <xul:image class="downloadTypeIcon"
+ validate="always"
+ xbl:inherits="src=image"/>
+ <xul:image class="downloadBlockedBadge" />
+ </xul:stack>
+ <xul:vbox pack="center"
+ flex="1"
+ class="downloadContainer"
+ style="width: &downloadDetails.width;">
+ <!-- We're letting localizers put a min-width in here primarily
+ because of the downloads summary at the bottom of the list of
+ download items. An element in the summary has the same min-width
+ on a description, and we don't want the panel to change size if the
+ summary isn't being displayed, so we ensure that items share the
+ same minimum width.
+ -->
+ <xul:description class="downloadTarget"
+ crop="center"
+ style="min-width: &downloadsSummary.minWidth2;"
+ xbl:inherits="value=displayName,tooltiptext=displayName"/>
+ <xul:progressmeter anonid="progressmeter"
+ class="downloadProgress"
+ min="0"
+ max="100"
+ xbl:inherits="mode=progressmode,value=progress"/>
+ <xul:description class="downloadDetails"
+ crop="end"
+ xbl:inherits="value=status,tooltiptext=statusTip"/>
+ </xul:vbox>
+ </xul:hbox>
+ <xul:toolbarseparator />
+ <xul:stack class="downloadButtonArea">
<xul:button class="downloadButton downloadCancel downloadIconCancel"
tooltiptext="&cmd.cancel.label;"
oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_cancel');"/>
<xul:button class="downloadButton downloadRetry downloadIconRetry"
tooltiptext="&cmd.retry.label;"
oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_retry');"/>
<xul:button class="downloadButton downloadShow downloadIconShow"
#ifdef XP_MACOSX
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -30,33 +30,23 @@
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@ {
outline: 1px -moz-dialogtext dotted;
outline-offset: -1px;
}
-@notKeyfocus@ @itemFinished@[exists]:hover,
@item@[showingsubview] {
- border-radius: 3px;
- border-top: 1px solid hsla(0,0%,100%,.3);
- border-bottom: 1px solid hsla(0,0%,0%,.2);
background-color: Highlight;
background-image: linear-gradient(hsla(0,0%,100%,.1), transparent);
color: HighlightText;
cursor: pointer;
}
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover,
-@item@[showingsubview][verdict="Malware"] {
- background-color: hsl(4, 82%, 47%);
- color: white;
-}
-
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
@item@:hover .downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -30,38 +30,31 @@
.downloadButton:focus > .button-box {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
}
/*** Highlighted list items ***/
-@keyfocus@ @itemFocused@,
-@notKeyfocus@ @itemFinished@[exists]:hover,
@item@[showingsubview] {
- border-radius: 3px;
- border-top: 1px solid hsla(0,0%,100%,.2);
- border-bottom: 1px solid hsla(0,0%,0%,.4);
background-color: Highlight;
color: HighlightText;
}
+@keyfocus@ @itemFocused@ {
+ outline: 2px -moz-mac-focusring solid;
+ outline-offset: -2px;
+}
+
@item@[showingsubview] {
transition: background-color var(--panelui-subview-transition-duration),
color var(--panelui-subview-transition-duration);
}
-@keyfocus@ @itemFocused@[verdict="Malware"],
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover,
-@item@[showingsubview][verdict="Malware"] {
- background-color: hsl(4, 82%, 47%);
- color: white;
-}
-
@notKeyfocus@ @itemFinished@[exists]:hover {
cursor: pointer;
}
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -60,29 +60,34 @@
@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
background-image: url("chrome://browser/skin/warning.svg");
}
@item@[verdict="Uncommon"] .downloadBlockedBadge {
background-image: url("chrome://browser/skin/info.svg");
}
+@item@ toolbarseparator {
+ display: none;
+}
+
.downloadTarget {
margin-bottom: 3px;
cursor: inherit;
}
.downloadDetails {
opacity: 0.7;
font-size: 95%;
cursor: inherit;
}
.downloadButton {
-moz-appearance: none;
+ -moz-box-align: center;
background: transparent;
min-width: 0;
min-height: 0;
margin: 3px;
border: none;
padding: 5px;
list-style-image: url("chrome://browser/skin/downloads/buttons.png");
}
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -20,17 +20,17 @@
#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
padding: 0;
}
#downloadsListBox {
background: transparent;
- padding: 4px;
+ padding: 0;
color: inherit;
-moz-appearance: none;
margin: 0;
border: none;
}
#emptyDownloads {
padding: 16px 25px;
@@ -40,17 +40,18 @@
text-align: center;
}
.downloadsPanelFooter {
background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
}
-.downloadsPanelFooter toolbarseparator {
+.downloadsPanelFooter toolbarseparator,
+@item@ toolbarseparator {
margin: 0;
border: 0;
min-width: 0;
border-left: 1px solid var(--panel-separator-color);
-moz-appearance: none;
}
.downloadsPanelFooterButton {
@@ -103,16 +104,21 @@
#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
padding-inline-start: 68px;
}
toolbarseparator.downloadsDropmarkerSplitter {
margin: 7px 0;
}
+@item@ > toolbarseparator {
+ margin: 10px 0;
+}
+
+@item@:hover > toolbarseparator,
#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
#downloadsFooter[showingdropdown] toolbarseparator {
margin: 0;
}
.downloadsDropmarker {
padding: 0 21px;
}
@@ -163,28 +169,29 @@ toolbarseparator.downloadsDropmarkerSpli
richlistitem[type="download"] {
height: var(--downloads-item-height);
padding-inline-end: 0;
color: inherit;
}
richlistitem[type="download"] {
margin: 0;
- border-top: 1px solid var(--downloads-item-border-top-color);
border-bottom: 1px solid var(--downloads-item-border-bottom-color);
background: transparent;
- padding: 8px;
-}
-
-richlistitem[type="download"]:first-child {
- border-top: 1px solid transparent;
+ padding: 0;
}
richlistitem[type="download"]:last-child {
- border-bottom: 1px solid transparent;
+ border-bottom: none;
+}
+
+richlistitem[type="download"] > .downloadMainArea {
+ height: var(--downloads-item-height);
+ padding-inline-end: 0;
+ padding: 8px;
}
.downloadTypeIcon {
margin-top: 8px;
margin-inline-end: 12px;
margin-bottom: 8px;
margin-inline-start: 0;
width: 32px;
@@ -203,16 +210,20 @@ richlistitem[type="download"]:last-child
@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
background-image: url("chrome://browser/skin/warning.svg");
}
@item@[verdict="Uncommon"] .downloadBlockedBadge {
background-image: url("chrome://browser/skin/info.svg");
}
+@item@[verdict="Malware"] {
+ color: #aa1b08;
+}
+
/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
a vbox with class .downloadContainer. We set the font-size of the entire
container to --downloads-item-font-size-factor because:
1) This is the size that we want .downloadDetails to be
2) The container's width is set by localizers by &downloadDetails.width;,
which is a ch unit. Since this is the value that should control the
panel width, we apply it to the outer container to constrain
@@ -239,31 +250,60 @@ richlistitem[type="download"]:last-child
#downloadsSummaryDetails,
.downloadDetails {
margin-top: var(--downloads-item-details-margin-top);
opacity: var(--downloads-item-details-opacity);
cursor: inherit;
}
+@item@[state="8"] toolbarseparator {
+ visibility: hidden;
+}
+
.downloadButton {
-moz-appearance: none;
- min-width: 0;
- min-height: 0;
- margin: 3px;
+ min-width: 58px;
+ height: var(--downloads-item-height);
+ margin: 0;
border: none;
background: transparent;
- padding: 5px;
+ padding: 8px;
list-style-image: url("chrome://browser/skin/downloads/buttons.png");
}
-.downloadButton > .button-box {
- padding: 0;
+@itemFinished@[exists]:hover .downloadMainArea,
+@item@:hover .downloadButton,
+@item@[verdict]:hover {
+ background-color: var(--arrowpanel-dimmed);
+}
+
+@item@ .downloadButton:hover,
+@itemFinished@[exists] .downloadMainArea:hover {
+ background-color: var(--arrowpanel-dimmed-further);
}
+@item@ .downloadButton:hover:active,
+@itemFinished@[exists] .downloadMainArea:hover:active {
+ background-color: var(--arrowpanel-dimmed-even-further);
+}
+
+@item@[verdict] .downloadButton,
+@item@[verdict] .downloadButton:hover,
+@item@[verdict] .downloadButton:hover:active {
+ background-color: transparent;
+}
+
+@keyfocus@ @itemFocused@[verdict="Malware"],
+@notKeyfocus@ @item@[verdict="Malware"]:hover,
+@notKeyfocus@ @item@[verdict="Malware"]:hover:active,
+@item@[showingsubview][verdict="Malware"] {
+ background-color: #aa1b08;
+ color: white;
+}
/*** 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;
}
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -62,96 +62,38 @@
--downloads-item-border-top-color: hsla(0,0%,100%,.3);
--downloads-item-border-bottom-color: hsla(220,18%,51%,.25);
--downloads-item-font-size-factor: 0.9;
--downloads-item-target-margin-bottom: 6px;
--downloads-item-details-margin-top: 0;
--downloads-item-details-opacity: 0.6;
}
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
- (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
- richlistitem[type="download"] {
- border: 1px solid transparent;
- border-bottom: 1px solid hsl(213,40%,90%);
- }
-}
-
.downloadButton > .button-box {
border: 1px solid transparent;
}
@keyfocus@ .downloadButton:focus > .button-box {
border: 1px dotted ThreeDDarkShadow;
}
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@ {
outline: 1px -moz-dialogtext dotted;
outline-offset: -1px;
}
-@notKeyfocus@ @itemFinished@[exists]:hover {
- background-color: hsla(210,4%,10%,.08);
- outline: 1px solid hsla(210,4%,10%,.1);
- outline-offset: -1px;
- cursor: pointer;
-}
-
-@notKeyfocus@ @itemFinished@[exists]:hover:active {
- background-color: hsla(210,4%,10%,.15);
- outline: 1px solid hsla(210,4%,10%,.15);
- box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
-}
-
@item@[showingsubview] {
background-color: Highlight;
color: HighlightText;
transition: background-color var(--panelui-subview-transition-duration),
color var(--panelui-subview-transition-duration);
}
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover,
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover:active,
-@item@[showingsubview][verdict="Malware"] {
- background-color: hsl(4, 82%, 47%);
- color: white;
-}
-
-@media (-moz-os-version: windows-xp),
- (-moz-os-version: windows-vista),
- (-moz-os-version: windows-win7) {
- @notKeyfocus@ @itemFinished@[exists]:hover {
- border-radius: 3px;
- outline: 0;
- border-top: 1px solid hsla(0,0%,100%,.2);
- border-bottom: 1px solid hsla(0,0%,0%,.2);
- background-color: Highlight;
- color: HighlightText;
- }
-
- @notKeyfocus@ @itemFinished@[exists]:hover:active {
- background-color: Highlight;
- outline: 0;
- box-shadow: none;
- }
-}
-
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
- (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
- @notKeyfocus@ @itemFinished@[exists]:hover {
- border: 1px solid hsl(213,45%,65%);
- box-shadow: 0 0 0 1px hsla(0,0%,100%,.5) inset,
- 0 1px 0 hsla(0,0%,100%,.3) inset;
- background-image: linear-gradient(hsl(212,86%,92%), hsl(212,91%,86%));
- color: black;
- }
-}
-
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
@item@:hover .downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}