Bug 589146 - Firefox menu items should display sub-menu on a slightly delayed hover. r=gavin

browser/base/content/browser-appmenu.inc

@@ -39,17 +39,20 @@
 # ***** END LICENSE BLOCK *****
 
 <menupopup id="appmenu-popup"
+           onpopupshowing="if (event.target == this) {
+                             updateEditUIVisibility();
 #ifdef MOZ_SERVICES_SYNC
-           onpopupshowing="updateEditUIVisibility();gSyncUI.updateUI();">
-#else
-           onpopupshowing="updateEditUIVisibility();">
+                             gSyncUI.updateUI();
 #endif
+                             return;
+                           }
+                           if (event.target.parentNode.parentNode.parentNode.parentNode == this)
+                             this._currentPopup = event.target;">
   <hbox>
     <vbox id="appmenuPrimaryPane">
       <splitmenu id="appmenu_newTab"
                  label="&tabCmd.label;"
-                 command="cmd_newNavigatorTab"
-                 key="key_newNavigatorTab">
+                 command="cmd_newNavigatorTab">
           <menupopup>
             <menuitem id="appmenu_newTab_popup"
                       label="&tabCmd.label;"
@@ -116,8 +119,7 @@
       <splitmenu id="appmenu_print"
                  iconic="true"
                  label="&printCmd.label;"
-                 command="cmd_print"
-                 key="printKb">
+                 command="cmd_print">
           <menupopup>
             <menuitem id="appmenu_print_popup"
                       class="menuitem-iconic"
@@ -203,8 +205,7 @@
       <splitmenu id="appmenu_bookmarks"
                  iconic="true"
                  label="&bookmarksMenu.label;"
-                 command="Browser:ShowAllBookmarks"
-                 key="manBookmarkKb">
+                 command="Browser:ShowAllBookmarks">
           <menupopup id="appmenu_bookmarksPopup"
                      placespopup="true"
                      context="placesContext"
@@ -267,8 +268,7 @@
       <splitmenu id="appmenu_history"
                  iconic="true"
                  label="&historyMenu.label;"
-                 command="Browser:ShowAllHistory"
-                 key="showAllHistoryKb">
+                 command="Browser:ShowAllHistory">
           <menupopup id="appmenu_historyMenupopup"
                      placespopup="true"
                      oncommand="this.parentNode._placesView._onCommand(event);"

browser/base/content/browser.css

@@ -155,13 +155,18 @@ splitmenu {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#splitmenu");
 }
 
-.split-menuitem-item {
+.splitmenu-menuitem {
+  -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem");
   list-style-image: inherit;
   -moz-image-region: inherit;
 }
 
-.split-menuitem-menu > .menu-text,
-.split-menuitem-menu > .menu-accel-container {
+.splitmenu-menuitem[iconic="true"] {
+  -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
+}
+
+.splitmenu-menu > .menu-text,
+:-moz-any(.splitmenu-menu, .splitmenu-menuitem) > .menu-accel-container {
   display: none;
 }
 

browser/base/content/urlbarBindings.xml

@@ -1299,27 +1299,85 @@
 
   <binding id="splitmenu">
     <content>
-      <xul:menuitem anonid="item" flex="1"
-                    class="menuitem-tooltip split-menuitem-item"
-                    xbl:inherits="label,key"/>
-      <xul:menu anonid="menu" class="split-menuitem-menu"
+      <xul:hbox anonid="menuitem" flex="1"
+                class="splitmenu-menuitem"
+                xbl:inherits="iconic,label,disabled,onclick=oncommand,_moz-menuactive=active"/>
+      <xul:menu anonid="menu" class="splitmenu-menu"
+                xbl:inherits="disabled"
                 oncommand="event.stopPropagation();">
         <children includes="menupopup"/>
       </xul:menu>
     </content>
 
     <implementation>
-      <constructor><![CDATA[
-        if (this.getAttribute("iconic") == "true") {
-          this.item.classList.remove("menuitem-tooltip");
-          this.item.classList.add("menuitem-iconic-tooltip");
-          this.item.classList.add("menuitem-iconic");
-        }
-      ]]></constructor>
-      <field name="item" readonly="true">
-        document.getAnonymousElementByAttribute(this, "anonid", "item");
+      <field name="menuitem" readonly="true">
+        document.getAnonymousElementByAttribute(this, "anonid", "menuitem");
       </field>
+      <field name="menu" readonly="true">
+        document.getAnonymousElementByAttribute(this, "anonid", "menu");
+      </field>
+
+      <field name="_menuDelay">600</field>
+
+      <field name="_parentMenupopup"><![CDATA[
+        let node = this.parentNode;
+        while (node) {
+          if (node.localName == "menupopup")
+            break;
+          node = node.parentNode;
+        }
+        node;
+      ]]></field>
     </implementation>
+
+    <handlers>
+      <handler event="mouseover"><![CDATA[
+        if (this.getAttribute("active") != "true" &&
+            this.getAttribute("disabled") != "true") {
+          if (this._parentMenupopup._currentPopup)
+            this._parentMenupopup._currentPopup.hidePopup();
+
+          this.setAttribute("active", "true");
+
+          let self = this;
+          setTimeout(function () {
+            if (self.getAttribute("active") == "true")
+              self.menu.open = true;
+          }, this._menuDelay);
+        }
+      ]]></handler>
+
+      <handler event="mouseout"><![CDATA[
+        if (this.menu.open)
+          return;
+
+        let node = event.relatedTarget;
+        while (node) {
+          if (node == this)
+            return;
+          node = node.parentNode;
+        }
+        this.removeAttribute("active");
+      ]]></handler>
+
+      <handler event="popuphidden"><![CDATA[
+        if (event.target == this.firstChild)
+          this.removeAttribute("active");
+      ]]></handler>
+
+      <handler event="click" phase="capturing"><![CDATA[
+        let node = event.originalTarget;
+        while (true) {
+          if (node == this.menuitem)
+            break;
+          if (node == this)
+            return;
+          node = node.parentNode;
+        }
+
+        this._parentMenupopup.hidePopup();
+      ]]></handler>
+    </handlers>
   </binding>
 
   <binding id="menuitem-tooltip" extends="chrome://global/content/bindings/menu.xml#menuitem">
@@ -1343,5 +1401,5 @@
       ]]></constructor>
     </implementation>
   </binding>
-  
+
 </bindings>

toolkit/content/xul.css

@@ -364,11 +364,11 @@ menuitem.menuitem-non-iconic {
 %ifdef MOZ_WIDGET_GTK2
 /********* detection of system setting to use icons in menus ***********/
 @media not all and (-moz-images-in-menus) {
-  menuitem:not([type]):not(.menuitem-with-favicon) > .menu-iconic-left {
+  .menu-iconic-left {
     visibility: hidden;
   }
-  menu > .menu-iconic-left {
-    visibility: hidden;
+  :-moz-any(menuitem[type], .menuitem-with-favicon) > .menu-iconic-left {
+    visibility: visible;
   }
 }
 %endif

toolkit/themes/gnomestripe/global/menu.css

@@ -44,7 +44,9 @@
 
 /* ::::: menu/menuitem ::::: */
 
-menu, menuitem {
+menu,
+menuitem,
+.splitmenu-menuitem {
   -moz-appearance: menuitem;
   -moz-box-align: center;
   max-width: 42em;
@@ -62,13 +64,15 @@ menuitem[default="true"] {
 }
 
 menu[_moz-menuactive="true"],
-menuitem[_moz-menuactive="true"] {
+menuitem[_moz-menuactive="true"],
+.splitmenu-menuitem[_moz-menuactive="true"] {
   color: -moz-menuhovertext;
   background-color: -moz-menuhover;
 }
 
 menu[disabled="true"],
-menuitem[disabled="true"] {
+menuitem[disabled="true"],
+.splitmenu-menuitem[disabled="true"] {
   color: GrayText;
 }
 

toolkit/themes/winstripe/global/menu.css

@@ -45,7 +45,8 @@
 /* ::::: menu/menuitem ::::: */
 
 menu,
-menuitem {
+menuitem,
+.splitmenu-menuitem {
   -moz-appearance: menuitem;
   -moz-box-align: center;
   color: MenuText;
@@ -60,8 +61,10 @@ menuitem[default="true"] {
 
 menu[disabled="true"],
 menuitem[disabled="true"],
+.splitmenu-menuitem[disabled="true"],
 menu[_moz-menuactive="true"][disabled="true"],
-menuitem[_moz-menuactive="true"][disabled="true"] {
+menuitem[_moz-menuactive="true"][disabled="true"],
+.splitmenu-menuitem[_moz-menuactive="true"][disabled="true"] {
   color: GrayText;
   text-shadow: none;
 }
@@ -69,7 +72,8 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
 @media all and (-moz-windows-classic) {
   menu[disabled="true"],
   menubar > menu[disabled="true"][_moz-menuactive="true"],
-  menuitem[disabled="true"] {
+  menuitem[disabled="true"],
+  .splitmenu-menuitem[disabled="true"] {
     color: ThreeDShadow;
     text-shadow: 1px 1px ThreeDHighlight;
   }
@@ -125,7 +129,8 @@ menuitem.spell-suggestion {
 }
 
 menu.menu-iconic > .menu-iconic-left,
-menuitem.menuitem-iconic > .menu-iconic-left {
+menuitem.menuitem-iconic > .menu-iconic-left,
+.splitmenu-menuitem[iconic="true"] > .menu-iconic-left {
   -moz-appearance: menuimage;
   padding-top: 2px;
 }
@@ -194,7 +199,8 @@ menupopup > menuitem {
 }
 
 menu[_moz-menuactive="true"],
-menuitem[_moz-menuactive="true"] {
+menuitem[_moz-menuactive="true"],
+.splitmenu-menuitem[_moz-menuactive="true"] {
   background-color: -moz-menuhover;
   color: -moz-menuhovertext;
 }