Bug 1298276 - Change the hover behavior in summary section with downloading files. r=paolo

MozReview-Commit-ID: 1hKBRXOBH6c

--HG--
extra : transplant_source : %21%1E%80%E6%D5%A2%C52%E6%9B%D1%A4%1D%D3%27%8C%C7Q%F9%A1
This commit is contained in:
Sean Lee 2016-08-18 14:45:57 +08:00
parent d9d920d198
commit 51322da3c0
4 changed files with 67 additions and 52 deletions

View File

@ -24,11 +24,23 @@ richlistitem[type="download"].download-state[state="1"]:not([exists]) .downloadS
#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 ***/
/**

View File

@ -382,14 +382,15 @@ const DownloadsPanel = {
} 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");
},
//////////////////////////////////////////////////////////////////////////////

View File

@ -129,51 +129,53 @@
<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>

View File

@ -94,7 +94,7 @@ toolbarseparator.downloadsDropmarkerSplitter {
}
#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
#downloadsFooter toolbarseparator.downloadsDropmarkerSplitterExtend {
#downloadsFooter[showingdropdown] toolbarseparator {
margin: 0;
}