Bug 1592469 - Update Website Breach Alert Icon. r=jaws
authorlesleynorton <lnorton@mozilla.com>
Mon, 30 Mar 2020 21:55:48 +0000
changeset 521163 59e77ce8c6ea38a90bb559efc6f7b6ac0b703a2e
parent 521162 314b298f5af90f24b880d0619cc731b7504272d1
child 521164 6b754740c556a78dc3fb72c61795c43abfc5ee14
push id111531
push userjwein@mozilla.com
push dateMon, 30 Mar 2020 22:28:54 +0000
treeherderautoland@59e77ce8c6ea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1592469
milestone76.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 1592469 - Update Website Breach Alert Icon. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D68631
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-list-item.js
browser/components/aboutlogins/content/components/login-list.css
browser/components/aboutlogins/content/icons/breached-website.svg
browser/components/aboutlogins/jar.mn
browser/components/aboutlogins/tests/chrome/test_login_list.html
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -156,17 +156,17 @@
           <div class="error-message">
             <span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span>
             <span class="error-message-link">
               <a data-l10n-name="duplicate-link" href=""></a>
             </span>
           </div>
           <div class="breach-alert">
             <h3 class="alert-title" data-l10n-id="about-logins-breach-alert-title"></h3>
-            <img class="alert-icon" src="chrome://global/skin/icons/warning.svg"/>
+            <img class="alert-icon" src="chrome://browser/content/aboutlogins/icons/breached-website.svg"/>
             <span class="alert-date" data-l10n-id="about-logins-breach-alert-date" data-l10n-args='{"date": 0}'></span>
             <span class="alert-text" data-l10n-id="breach-alert-text"></span>
             <a class="alert-link" data-l10n-id="about-logins-breach-alert-link" data-l10n-args='{"hostname": ""}' href="#" rel="noreferrer" target="_blank"></a>
             <a class="alert-learn-more-link" data-l10n-id="about-logins-breach-alert-learn-more-link" href="#" rel="noreferrer" target="_blank"></a>
           </div>
           <div class="vulnerable-alert">
             <h3 class="alert-title" data-l10n-id="about-logins-vulnerable-alert-title"></h3>
             <img class="alert-icon" src="chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"/>
--- a/browser/components/aboutlogins/content/components/login-list-item.js
+++ b/browser/components/aboutlogins/content/components/login-list-item.js
@@ -59,17 +59,18 @@ export default class LoginListItemFactor
     }
 
     if (login.faviconDataURI) {
       faviconWrapper.classList.add("hide-default-favicon");
       favicon.src = login.faviconDataURI;
     }
 
     if (listItem.classList.contains("breached")) {
-      alertIcon.src = "chrome://global/skin/icons/warning.svg";
+      alertIcon.src =
+        "chrome://browser/content/aboutlogins/icons/breached-website.svg";
       document.l10n.setAttributes(
         alertIcon,
         "about-logins-list-item-breach-icon"
       );
     } else if (listItem.classList.contains("vulnerable")) {
       alertIcon.src =
         "chrome://browser/content/aboutlogins/icons/vulnerable-password.svg";
 
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -180,17 +180,17 @@ ol {
 
 .alert-icon {
   width: 16px;
   margin-inline-start: 12px;
   -moz-context-properties: fill;
 }
 
 .breached > .alert-icon {
-  fill: var(--red-90);
+  fill: var(--red-70);
 }
 
 .vulnerable > .alert-icon {
   fill: var(--grey-60);
 }
 
 @media (-moz-windows-default-theme: 0) {
   .list-item-warning-icon {
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/icons/breached-website.svg
@@ -0,0 +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 width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 1.755A1.755 1.755 0 0112.279.081l6.55 2.046A1.67 1.67 0 0120 3.72v12.546c0 .73-.475 1.375-1.171 1.592l-6.551 2.047A1.754 1.754 0 0110 18.232zM7 2a1 1 0 010 2H2.491A.491.491 0 002 4.491V15.51c0 .271.22.491.491.491h4.51a1 1 0 010 2H2.49A2.494 2.494 0 010 15.51V4.49a2.494 2.494 0 012.491-2.49zm8 11.993c-.552 0-1 .45-1 1.004S14.448 16 15 16s1-.449 1-1.003c0-.555-.448-1.004-1-1.004zM15 4a1 1 0 00-1 1v6a1 1 0 002 0V5a1 1 0 00-1-1z" fill="context-fill"/>
+</svg>
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -17,16 +17,17 @@ browser.jar:
   content/browser/aboutlogins/components/login-footer.js       (content/components/login-footer.js)
   content/browser/aboutlogins/components/login-item.css        (content/components/login-item.css)
   content/browser/aboutlogins/components/login-item.js         (content/components/login-item.js)
   content/browser/aboutlogins/components/login-list.css        (content/components/login-list.css)
   content/browser/aboutlogins/components/login-list.js         (content/components/login-list.js)
   content/browser/aboutlogins/components/login-list-item.js    (content/components/login-list-item.js)
   content/browser/aboutlogins/components/menu-button.css       (content/components/menu-button.css)
   content/browser/aboutlogins/components/menu-button.js        (content/components/menu-button.js)
+  content/browser/aboutlogins/icons/breached-website.svg       (content/icons/breached-website.svg)
   content/browser/aboutlogins/icons/favicon.svg       (content/icons/favicon.svg)
   content/browser/aboutlogins/icons/hide-password.svg (content/icons/hide-password.svg)
   content/browser/aboutlogins/icons/vulnerable-password.svg (content/icons/vulnerable-password.svg)
   content/browser/aboutlogins/icons/show-password.svg (content/icons/show-password.svg)
   content/browser/aboutlogins/icons/intro-illustration.svg (content/icons/intro-illustration.svg)
   content/browser/aboutlogins/aboutLogins.css   (content/aboutLogins.css)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)
--- a/browser/components/aboutlogins/tests/chrome/test_login_list.html
+++ b/browser/components/aboutlogins/tests/chrome/test_login_list.html
@@ -253,17 +253,17 @@ add_task(async function test_breach_indi
   vulnerableLogins.set(TEST_LOGIN_1.guid, true);
   vulnerableLogins.set(TEST_LOGIN_3.guid, true);
   gLoginList.setVulnerableLogins(vulnerableLogins);
   let loginListItems = gLoginList.shadowRoot.querySelectorAll(".login-list-item:not(#new-login-list-item):not([hidden])");
   let alertIcon = loginListItems[0].querySelector(".alert-icon");
   is(loginListItems[0].dataset.guid, TEST_LOGIN_1.guid, "The first login should be TEST_LOGIN_1");
   ok(!loginListItems[0].classList.contains("vulnerable"), "The first login should not have the .vulnerable class");
   ok(loginListItems[0].classList.contains("breached"), "The first login should have the .breached class.");
-  is(alertIcon.src, "chrome://global/skin/icons/warning.svg", "The alert icon should be the breach warning icon");
+  is(alertIcon.src, "chrome://browser/content/aboutlogins/icons/breached-website.svg", "The alert icon should be the breach warning icon");
   is(loginListItems[1].dataset.guid, TEST_LOGIN_3.guid, "The second login should be TEST_LOGIN_3");
   ok(loginListItems[1].classList.contains("vulnerable"), "The second login should have the .vulnerable class");
   ok(!loginListItems[1].classList.contains("breached"), "The second login should not have the .breached class");
   alertIcon = loginListItems[1].querySelector(".alert-icon");
   is(alertIcon.src, "chrome://browser/content/aboutlogins/icons/vulnerable-password.svg", "The alert icon should be the vulnerable password icon");
   is(loginListItems[2].dataset.guid, TEST_LOGIN_2.guid, "The third login should be TEST_LOGIN_2");
   alertIcon = loginListItems[2].querySelector(".alert-icon");
   ok(!loginListItems[2].classList.contains("vulnerable"), "The third login should not have the .vulnerable class");