Bug 1362408 - Fix disabled back button opacity on OSX. r=dao
On OSX, we want to not fade the entire back button when it is
inactive. Instead we only fade the arrow icon. For that,
we use the SVG context-fill-opacity property.
MozReview-Commit-ID: J9I9BKHLedv
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -478,16 +478,24 @@ toolbarpaletteitem[place="palette"] > #p
/* Override OSX-specific toolkit findbar button styles */
.findbar-button {
background: none;
box-shadow: none;
border: none;
}
+/* On Mac, native buttons keep their full opacity when they become disabled
+ * and only the glyph or text on top of them becomes less opaque. */
+#back-button[disabled="true"] > .toolbarbutton-icon {
+ opacity: 1 !important;
+ -moz-context-properties: fill, fill-opacity;
+ fill-opacity: 0.4;
+}
+
/* Inactive elements are faded out on OSX */
.toolbarbutton-1:not(:hover):-moz-window-inactive,
#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] {
opacity: 0.5;
}
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
--- a/browser/themes/shared/icons/back.svg
+++ b/browser/themes/shared/icons/back.svg
@@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
- <path fill="context-fill" d="M13 6H8.2l2-2a.967.967 0 0 0 0-1.4l-.8-.9a.967.967 0 0 0-1.4 0L2.4 7.3a.967.967 0 0 0 0 1.4L8 14.3a.967.967 0 0 0 1.4 0l.8-.8a.965.965 0 0 0 0-1.4l-2-2.1H13c.6 0 1-.2 1-.8V7a.945.945 0 0 0-1-1z"/>
+ <path fill-opacity="context-fill-opacity" fill="context-fill" d="M13 6H8.2l2-2a.967.967 0 0 0 0-1.4l-.8-.9a.967.967 0 0 0-1.4 0L2.4 7.3a.967.967 0 0 0 0 1.4L8 14.3a.967.967 0 0 0 1.4 0l.8-.8a.965.965 0 0 0 0-1.4l-2-2.1H13c.6 0 1-.2 1-.8V7a.945.945 0 0 0-1-1z"/>
</svg>