Bug 1298276 - Change the hover behavior in summary section with downloading files., r=paolo
MozReview-Commit-ID: 1hKBRXOBH6c
--- a/browser/components/downloads/content/downloads.css
+++ b/browser/components/downloads/content/downloads.css
@@ -19,21 +19,33 @@ richlistitem[type="download"]:not([selec
}
richlistitem[type="download"].download-state[state="1"]:not([exists]) .downloadShow {
display: none;
}
#downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryProgress,
#downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryDetails,
-#downloadsFooter[showingsummary] > #downloadsFooterButtons,
-#downloadsFooter:not([showingsummary]) > #downloadsSummary {
+#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
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -377,24 +377,25 @@ const DownloadsPanel = {
onFooterPopupShowing(aEvent) {
let itemClearList = document.getElementById("downloadsDropdownItemClearList");
if (DownloadsCommon.getData(window).canRemoveFinished) {
itemClearList.removeAttribute("hidden");
} else {
itemClearList.setAttribute("hidden", "true");
}
+ DownloadsViewController.updateCommands();
- document.getElementById("downloadsFooterButtonsSplitter").classList
- .add("downloadsDropmarkerSplitterExtend");
+ document.getElementById("downloadsFooter")
+ .setAttribute("showingdropdown", true);
},
onFooterPopupHidden(aEvent) {
- document.getElementById("downloadsFooterButtonsSplitter").classList
- .remove("downloadsDropmarkerSplitterExtend");
+ document.getElementById("downloadsFooter")
+ .removeAttribute("showingdropdown");
},
//////////////////////////////////////////////////////////////////////////////
//// Related operations
/**
* Shows or focuses the user interface dedicated to downloads history.
*/
--- a/browser/components/downloads/content/downloadsOverlay.xul
+++ b/browser/components/downloads/content/downloadsOverlay.xul
@@ -124,61 +124,63 @@
ondragstart="DownloadsView.onDownloadDragStart(event);"/>
<description id="emptyDownloads"
mousethrough="always">
&downloadsPanelEmpty.label;
</description>
<spacer flex="1"/>
<vbox id="downloadsFooter"
class="downloadsPanelFooter">
- <hbox id="downloadsSummary"
- align="center"
- orient="horizontal"
- onkeydown="DownloadsSummary.onKeyDown(event);"
- onclick="DownloadsSummary.onClick(event);">
- <image class="downloadTypeIcon" />
- <vbox pack="center"
- class="downloadContainer"
- style="width: &downloadDetails.width;">
- <description id="downloadsSummaryDescription"
- style="min-width: &downloadsSummary.minWidth2;"/>
- <progressmeter id="downloadsSummaryProgress"
- class="downloadProgress"
- min="0"
- max="100"
- mode="normal" />
- <description id="downloadsSummaryDetails"
- crop="end"/>
- </vbox>
- </hbox>
- <hbox id="downloadsFooterButtons">
- <button id="downloadsHistory"
- class="plain downloadsPanelFooterButton"
- label="&downloadsHistory.label;"
- accesskey="&downloadsHistory.accesskey;"
- flex="1"
- oncommand="DownloadsPanel.showDownloadsHistory();"/>
- <toolbarseparator id="downloadsFooterButtonsSplitter"
- class="downloadsDropmarkerSplitter"/>
- <button id="downloadsFooterDropmarker"
- class="plain downloadsPanelFooterButton downloadsDropmarker"
- type="menu">
- <menupopup id="downloadSubPanel"
- onpopupshowing="DownloadsPanel.onFooterPopupShowing(event);"
- onpopuphidden="DownloadsPanel.onFooterPopupHidden(event);"
- position="after_end">
- <menuitem id="downloadsDropdownItemClearList"
- command="downloadsCmd_clearList"
- label="&cmd.clearList2.label;"/>
- <menuitem id="downloadsDropdownItemOpenDownloadsFolder"
- oncommand="DownloadsPanel.openDownloadsFolder();"
- label="&openDownloadsFolder.label;"/>
- </menupopup>
- </button>
- </hbox>
+ <stack>
+ <hbox id="downloadsSummary"
+ align="center"
+ orient="horizontal"
+ onkeydown="DownloadsSummary.onKeyDown(event);"
+ onclick="DownloadsSummary.onClick(event);">
+ <image class="downloadTypeIcon" />
+ <vbox pack="center"
+ class="downloadContainer"
+ style="width: &downloadDetails.width;">
+ <description id="downloadsSummaryDescription"
+ style="min-width: &downloadsSummary.minWidth2;"/>
+ <progressmeter id="downloadsSummaryProgress"
+ class="downloadProgress"
+ min="0"
+ max="100"
+ mode="normal" />
+ <description id="downloadsSummaryDetails"
+ crop="end"/>
+ </vbox>
+ </hbox>
+ <hbox id="downloadsFooterButtons">
+ <button id="downloadsHistory"
+ class="plain downloadsPanelFooterButton"
+ label="&downloadsHistory.label;"
+ accesskey="&downloadsHistory.accesskey;"
+ flex="1"
+ oncommand="DownloadsPanel.showDownloadsHistory();"/>
+ <toolbarseparator id="downloadsFooterButtonsSplitter"
+ class="downloadsDropmarkerSplitter"/>
+ <button id="downloadsFooterDropmarker"
+ class="plain downloadsPanelFooterButton downloadsDropmarker"
+ type="menu">
+ <menupopup id="downloadSubPanel"
+ onpopupshowing="DownloadsPanel.onFooterPopupShowing(event);"
+ onpopuphidden="DownloadsPanel.onFooterPopupHidden(event);"
+ position="after_end">
+ <menuitem id="downloadsDropdownItemClearList"
+ command="downloadsCmd_clearList"
+ label="&cmd.clearList2.label;"/>
+ <menuitem id="downloadsDropdownItemOpenDownloadsFolder"
+ oncommand="DownloadsPanel.openDownloadsFolder();"
+ label="&openDownloadsFolder.label;"/>
+ </menupopup>
+ </button>
+ </hbox>
+ </stack>
</vbox>
</panelview>
<panelview id="downloadsPanel-blockedSubview"
orient="vertical"
flex="1">
<description id="downloadsPanel-blockedSubview-title"/>
<description id="downloadsPanel-blockedSubview-details1"/>
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -89,17 +89,17 @@
padding-left: 58px !important;
}
toolbarseparator.downloadsDropmarkerSplitter {
margin: 7px 0;
}
#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
-#downloadsFooter toolbarseparator.downloadsDropmarkerSplitterExtend {
+#downloadsFooter[showingdropdown] toolbarseparator {
margin: 0;
}
.downloadsDropmarker {
padding: 0 19px !important;
}
.downloadsDropmarker > .button-box > hbox {