Bug 1352364 moved the styling for toolbarbutons in the tab bar from Windows to shared but left behind some styles in the Linux and Mac stylesheets. Not sure how this works on Mac, but it's causing problems with the all-tabs button on Linux. Generally, the goal is to share the toolbarbutton styling completely and get rid of these platform differences. Also, I think we should start using the --toolbarbutton* CSS variables here and replace the legacy styling that I hacked together ages ago as a band-aid for Firefox 4...

This fixes the width on OSX but makes the button style look a bit out of place (see screenshot), though I think it's easy to fix (see next comment).

Comment on attachment 8864500 [details] Bug 1362008 - Consolidate styling for toolbarbuttons in the tab bar. https://reviewboard.mozilla.org/r/136176/#review139604 ::: browser/themes/osx/browser.css (Diff revision 1) > -#TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):hover:active, > -#TabsToolbar .toolbarbutton-1[type="menu"][open], > -#TabsToolbar .toolbarbutton-1[type="panel"][open], > -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active, > -#TabsToolbar .toolbarbutton-1[open]:not([disabled=true]):hover > .toolbarbutton-menubutton-dropmarker { > - background-image: linear-gradient(transparent, rgba(0,0,0,.3)) !important; If you keep this and the rule above and add border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; to the rule above it restores the old style on OSX.

(In reply to Johann Hofmann [:johannh] from comment #3) > Created attachment 8864810 [details] > Screen Shot 2017-05-05 at 12.04.26.png > > This fixes the width on OSX but makes the button style look a bit out of > place (see screenshot), though I think it's easy to fix (see next comment). Looks like the border is missing for the scroll buttons, so they look particularly weird. (In reply to Johann Hofmann [:johannh] from comment #4) > ::: browser/themes/osx/browser.css > (Diff revision 1) > > -#TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):hover:active, > > -#TabsToolbar .toolbarbutton-1[type="menu"][open], > > -#TabsToolbar .toolbarbutton-1[type="panel"][open], > > -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active, > > -#TabsToolbar .toolbarbutton-1[open]:not([disabled=true]):hover > .toolbarbutton-menubutton-dropmarker { > > - background-image: linear-gradient(transparent, rgba(0,0,0,.3)) !important; > > If you keep this and the rule above and add > > border-color: transparent !important; > border-radius: 0 !important; > box-shadow: none !important; > > to the rule above it restores the old style on OSX. I'd rather fix the shared style.

Comment on attachment 8864500 [details] Bug 1362008 - Consolidate styling for toolbarbuttons in the tab bar. https://reviewboard.mozilla.org/r/136176/#review139620 ::: browser/themes/shared/toolbarbuttons.inc.css:11 (Diff revision 2) > %define toolbarShadowColor hsla(209,67%,12%,0.35) > %define forwardTransitionLength 150ms > %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper > > +:root { > + --toolbarbutton-disabled-opacity: 0.4; Note that this is currently missing on Linux, so disabled states are broken.

(In reply to Dão Gottwald [::dao] from comment #7) > Comment on attachment 8864500 [details] > Bug 1362008 - Clean up styling for toolbarbutons in the tab bar. > > https://reviewboard.mozilla.org/r/136176/#review139620 > > ::: browser/themes/shared/toolbarbuttons.inc.css:11 > (Diff revision 2) > > %define toolbarShadowColor hsla(209,67%,12%,0.35) > > %define forwardTransitionLength 150ms > > %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper > > > > +:root { > > + --toolbarbutton-disabled-opacity: 0.4; > > Note that this is currently missing on Linux, so disabled states are broken. Oh wait, there's another duplicate rule for disabled states on Linux, so it's not really broken.

Comment on attachment 8864500 [details] Bug 1362008 - Consolidate styling for toolbarbuttons in the tab bar. https://reviewboard.mozilla.org/r/136176/#review139606 Ok, fine by me :)` ::: commit-message-4a6a7:1 (Diff revision 3) > +Bug 1362008 - Clean up styling for toolbarbutons in the tab bar. r?johannh typo: toolbarbuttons

Pushed by dgottwald@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/1adb39c80e08 Consolidate styling for toolbarbuttons in the tab bar. r=johannh

Mozscreenshots results: https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=23fe0b76a018a5077a0f7234cff91c41e4b6af64&newProject=mozilla-central&newRev=e7bf9443be2c4a5187c37440e35f3526148d7fa8 The tab overflow buttons were crunched a bit but that seems mostly fixed to me on OSX except the too-small "+" button, which I fixed on-the-fly in bug 1352358 (I actually thought it was regressed by my patch).

Verified as fixed on latest Nightly 56.0a1, build ID 20170714030205 on Windows 10, MAC 10.12 and Ubuntu 16.04