Bug 1572809 - Change icon gradient for light and dark. r=mtigley
authorErica Wright <ewright@mozilla.com>
Fri, 09 Aug 2019 19:38:44 +0000
changeset 550979 aae83fff273f008c68370c60592505ee6aa97f20
parent 550978 7946f10f55866f1aad166daf603f64b847e8aade
child 550980 2c35163a7686b9caa9f5e608f8c7cbc2d3249cc7
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1572809
milestone70.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 1572809 - Change icon gradient for light and dark. r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D41428
browser/base/content/logos/tracking-protection-dark-theme.svg
browser/base/content/logos/tracking-protection.svg
browser/base/jar.mn
browser/components/protections/content/protections.css
new file mode 100644
--- /dev/null
+++ b/browser/base/content/logos/tracking-protection-dark-theme.svg
@@ -0,0 +1,1 @@
+<svg width="48" height="56" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="59.208%" y1="0%" x2="13.265%" y2="110.029%" id="a"><stop stop-color="#AB71FF" offset="0%"/><stop stop-color="#00B3F4" offset="100%"/></linearGradient></defs><path d="M48 9.57c0 4.24 0 11.88-.35 15.35-.91 9.88-2.76 15.29-7.32 21.45a24.94 24.94 0 0 1-16 9.63H24l-.35-.02a24.94 24.94 0 0 1-16-9.63C3.09 40.19 1.24 34.78.33 24.9 0 21.46 0 13.82 0 9.57a6.52 6.52 0 0 1 5.43-6.45L24 0l18.57 3.12A6.52 6.52 0 0 1 48 9.57zm-6.31 14.78c.22-2.35.31-7.72.31-14.8a.55.55 0 0 0-.43-.55L24 6 6.43 9.03a.55.55 0 0 0-.43.55c0 7.06.09 12.42.31 14.81.81 8.84 2.25 13.15 6.16 18.42A19.17 19.17 0 0 0 24 50a19.25 19.25 0 0 0 11.53-7.23c3.91-5.27 5.35-9.57 6.16-18.42zm-29.41-.55c-.15-1.61-.28-5.07-.28-9.67l12-2v31.66a13 13 0 0 1-6.72-4.59c-2.88-3.9-4.22-6.9-5-15.4z" fill-rule="nonzero" fill="url(#a)"/></svg>
--- a/browser/base/content/logos/tracking-protection.svg
+++ b/browser/base/content/logos/tracking-protection.svg
@@ -1,1 +1,1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><linearGradient id="a" x1="11.95" x2="52.05" y1="6.9" y2="47.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b833e1"/><stop offset=".37" stop-color="#9059ff"/><stop offset=".61" stop-color="#5b6df8"/><stop offset="1" stop-color="#0090ed"/></linearGradient><linearGradient id="b" x1="18.54" x2="39.34" y1="19.64" y2="40.45" xlink:href="#a"/><path fill="url(#a)" d="M56 13.57a6.52 6.52 0 0 0-5.43-6.45L32 4 13.43 7.12A6.52 6.52 0 0 0 8 13.57c0 4.25 0 11.89.33 15.33.91 9.88 2.76 15.29 7.32 21.45a24.94 24.94 0 0 0 16 9.63L32 60h.33a24.94 24.94 0 0 0 16-9.63c4.56-6.16 6.41-11.57 7.32-21.45.35-3.47.35-11.11.35-15.35zm-6.31 14.78c-.81 8.85-2.25 13.15-6.16 18.42A19.25 19.25 0 0 1 32 54a19.17 19.17 0 0 1-11.53-7.19c-3.91-5.27-5.35-9.58-6.16-18.42C14.09 26 14 20.64 14 13.58a.55.55 0 0 1 .43-.55L32 10l17.57 3a.55.55 0 0 1 .43.55c0 7.08-.09 12.45-.31 14.8z"/><path fill="url(#b)" d="M20.28 27.8c.78 8.5 2.12 11.5 5 15.4A13 13 0 0 0 32 47.79V16.13l-12 2c0 4.6.13 8.06.28 9.67z"/></svg>
+<svg width="48" height="56" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="52.486%" y1="0%" x2="13.265%" y2="114.055%" id="a"><stop stop-color="#7542E5" offset="0%"/><stop stop-color="#0060DF" offset="100%"/></linearGradient></defs><path d="M48 9.57c0 4.24 0 11.88-.35 15.35-.91 9.88-2.76 15.29-7.32 21.45a24.94 24.94 0 0 1-16 9.63H24l-.35-.02a24.94 24.94 0 0 1-16-9.63C3.09 40.19 1.24 34.78.33 24.9 0 21.46 0 13.82 0 9.57a6.52 6.52 0 0 1 5.43-6.45L24 0l18.57 3.12A6.52 6.52 0 0 1 48 9.57zm-6.31 14.78c.22-2.35.31-7.72.31-14.8a.55.55 0 0 0-.43-.55L24 6 6.43 9.03a.55.55 0 0 0-.43.55c0 7.06.09 12.42.31 14.81.81 8.84 2.25 13.15 6.16 18.42A19.17 19.17 0 0 0 24 50a19.25 19.25 0 0 0 11.53-7.23c3.91-5.27 5.35-9.57 6.16-18.42zm-29.41-.55c-.15-1.61-.28-5.07-.28-9.67l12-2v31.66a13 13 0 0 1-6.72-4.59c-2.88-3.9-4.22-6.9-5-15.4z" fill-rule="nonzero" fill="url(#a)"/></svg>
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -19,16 +19,17 @@ browser.jar:
         content/browser/illustrations/error-malformed-url.svg (content/illustrations/error-malformed-url.svg)
         content/browser/illustrations/under-construction.svg (content/illustrations/under-construction.svg)
         content/browser/illustrations/blue-berror.svg (content/illustrations/blue-berror.svg)
         content/browser/logos/lockwise.svg             (content/logos/lockwise.svg)
         content/browser/logos/lockwise-mobile-app.svg             (content/logos/lockwise-mobile-app.svg)
         content/browser/logos/monitor.svg             (content/logos/monitor.svg)
         content/browser/logos/send.svg                (content/logos/send.svg)
         content/browser/logos/tracking-protection.svg (content/logos/tracking-protection.svg)
+        content/browser/logos/tracking-protection-dark-theme.svg (content/logos/tracking-protection-dark-theme.svg)
         content/browser/aboutNetError.xhtml            (content/aboutNetError.xhtml)
         content/browser/aboutNetError.js               (content/aboutNetError.js)
         content/browser/aboutRobots-icon.png          (content/aboutRobots-icon.png)
         content/browser/aboutFrameCrashed.html        (content/aboutFrameCrashed.html)
         content/browser/aboutTabCrashed.css           (content/aboutTabCrashed.css)
         content/browser/aboutTabCrashed.js            (content/aboutTabCrashed.js)
         content/browser/aboutTabCrashed.xhtml         (content/aboutTabCrashed.xhtml)
 *       content/browser/browser.css                   (content/browser.css)
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -101,17 +101,23 @@ a.hidden,
   width: 60px;
   height: 60px;
   grid-column: 1;
   margin: 0 auto;
   z-index: 1;
 }
 
 .etp-card .icon {
-  background: url("chrome://browser/content/logos/tracking-protection.svg") no-repeat center/cover;
+  background: url("chrome://browser/content/logos/tracking-protection.svg") no-repeat center/contain;
+}
+
+@media (prefers-color-scheme: dark) {
+  .etp-card .icon {
+    background: url("chrome://browser/content/logos/tracking-protection-dark-theme.svg") no-repeat center/contain;
+  }
 }
 
 .lockwise-card .icon {
   background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
 }
 
 .monitor-card .icon {
   background: url("chrome://browser/content/logos/monitor.svg") no-repeat center/cover;