Bug 1377165 - use correct fill colours and opacity for in-urlbar icons, r?dao,shorlander
MozReview-Commit-ID: 80P7uejZoPN
--- 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