Bug 1222747 - fix alignment of forward button on OSX devedition theme, r=dao
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 04 Jan 2016 15:51:31 +0000
changeset 320143 92cb9839960be04e1c31633dd0efc289d2a500a1
parent 320142 897610807fb544ce9b32e36d13b9656267017223
child 320144 8b4ced39ad5858ae05a65998676e4c1ffea859da
push id9143
push userahunt@mozilla.com
push dateFri, 08 Jan 2016 21:30:53 +0000
reviewersdao
bugs1222747
milestone46.0a1
Bug 1222747 - fix alignment of forward button on OSX devedition theme, r=dao
browser/themes/osx/devedition.css
--- a/browser/themes/osx/devedition.css
+++ b/browser/themes/osx/devedition.css
@@ -36,16 +36,28 @@
   height: 24px !important;
   box-shadow: none !important;
   border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   background: var(--chrome-nav-buttons-background) !important;
 }
 
 #forward-button {
   -moz-border-start: none !important;
+  /* browser.css and friends set up the width of the button to be 32px.
+   * They then set margin-left to -2px to ensure the button is not too wide
+   * compared to the back button, and set padding-left to center the icon
+   * correctly.
+   * In our theme, the back and forward buttons are the same width, with the
+   * back button being 32px with 1px border on both sides. To ensure the
+   * forward button's content box looks like it is the same size with width
+   * set to 32px and a 1px border on only 1 side, we overlap by 1px, so both
+   * buttons end up with a content box that looks like it's 30px.
+   */
+  margin-left: -1px;
+  padding-left: 1px;
 }
 
 #forward-button > .toolbarbutton-icon {
   margin-left: 0;
   margin-right: 0;
 }
 
 #back-button:hover:not([disabled="true"]),