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.
--- 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");
}
