Bug 1377165 - use correct fill colours and opacity for in-urlbar icons, r?dao,shorlander draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 30 Jun 2017 18:25:20 +0100
changeset 602764 349781fe458464fbbfd807dbd5081d5992d6081f
parent 602670 d536973fe668c6c6046fc3fda82e24f3379e3713
child 635704 375d746ead557b744b8c7378cd4ecadeff2a9eca
push id66542
push usergijskruitbosch@gmail.com
push dateFri, 30 Jun 2017 18:25:03 +0000
reviewersdao, shorlander
bugs1377165
milestone56.0a1
Bug 1377165 - use correct fill colours and opacity for in-urlbar icons, r?dao,shorlander MozReview-Commit-ID: 80P7uejZoPN
browser/themes/shared/browser.inc.css
browser/themes/shared/icons/bookmark-hollow.svg
browser/themes/shared/icons/bookmark.svg
browser/themes/shared/icons/page-action.svg
browser/themes/shared/toolbarbutton-icons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -101,56 +101,8 @@
 
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;
 }
-
-/* Page action button */
-#urlbar-page-action-button {
-  -moz-appearance: none;
-  border-style: none;
-  list-style-image: url("chrome://browser/skin/page-action.svg");
-  margin: 0;
-  padding: 0 6px;
-  color: inherit;
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-#urlbar-page-action-button > .toolbarbutton-icon {
-  width: 16px;
-}
-
-#page-action-bookmark-button {
-  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
-}
-
-#page-action-bookmark-button[starred] {
-  list-style-image: url("chrome://browser/skin/bookmark.svg");
-}
-
-#page-action-copy-url-button {
-  list-style-image: url("chrome://browser/skin/link.svg");
-}
-
-#page-action-email-link-button {
-  list-style-image: url("chrome://browser/skin/email-link.svg");
-}
-
-#page-action-send-to-device-button {
-  list-style-image: url("chrome://browser/skin/device-mobile.svg");
-}
-
-.page-action-sendToDevice-device[clientType=mobile] {
-  list-style-image: url("chrome://browser/skin/device-mobile.svg");
-}
-
-.page-action-sendToDevice-device[clientType=desktop] {
-  list-style-image: url("chrome://browser/skin/device-desktop.svg");
-}
-
-#page-action-sendToDevice-fxa-button {
-  list-style-image: url("chrome://browser/skin/sync.svg");
-}
--- a/browser/themes/shared/icons/bookmark-hollow.svg
+++ b/browser/themes/shared/icons/bookmark-hollow.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="M8 3.6l1 2 .5.9 1 .2 2.3.4-1.7 1.8-.7.7.1 1 .4 2.4-2-1-.9-.5-.9.5-2 1 .4-2.4.1-1-.7-.7-1.7-1.8 2.4-.4 1-.2.4-.9 1-2M8 0c-.3 0-.6.2-.8.7l-2 4.1-4.3.7c-1 .2-1.2.9-.5 1.6l3.1 3.3-.7 4.6c-.1.6.2 1 .7 1a1.421 1.421 0 0 0 .6-.2L8 13.7l3.9 2.1a2.073 2.073 0 0 0 .6.2c.5 0 .8-.4.7-1.1l-.7-4.6L15.6 7c.7-.7.4-1.4-.5-1.6l-4.3-.7-2-4.1A.938.938 0 0 0 8 0z"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M8 3.6l1 2 .5.9 1 .2 2.3.4-1.7 1.8-.7.7.1 1 .4 2.4-2-1-.9-.5-.9.5-2 1 .4-2.4.1-1-.7-.7-1.7-1.8 2.4-.4 1-.2.4-.9 1-2M8 0c-.3 0-.6.2-.8.7l-2 4.1-4.3.7c-1 .2-1.2.9-.5 1.6l3.1 3.3-.7 4.6c-.1.6.2 1 .7 1a1.421 1.421 0 0 0 .6-.2L8 13.7l3.9 2.1a2.073 2.073 0 0 0 .6.2c.5 0 .8-.4.7-1.1l-.7-4.6L15.6 7c.7-.7.4-1.4-.5-1.6l-4.3-.7-2-4.1A.938.938 0 0 0 8 0z"/>
 </svg>
--- a/browser/themes/shared/icons/bookmark.svg
+++ b/browser/themes/shared/icons/bookmark.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="M8.014 0c-.3 0-.6.2-.8.7l-2 4.1-4.3.7c-1 .2-1.2.9-.5 1.6l3.1 3.3-.7 4.6c-.1.6.2 1 .7 1l.6-.2 3.9-2.1 3.9 2.1.6.2c.5 0 .8-.4.7-1.1l-.7-4.6 3.1-3.3c.7-.7.4-1.4-.5-1.6l-4.3-.7-2-4.1a.9.9 0 0 0-.8-.6z"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M8.014 0c-.3 0-.6.2-.8.7l-2 4.1-4.3.7c-1 .2-1.2.9-.5 1.6l3.1 3.3-.7 4.6c-.1.6.2 1 .7 1l.6-.2 3.9-2.1 3.9 2.1.6.2c.5 0 .8-.4.7-1.1l-.7-4.6 3.1-3.3c.7-.7.4-1.4-.5-1.6l-4.3-.7-2-4.1a.9.9 0 0 0-.8-.6z"/>
 </svg>
--- a/browser/themes/shared/icons/page-action.svg
+++ b/browser/themes/shared/icons/page-action.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">
-  <path fill="context-fill" d="M2 6a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2z"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M2 6a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2z"/>
 </svg>
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -44,22 +44,20 @@ toolbar[brighttext] :-moz-any(@primaryTo
   list-style-image: url("chrome://browser/skin/stop.svg");
 }
 %endif
 
 #home-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/home.svg");
 }
 
-#star-button,
 #bookmarks-menu-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
-#star-button[starred],
 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
   list-style-image: url("chrome://browser/skin/bookmark.svg");
 }
 
 toolbar:not([brighttext]) #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button {
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
 }
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -59,8 +59,73 @@
   min-width: 12px;
   margin: 0 -6px;
   position: relative;
   border: none;
   background: transparent;
   -moz-appearance: none;
 }
 
+%ifdef MOZ_PHOTON_THEME
+/* Page action button */
+#urlbar-page-action-button {
+  -moz-appearance: none;
+  border-style: none;
+  list-style-image: url("chrome://browser/skin/page-action.svg");
+  margin: 0;
+  padding: 0 6px;
+}
+
+#urlbar-page-action-button > .toolbarbutton-icon {
+  width: 16px;
+}
+
+#urlbar-page-action-button,
+.urlbar-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.6;
+  color: inherit;
+}
+
+#star-button {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+
+#star-button[starred] {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+  fill-opacity: 1;
+  fill: var(--toolbarbutton-icon-fill-attention);
+}
+
+/* Page action popup */
+#page-action-bookmark-button {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+
+#page-action-bookmark-button[starred] {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+#page-action-copy-url-button {
+  list-style-image: url("chrome://browser/skin/link.svg");
+}
+
+#page-action-email-link-button {
+  list-style-image: url("chrome://browser/skin/email-link.svg");
+}
+
+#page-action-send-to-device-button {
+  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+}
+
+.page-action-sendToDevice-device[clientType=mobile] {
+  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+}
+
+.page-action-sendToDevice-device[clientType=desktop] {
+  list-style-image: url("chrome://browser/skin/device-desktop.svg");
+}
+
+#page-action-sendToDevice-fxa-button {
+  list-style-image: url("chrome://browser/skin/sync.svg");
+}
+%endif