Bug 805217 - Remove duplicate menuitems when Tools is accessed using the keyboard. r=felipe

This commit is contained in:
Jared Wein 2012-11-15 15:07:42 -08:00
parent decae3d858
commit 4401430059
10 changed files with 98 additions and 91 deletions

View File

@ -351,10 +351,6 @@
#endif
oncommand="openPreferences();"/>
<menuseparator/>
<menuitem id="appmenu_socialToggle"
type="checkbox"
autocheck="false"
command="Social:Toggle"/>
<menuseparator id="appmenu_toggleToolbarsSeparator"/>
<menuitem id="appmenu_toggleTabsOnTop"
label="&viewTabsOnTop.label;"

View File

@ -505,27 +505,37 @@
accesskey="&addons.accesskey;"
key="key_openAddons"
command="Tools:Addons"/>
<menuitem id="menu_socialToggle"
type="checkbox"
autocheck="false"
command="Social:Toggle"/>
<menu id="menu_socialAmbientMenu"
class="show-only-for-keyboard">
<menupopup id="menu_socialAmbientMenuPopup">
<menu id="menu_socialAmbientMenu">
<menupopup id="menu_social-statusarea-popup">
<menuitem class="social-statusarea-user menuitem-iconic" pack="start" align="center"
oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();">
<image class="social-statusarea-user-portrait"
observes="socialBroadcaster_userPortrait"/>
<vbox>
<label class="social-statusarea-loggedInStatus"
observes="socialBroadcaster_loggedInStatus"/>
</vbox>
</menuitem>
#ifndef XP_WIN
<menuseparator class="social-statusarea-separator"/>
#endif
<menuseparator id="socialAmbientMenuSeparator"
hidden="true"/>
<menuitem id="social-toggle-sidebar-keyboardmenuitem"
<menuitem class="social-toggle-sidebar-menuitem"
type="checkbox"
autocheck="false"
command="Social:ToggleSidebar"
label="&social.toggleSidebar.label;"
accesskey="&social.toggleSidebar.accesskey;"/>
<menuitem id="social-toggle-notifications-keyboardmenuitem"
<menuitem class="social-toggle-notifications-menuitem"
type="checkbox"
autocheck="false"
command="Social:ToggleNotifications"
label="&social.toggleNotifications.label;"
accesskey="&social.toggleNotifications.accesskey;"/>
<menuseparator class="social-statusarea-separator"/>
<menuitem class="social-toggle-menuitem" command="Social:Toggle"/>
<menuitem class="social-remove-menuitem" command="Social:Remove"/>
</menupopup>
</menu>
#ifdef MOZ_SERVICES_SYNC

View File

@ -117,6 +117,7 @@
<command id="Social:ToggleSidebar" oncommand="Social.toggleSidebar();"/>
<command id="Social:ToggleNotifications" oncommand="Social.toggleNotifications();"/>
<command id="Social:Toggle" oncommand="Social.toggle();" hidden="true"/>
<command id="Social:Remove" oncommand="SocialUI.disableWithConfirmation();"/>
</commandset>
<commandset id="placesCommands">
@ -249,6 +250,11 @@
<broadcaster id="devtoolsMenuBroadcaster_GetMoreTools"
label="&getMoreDevtoolsCmd.label;"
oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
<!-- SocialAPI broadcasters -->
<broadcaster id="socialBroadcaster_userPortrait"/>
<broadcaster id="socialBroadcaster_loggedInStatus"
notLoggedInLabel="&social.notLoggedIn.label;"/>
</broadcasterset>
<keyset id="mainKeyset">

View File

@ -105,22 +105,9 @@ let SocialUI = {
this.updateToggleCommand();
let toggleCommand = this.toggleCommand;
let brandShortName = document.getElementById("bundle_brand").getString("brandShortName");
let label = gNavigatorBundle.getFormattedString("social.toggle.label",
[Social.provider.name,
brandShortName]);
let accesskey = gNavigatorBundle.getString("social.toggle.accesskey");
toggleCommand.setAttribute("label", label);
toggleCommand.setAttribute("accesskey", accesskey);
let kbMenuitem = document.getElementById("menu_socialAmbientMenu");
kbMenuitem.hidden = !Social.enabled;
kbMenuitem.setAttribute("label", label);
kbMenuitem.setAttribute("accesskey", accesskey);
// The View->Sidebar menu.
document.getElementById("menu_socialSidebar").setAttribute("label", Social.provider.name);
// The View->Sidebar and Menubar->Tools menu.
for (let id of ["menu_socialSidebar", "menu_socialAmbientMenu"])
document.getElementById(id).setAttribute("label", Social.provider.name);
SocialToolbar.init();
SocialShareButton.init();
@ -129,9 +116,17 @@ let SocialUI = {
},
updateToggleCommand: function SocialUI_updateToggleCommand() {
if (!Social.provider)
return;
let toggleCommand = this.toggleCommand;
// We only need to update the command itself - all our menu items use it.
toggleCommand.setAttribute("checked", Services.prefs.getBoolPref("social.enabled"));
let enabled = Services.prefs.getBoolPref("social.enabled");
let label = gNavigatorBundle.getFormattedString(enabled ? "social.turnOff.label" : "social.turnOn.label",
[Social.provider.name]);
let accesskey = gNavigatorBundle.getString(enabled ? "social.turnOff.accesskey" : "social.turnOn.accesskey");
toggleCommand.setAttribute("label", label);
toggleCommand.setAttribute("accesskey", accesskey);
toggleCommand.setAttribute("hidden", Social.active ? "false" : "true");
},
@ -601,7 +596,7 @@ let SocialShareButton = {
var SocialMenu = {
populate: function SocialMenu_populate() {
// This menu is only accessible through keyboard navigation.
let submenu = document.getElementById("menu_socialAmbientMenuPopup");
let submenu = document.getElementById("menu_social-statusarea-popup");
let ambientMenuItems = submenu.getElementsByClassName("ambient-menuitem");
while (ambientMenuItems.length)
submenu.removeChild(ambientMenuItems.item(0));
@ -633,13 +628,14 @@ var SocialToolbar = {
init: function SocialToolbar_init() {
this.button.setAttribute("image", Social.provider.iconURL);
let removeItem = document.getElementById("social-remove-menuitem");
let brandShortName = document.getElementById("bundle_brand").getString("brandShortName");
let label = gNavigatorBundle.getFormattedString("social.remove.label",
[brandShortName]);
let accesskey = gNavigatorBundle.getString("social.remove.accesskey");
removeItem.setAttribute("label", label);
removeItem.setAttribute("accesskey", accesskey);
let removeCommand = document.getElementById("Social:Remove");
removeCommand.setAttribute("label", label);
removeCommand.setAttribute("accesskey", accesskey);
this.updateButton();
this.updateProfile();
@ -652,8 +648,16 @@ var SocialToolbar = {
updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() {
let tbi = document.getElementById("social-toolbar-item");
tbi.hidden = !Social.uiVisible;
if (!SocialUI.haveLoggedInUser()) {
tbi.hidden = !Social.active;
let socialEnabled = Social.enabled;
for (let className of ["social-statusarea-separator", "social-statusarea-user"]) {
for (let element of document.getElementsByClassName(className))
element.hidden = !socialEnabled;
}
let toggleNotificationsCommand = document.getElementById("Social:ToggleNotifications");
toggleNotificationsCommand.setAttribute("hidden", !socialEnabled);
if (!SocialUI.haveLoggedInUser() || !socialEnabled) {
let parent = document.getElementById("social-notification-panel");
while (parent.hasChildNodes())
parent.removeChild(parent.firstChild);
@ -669,18 +673,12 @@ var SocialToolbar = {
// social:profile-changed
let profile = Social.provider.profile || {};
let userPortrait = profile.portrait || "chrome://global/skin/icons/information-32.png";
document.getElementById("social-statusarea-user-portrait").setAttribute("src", userPortrait);
document.getElementById("socialBroadcaster_userPortrait").setAttribute("src", userPortrait);
let notLoggedInLabel = document.getElementById("social-statusarea-notloggedin");
let userNameBtn = document.getElementById("social-statusarea-username");
if (profile.userName) {
notLoggedInLabel.hidden = true;
userNameBtn.hidden = false;
userNameBtn.value = profile.userName;
} else {
notLoggedInLabel.hidden = false;
userNameBtn.hidden = true;
}
let loggedInStatusBroadcaster = document.getElementById("socialBroadcaster_loggedInStatus");
let notLoggedInString = loggedInStatusBroadcaster.getAttribute("notLoggedInLabel");
let loggedInStatusValue = profile.userName ? profile.userName : notLoggedInString;
loggedInStatusBroadcaster.setAttribute("value", loggedInStatusValue);
},
updateButton: function SocialToolbar_updateButton() {

View File

@ -667,33 +667,33 @@
class="toolbarbutton-1"
type="menu">
<menupopup id="social-statusarea-popup">
<menuitem id="social-statusarea-user" pack="start" align="center" class="menuitem-iconic"
onclick="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();">
<image id="social-statusarea-user-portrait"/>
<menuitem class="social-statusarea-user menuitem-iconic" pack="start" align="center"
oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();">
<image class="social-statusarea-user-portrait"
observes="socialBroadcaster_userPortrait"/>
<vbox>
<label id="social-statusarea-notloggedin"
value="&social.notLoggedIn.label;"/>
<label id="social-statusarea-username"/>
<label class="social-statusarea-loggedInStatus"
observes="socialBroadcaster_loggedInStatus"/>
</vbox>
</menuitem>
#ifndef XP_WIN
<menuseparator/>
<menuseparator class="social-statusarea-separator"/>
#endif
<menuitem id="social-toggle-sidebar-menuitem"
<menuitem class="social-toggle-sidebar-menuitem"
type="checkbox"
autocheck="false"
command="Social:ToggleSidebar"
label="&social.toggleSidebar.label;"
accesskey="&social.toggleSidebar.accesskey;"/>
<menuitem id="social-toggle-notifications-menuitem"
<menuitem class="social-toggle-notifications-menuitem"
type="checkbox"
autocheck="false"
command="Social:ToggleNotifications"
label="&social.toggleNotifications.label;"
accesskey="&social.toggleNotifications.accesskey;"/>
<menuseparator/>
<menuitem id="social-remove-menuitem"
oncommand="SocialUI.disableWithConfirmation();"/>
<menuseparator class="social-statusarea-separator"/>
<menuitem class="social-toggle-menuitem" command="Social:Toggle"/>
<menuitem class="social-remove-menuitem" command="Social:Remove"/>
</menupopup>
</toolbarbutton>
</toolbaritem>

View File

@ -26,9 +26,9 @@ var tests = {
}
Social.provider.updateUserProfile(profile);
// check dom values
let portrait = document.getElementById("social-statusarea-user-portrait").getAttribute("src");
let portrait = document.getElementsByClassName("social-statusarea-user-portrait")[0].getAttribute("src");
is(profile.portrait, portrait, "portrait is set");
let userButton = document.getElementById("social-statusarea-username");
let userButton = document.getElementsByClassName("social-statusarea-loggedInStatus")[0];
ok(!userButton.hidden, "username is visible");
is(userButton.value, profile.userName, "username is set");
next();
@ -46,7 +46,7 @@ var tests = {
toolsPopup.removeEventListener("popupshown", ontoolspopupshownNoAmbient);
let socialToggleMore = document.getElementById("menu_socialAmbientMenu");
ok(socialToggleMore, "Keyboard accessible social menu should exist");
is(socialToggleMore.querySelectorAll("menuitem").length, 2, "The minimum number of menuitems is two when there are no ambient notifications.");
is(socialToggleMore.querySelectorAll("menuitem").length, 5, "The minimum number of menuitems is two when there are no ambient notifications.");
is(socialToggleMore.hidden, false, "Menu should be visible since we show some non-ambient notifications in the menu.");
toolsPopup.hidePopup();
next();
@ -104,9 +104,9 @@ var tests = {
toolsPopup.removeEventListener("popupshown", ontoolspopupshownAmbient);
let socialToggleMore = document.getElementById("menu_socialAmbientMenu");
ok(socialToggleMore, "Keyboard accessible social menu should exist");
is(socialToggleMore.querySelectorAll("menuitem").length, 5, "The number of menuitems is minimum plus three ambient notification menuitems.");
is(socialToggleMore.querySelectorAll("menuitem").length, 8, "The number of menuitems is minimum plus three ambient notification menuitems.");
is(socialToggleMore.hidden, false, "Menu is visible when ambient notifications have label & menuURL");
let menuitem = socialToggleMore.querySelector("menuitem");
let menuitem = socialToggleMore.querySelector(".ambient-menuitem");
is(menuitem.getAttribute("label"), "Test Ambient 1", "Keyboard accessible ambient menuitem should have specified label");
toolsPopup.hidePopup();
next();
@ -117,8 +117,6 @@ var tests = {
testProfileUnset: function(next) {
Social.provider.updateUserProfile({});
// check dom values
let userButton = document.getElementById("social-statusarea-username");
ok(userButton.hidden, "username is not visible");
let ambientIcons = document.querySelectorAll("#social-toolbar-item > box");
for (let ambientIcon of ambientIcons) {
ok(ambientIcon.collapsed, "ambient icon (" + ambientIcon.id + ") is collapsed");
@ -126,18 +124,15 @@ var tests = {
next();
},
testShowSidebarMenuitemExists: function(next) {
let toggleSidebarMenuitem = document.getElementById("social-toggle-sidebar-menuitem");
ok(toggleSidebarMenuitem, "Toggle Sidebar menuitem exists");
let toggleSidebarKeyboardMenuitem = document.getElementById("social-toggle-sidebar-keyboardmenuitem");
ok(toggleSidebarKeyboardMenuitem, "Toggle Sidebar keyboard menuitem exists");
next();
},
testShowDesktopNotificationsMenuitemExists: function(next) {
let toggleDesktopNotificationsMenuitem = document.getElementById("social-toggle-notifications-menuitem");
ok(toggleDesktopNotificationsMenuitem, "Toggle notifications menuitem exists");
let toggleDesktopNotificationsKeyboardMenuitem = document.getElementById("social-toggle-notifications-keyboardmenuitem");
ok(toggleDesktopNotificationsKeyboardMenuitem, "Toggle notifications keyboard menuitem exists");
testMenuitemsExist: function(next) {
let toggleSidebarMenuitems = document.getElementsByClassName("social-toggle-sidebar-menuitem");
is(toggleSidebarMenuitems.length, 2, "Toggle Sidebar menuitems exist");
let toggleDesktopNotificationsMenuitems = document.getElementsByClassName("social-toggle-notifications-menuitem");
is(toggleDesktopNotificationsMenuitems.length, 2, "Toggle notifications menuitems exist");
let toggleSocialMenuitems = document.getElementsByClassName("social-toggle-menuitem");
is(toggleSocialMenuitems.length, 2, "Toggle Social menuitems exist");
let removeSocialMenuitems = document.getElementsByClassName("social-remove-menuitem");
is(removeSocialMenuitems.length, 2, "Remove Social menuitems exist");
next();
}
}

View File

@ -402,10 +402,6 @@ fullscreen.entered=%S is now fullscreen.
# LOCALIZATION NOTE (fullscreen.rememberDecision): displayed when we enter HTML5 fullscreen mode, %S is the domain name of the focused website (e.g. mozilla.com).
fullscreen.rememberDecision=Remember decision for %S
# LOCALIZATION NOTE (social.toggle.label): %1$S is the name of the social provider, %2$S is brandShortName (e.g. Firefox)
social.toggle.label=%1$S for %2$S
social.toggle.accesskey=f
# LOCALIZATION NOTE (social.activated.description): %1$S is the name of the social provider, %2$S is brandShortName (e.g. Firefox)
social.activated.description=You've turned on %1$S for %2$S.
@ -417,6 +413,14 @@ social.remove.confirmationLabel=Are you sure you want to remove %1$S for %2$S?
# LOCALIZATION NOTE (social.remove.confirmationOK): %S is the name of the social provider
social.remove.confirmationOK=Remove %S
# LOCALIZATION NOTE (social.turnOff.label): %S is the name of the social provider
social.turnOff.label=Turn off %S
social.turnOff.accesskey=T
# LOCALIZATION NOTE (social.turnOn.label): %S is the name of the social provider
social.turnOn.label=Turn on %S
social.turnOn.accesskey=T
# LOCALIZATION NOTE (social.error.message): %1$S is brandShortName (e.g. Firefox), %2$S is the name of the social provider
social.error.message=%1$S is unable to connect with %2$S right now.
social.error.tryAgain.label=Try Again

View File

@ -2681,7 +2681,7 @@ html|*#gcli-output-frame {
margin-right: -12px;
}
#social-statusarea-user-portrait {
.social-statusarea-user-portrait {
width: 32px;
height: 32px;
border-radius: 2px;

View File

@ -4108,7 +4108,7 @@ html|*#gcli-output-frame {
/* === social toolbar provider menu === */
#social-statusarea-user-portrait {
.social-statusarea-user-portrait {
width: 32px;
height: 32px;
margin: 4px;

View File

@ -3353,13 +3353,13 @@ html|*#gcli-output-frame {
}
/* social toolbar provider menu */
#social-statusarea-popup {
.social-statusarea-popup {
margin-top: 0;
margin-left: -12px;
margin-right: -12px;
}
#social-statusarea-user {
.social-statusarea-user {
-moz-appearance: none;
border-bottom: 1px solid rgb(221,221,221);
background-color: -moz-Dialog;
@ -3367,15 +3367,14 @@ html|*#gcli-output-frame {
cursor: pointer;
}
#social-statusarea-user-portrait {
.social-statusarea-user-portrait {
width: 32px;
height: 32px;
border-radius: 2px;
margin: 10px;
}
#social-statusarea-user > vbox > #social-statusarea-notloggedin,
#social-statusarea-user > vbox > #social-statusarea-username {
.social-statusarea-loggedInStatus {
-moz-appearance: none;
background: transparent;
border: none;
@ -3385,8 +3384,7 @@ html|*#gcli-output-frame {
list-style-image: none;
}
#social-statusarea-user[_moz-menuactive] > vbox > #social-statusarea-notloggedin,
#social-statusarea-user[_moz-menuactive] > vbox > #social-statusarea-username {
.social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
text-decoration: underline;
}