Bug 687287 - Fix alignment of close button on inactive tabs (r=mfinkle)
authorLucas Rocha <lucasr@mozilla.com>
Mon, 19 Sep 2011 09:44:03 -0700
changeset 77136 aada4d669948e1ed4f59d3d99ca11354f9cbfd17
parent 77135 f1586578808bb623b198ac31ef19e9a2dee61325
child 77137 4e1b3e291b1bc0ee611abb67d1e027345602662e
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersmfinkle
bugs687287
milestone9.0a1
Bug 687287 - Fix alignment of close button on inactive tabs (r=mfinkle) Do not force a width on close button container and let the margins define its size. This allows us to have different clickable areas for the close button on both active and inactive tabs.
mobile/chrome/content/tabs.xml
mobile/themes/core/tablet.css
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@@ -34,39 +34,34 @@
           this.updateTabletLayout(this.thumbnail);
         ]]>
       </constructor>
 
       <method name="updateTabletLayout">
         <parameter name="thumbnail"/>
         <body>
           <![CDATA[
-            let tabWidth, tabHeight, closeWidth, closeHeight;
+            let tabWidth, tabHeight;
 
             if (Util.isTablet()) {
               tabWidth = 176;
               tabHeight = 110;
-              closeWidth = 41;
-              closeHeight = 117;
             } else {
               tabWidth = 104;
               tabHeight = 65;
-              closeWidth = 55;
-              closeHeight = 65;
             }
 
             if (tabWidth != thumbnail.width) {
               let reload = this._reload;
               let closeContainer = this._closeContainer;
               let title = this._title;
 
               thumbnail.width = reload.width = title.width = tabWidth;
               thumbnail.height = reload.height = tabHeight;
-              closeContainer.width = closeWidth;
-              closeContainer.height = closeHeight;
+              closeContainer.height = tabHeight;
             }
           ]]>
         </body>
       </method>
 
       <method name="_onClick">
         <body>
           <![CDATA[
--- a/mobile/themes/core/tablet.css
+++ b/mobile/themes/core/tablet.css
@@ -63,27 +63,29 @@
 
 .documenttab-thumbnail[tablet] {
   border-radius: @border_radius_tiny@;
 }
 
 .documenttab-close-container[tablet] {
   left: 0px;
   -moz-margin-end: 0px;
-  -moz-margin-start: 151px;
+  -moz-margin-start: 145px;
   -moz-box-pack: end;
   -moz-box-align: center;
+  -moz-margin-end: -11px;
+  padding-right: 11px;
 }
 
 documenttab[selected="true"] > vbox > stack > .documenttab-close-container[tablet] {
   background: url("chrome://browser/skin/images/close-background-hdpi.png");
   background-repeat: no-repeat;
   background-position: right;
-  -moz-margin-end: -11px;
-  padding-right: 2px;
+  -moz-margin-start: 150px;
+  padding-right: 0px;
 }
 
 .documenttab-close[tablet] {
   width: 30px;
   height: 44px;
   list-style-image: url("chrome://browser/skin/images/close-inactive-tab-tablet-hdpi.png");
 }