Bug 1387618 - Increase tab close button size in touch mode. r=daleharvey
authorDão Gottwald <dao@mozilla.com>
Tue, 15 Aug 2017 19:22:05 +0200
changeset 647770 760113529a6c565128141961eb29e76119d1382c
parent 647769 7c0790a19ee221d1073187a33e4b730c98594534
child 647771 2e2bbc07c946e2fee216297e33871ebffe9a3393
push id74539
push userbmo:mkelly@mozilla.com
push dateWed, 16 Aug 2017 22:39:32 +0000
reviewersdaleharvey
bugs1387618
milestone57.0a1
Bug 1387618 - Increase tab close button size in touch mode. r=daleharvey MozReview-Commit-ID: 1L1bDnQtItQ
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,13 +1,15 @@
 %if 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
+%filter substitution
+%define horizontalTabPadding 9px
 
 :root {
   --tab-toolbar-navbar-overlap: 1px;
   --tab-line-color: highlight;
   --tab-min-height: 33px;
 }
 
 :root[uidensity=compact] {
@@ -47,17 +49,17 @@
 /* The selected tab should appear above the border between the tabs toolbar and
    the navigation toolbar. */
 .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;
 }
 
 .tab-content {
-  padding: 0 9px;
+  padding: 0 @horizontalTabPadding@;
 }
 
 .tab-content[pinned] {
   padding: 0 12px;
 }
 
 .tab-throbber,
 .tab-icon-image,
@@ -193,21 +195,25 @@
 }
 
 .tab-label {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
 
 .tab-close-button {
-  margin-inline-start: 1px;
   margin-inline-end: -2px;
   padding: 0;
 }
 
+:root[uidensity=touch] .tab-close-button {
+  margin-inline-end: -@horizontalTabPadding@;
+  padding: 10px calc(@horizontalTabPadding@ - 2px);
+}
+
 .tab-icon-sound {
   margin-inline-start: 1px;
   width: 16px;
   height: 16px;
   padding: 0;
 }
 
 .tab-icon-sound[soundplaying],