Bug 1362408 - Fix disabled back button opacity on OSX. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 10 May 2017 06:22:21 -0400
changeset 589601 8500a742d08d78e89f66bfc009fd54f59d2d2303
parent 589544 4dd1d17ba22660b8f5869a707f2e4e9f9dd5be5b
child 631948 8b9ab1c7683c9df943987628fdf07548cb00b99f
push id62444
push userbmo:jhofmann@mozilla.com
push dateTue, 06 Jun 2017 13:15:18 +0000
reviewersdao
bugs1362408
milestone55.0a1
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
browser/themes/osx/browser.css
browser/themes/shared/icons/back.svg
--- 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>