Bug 1363869 - Increase vertical padding of toolbar buttons. r=dao draft
authorNihanth Subramanya <nhnt11@gmail.com>
Thu, 11 May 2017 02:34:12 +0530
changeset 578691 e2acfcf1e103a848e3c525ab831f48c244165528
parent 578554 4433cf0f6d2d4ced1695afa490fd8b135665db3b
child 628801 501b81308ff73fd1dfbd32f0679982cb52799b42
push id59022
push usernhnt11@gmail.com
push dateTue, 16 May 2017 10:48:44 +0000
reviewersdao
bugs1363869
milestone55.0a1
Bug 1363869 - Increase vertical padding of toolbar buttons. r=dao MozReview-Commit-ID: 9AOdM5hEQtY
browser/extensions/pocket/skin/osx/pocket.css
browser/extensions/pocket/skin/windows/pocket.css
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/browser.css
--- a/browser/extensions/pocket/skin/osx/pocket.css
+++ b/browser/extensions/pocket/skin/osx/pocket.css
@@ -1,9 +1,9 @@
 @import url("chrome://pocket-shared/skin/pocket.css");
 
 #nav-bar #pocket-button > .toolbarbutton-icon {
-  padding: calc(var(--toolbarbutton-vertical-inner-padding)) 6px;
+  padding: calc(var(--toolbarbutton-inner-padding)) 6px;
 }
 
 #PanelUI-pocketView[mainview=true] > .panel-subview-body > #pocket-panel-iframe {
   border-radius: var(--arrowpanel-border-radius);
 }
--- a/browser/extensions/pocket/skin/windows/pocket.css
+++ b/browser/extensions/pocket/skin/windows/pocket.css
@@ -1,10 +1,10 @@
 @import url("chrome://pocket-shared/skin/pocket.css");
 
 #nav-bar #pocket-button > .toolbarbutton-icon {
-  padding: calc(var(--toolbarbutton-vertical-inner-padding)) 6px;
+  padding: calc(var(--toolbarbutton-inner-padding)) 6px;
 }
 
 :-moz-any(#TabsToolbar, .widget-overflow-list) #pocket-button > .toolbarbutton-icon {
     max-width: 18px;
     padding: 0;
 }
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -20,17 +20,17 @@
   --backbutton-background: rgba(255,255,255,.15);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 2px;
 %else
   --toolbarbutton-border-radius: 1px;
 %endif
 
-  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
+  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
   --toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,.25);
   --toolbarbutton-hover-boxshadow: none;
 
   --toolbarbutton-active-background: rgba(154,154,154,.5) linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.4));
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 1px 1px rgba(0,0,0,.1) inset, 0 0 1px rgba(0,0,0,.3) inset;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -17,17 +17,17 @@
 :root {
   --space-above-tabbar: 9px;
   --tabs-toolbar-color: #333;
 
   --backbutton-border-color: rgba(0,0,0,0.2);
   --backbutton-background: linear-gradient(rgba(255,255,255,0.9),
                                            rgba(255,255,255,0.7)) repeat-x;
 
-  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px);
+  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 4px;
 %else
   --toolbarbutton-border-radius: 3px;
 
   --toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
   --toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), transparent) border-box;
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -183,17 +183,17 @@ toolbar:-moz-lwtheme-darktext {
 }
 
 /* Back and forward button */
 
 #back-button > .toolbarbutton-icon,
 #forward-button > .toolbarbutton-icon {
   background: var(--chrome-nav-buttons-background) !important;
   border-radius: 0 !important;
-  padding: var(--toolbarbutton-vertical-inner-padding) 5px !important;
+  padding: var(--toolbarbutton-inner-padding) 5px !important;
   margin: 0 !important;
   border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   box-shadow: none !important;
   height: auto !important;
 }
 
 #back-button > .toolbarbutton-icon {
   /* 18px icon + 2 * 5px padding + 2 * 1px border */
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -5,26 +5,28 @@
 %filter substitution
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 %define forwardTransitionLength 150ms
 %ifndef MOZ_PHOTON_THEME
 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
 %endif
 
 :root {
-  --toolbarbutton-vertical-inner-padding: 3px;
+%ifdef MOZ_PHOTON_THEME
+  --toolbarbutton-hover-background: hsla(240, 5%, 5%, .1);
+  --toolbarbutton-active-background: hsla(240, 5%, 5%, .15);
 
-%ifndef MOZ_PHOTON_THEME
+  --toolbarbutton-inner-padding: 5px;
+%else
   --backbutton-urlbar-overlap: 6px;
 
   /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
   --forwardbutton-width: 25px;
-%else
-  --toolbarbutton-hover-background: hsla(240, 5%, 5%, .1);
-  --toolbarbutton-active-background: hsla(240, 5%, 5%, .15);
+
+  --toolbarbutton-inner-padding: 3px;
 %endif
 }
 
 toolbar:-moz-lwtheme {
 %ifndef MOZ_PHOTON_THEME
   --toolbarbutton-hover-background: rgba(255,255,255,.25);
   --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
 %endif
@@ -153,17 +155,21 @@ toolbar[brighttext] .toolbarbutton-1 > .
 %endif
 .findbar-button > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton),
 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  padding: var(--toolbarbutton-vertical-inner-padding) 7px;
+%ifdef MOZ_PHOTON_THEME
+  padding: var(--toolbarbutton-inner-padding);
+%else
+  padding: var(--toolbarbutton-inner-padding) 7px;
+%endif
   background-origin: padding-box !important;
   background-clip: padding-box !important;
   border: 1px solid transparent;
   border-radius: var(--toolbarbutton-border-radius);
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
 }
 
@@ -209,28 +215,28 @@ toolbarbutton.bookmark-item:not(.subview
 }
 
 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   /* horizontal padding + border + actual icon width */
   max-width: 31px;
 }
 
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  padding-top: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
-  padding-bottom: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
+  padding-top: calc(var(--toolbarbutton-inner-padding) + 6px);
+  padding-bottom: calc(var(--toolbarbutton-inner-padding) + 6px);
 }
 
 #nav-bar .toolbarbutton-1 > .toolbarbutton-text {
   padding-top: var(--toolbarbutton-vertical-text-padding);
   padding-bottom: 0;
   /* To make the hover feedback line up with sibling buttons, it needs the same
    * height (16px) + padding (2 * 3px) + border (2 * 1px), but as a minimum
    * because otherwise an increase in text sizes would break things.
    */
-  min-height: calc(18px + 2 * var(--toolbarbutton-vertical-inner-padding));
+  min-height: calc(18px + 2 * var(--toolbarbutton-inner-padding));
 }
 
 #nav-bar .toolbaritem-combined-buttons {
   margin-left: 2px;
   margin-right: 2px;
 }
 
 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
@@ -385,18 +391,18 @@ toolbarbutton.bookmark-item[open="true"]
 
 /* bookmarks menu-button */
 
 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;
 }
 
 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  padding-top: var(--toolbarbutton-vertical-inner-padding);
-  padding-bottom: var(--toolbarbutton-vertical-inner-padding);
+  padding-top: var(--toolbarbutton-inner-padding);
+  padding-bottom: var(--toolbarbutton-inner-padding);
 }
 
 #BMB_bookmarksPopup[side="top"],
 #BMB_bookmarksPopup[side="bottom"] {
   margin-left: -20px;
   margin-right: -20px;
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -12,17 +12,17 @@
 %include windowsShared.inc
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 
 %include ../shared/browser.inc.css
 
 :root {
   --space-above-tabbar: 15px;
 
-  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
+  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 2px;
 %else
   --toolbarbutton-border-radius: 1px;
 
   --toolbarbutton-hover-background: rgba(0,0,0,.1);
   --toolbarbutton-active-background: rgba(0,0,0,.15);
@@ -752,17 +752,17 @@ toolbar[brighttext] #close-button {
   #urlbar,
   .searchbar-textbox {
     font-size: 1.15em;
     min-height: 28px;
   }
 
   :root {
     /* let toolbar buttons match the location and search bar's minimum height */
-    --toolbarbutton-vertical-inner-padding: 5px;
+    --toolbarbutton-inner-padding: 5px;
   }
 }
 
 #urlbar:-moz-lwtheme,
 .searchbar-textbox:-moz-lwtheme {
   background-color: rgba(255,255,255,.8);
   color: black;
 }