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 78447 aada4d669948e1ed4f59d3d99ca11354f9cbfd17
parent 78446 f1586578808bb623b198ac31ef19e9a2dee61325
child 78448 4e1b3e291b1bc0ee611abb67d1e027345602662e
push id78
push userclegnitto@mozilla.com
push dateFri, 16 Dec 2011 17:32:24 +0000
treeherdermozilla-release@79d24e644fdd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs687287
milestone9.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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");
 }