Bug 1363869 - Increase vertical padding of toolbar buttons. r=dao
authorNihanth Subramanya <nhnt11@gmail.com>
Thu, 11 May 2017 02:34:12 +0530
changeset 358596 738b18369999fa3f08cce5a5054542bb5bd8292c
parent 358595 b6e44119b3b486bed32f02534ef21bb02657f5f5
child 358597 8e62027f76d43d3a448c094d2cad423da2110656
push id90353
push userryanvm@gmail.com
push dateWed, 17 May 2017 00:10:47 +0000
treeherdermozilla-inbound@41958333867b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1363869
milestone55.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 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;
 }