Bug 175893. Make tab labels focusable (when clicking on label of foreground tab). Make unmodified arrow key navigation work with tabs. r=neil, sr=?

This commit is contained in:
aaronleventhal%moonset.net 2004-07-14 21:44:01 +00:00
parent ec920e56a1
commit 4de0622ec6
10 changed files with 143 additions and 42 deletions

View File

@ -91,11 +91,16 @@ tab
}
tab[selected="true"] {
-moz-user-focus: normal;
margin-top: 0;
border-bottom-color: transparent;
padding: 1px 6px 4px 6px;
}
tab:focus {
-moz-outline: 1px dotted invert;
}
tab[beforeselected="true"] {
-moz-appearance: tab-left-edge;
border-right: none;

View File

@ -84,6 +84,10 @@ tab {
font: menu;
}
tab[selected="true"] {
-moz-user-focus: normal;
}
.tab-text {
margin: 0px !important;
}
@ -138,6 +142,13 @@ tab:hover:active[selected="true"] {
-moz-border-bottom-colors: #000000 #DFE2E6 #D0D7DD transparent !important;
}
tab:focus {
-moz-border-top-colors: #000000 #8C9DAF #8C9DAF;
-moz-border-left-colors: #000000 #8C9DAF #8C9DAF;
-moz-border-right-colors: #000000 #8C9DAF #8C9DAF;
-moz-border-bottom-colors: #8190A5 #8190A5 #899AAC;
}
.tab-bottom > .tab-text {
font: message-box;
font-weight: bold;

View File

@ -150,8 +150,18 @@
var focusInit =
function() {
// give focus to the first focusable element in the dialog
if (!document.commandDispatcher.focusedElement)
if (!document.commandDispatcher.focusedElement) {
document.commandDispatcher.advanceFocusIntoSubtree(document.documentElement);
var focusedElt = document.commandDispatcher.focusedElement;
if (focusedElt && focusedElt.localName == 'tab') {
// We don't want to focus on anonymous OK, Cancel, etc. buttons
document.commandDispatcher.advanceFocusIntoSubtree(focusedElt);
if (document.commandDispatcher.focusedElement.hasAttribute("dlgtype")) {
// Prefer to keep focus on label rather than focus a dialog button
focusedElt.focus();
}
}
}
};
// Give focus after onload completes, see bug 103197.

View File

@ -286,6 +286,23 @@
</setter>
</property>
<method name="selectNewTab">
<parameter name="aNewTab"/>
<body>
<![CDATA[
var isTabFocused =
(document.commandDispatcher.focusedElement == this.selectedItem);
this.selectedItem = aNewTab;
if (isTabFocused) {
aNewTab.focus();
}
else if (this.getAttribute("setfocus") != "false") {
document.commandDispatcher.advanceFocusIntoSubtree(aNewTab);
}
]]>
</body>
</method>
<method name="advanceSelectedTab">
<parameter name="aDir"/>
<body>
@ -301,11 +318,7 @@
}
if (next && next != startTab) {
this.selectedItem = next;
if (this.getAttribute("setfocus") != "false") {
next.focus();
document.commandDispatcher.advanceFocusIntoSubtree(next);
}
this.selectNewTab(next);
}
]]>
</body>
@ -495,7 +508,7 @@
<handlers>
<handler event="click" button="0">
<![CDATA[
this.parentNode.selectedItem = this;
this.parentNode.selectNewTab(this);
]]>
</handler>

View File

@ -425,6 +425,10 @@
if (this.mCurrentBrowser) {
this.mCurrentBrowser.focusedWindow = document.commandDispatcher.focusedWindow;
this.mCurrentBrowser.focusedElement = document.commandDispatcher.focusedElement;
if (this.mCurrentBrowser.focusedElement) {
// Clear focus outline before we draw on top of it
this.mCurrentBrowser.focusedElement.blur();
}
this.mCurrentBrowser.setAttribute("type", "content");
}
@ -489,22 +493,31 @@
}
function setFocus(element) {
Components.lookupMethod(element, "focus").call(element);
if (document.commandDispatcher.focusedElement &&
document.commandDispatcher.focusedElement.parentNode ==
this.mCurrentTab.parentNode) {
// The focus is on a tab in the same tab panel
return; // If focus was on a tab, switching tabs focuses the new tab
}
}
var whatToFocus = window.content;
// Focus the previously focused element or window
document.commandDispatcher.suppressFocusScroll = true;
if (newBrowser.focusedElement) {
try {
setFocus(newBrowser.focusedElement);
} catch (e) {
setFocus(newBrowser.focusedWindow);
if (newBrowser.focusedElement.parentNode !=
this.mCurrentTab.parentNode) {
// Focus the remembered element unless it's in the current tab panel
whatToFocus = newBrowser.focusedElement;
}
}
else if (newBrowser.focusedWindow)
setFocus(newBrowser.focusedWindow);
else // new tab, focus our new content area
setTimeout(setFocus, 0, window.content);
else if (newBrowser.focusedWindow) {
whatToFocus = newBrowser.focusedWindow;
}
document.commandDispatcher.suppressFocusScroll = true;
// Use setTimeout to avoid focus outline ghosting.
setTimeout(setFocus, 0, whatToFocus);
document.commandDispatcher.suppressFocusScroll = false;
]]>
</body>

View File

@ -76,11 +76,16 @@ tab
}
tab[selected="true"] {
-moz-user-focus: normal;
margin-top: 0;
border-bottom-color: transparent;
padding: 1px 6px 4px 6px;
}
tab:focus {
-moz-outline: 1px dotted invert;
}
tab[beforeselected="true"] {
-moz-appearance: tab-left-edge;
border-right: none;

View File

@ -75,12 +75,18 @@ tab
margin: 0 !important;
}
tab[selected="true"] {
tab[selected="true"]
{
-moz-user-focus: normal;
margin-top: 0;
border-bottom-color: transparent;
padding: 1px 6px 4px 6px;
}
tab:focus {
-moz-outline: 1px dotted invert;
}
tab[beforeselected="true"] {
-moz-appearance: tab-left-edge;
border-right: none;

View File

@ -131,8 +131,18 @@
var focusInit =
function() {
// give focus to the first focusable element in the dialog
if (!document.commandDispatcher.focusedElement)
if (!document.commandDispatcher.focusedElement) {
document.commandDispatcher.advanceFocusIntoSubtree(document.documentElement);
var focusedElt = document.commandDispatcher.focusedElement;
if (focusedElt && focusedElt.localName == 'tab') {
// We don't want to focus on anonymous OK, Cancel, etc. buttons
document.commandDispatcher.advanceFocusIntoSubtree(focusedElt);
if (document.commandDispatcher.focusedElement.hasAttribute("dlgtype")) {
// Prefer to keep focus on label rather than focus a dialog button
focusedElt.focus();
}
}
}
};
// Give focus after onload completes, see bug 103197.

View File

@ -286,6 +286,23 @@
</setter>
</property>
<method name="selectNewTab">
<parameter name="aNewTab"/>
<body>
<![CDATA[
var isTabFocused =
(document.commandDispatcher.focusedElement == this.selectedItem);
this.selectedItem = aNewTab;
if (isTabFocused) {
aNewTab.focus();
}
else if (this.getAttribute("setfocus") != "false") {
document.commandDispatcher.advanceFocusIntoSubtree(aNewTab);
}
]]>
</body>
</method>
<method name="advanceSelectedTab">
<parameter name="aDir"/>
<body>
@ -301,11 +318,7 @@
}
if (next && next != startTab) {
this.selectedItem = next;
if (this.getAttribute("setfocus") != "false") {
next.focus();
document.commandDispatcher.advanceFocusIntoSubtree(next);
}
this.selectNewTab(next);
}
]]>
</body>
@ -499,7 +512,7 @@
<handlers>
<handler event="click" button="0">
<![CDATA[
this.parentNode.selectedItem = this;
this.parentNode.selectNewTab(this);
]]>
</handler>

View File

@ -499,6 +499,10 @@
if (this.mCurrentBrowser) {
this.mCurrentBrowser.focusedWindow = document.commandDispatcher.focusedWindow;
this.mCurrentBrowser.focusedElement = document.commandDispatcher.focusedElement;
if (this.mCurrentBrowser.focusedElement) {
// Clear focus outline before we draw on top of it
this.mCurrentBrowser.focusedElement.blur();
}
this.mCurrentBrowser.setAttribute("type", "content");
}
@ -557,23 +561,34 @@
}
}
if (document.commandDispatcher.focusedElement &&
document.commandDispatcher.focusedElement.parentNode ==
this.mCurrentTab.parentNode) {
// The focus is on a tab in the same tab panel
return; // If focus was on a tab, switching tabs focuses the new tab
}
var whatToFocus = window.content;
// Focus the previously focused element or window
if (newBrowser.focusedElement) {
if (newBrowser.focusedElement.parentNode !=
this.mCurrentTab.parentNode) {
// Focus the remembered element unless it's in the current tab panel
whatToFocus = newBrowser.focusedElement;
}
}
else if (newBrowser.focusedWindow) {
whatToFocus = newBrowser.focusedWindow;
}
function setFocus(element) {
Components.lookupMethod(element, "focus").call(element);
}
// Focus the previously focused element or window
document.commandDispatcher.suppressFocusScroll = true;
if (newBrowser.focusedElement) {
try {
setFocus(newBrowser.focusedElement);
} catch (e) {
setFocus(newBrowser.focusedWindow);
}
}
else if (newBrowser.focusedWindow)
setFocus(newBrowser.focusedWindow);
else // new tab, focus our new content area
setTimeout(setFocus, 0, window.content);
// Use setTimeout to avoid focus outline ghosting.
setTimeout(setFocus, 0, whatToFocus);
document.commandDispatcher.suppressFocusScroll = false;
]]>
</body>