Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-30 00:01:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 809852 - Allow cycling through the "Show all downloads" and summary footers in the Downloads Panel using the arrow keys. r=mak.

Browse Source
This commit is contained in:
Mike Conley 2012-11-22 14:38:38 -05:00
parent 478e9dc583
commit 07911c72d9
6 changed files with 145 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
browser/components/downloads/content/downloads.js
View File

@ -783,6 +783,12 @@ const DownloadsView = {
case KeyEvent.DOM_VK_RETURN:
goDoCommand("downloadsCmd_doDefault");
break;
case KeyEvent.DOM_VK_DOWN:
// Are we focused on the last element in the list?
if (this.richListBox.currentIndex == (this.richListBox.itemCount - 1)) {
DownloadsFooter.focus();
}
break;
}
},
@ -1429,7 +1435,7 @@ const DownloadsSummary = {
set visible(aVisible)
{
if (aVisible == this._visible || !this._summaryNode) {
return;
return this._visible;
}
if (aVisible) {
DownloadsCommon.getSummary(DownloadsView.kItemCountLimit)
@ -1441,6 +1447,15 @@ const DownloadsSummary = {
this._summaryNode.collapsed = !aVisible;
return this._visible = aVisible;
},
/**
* Returns the collapsed state of the downloads summary.
*/
get visible()
{
return this._visible;
},
_visible: false,
/**
@ -1506,6 +1521,42 @@ const DownloadsSummary = {
return aValue;
},
/**
* Focuses the root element of the summary.
*/
focus: function()
{
if (this._summaryNode) {
this._summaryNode.focus();
}
},
/**
* Respond to keypress events on the Downloads Summary node.
*
* @param aEvent
* The keypress event being handled.
*/
onKeyPress: function DS_onKeyPress(aEvent)
{
if (aEvent.charCode == " ".charCodeAt(0) ||
aEvent.keyCode == KeyEvent.DOM_VK_ENTER ||
aEvent.keyCode == KeyEvent.DOM_VK_RETURN) {
DownloadsPanel.showDownloadsHistory();
}
},
/**
* Respond to click events on the Downloads Summary node.
*
* @param aEvent
* The click event being handled.
*/
onClick: function DS_onClick(aEvent)
{
DownloadsPanel.showDownloadsHistory();
},
/**
* Element corresponding to the root of the downloads summary.
*/
@ -1560,3 +1611,42 @@ const DownloadsSummary = {
return this._detailsNode = node;
}
}
////////////////////////////////////////////////////////////////////////////////
//// DownloadsFooter
/**
* Manages events sent to to the footer vbox, which contains both the
* DownloadsSummary as well as the "Show All Downloads" button.
*/
const DownloadsFooter = {
/**
* Focuses the appropriate element within the footer. If the summary
* is visible, focus it. If not, focus the "Show All Downloads"
* button.
*/
focus: function DF_focus()
{
if (DownloadsSummary.visible) {
DownloadsSummary.focus();
} else {
DownloadsView.downloadsHistory.focus();
}
},
/**
* Handles keypress events on the footer element.
*/
onKeyPress: function DF_onKeyPress(aEvent)
{
// If the up key is pressed, and the downloads list has at least 1 element
// in it, focus the last element in the list.
if (aEvent.keyCode == KeyEvent.DOM_VK_UP &&
DownloadsView.richListBox.itemCount > 0) {
DownloadsView.richListBox.focus();
DownloadsView.richListBox.selectedIndex =
(DownloadsView.richListBox.itemCount - 1);
}
}
};

56
browser/components/downloads/content/downloadsOverlay.xul
View File

@ -105,33 +105,37 @@
oncontextmenu="DownloadsView.onDownloadContextMenu(event);"
ondragstart="DownloadsView.onDownloadDragStart(event);"/>
<hbox id="downloadsSummary"
collapsed="true"
align="center"
orient="horizontal"
onclick="DownloadsPanel.showDownloadsHistory();">
<image class="downloadTypeIcon" />
<vbox>
<description id="downloadsSummaryDescription"
class="downloadTarget"
style="min-width: &downloadsSummary.minWidth;"/>
<progressmeter id="downloadsSummaryProgress"
class="downloadProgress"
min="0"
max="100"
mode="normal" />
<description id="downloadsSummaryDetails"
class="downloadDetails"
style="width: &downloadDetails.width;"
crop="end"/>
</vbox>
</hbox>
<vbox id="downloadsFooter"
onkeypress="DownloadsFooter.onKeyPress(event);">
<hbox id="downloadsSummary"
collapsed="true"
align="center"
orient="horizontal"
onkeypress="DownloadsSummary.onKeyPress(event);"
onclick="DownloadsSummary.onClick(event);">
<image class="downloadTypeIcon" />
<vbox>
<description id="downloadsSummaryDescription"
class="downloadTarget"
style="min-width: &downloadsSummary.minWidth;"/>
<progressmeter id="downloadsSummaryProgress"
class="downloadProgress"
min="0"
max="100"
mode="normal" />
<description id="downloadsSummaryDetails"
class="downloadDetails"
style="width: &downloadDetails.width;"
crop="end"/>
</vbox>
</hbox>
<button id="downloadsHistory"
class="plain"
label="&downloadsHistory.label;"
accesskey="&downloadsHistory.accesskey;"
oncommand="DownloadsPanel.showDownloadsHistory();"/>
<button id="downloadsHistory"
class="plain"
label="&downloadsHistory.label;"
accesskey="&downloadsHistory.accesskey;"
oncommand="DownloadsPanel.showDownloadsHistory();"/>
</vbox>
</panel>
</popupset>
</overlay>

8
browser/themes/gnomestripe/downloads/downloads.css
View File

@ -25,7 +25,7 @@
}
#downloadsSummary,
#downloadsPanel[hasdownloads] > #downloadsHistory {
#downloadsPanel[hasdownloads] #downloadsHistory {
border-top: 1px solid ThreeDShadow;
background-image: -moz-linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
}
@ -50,6 +50,12 @@ richlistitem[type="download"] {
#downloadsSummary {
padding: 8px 38px 8px 12px;
cursor: pointer;
-moz-user-focus: normal;
}
#downloadsSummary:-moz-focusring {
outline: 1px -moz-dialogtext dotted;
outline-offset: -5px;
}
#downloadsSummary > .downloadTypeIcon {

12
browser/themes/pinstripe/downloads/downloads.css
View File

@ -26,13 +26,13 @@
cursor: pointer;
}
#downloadsPanel:not([hasdownloads]) > #downloadsHistory {
#downloadsPanel:not([hasdownloads]) > vbox > #downloadsHistory {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#downloadsSummary,
#downloadsPanel[hasdownloads] > #downloadsHistory {
#downloadsPanel[hasdownloads] > vbox > #downloadsHistory {
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;
@ -49,7 +49,7 @@
border-top-right-radius: 6px;
}
#downloadsPanel:not([hasdownloads]) > #downloadsHistory:-moz-focusring > .button-box {
#downloadsPanel:not([hasdownloads]) > vbox > #downloadsHistory:-moz-focusring > .button-box {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
@ -66,6 +66,12 @@ richlistitem[type="download"] {
#downloadsSummary {
padding: 8px 38px 8px 12px;
cursor: pointer;
-moz-user-focus: normal;
}
#downloadsSummary:-moz-focusring {
outline: 1px -moz-dialogtext dotted;
outline-offset: -5px;
}
#downloadsSummary > .downloadTypeIcon {

2
browser/themes/winstripe/downloads/downloads-aero.css
View File

@ -7,7 +7,7 @@
%undef WINSTRIPE_AERO
@media (-moz-windows-default-theme) {
#downloadsPanel[hasdownloads] > #downloadsHistory {
#downloadsPanel[hasdownloads] #downloadsHistory {
background-color: #f1f5fb;
}

8
browser/themes/winstripe/downloads/downloads.css
View File

@ -30,7 +30,7 @@
@media (-moz-windows-default-theme) {
#downloadsSummary,
#downloadsPanel[hasdownloads] > #downloadsHistory {
#downloadsPanel[hasdownloads] #downloadsHistory {
background-color: hsla(216,45%,88%,.98);
box-shadow: 0px 1px 2px rgb(204,214,234) inset;
}
@ -48,6 +48,12 @@ richlistitem[type="download"] {
#downloadsSummary {
padding: 8px 38px 8px 12px;
cursor: pointer;
-moz-user-focus: normal;
}
#downloadsSummary:-moz-focusring {
outline: 1px -moz-dialogtext dotted;
outline-offset: -5px;
}
#downloadsSummary > .downloadTypeIcon {