Bug 625320 - Move 'Tab Groups' to the 'list all tabs' menu [r=dolske, a=dolske]

browser/base/content/browser-menubar.inc

@@ -217,11 +217,6 @@
             <menu id="view-menu" label="&viewMenu.label;"
                   accesskey="&viewMenu.accesskey;">
               <menupopup id="menu_viewPopup">
-                <menuitem id="menu_tabview"
-                          key="key_tabview"
-                          label="&viewTabGroups.label;"
-                          accesskey="&viewTabGroups.accesskey;"
-                          command="Browser:ToggleTabView"/>
                 <menu id="viewToolbarsMenu"
                       label="&viewToolbarsMenu.label;"
                       accesskey="&viewToolbarsMenu.accesskey;">

browser/base/content/browser-syncui.js

@@ -158,16 +158,12 @@ let gSyncUI = {
     menuitem.setAttribute("class", "alltabs-item");
     menuitem.setAttribute("oncommand", "BrowserOpenSyncTabs();");
 
-    let sep = document.createElement("menuseparator");
-    sep.setAttribute("id", "sync-tabs-sep");
-
     // Fake the tab object on the menu entries, so that we don't have to worry
     // about removing them ourselves. They will just get cleaned up by popup
     // binding.
     menuitem.tab = { "linkedBrowser": { "currentURI": { "spec": label } } };
-    sep.tab = { "linkedBrowser": { "currentURI": { "spec": " " } } };
 
-    popup.insertBefore(sep, popup.firstChild);
+    let sep = document.getElementById("alltabs-popup-separator");
     popup.insertBefore(menuitem, sep);
   },
 

browser/base/content/browser.xul

@@ -844,7 +844,16 @@
                      tooltiptext="&listAllTabs.label;"
                      removable="true">
         <menupopup id="alltabs-popup"
-                   position="after_end"/>
+                   position="after_end">
+          <menuitem id="menu_tabview"
+                    class="menuitem-iconic"
+                    key="key_tabview"
+                    label="&viewTabGroups.label;"
+                    command="Browser:ToggleTabView"
+                    observes="tabviewGroupsNumber"
+                    keepme="true"/>
+          <menuseparator id="alltabs-popup-separator" keepme="true"/>
+        </menupopup>
       </toolbarbutton>
 
       <toolbarbutton id="tabs-closebutton"

browser/base/content/tabbrowser.xml

@@ -3690,11 +3690,13 @@
       <handler event="popuphidden">
       <![CDATA[
         // clear out the menu popup and remove the listeners
-        while (this.hasChildNodes()) {
-          var menuItem = this.lastChild;
-          menuItem.removeEventListener("command", this, false);
-          menuItem.tab.mCorrespondingMenuitem = null;
-          this.removeChild(menuItem);
+        for (let i = this.childNodes.length - 1; i > 0; i--) {
+          let menuItem = this.childNodes[i];
+          if (!menuItem.hasAttribute("keepme")) {
+            menuItem.removeEventListener("command", this, false);
+            menuItem.tab.mCorrespondingMenuitem = null;
+            this.removeChild(menuItem);
+          }
         }
         var tabcontainer = gBrowser.tabContainer;
         tabcontainer.mTabstrip.removeEventListener("scroll", this, false);

browser/themes/gnomestripe/browser/browser.css

@@ -629,24 +629,29 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 
 /* tabview button */
 
-#tabview-button {
+#tabview-button,
+#menu_tabview {
   list-style-image: url(chrome://browser/skin/tabview/tabview.png);
   -moz-image-region: rect(0, 80px, 16px, 64px);
 }
 
-#tabview-button[groups="0"] {
+#tabview-button[groups="0"],
+#menu_tabview[groups="0"] {
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
-#tabview-button[groups="1"] {
+#tabview-button[groups="1"],
+#menu_tabview[groups="1"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-#tabview-button[groups="2"] {
+#tabview-button[groups="2"],
+#menu_tabview[groups="2"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-#tabview-button[groups="3"] {
+#tabview-button[groups="3"],
+#menu_tabview[groups="3"] {
   -moz-image-region: rect(0, 64px, 16px, 48px);
 }
 

browser/themes/pinstripe/browser/browser.css

@@ -567,8 +567,12 @@ toolbar[mode="icons"] #forward-button {
 
 /* tabview button */
 
-#tabview-button {
+#tabview-button,
+#menu_tabview {
   list-style-image: url(chrome://browser/skin/tabview/tabview.png);
+}
+
+#tabview-button {
   -moz-image-region: rect(0, 100px, 20px, 80px);
 }
 
@@ -588,6 +592,26 @@ toolbar[mode="icons"] #forward-button {
   -moz-image-region: rect(0, 80px, 20px, 60px);
 }
 
+#menu_tabview {
+  -moz-image-region: rect(2px, 98px, 18px, 82px);
+}
+
+#menu_tabview[groups="0"] {
+  -moz-image-region: rect(2px, 18px, 18px, 2px);
+}
+
+#menu_tabview[groups="1"] {
+  -moz-image-region: rect(2px, 38px, 18px, 22px);
+}
+
+#menu_tabview[groups="2"] {
+  -moz-image-region: rect(2px, 58px, 18px, 42px);
+}
+
+#menu_tabview[groups="3"] {
+  -moz-image-region: rect(2px, 78px, 18px, 62px);
+}
+
 /* download manager button */
 
 #downloads-button {

browser/themes/winstripe/browser/browser.css

@@ -882,8 +882,12 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 
 /* tabview button */
 
-#tabview-button {
+#tabview-button,
+#menu_tabview {
   list-style-image: url(chrome://browser/skin/tabview/tabview.png);
+}
+
+#tabview-button {
   -moz-image-region: rect(0, 90px, 18px, 72px);
 }
 
@@ -903,6 +907,26 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-image-region: rect(0, 72px, 18px, 54px);
 }
 
+#menu_tabview {
+  -moz-image-region: rect(1px, 89px, 17px, 73px);
+}
+
+#menu_tabview[groups="0"] {
+  -moz-image-region: rect(1px, 17px, 17px, 1px);
+}
+
+#menu_tabview[groups="1"] {
+  -moz-image-region: rect(1px, 35px, 17px, 19px);
+}
+
+#menu_tabview[groups="2"] {
+  -moz-image-region: rect(1px, 53px, 17px, 37px);
+}
+
+#menu_tabview[groups="3"] {
+  -moz-image-region: rect(1px, 71px, 17px, 55px);
+}
+
 /* download manager button */
 
 #downloads-button {