Bug 455756 - Add a "new tab" button to the tab bar. r=gavin

browser/base/content/browser.js

@@ -2641,42 +2641,6 @@ var bookmarksButtonObserver = {
   }
 }
 
-var newTabButtonObserver = {
-  onDragOver: function(aEvent, aFlavour, aDragSession)
-    {
-      var statusTextFld = document.getElementById("statusbar-display");
-      statusTextFld.label = gNavigatorBundle.getString("droponnewtabbutton");
-      aEvent.target.setAttribute("dragover", "true");
-      return true;
-    },
-  onDragExit: function (aEvent, aDragSession)
-    {
-      var statusTextFld = document.getElementById("statusbar-display");
-      statusTextFld.label = "";
-      aEvent.target.removeAttribute("dragover");
-    },
-  onDrop: function (aEvent, aXferData, aDragSession)
-    {
-      var xferData = aXferData.data.split("\n");
-      var draggedText = xferData[0] || xferData[1];
-      var postData = {};
-      var url = getShortcutOrURI(draggedText, postData);
-      if (url) {
-        nsDragAndDrop.dragDropSecurityCheck(aEvent, aDragSession, url);
-        // allow third-party services to fixup this URL
-        openNewTabWith(url, null, postData.value, aEvent, true);
-      }
-    },
-  getSupportedFlavours: function ()
-    {
-      var flavourSet = new FlavourSet();
-      flavourSet.appendFlavour("text/unicode");
-      flavourSet.appendFlavour("text/x-moz-url");
-      flavourSet.appendFlavour("application/x-moz-file", "nsIFile");
-      return flavourSet;
-    }
-}
-
 var newWindowButtonObserver = {
   onDragOver: function(aEvent, aFlavour, aDragSession)
     {

browser/base/content/browser.xul

@@ -446,14 +446,6 @@
                        ondragdrop="nsDragAndDrop.drop(event, bookmarksButtonObserver);"
                        ondragexit="nsDragAndDrop.dragExit(event, bookmarksButtonObserver);"/>
 
-        <toolbarbutton id="new-tab-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                       label="&tabCmd.label;"
-                       command="cmd_newNavigatorTab"
-                       tooltiptext="&newTabButton.tooltip;"
-                       ondragover="nsDragAndDrop.dragOver(event, newTabButtonObserver);"
-                       ondragdrop="nsDragAndDrop.drop(event, newTabButtonObserver);"
-                       ondragexit="nsDragAndDrop.dragExit(event, newTabButtonObserver);"/>
-
         <toolbarbutton id="new-window-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                        label="&newNavigatorCmd.label;"
                        command="key_newNavigator"

browser/base/content/tabbrowser.xml

@@ -1843,6 +1843,7 @@
                   break;
                 case "scrollbutton-down":
                 case "alltabs-button":
+                case "newtab-button":
                   pixelsToScroll = tabStrip.scrollIncrement;
                   break;
               }
@@ -2696,6 +2697,9 @@
                               class="tabbrowser-arrowscrollbox">
             <children/>
           </xul:arrowscrollbox>
+          <xul:toolbarbutton class="tabs-newtab-button" anonid="newtab-button"
+                             command="cmd_newNavigatorTab" chromedir="&locale.dir;"
+                             tooltiptext="&newTabButton.tooltip;"/>
           <xul:stack align="center" pack="end" chromedir="&locale.dir;">
             <xul:hbox flex="1" class="tabs-alltabs-box" anonid="alltabs-box"/>
             <xul:hbox flex="1" class="tabs-alltabs-box-animate" anonid="alltabs-box-animate"/>

browser/locales/en-US/chrome/browser/browser.dtd

@@ -309,7 +309,6 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY fullZoom.label                 "Zoom">
 <!ENTITY fullZoom.accesskey             "Z">
 
-<!ENTITY newTabButton.tooltip           "Open a new tab">
 <!ENTITY newWindowButton.tooltip        "Open a new window">
 <!ENTITY sidebarCloseButton.tooltip     "Close sidebar">
 

browser/locales/en-US/chrome/browser/browser.properties

@@ -5,7 +5,6 @@ openFile=Open File
 
 droponbookmarksbutton=Drop a link to bookmark it
 dropondownloadsbutton=Drop a link or file to download it
-droponnewtabbutton=Drop a link or file to open it in a new tab
 droponnewwindowbutton=Drop a link or file to open it in a new window
 droponhomebutton=Drop a link or file to make it your home page
 droponhometitle=Set Home Page

browser/locales/en-US/chrome/browser/tabbrowser.dtd

@@ -16,3 +16,4 @@
 <!ENTITY  bookmarkThisTab.accesskey   "B">
 <!ENTITY  undoCloseTab.label          "Undo Close Tab">
 <!ENTITY  undoCloseTab.accesskey      "U">
+<!ENTITY  newTabButton.tooltip        "Open a new tab">

browser/themes/gnomestripe/browser/browser.css

@@ -594,13 +594,6 @@ toolbar[mode="full"] .toolbarbutton-menubutton-button {
   list-style-image: url("moz-icon://stock/gtk-print?size=toolbar&state=disabled");
 }
 
-#new-tab-button {
-  -moz-image-region: rect(0px 96px 24px 72px);
-}
-#new-tab-button[disabled="true"] {
-  -moz-image-region: rect(24px 96px 48px 72px);
-}
-
 #new-window-button {
   -moz-image-region: rect(0px 120px 24px 96px);
 }
@@ -731,13 +724,6 @@ toolbar[iconsize="small"] #print-button[disabled="true"] {
   list-style-image: url("moz-icon://stock/gtk-print?size=menu&state=disabled");
 }
 
-toolbar[iconsize="small"] #new-tab-button {
-  -moz-image-region: rect(0px 64px 16px 48px);
-}
-toolbar[iconsize="small"] #new-tab-button[disabled="true"] {
-  -moz-image-region: rect(16px 64px 32px 48px);
-}
-
 toolbar[iconsize="small"] #new-window-button {
   -moz-image-region: rect(0px 80px 16px 64px);
 }
@@ -1303,6 +1289,16 @@ tabpanels {
   outline: none !important;
 }
 
+/* New tab button */
+.tabs-newtab-button {
+  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
+  border: none;
+}
+
+.tabs-newtab-button > .toolbarbutton-icon {
+  margin: -3px !important;
+}
+
 /* Tabstrip close button */
 .tabs-closebutton {
   list-style-image: url("moz-icon://stock/gtk-close?size=menu");

browser/themes/gnomestripe/browser/jar.mn

@@ -56,8 +56,7 @@ classic.jar:
   skin/classic/browser/preferences/Options.png        (preferences/Options.png)
 * skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
-  skin/classic/browser/tabbrowser/tab-arrow-end.png    (tabbrowser/tab-arrow-end.png)
-  skin/classic/browser/tabbrowser/tab-arrow-start.png  (tabbrowser/tab-arrow-start.png)
+  skin/classic/browser/tabbrowser/newtab.png           (tabbrowser/newtab.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
   icon.png
   preview.png

browser/themes/pinstripe/browser/browser.css

@@ -750,18 +750,6 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
   -moz-image-region: rect(46px, 324px, 69px, 288px);
 }
 
-/* ----- DEFAULT NEW-TAB BUTTON ----- */	
-
-#new-tab-button {
-  -moz-image-region: rect(0px, 360px, 23px, 324px);
-}
-#new-tab-button[disabled="true"] {
-  -moz-image-region: rect(23px, 360px, 46px, 324px);
-}
-#new-tab-button:hover:active {
-  -moz-image-region: rect(46px, 360px, 69px, 324px);
-}
-
 /* ----- DEFAULT NEW-WINDOW BUTTON ----- */	
 
 #new-window-button {
@@ -1854,35 +1842,42 @@ tabbrowser > tabbox > tabpanels {
 
 
 /**
- * All Tabs Button
+ * New Tab & All Tabs Buttons
  */
 
 .tabs-alltabs-box {
   margin: 0;
-  width: 25px;
 }
 
+.tabs-newtab-button ,
 .tabs-alltabs-button {
-  list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png");
   -moz-border-start: 2px solid;
+  -moz-border-end: none;
   -moz-border-left-colors: rgba(0,0,0,0.25) rgba(255,255,255,0.15);
   -moz-border-right-colors: rgba(0,0,0,0.25) rgba(255,255,255,0.15);
   margin: 0;
-  padding: 2px 0 0 0;
+  padding: 0 4px;
 }
+.tabs-newtab-button {
+  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
+}
+.tabs-alltabs-button {
+  padding-top: 2px;
+  list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png);
+}
+.tabs-newtab-button:hover ,
 .tabs-alltabs-button:hover {
   background-color: rgba(0,0,0,0.10);
 }
+.tabs-newtab-button:hover:active,
 .tabs-alltabs-button:hover:active,
 .tabs-alltabs-button[open="true"] {
   background-color: rgba(0,0,0,0.20);
 }
 
-.tabs-alltabs-button  > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
-.tabs-alltabs-button  > .toolbarbutton-text {
+.tabs-newtab-button > .toolbarbutton-text ,
+.tabs-alltabs-button > .toolbarbutton-menu-dropmarker ,
+.tabs-alltabs-button > .toolbarbutton-text {
   display: none;
 }
 

browser/themes/pinstripe/browser/jar.mn

@@ -118,6 +118,7 @@ classic.jar:
   skin/classic/browser/tabbrowser/alltabs-box-bkgnd-icon.png             (tabbrowser/alltabs-box-bkgnd-icon.png)
   skin/classic/browser/tabbrowser/alltabs-box-overflow-bkgnd.png         (tabbrowser/alltabs-box-overflow-bkgnd.png)
   skin/classic/browser/tabbrowser/alltabs-box-overflow-bkgnd-animate.png (tabbrowser/alltabs-box-overflow-bkgnd-animate.png)
+  skin/classic/browser/tabbrowser/newtab.png                             (tabbrowser/newtab.png)
   skin/classic/browser/tabbrowser/tab-arrow-start.png                    (tabbrowser/tab-arrow-start.png)
   skin/classic/browser/tabbrowser/tab-arrow-start-bkgnd.png              (tabbrowser/tab-arrow-start-bkgnd.png)
   skin/classic/browser/tabbrowser/tab-arrow-start-bkgnd-animate.png      (tabbrowser/tab-arrow-start-bkgnd-animate.png)

browser/themes/winstripe/browser/browser.css

@@ -650,24 +650,6 @@ toolbar[iconsize="small"][mode="icons"] #back-forward-dropmarker[chromedir="rtl"
   -moz-image-region: rect(96px 216px 120px 192px);
 }
 
-/* new tab button */
-
-toolbar:not([iconsize="small"]) #new-tab-button > .toolbarbutton-icon {
-  padding-left: 1px;
-}
-#new-tab-button {
-  -moz-image-region: rect(0px 240px 24px 216px);
-}
-#new-tab-button:not([disabled="true"]):hover {
-  -moz-image-region: rect(24px 240px 48px 216px);
-}
-#new-tab-button[disabled="true"] {
-  -moz-image-region: rect(48px 240px 72px 216px);
-}
-#new-tab-button:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(96px 240px 120px 216px);
-}
-
 /* new window button */
 
 toolbar:not([iconsize="small"]) #new-window-button > .toolbarbutton-icon {
@@ -956,24 +938,6 @@ toolbar[iconsize="small"] #print-button:not([disabled="true"]):hover:active {
   -moz-image-region: rect(64px 144px 80px 128px);
 }
 
-/* new tab button */
-
-toolbar[iconsize="small"] #new-tab-button > .toolbarbutton-icon {
-  padding-left: 1px;
-}
-toolbar[iconsize="small"] #new-tab-button {
-  -moz-image-region: rect(0px 160px 16px 144px);
-}
-toolbar[iconsize="small"] #new-tab-button:not([disabled="true"]):hover {
-  -moz-image-region: rect(16px 160px 32px 144px);
-}
-toolbar[iconsize="small"] #new-tab-button[disabled="true"] {
-  -moz-image-region: rect(32px 160px 48px 144px);
-}
-toolbar[iconsize="small"] #new-tab-button:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(64px 160px 80px 144px);
-}
-
 /* new window button */
 
 toolbar[iconsize="small"] #new-window-button {
@@ -1502,9 +1466,10 @@ tabpanels {
   outline: none !important;
 }
 
-/* Tab scrollbox arrow and all-tabs buttons */
+/* Tab scrollbox arrow, new tab and all-tabs buttons */
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down,
+.tabs-newtab-button,
 .tabs-alltabs-button {
   -moz-appearance: none;
   width: 18px;
@@ -1522,6 +1487,7 @@ tabpanels {
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover,
+.tabs-newtab-button:hover,
 .tabs-alltabs-button:hover {
   border-top-width: 1px;
   padding-top: 1px;
@@ -1565,6 +1531,7 @@ tabpanels {
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down,
+.tabs-newtab-button,
 .tabs-alltabs-button {
   border-right-style: none;
   -moz-border-radius-topleft: 2px;
@@ -1575,6 +1542,7 @@ tabpanels {
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down[chromedir="rtl"],
+.tabs-newtab-button[chromedir="rtl"],
 .tabs-container > stack[chromedir="rtl"] > .tabs-alltabs-button {
   border-left-style: none;
   border-right-style: solid;
@@ -1592,6 +1560,13 @@ tabpanels {
   -moz-margin-end: 2px;
 }
 
+.tabs-newtab-button > .toolbarbutton-icon {
+  list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
+  margin: 3px 0 0;
+  -moz-margin-end: 2px;
+}
+
+.tabs-newtab-button > .toolbarbutton-text,
 .tabs-alltabs-button > .toolbarbutton-text,
 .tabs-alltabs-button > .toolbarbutton-icon {
   display: none;

browser/themes/winstripe/browser/jar.mn

@@ -76,6 +76,7 @@ classic.jar:
         skin/classic/browser/preferences/applications.css            (preferences/applications.css)
         skin/classic/browser/tabbrowser/alltabs-box-overflow-end-bkgnd-animate.png        (tabbrowser/alltabs-box-overflow-end-bkgnd-animate.png)
         skin/classic/browser/tabbrowser/alltabs-box-overflow-start-bkgnd-animate.png      (tabbrowser/alltabs-box-overflow-start-bkgnd-animate.png)
+        skin/classic/browser/tabbrowser/newtab.png                              (tabbrowser/newtab.png)
         skin/classic/browser/tabbrowser/tab-arrow-end.png                       (tabbrowser/tab-arrow-end.png)
         skin/classic/browser/tabbrowser/tab-arrow-start.png                     (tabbrowser/tab-arrow-start.png)
         skin/classic/browser/tabbrowser/tabbrowser-tabs-bkgnd.png               (tabbrowser/tabbrowser-tabs-bkgnd.png)
@@ -165,6 +166,7 @@ classic.jar:
         skin/classic/aero/browser/preferences/applications.css       (preferences/applications.css)
         skin/classic/aero/browser/tabbrowser/alltabs-box-overflow-end-bkgnd-animate.png   (tabbrowser/alltabs-box-overflow-end-bkgnd-animate.png)
         skin/classic/aero/browser/tabbrowser/alltabs-box-overflow-start-bkgnd-animate.png (tabbrowser/alltabs-box-overflow-start-bkgnd-animate.png)
+        skin/classic/aero/browser/tabbrowser/newtab.png                         (tabbrowser/newtab-aero.png)
         skin/classic/aero/browser/tabbrowser/tab-arrow-end.png                  (tabbrowser/tab-arrow-end-aero.png)
         skin/classic/aero/browser/tabbrowser/tab-arrow-start.png                (tabbrowser/tab-arrow-start-aero.png)
         skin/classic/aero/browser/tabbrowser/tabbrowser-tabs-bkgnd.png          (tabbrowser/tabbrowser-tabs-bkgnd.png)