Bug 1532693 - Show different cfr button icon based on message category r=k88hudson
authorAndrei Oprea <andrei.br92@gmail.com>
Fri, 08 Mar 2019 21:43:33 +0000
changeset 521208 5e103d74526d
parent 521207 a014bada4619
child 521209 517837278d6b
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersk88hudson
bugs1532693
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1532693 - Show different cfr button icon based on message category r=k88hudson Differential Revision: https://phabricator.services.mozilla.com/D22331
browser/components/newtab/data/content/assets/glyph-cfr-feature-16.svg
browser/themes/shared/urlbar-searchbar.inc.css
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/data/content/assets/glyph-cfr-feature-16.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10 13H6a1 1 0 0 1-1-1 4.552 4.552 0 0 0-1.1-1.87A7.017 7.017 0 0 1 2 6a6 6 0 1 1 12 0 7.017 7.017 0 0 1-1.9 4.13A4.552 4.552 0 0 0 11 12a1 1 0 0 1-1 1zm-3.188-2h2.376a8.489 8.489 0 0 1 1.328-2.093A5.415 5.415 0 0 0 12 6a4.054 4.054 0 0 0-4-4 4.054 4.054 0 0 0-4 4 5.415 5.415 0 0 0 1.484 2.907c.543.629.99 1.334 1.328 2.093zM10 16H6a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z" fill="context-fill" fill-opacity="context-fill-opacity"/></svg>
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -530,37 +530,43 @@
  * the value while expanded and while transitioning in either direction.
  *
  * This UI is part of an experiment launching in LTR locales only. Fixing the
  * RTL issues is tracked by Bug 1485725.
  */
 
 :root {
   --cfr-animation-duration: 0.35s;
-  --cfr-button-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
+  --cfr-button-addons-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
+  --cfr-button-features-icon: url(resource://activity-stream/data/content/assets/glyph-cfr-feature-16.svg);
   --cfr-active-color: #0060df;
 }
 
 #contextual-feature-recommendation {
   width: 28px;
   margin-inline-start: 0;
   transition: margin-inline-start step-end var(--cfr-animation-duration);
 }
 #urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
   margin-inline-start: calc(var(--cfr-label-width) * -1);
   transition: margin-inline-start step-start var(--cfr-animation-duration);
 }
 
 #cfr-button {
-  list-style-image: var(--cfr-button-icon);
   margin: -2px 0;
   transition-property: fill, fill-opacity, transform;
   transition-timing-function: ease-in-out;
   transition-duration: var(--cfr-animation-duration);
 }
+#cfr-button[data-cfr-icon="webextensions-icon"] {
+  list-style-image: var(--cfr-button-addons-icon);
+}
+#cfr-button[data-cfr-icon="recommendations-icon"] {
+  list-style-image: var(--cfr-button-features-icon);
+}
 #urlbar[cfr-recommendation-state="expanded"] #cfr-button {
   fill: white;
   fill-opacity: 1;
   background-color: transparent; /* Override hover background-color */
   transform: translateX(calc(var(--cfr-label-width) * -1));
 }
 #urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) {
   transform: translateX(calc(var(--cfr-label-width)));