Bug 1619314 - Improve visibility of mobile protection icons in high contrast mode. r=ntim

Differential Revision: https://phabricator.services.mozilla.com/D68701

--HG--
rename : browser/base/content/logos/etp-mobile-light.svg => browser/base/content/logos/etp-mobile.svg
rename : browser/base/content/logos/lockwise-light.svg => browser/base/content/logos/lockwise-mobile.svg
extra : moz-landing-system : lando
This commit is contained in:
jayati 2020-04-03 13:15:58 +00:00
parent 1511fc2fd7
commit 84bf0fdb08
9 changed files with 84 additions and 36 deletions

View File

@ -1,4 +0,0 @@
<!-- 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 width="50" height="58" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="13.375%" y1="0%" x2="86.625%" y2="100%" id="a"><stop stop-color="#C689FF" offset="0%"/><stop stop-color="#00B3F4" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.542 35.285c.174 1.234.01 1.996-.49 2.285L23.83 48.668c-.75.432-1.745.113-2.225-.718L4.08 17.598c-.478-.828-.258-1.853.491-2.286L23.793 4.215c.752-.434 1.747-.11 2.225.718l17.524 30.352zM33.997 49.68l4.618-2.666-1.616-2.8-4.618 2.667 1.616 2.8zM2.845 11.74c-2.548 1.47-3.17 5.164-1.388 8.249l19.382 33.57c1.781 3.086 5.29 4.394 7.838 2.923l18.487-10.673c2.548-1.471 3.17-5.164 1.388-8.25L29.17 3.989C27.389.903 23.88-.406 21.332 1.065L2.845 11.74z" fill="#D7D7DB"/><path d="M5.5 5.088c0 2.234-.067 3.795 0 4.537.036 2.173.751 4.28 2.045 6.025A5.807 5.807 0 0011 17.857a5.804 5.804 0 003.454-2.207A10.411 10.411 0 0016.5 9.625c.067-.742 0-2.303 0-4.537L11 4.146l-5.5.942zM11 20.633l-.154-.016A8.585 8.585 0 015.33 17.28a12.733 12.733 0 01-2.476-7.269C2.75 8.858 2.75 6.325 2.75 4.916a2.537 2.537 0 012.1-2.506L11 1.354l6.148 1.056a2.537 2.537 0 012.102 2.507c0 1.407 0 3.94-.11 5.094a12.732 12.732 0 01-2.475 7.269 8.585 8.585 0 01-5.516 3.337l-.149.016zm0-14.395l-3.438.589c.013 1.295.042 2.275.086 2.75A7.927 7.927 0 009.2 14.43a3.692 3.692 0 001.788 1.296H11V6.238z" transform="rotate(-30 45.883 -4.83)" fill="url(#a)"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,4 +0,0 @@
<!-- 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 width="50" height="57" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="13.375%" y1="0%" x2="86.625%" y2="100%" id="a"><stop stop-color="#9059FF" offset="0%"/><stop stop-color="#0250BB" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.436 34.835c.173 1.234.01 1.996-.491 2.286L23.723 48.218c-.749.433-1.745.113-2.225-.718L3.975 17.148c-.479-.828-.258-1.853.49-2.285L23.688 3.765c.751-.434 1.747-.11 2.225.718l17.524 30.352zM33.89 49.232l4.619-2.667-1.616-2.8-4.619 2.668 1.616 2.799zM2.738 11.289C.191 12.76-.43 16.453 1.351 19.538l19.382 33.571c1.78 3.085 5.29 4.393 7.838 2.923l18.487-10.674c2.547-1.47 3.169-5.164 1.388-8.249L29.063 3.538C27.283.453 23.773-.855 21.226.615L2.738 11.29z" fill-opacity=".8" fill="#0C0C0D"/><path d="M5.5 5.088c0 2.234-.067 3.795 0 4.537.036 2.173.751 4.28 2.045 6.025A5.807 5.807 0 0011 17.857a5.804 5.804 0 003.454-2.207A10.411 10.411 0 0016.5 9.625c.067-.742 0-2.303 0-4.537L11 4.146l-5.5.942zM11 20.633l-.154-.016A8.585 8.585 0 015.33 17.28a12.733 12.733 0 01-2.476-7.269C2.75 8.858 2.75 6.325 2.75 4.916a2.537 2.537 0 012.1-2.506L11 1.354l6.148 1.056a2.537 2.537 0 012.102 2.507c0 1.407 0 3.94-.11 5.094a12.732 12.732 0 01-2.475 7.269 8.585 8.585 0 01-5.516 3.337l-.149.016zm0-14.395l-3.438.589c.013 1.295.042 2.275.086 2.75A7.927 7.927 0 009.2 14.43a3.692 3.692 0 001.788 1.296H11V6.238z" transform="rotate(-30 44.99 -4.856)" fill="url(#a)"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,13 @@
<!-- 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="50" height="57">
<defs>
<linearGradient id="a" x1="13.375%" x2="86.625%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#9059FF"/>
<stop offset="100%" stop-color="#0250BB"/>
</linearGradient>
</defs>
<path fill="context-fill" fill-opacity=".8" fill-rule="evenodd" d="M43.436 34.835c.173 1.234.01 1.996-.491 2.286L23.723 48.218c-.749.433-1.745.113-2.225-.718L3.975 17.148c-.479-.828-.258-1.853.49-2.285L23.688 3.765c.751-.434 1.747-.11 2.225.718l17.524 30.352zM33.89 49.232l4.619-2.667-1.616-2.8-4.619 2.668 1.616 2.799zM2.738 11.289C.191 12.76-.43 16.453 1.351 19.538l19.382 33.571c1.78 3.085 5.29 4.393 7.838 2.923l18.487-10.674c2.547-1.47 3.169-5.164 1.388-8.249L29.063 3.538C27.283.453 23.773-.855 21.226.615L2.738 11.29z"/>
<path fill="url(#a)" d="M15.763 23.5c1.117 1.935 1.84 3.32 2.268 3.93a10.404 10.404 0 0 0 4.784 4.195 5.807 5.807 0 0 0 4.095.184 5.804 5.804 0 0 0 1.888-3.638 10.411 10.411 0 0 0-1.24-6.241c-.314-.676-1.152-1.995-2.27-3.93l-5.233 1.935-4.292 3.566zm12.535 10.713l-.141.063a8.585 8.585 0 0 1-6.446-.132 12.733 12.733 0 0 1-5.778-5.057c-.667-.946-1.933-3.14-2.638-4.36a2.537 2.537 0 0 1 .566-3.22l4.798-3.99 5.852-2.16a2.537 2.537 0 0 1 3.074 1.12c.704 1.22 1.97 3.413 2.452 4.467a12.732 12.732 0 0 1 1.49 7.533 8.585 8.585 0 0 1-3.108 5.648l-.12.088zm-7.197-12.466l-2.683 2.229c.659 1.115 1.174 1.949 1.45 2.338a7.927 7.927 0 0 0 3.77 3.427 3.692 3.692 0 0 0 2.196.229l.01-.006-4.743-8.217z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.6 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -0,0 +1,64 @@
<!-- 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 width="50" height="58" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="71.971%" y1="11.845%" x2="26.855%" y2="90.324%" id="a">
<stop stop-color="#FF980E" offset="0%"/>
<stop stop-color="#FF851B" offset="11%"/>
<stop stop-color="#FF3750" offset="57%"/>
<stop stop-color="#F92261" offset="80%"/>
<stop stop-color="#F5156C" offset="100%"/>
</linearGradient>
<linearGradient x1="71.573%" y1="-.991%" x2="34.706%" y2="86.287%" id="b">
<stop stop-color="#FFF261" stop-opacity=".8" offset="0%"/>
<stop stop-color="#FFF261" stop-opacity=".68" offset="6%"/>
<stop stop-color="#FFF261" stop-opacity=".48" offset="19%"/>
<stop stop-color="#FFF261" stop-opacity=".31" offset="31%"/>
<stop stop-color="#FFF261" stop-opacity=".17" offset="42%"/>
<stop stop-color="#FFF261" stop-opacity=".08" offset="53%"/>
<stop stop-color="#FFF261" stop-opacity=".02" offset="63%"/>
<stop stop-color="#FFF261" stop-opacity="0" offset="72%"/>
</linearGradient>
<linearGradient x1="50.51%" y1="200.063%" x2="50.51%" y2="-34.412%" id="c">
<stop stop-color="#0090ED" offset="0%"/>
<stop stop-color="#9059FF" offset="50%"/>
<stop stop-color="#B833E1" offset="81%"/>
</linearGradient>
<linearGradient x1="24.563%" y1="80.696%" x2="79.944%" y2="4.059%" id="d">
<stop stop-color="#0090ED" offset="2%"/>
<stop stop-color="#9059FF" offset="49%"/>
<stop stop-color="#B833E1" offset="100%"/>
</linearGradient>
<linearGradient x1="68.874%" y1="81.415%" x2="32.528%" y2="18.585%" id="e">
<stop stop-color="#592ACB" stop-opacity="0" offset="14%"/>
<stop stop-color="#542BC8" stop-opacity=".03" offset="33%"/>
<stop stop-color="#462FBF" stop-opacity=".11" offset="53%"/>
<stop stop-color="#2F35B1" stop-opacity=".25" offset="74%"/>
<stop stop-color="#0F3D9C" stop-opacity=".44" offset="95%"/>
<stop stop-color="#054096" stop-opacity=".5" offset="100%"/>
</linearGradient>
<linearGradient x1="62.189%" y1="16.96%" x2="36.167%" y2="93.672%" id="f">
<stop stop-color="#722291" stop-opacity=".5" offset="0%"/>
<stop stop-color="#B833E1" stop-opacity="0" offset="50%"/>
</linearGradient>
<linearGradient x1="86.967%" y1="8.374%" x2="37.025%" y2="60.939%" id="g">
<stop stop-color="#054096" stop-opacity=".5" offset="0%"/>
<stop stop-color="#0F3D9C" stop-opacity=".44" offset="3%"/>
<stop stop-color="#2F35B1" stop-opacity=".25" offset="17%"/>
<stop stop-color="#462FBF" stop-opacity=".11" offset="30%"/>
<stop stop-color="#542BC8" stop-opacity=".03" offset="43%"/>
<stop stop-color="#592ACB" stop-opacity="0" offset="56%"/>
</linearGradient>
</defs>
<path fill="context-fill" fill-opacity=".8" fill-rule="evenodd" d="M43.537 35.343c.174 1.235.01 1.997-.49 2.286L23.825 48.727c-.749.432-1.745.113-2.225-.718L4.076 17.657c-.478-.828-.258-1.853.491-2.286L23.79 4.274c.751-.434 1.747-.11 2.225.717l17.523 30.352zM33.992 49.74l4.619-2.666-1.616-2.8-4.619 2.667 1.616 2.8zM2.84 11.798c-2.547 1.47-3.169 5.164-1.388 8.249l19.383 33.57c1.78 3.086 5.29 4.394 7.837 2.923L47.16 45.867c2.547-1.471 3.169-5.164 1.388-8.25L29.165 4.048c-1.78-3.085-5.29-4.394-7.837-2.923L2.84 11.798z"/>
<g transform="rotate(-30 45.49 -5.758)">
<path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#a)"/>
<path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#b)"/>
<path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#c)"/>
<path d="M14.85 16.25c-.91.904-1.858 1.8-2.868 2.717a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538l-.469.536a3.463 3.463 0 00.056 4.634 83.038 83.038 0 006.004 5.894 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.905.905 0 000-1.304l-.83-.78z" fill="url(#d)"/>
<path d="M2.085 14.632c.782.85 1.561 1.663 2.36 2.457l.318-.52c.268-.427.535-.845.822-1.264a91.046 91.046 0 01-3.09-3.3 2.125 2.125 0 010-2.538l-.469.537a3.463 3.463 0 00.048 4.62l.011.008z" fill="url(#e)" opacity=".9"/>
<path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#f)"/>
<path d="M15.67 17.03l-.82-.78a86.49 86.49 0 01-2.87 2.717c-.462.357-1.052.5-1.626.398v2.084c.118 0 .236.016.356.016a3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.902.902 0 00-.008-1.304z" fill="url(#g)" opacity=".9"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -14,11 +14,9 @@ browser.jar:
content/browser/aboutRobots.xhtml (content/aboutRobots.xhtml)
content/browser/aboutRobots.js (content/aboutRobots.js)
content/browser/aboutRobots.css (content/aboutRobots.css)
content/browser/logos/etp-mobile-dark.svg (content/logos/etp-mobile-dark.svg)
content/browser/logos/etp-mobile-light.svg (content/logos/etp-mobile-light.svg)
content/browser/logos/lockwise-light.svg (content/logos/lockwise-light.svg)
content/browser/logos/lockwise-dark.svg (content/logos/lockwise-dark.svg)
content/browser/logos/lockwise.svg (content/logos/lockwise.svg)
content/browser/logos/etp-mobile.svg (content/logos/etp-mobile.svg)
content/browser/logos/lockwise-mobile.svg (content/logos/lockwise-mobile.svg)
content/browser/logos/lockwise.svg (content/logos/lockwise.svg)
content/browser/logos/monitor.svg (content/logos/monitor.svg)
content/browser/logos/proxy.svg (content/logos/proxy.svg)
content/browser/logos/send.svg (content/logos/send.svg)

View File

@ -113,7 +113,6 @@ h2 {
.etp-card.custom-not-blocking #protection-details,
#manage-protections,
.etp-card .icon.dark,
.mobile-app-icon.dark,
a.hidden,
.loading .card-body,
.lockwise-card.hidden,
@ -160,17 +159,8 @@ a.hidden,
.etp-card .icon.light {
display: none;
}
.mobile-app-icon.dark {
display: block;
}
.mobile-app-icon.light {
display: none;
}
}
.card {
display: grid;
grid-template-columns: 100%;
@ -602,10 +592,11 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
grid-gap: 10px;
}
.lockwise-mobile-app-icon,
.mobile-app-icon {
height: 56px;
width: auto;
-moz-context-properties: fill;
fill: currentColor;
}
#lockwise-app-links,

View File

@ -118,8 +118,7 @@
<div class="body-wrapper">
<button class="exit-icon" data-l10n-id="protections-close-button"></button>
<div id="etp-mobile-content">
<img class="mobile-app-icon light" src="chrome://browser/content/logos/etp-mobile-light.svg"/>
<img class="mobile-app-icon dark" src="chrome://browser/content/logos/etp-mobile-dark.svg"/>
<img class="mobile-app-icon" src="chrome://browser/content/logos/etp-mobile.svg"/>
<span>
<h2 class="card-title" data-l10n-id="mobile-app-title"></h2>
<p class="content">
@ -224,8 +223,7 @@
<div id="lockwise-body-content" class="body-wrapper">
<div class="no-logins hidden">
<button class="exit-icon" data-l10n-id="protections-close-button"></button>
<img class="mobile-app-icon light" src="chrome://browser/content/logos/lockwise-light.svg"/>
<img class="mobile-app-icon dark" src="chrome://browser/content/logos/lockwise-dark.svg"/>
<img class="mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile.svg"/>
<span>
<h2 class="card-title" data-l10n-id="lockwise-mobile-app-title"></h2>
<p class="content">