Bug 1222747 - fix alignment of forward button on OSX devedition theme, r=dao,a=sylvestre
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 04 Jan 2016 15:51:31 +0000
changeset 310835 5031dae2d2af05cdbe8d346a2d892f184ede8483
parent 310834 4a1745d4c58a80bd0eda5d02d759360c1a4ab2b0
child 310836 beff2f1d75224ad339a965e02f9193a9a4f43e79
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, sylvestre
bugs1222747
milestone45.0a2
Bug 1222747 - fix alignment of forward button on OSX devedition theme, r=dao,a=sylvestre
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"]),