Bug 618552 - "Undo Close Group" button does not fit for some locales; r=ian

browser/base/content/tabview/groupitems.js

@@ -878,8 +878,10 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
     this.$undoContainer = iQ("<div/>")
       .addClass("undo")
       .attr("type", "button")
-      .text(tabviewString("groupItem.undoCloseGroup"))
       .appendTo("body");
+    iQ("<span/>")
+      .text(tabviewString("groupItem.undoCloseGroup"))
+      .appendTo(this.$undoContainer);
     let undoClose = iQ("<span/>")
       .addClass("close")
       .appendTo(this.$undoContainer);

browser/base/content/tabview/tabview.css

@@ -112,11 +112,6 @@ body {
   position: absolute;
 }
 
-.undo .close {
-  display: inline-block;
-  position: relative;
-}
-
 .info-item {
   position: absolute;
 }

browser/themes/gnomestripe/browser/tabview/tabview.css

@@ -299,9 +299,12 @@ html[dir=rtl] .appTabTrayContainer {
 
 .undo {
   background-color: rgba(0,0,0,.2);
-  width: 150px;
-  height: 30px;
-  line-height: 30px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 20px;
+  width: 135px;
+  line-height: 25px;
   box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.3) inset;
   text-shadow: 0 1px 0 rgba(255,255,255,.2);
   color: WindowText;
@@ -316,14 +319,14 @@ html[dir=rtl] .appTabTrayContainer {
 }
 
 .undo .close {
-  top: 4px;
-  left: 4px;
+  top: 7px;
+  right: 7px;
   opacity: 0.5;
 }
 
 html[dir=rtl] .undo .close {
-  left: auto;
-  right: 4px;
+  right: auto;
+  left: 7px;
 }
 
 .undo .close:hover{

browser/themes/pinstripe/browser/tabview/tabview.css

@@ -293,9 +293,12 @@ html[dir=rtl] .appTabTrayContainer {
 
 .undo {
   background-color: #A0A0A0;
-  width: 150px;
-  height: 30px;
-  line-height: 30px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 20px;
+  width: 135px;
+  line-height: 25px;
   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.24);
   text-shadow: 0px -1px 0px rgba(255,255,255,.2);
   color: rgba( 0,0,0, .8);
@@ -310,14 +313,14 @@ html[dir=rtl] .appTabTrayContainer {
 }
 
 .undo .close {
-  top: 4px;
-  left: 4px;
+  top: 7px;
+  right: 7px;
   opacity: 0.5;
 }
 
 html[dir=rtl] .undo .close {
-  left: auto;
-  right: 4px;
+  right: auto;
+  left: 7px;
 }
 
 .undo .close:hover{

browser/themes/winstripe/browser/tabview/tabview.css

@@ -318,9 +318,12 @@ html[dir=rtl] .appTabTrayContainer {
 
 .undo {
   background-color: #A0A0A0;
-  width: 150px;
-  height: 30px;
-  line-height: 30px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 20px;
+  width: 135px;
+  line-height: 25px;
   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.24);
   text-shadow: 0px -1px 0px rgba(255,255,255,.2);
   color: rgba( 0,0,0, .8);
@@ -335,14 +338,14 @@ html[dir=rtl] .appTabTrayContainer {
 }
 
 .undo .close {
-  top: 4px;
-  left: 4px;
+  top: 7px;
+  right: 7px;
   opacity: 0.5;
 }
 
 html[dir=rtl] .undo .close {
-  left: auto;
-  right: 4px;
+  right: auto;
+  left: 7px;
 }
 
 .undo .close:hover{