Bug 801040 - Add Social API status-area menuitems to the keyboard accessible Social API menu. r=felipe

browser/base/content/browser-menubar.inc

@@ -482,9 +482,7 @@
                   accesskey="&toolsMenu.accesskey;">
               <menupopup id="menu_ToolsPopup"
 #ifdef MOZ_SERVICES_SYNC
-                         onpopupshowing="gSyncUI.updateUI(); SocialMenu.populate();"
+                         onpopupshowing="gSyncUI.updateUI();"
-#else
-                         onpopupshowing="SocialMenu.populate();"
 #endif
                          >
               <menuitem id="menu_search"
@@ -512,7 +510,22 @@
               <menu id="menu_socialAmbientMenu"
                     class="show-only-for-keyboard"
                     command="Social:Toggle">
-                <menupopup id="menu_socialAmbientMenuPopup"/>
+                <menupopup id="menu_socialAmbientMenuPopup">
+                  <menuseparator id="socialAmbientMenuSeparator"
+                                 hidden="true"/>
+                  <menuitem id="social-toggle-sidebar-keyboardmenuitem"
+                            type="checkbox"
+                            autocheck="false"
+                            command="Social:ToggleSidebar"
+                            label="&social.toggleSidebar.label;"
+                            accesskey="&social.toggleSidebar.accesskey;"/>
+                  <menuitem id="social-toggle-notifications-keyboardmenuitem"
+                            type="checkbox"
+                            autocheck="false"
+                            command="Social:ToggleNotifications"
+                            label="&social.toggleNotifications.label;"
+                            accesskey="&social.toggleNotifications.accesskey;"/>
+                </menupopup>
               </menu>
 #ifdef MOZ_SERVICES_SYNC
               <!-- only one of sync-setup or sync-menu will be showing at once -->

browser/base/content/browser-social.js

@@ -62,7 +62,7 @@ let SocialUI = {
         break;
       case "social:ambient-notification-changed":
         SocialToolbar.updateButton();
-        SocialMenu.updateMenu();
+        SocialMenu.populate();
         break;
       case "social:profile-changed":
         SocialToolbar.updateProfile();
@@ -72,6 +72,8 @@ let SocialUI = {
       case "nsPref:changed":
         SocialSidebar.updateSidebar();
         SocialToolbar.updateButton();
+        SocialMenu.populate();
+        break;
     }
   },
 
@@ -607,24 +609,31 @@ var SocialMenu = {
   populate: function SocialMenu_populate() {
     // This menu is only accessible through keyboard navigation.
     let submenu = document.getElementById("menu_socialAmbientMenuPopup");
-    while (submenu.hasChildNodes())
+    let ambientMenuItems = submenu.getElementsByClassName("ambient-menuitem");
-      submenu.removeChild(submenu.firstChild);
+
+    for (let ambientMenuItem of ambientMenuItems) {
+      submenu.removeChild(ambientMenuItem);
+    }
+
     let provider = Social.provider;
     if (Social.active && provider) {
       let iconNames = Object.keys(provider.ambientNotificationIcons);
+      let separator = document.getElementById("socialAmbientMenuSeparator");
       for (let name of iconNames) {
         let icon = provider.ambientNotificationIcons[name];
         if (!icon.label || !icon.menuURL)
           continue;
         let menuitem = document.createElement("menuitem");
         menuitem.setAttribute("label", icon.label);
+        menuitem.classList.add("ambient-menuitem");
         menuitem.addEventListener("command", function() {
           openUILinkIn(icon.menuURL, "tab");
         }, false);
-        submenu.appendChild(menuitem);
+        submenu.insertBefore(menuitem, separator);
       }
+      separator.hidden = !iconNames.length;
     }
-    document.getElementById("menu_socialAmbientMenu").hidden = !submenu.querySelector("menuitem");
+    document.getElementById("menu_socialAmbientMenu").hidden = !Social.enabled;
   }
 };
 
@@ -633,6 +642,7 @@ var SocialToolbar = {
   init: function SocialToolbar_init() {
     this.button.setAttribute("image", Social.provider.iconURL);
     this.updateButton();
+    SocialMenu.populate();
     this.updateProfile();
     this._dynamicResizer = new DynamicResizeWatcher();
   },

browser/base/content/test/browser_social_toolbar.js

@@ -46,7 +46,8 @@ var tests = {
       toolsPopup.removeEventListener("popupshown", ontoolspopupshownNoAmbient);
       let socialToggleMore = document.getElementById("menu_socialAmbientMenu");
       ok(socialToggleMore, "Keyboard accessible social menu should exist");
-      is(socialToggleMore.hidden, true, "Menu should be hidden when no ambient notifications.");
+      is(socialToggleMore.querySelectorAll("menuitem").length, 2, "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();
     }, false);
@@ -85,6 +86,7 @@ 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, 3, "The number of menuitems is minimum plus one ambient notification menuitem.");
         is(socialToggleMore.hidden, false, "Menu is visible when ambient notifications have label & menuURL");
         let menuitem = socialToggleMore.querySelector("menuitem");
         is(menuitem.getAttribute("label"), "Test Ambient 1", "Keyboard accessible ambient menuitem should have specified label");
@@ -109,11 +111,15 @@ var tests = {
   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");
     next();
   }
 }