Bug 618552 - "Undo Close Group" button does not fit for some locales; r=ian
authorRaymond Lee <raymond@appcoast.com>
Tue, 08 Mar 2011 20:14:00 -0500
changeset 64027 8b1e669a783cc6fec65874c6fcaff3031626b62e
parent 64026 139cb01d3a634a534ea00b22f3620b6292553523
child 64028 f05317bf91bde0da13609ec192c81869d41b8628
push idunknown
push userunknown
push dateunknown
reviewersian
bugs618552
milestone2.2a1pre
Bug 618552 - "Undo Close Group" button does not fit for some locales; r=ian
browser/base/content/tabview/groupitems.js
browser/base/content/tabview/tabview.css
browser/themes/gnomestripe/browser/tabview/tabview.css
browser/themes/pinstripe/browser/tabview/tabview.css
browser/themes/winstripe/browser/tabview/tabview.css
--- a/browser/base/content/tabview/groupitems.js
+++ b/browser/base/content/tabview/groupitems.js
@@ -873,18 +873,20 @@ GroupItem.prototype = Utils.extend(new I
   // ----------
   // Function: _createUndoButton
   // Makes the affordance for undo a close group action
   _createUndoButton: function GroupItem__createUndoButton() {
     let self = this;
     this.$undoContainer = iQ("<div/>")
       .addClass("undo")
       .attr("type", "button")
+      .appendTo("body");
+    iQ("<span/>")
       .text(tabviewString("groupItem.undoCloseGroup"))
-      .appendTo("body");
+      .appendTo(this.$undoContainer);
     let undoClose = iQ("<span/>")
       .addClass("close")
       .appendTo(this.$undoContainer);
 
     this.$undoContainer.css({
       left: this.bounds.left + this.bounds.width/2 - iQ(self.$undoContainer).width()/2,
       top:  this.bounds.top + this.bounds.height/2 - iQ(self.$undoContainer).height()/2,
       "-moz-transform": "scale(.1)",
--- a/browser/base/content/tabview/tabview.css
+++ b/browser/base/content/tabview/tabview.css
@@ -107,21 +107,16 @@ body {
 
 /* Other Items
 ----------------------------------*/
 
 .undo {
   position: absolute;
 }
 
-.undo .close {
-  display: inline-block;
-  position: relative;
-}
-
 .info-item {
   position: absolute;
 }
 
 /* Trenches
 ----------------------------------*/
 
 .guideTrench, 
--- a/browser/themes/gnomestripe/browser/tabview/tabview.css
+++ b/browser/themes/gnomestripe/browser/tabview/tabview.css
@@ -294,41 +294,44 @@ html[dir=rtl] .appTabTrayContainer {
   cursor: pointer;
   opacity: 0.8;
   padding-bottom: 3px;
   display: block;
 }
 
 .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;
   border-radius: 0.4em;
   text-align: center;
   border: none;
   cursor: pointer;
 }
 
 .undo:hover {
   background-color: rgba(0,0,0,.3);
 }
 
 .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{
   opacity: 1.0;
 }
 
 
 /* InfoItems
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -288,41 +288,44 @@ html[dir=rtl] .appTabTrayContainer {
   cursor: pointer;
   opacity: 0.8;
   padding-bottom: 3px;
   display: block;
 }
 
 .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);
   border-radius: 0.4em;
   text-align: center;
   border: none;
   cursor: pointer;
 }
 
 .undo:hover {
   background-color: #949494;
 }
 
 .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{
   opacity: 1.0;
 }
 
 /* InfoItems
 ----------------------------------*/
--- a/browser/themes/winstripe/browser/tabview/tabview.css
+++ b/browser/themes/winstripe/browser/tabview/tabview.css
@@ -313,41 +313,44 @@ html[dir=rtl] .appTabTrayContainer {
   cursor: pointer;
   opacity: 0.8;
   padding-bottom: 3px;
   display: block;
 }
 
 .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);
   border-radius: 0.4em;
   text-align: center;
   border: none;
   cursor: pointer;
 }
 
 .undo:hover {
   background-color: #949494;
 }
 
 .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{
   opacity: 1.0;
 }
 
 /* InfoItems
 ----------------------------------*/