Bug 1175678 - Update icons for different Mixed Content Blocking states in the URL bar r=MattN

browser/base/content/browser.js

@@ -6589,6 +6589,8 @@ var gIdentityHandler = {
   IDENTITY_MODE_MIXED_DISPLAY_LOADED                   : "unknownIdentity mixedContent mixedDisplayContent",  // SSL with unauthenticated display content
   IDENTITY_MODE_MIXED_ACTIVE_LOADED                    : "unknownIdentity mixedContent mixedActiveContent",  // SSL with unauthenticated active (and perhaps also display) content
   IDENTITY_MODE_MIXED_DISPLAY_LOADED_ACTIVE_BLOCKED    : "unknownIdentity mixedContent mixedDisplayContentLoadedActiveBlocked",  // SSL with unauthenticated display content; unauthenticated active content is blocked.
+  IDENTITY_MODE_MIXED_ACTIVE_BLOCKED                   : "verifiedDomain mixedContent mixedActiveBlocked",  // SSL with unauthenticated active content blocked; no unauthenticated display content
+  IDENTITY_MODE_MIXED_ACTIVE_BLOCKED_IDENTIFIED        : "verifiedIdentity mixedContent mixedActiveBlocked",  // SSL with unauthenticated active content blocked; no unauthenticated display content
   IDENTITY_MODE_CHROMEUI                               : "chromeUI",         // Part of the product's UI
 
   // Cache the most recent SSLStatus and Location seen in checkIdentity
@@ -6772,9 +6774,17 @@ var gIdentityHandler = {
     } else if (unknown) {
       this.setMode(this.IDENTITY_MODE_UNKNOWN);
     } else if (state & nsIWebProgressListener.STATE_IDENTITY_EV_TOPLEVEL) {
-      this.setMode(this.IDENTITY_MODE_IDENTIFIED);
+      if (state & nsIWebProgressListener.STATE_BLOCKED_MIXED_ACTIVE_CONTENT) {
+        this.setMode(this.IDENTITY_MODE_MIXED_ACTIVE_BLOCKED_IDENTIFIED);
+      } else {
+        this.setMode(this.IDENTITY_MODE_IDENTIFIED);
+      }
     } else if (state & nsIWebProgressListener.STATE_IS_SECURE) {
-      this.setMode(this.IDENTITY_MODE_DOMAIN_VERIFIED);
+      if (state & nsIWebProgressListener.STATE_BLOCKED_MIXED_ACTIVE_CONTENT) {
+        this.setMode(this.IDENTITY_MODE_MIXED_ACTIVE_BLOCKED);
+      } else {
+        this.setMode(this.IDENTITY_MODE_DOMAIN_VERIFIED);
+      }
     } else if (state & nsIWebProgressListener.STATE_IS_BROKEN) {
       if (state & nsIWebProgressListener.STATE_LOADED_MIXED_ACTIVE_CONTENT) {
         this.setMode(this.IDENTITY_MODE_MIXED_ACTIVE_LOADED);
@@ -6903,7 +6913,8 @@ var gIdentityHandler = {
     let icon_labels_dir = "ltr";
 
     switch (newMode) {
-    case this.IDENTITY_MODE_DOMAIN_VERIFIED: {
+    case this.IDENTITY_MODE_DOMAIN_VERIFIED:
+    case this.IDENTITY_MODE_MIXED_ACTIVE_BLOCKED: {
       let iData = this.getIdentityData();
 
       // Verifier is either the CA Org, for a normal cert, or a special string
@@ -6923,7 +6934,8 @@ var gIdentityHandler = {
         tooltip = gNavigatorBundle.getString("identity.identified.verified_by_you");
 
       break; }
-    case this.IDENTITY_MODE_IDENTIFIED: {
+    case this.IDENTITY_MODE_IDENTIFIED:
+    case this.IDENTITY_MODE_MIXED_ACTIVE_BLOCKED_IDENTIFIED: {
       // If it's identified, then we can populate the dialog with credentials
       let iData = this.getIdentityData();
       tooltip = gNavigatorBundle.getFormattedString("identity.identified.verifier",
@@ -6992,9 +7004,11 @@ var gIdentityHandler = {
 
     switch (newMode) {
     case this.IDENTITY_MODE_DOMAIN_VERIFIED:
+    case this.IDENTITY_MODE_MIXED_ACTIVE_BLOCKED:
       verifier = this._identityBox.tooltipText;
       break;
-    case this.IDENTITY_MODE_IDENTIFIED: {
+    case this.IDENTITY_MODE_IDENTIFIED:
+    case this.IDENTITY_MODE_MIXED_ACTIVE_BLOCKED_IDENTIFIED: {
       // If it's identified, then we can populate the dialog with credentials
       let iData = this.getIdentityData();
       host = owner = iData.subjectOrg;

browser/themes/linux/browser.css

@@ -1039,7 +1039,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
   -moz-padding-end: 5px;
 }
 
-%include ../shared/identity-block.inc.css
+%include ../shared/identity-block/identity-block.inc.css
 
 #page-proxy-favicon {
   margin-top: 1px;

browser/themes/linux/jar.mn

@@ -46,16 +46,11 @@ browser.jar:
   skin/classic/browser/heartbeat-icon.svg                   (../shared/heartbeat-icon.svg)
   skin/classic/browser/heartbeat-star-lit.svg               (../shared/heartbeat-star-lit.svg)
   skin/classic/browser/heartbeat-star-off.svg               (../shared/heartbeat-star-off.svg)
-  skin/classic/browser/identity-icons-generic.png
-  skin/classic/browser/identity-icons-generic@2x.png
-  skin/classic/browser/identity-icons-https.png
-  skin/classic/browser/identity-icons-https@2x.png
-  skin/classic/browser/identity-icons-https-ev.png
-  skin/classic/browser/identity-icons-https-ev@2x.png
-  skin/classic/browser/identity-icons-https-mixed-active.png
-  skin/classic/browser/identity-icons-https-mixed-active@2x.png
-  skin/classic/browser/identity-icons-https-mixed-display.png
-  skin/classic/browser/identity-icons-https-mixed-display@2x.png
+  skin/classic/browser/identity-not-secure.svg              (../shared/identity-block/identity-not-secure.svg)
+  skin/classic/browser/identity-secure.svg                  (../shared/identity-block/identity-secure.svg)
+  skin/classic/browser/identity-mixed-active-blocked.svg    (../shared/identity-block/identity-mixed-active-blocked.svg)
+  skin/classic/browser/identity-mixed-passive-loaded.svg    (../shared/identity-block/identity-mixed-passive-loaded.svg)
+  skin/classic/browser/identity-mixed-active-loaded.svg     (../shared/identity-block/identity-mixed-active-loaded.svg)
   skin/classic/browser/Info.png
   skin/classic/browser/magnifier.png                        (../shared/magnifier.png)
   skin/classic/browser/magnifier@2x.png                     (../shared/magnifier@2x.png)

browser/themes/osx/browser.css

@@ -1795,41 +1795,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
   min-width: calc(54px + 11ch);
 }
 
-%include ../shared/identity-block.inc.css
+%include ../shared/identity-block/identity-block.inc.css
 
 #page-proxy-favicon {
   margin: 0px;
   padding: 0px;
 }
 
-@media not all and (min-resolution: 1.1dppx) {
-  #identity-box:hover:active > #page-proxy-favicon,
-  #identity-box[open=true] > #page-proxy-favicon {
-    -moz-image-region: rect(0, 32px, 16px, 16px);
-  }
-
-  /* The chromeUI identity-icon set includes three states,
-     but OS X only uses two of them. */
-  #identity-box.chromeUI:hover:active > #page-proxy-favicon,
-  #identity-box.chromeUI[open=true] > #page-proxy-favicon {
-    -moz-image-region: rect(0, 48px, 16px, 32px);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #identity-box:hover:active > #page-proxy-favicon,
-  #identity-box[open=true] > #page-proxy-favicon {
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
-
-  /* The chromeUI identity-icon set includes three states,
-     but OS X only uses two of them. */
-  #identity-box.chromeUI:hover:active > #page-proxy-favicon,
-  #identity-box.chromeUI[open=true] > #page-proxy-favicon {
-    -moz-image-region: rect(0, 96px, 32px, 64px);
-  }
-}
-
 #wrapper-urlbar-container[place="palette"] {
   max-width: 20em;
 }

browser/themes/osx/jar.mn

@@ -50,16 +50,11 @@ browser.jar:
   skin/classic/browser/heartbeat-icon.svg                   (../shared/heartbeat-icon.svg)
   skin/classic/browser/heartbeat-star-lit.svg               (../shared/heartbeat-star-lit.svg)
   skin/classic/browser/heartbeat-star-off.svg               (../shared/heartbeat-star-off.svg)
-  skin/classic/browser/identity-icons-generic.png
-  skin/classic/browser/identity-icons-generic@2x.png
-  skin/classic/browser/identity-icons-https.png
-  skin/classic/browser/identity-icons-https@2x.png
-  skin/classic/browser/identity-icons-https-ev.png
-  skin/classic/browser/identity-icons-https-ev@2x.png
-  skin/classic/browser/identity-icons-https-mixed-active.png
-  skin/classic/browser/identity-icons-https-mixed-active@2x.png
-  skin/classic/browser/identity-icons-https-mixed-display.png
-  skin/classic/browser/identity-icons-https-mixed-display@2x.png
+  skin/classic/browser/identity-not-secure.svg              (../shared/identity-block/identity-not-secure.svg)
+  skin/classic/browser/identity-secure.svg                  (../shared/identity-block/identity-secure.svg)
+  skin/classic/browser/identity-mixed-active-blocked.svg    (../shared/identity-block/identity-mixed-active-blocked.svg)
+  skin/classic/browser/identity-mixed-passive-loaded.svg    (../shared/identity-block/identity-mixed-passive-loaded.svg)
+  skin/classic/browser/identity-mixed-active-loaded.svg     (../shared/identity-block/identity-mixed-active-loaded.svg)
   skin/classic/browser/Info.png
   skin/classic/browser/keyhole-circle.png
   skin/classic/browser/keyhole-circle@2x.png

browser/themes/shared/devtools/netmonitor.inc.css

@@ -140,30 +140,25 @@
 
 .requests-security-state-icon {
   -moz-margin-end: 4px;
-  -moz-image-region:rect(0px, 16px, 16px, 0px);
-}
-
-.requests-security-state-icon:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
 .security-state-insecure {
-  list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
+  list-style-image: url(chrome://browser/skin/identity-not-secure.svg);
 }
 
 .security-state-secure {
   cursor: pointer;
-  list-style-image: url(chrome://browser/skin/identity-icons-https.png);
+  list-style-image: url(chrome://browser/skin/identity-secure.svg);
 }
 
 .security-state-weak {
   cursor: pointer;
-  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
+  list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
 }
 
 .security-state-broken {
   cursor: pointer;
-  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png);
+  list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
 }
 
 .requests-menu-type {

browser/themes/shared/identity-block.inc.css

@@ -60,97 +60,41 @@
 #page-proxy-favicon {
   width: 16px;
   height: 16px;
-  list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
+  list-style-image: url(chrome://browser/skin/identity-not-secure.svg);
 }
 
 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
   list-style-image: url(chrome://branding/content/identity-icons-brand.png);
+  -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
-.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
-  list-style-image: url(chrome://browser/skin/identity-icons-https.png);
-}
-
+.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"],
 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
-  list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png);
-}
-
-.weakCipher > #page-proxy-favicon[pageproxystate="valid"] {
-  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
+  list-style-image: url(chrome://browser/skin/identity-secure.svg);
 }
 
 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
-  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png);
-}
-
-.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
-  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
+  list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
 }
 
+.weakCipher > #page-proxy-favicon[pageproxystate="valid"],
+.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"],
 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
-  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
+  list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
+}
+
+.mixedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
+  list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
 }
 
 #page-proxy-favicon[pageproxystate="invalid"] {
   opacity: 0.3;
 }
 
-@media not all and (min-resolution: 1.1dppx) {
-  #page-proxy-favicon {
-    -moz-image-region: rect(0, 16px, 16px, 0);
-  }
-
-  #identity-box:hover > #page-proxy-favicon {
-    -moz-image-region: rect(0, 32px, 16px, 16px);
-  }
-
-  #identity-box:hover:active > #page-proxy-favicon,
-  #identity-box[open=true] > #page-proxy-favicon {
-    -moz-image-region: rect(0, 48px, 16px, 32px);
-  }
-}
-
 @media (min-resolution: 1.1dppx) {
-  #page-proxy-favicon {
-    list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png);
-    -moz-image-region: rect(0, 32px, 32px, 0);
-  }
-
   .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
     list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png);
-  }
-
-  .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
-    list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png);
-  }
-
-  .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
-    list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png);
-  }
-
-  .weakCipher > #page-proxy-favicon[pageproxystate="valid"] {
-    list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png);
-  }
-
-  .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
-    list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png);
-  }
-
-  .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
-    list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png);
-  }
-
-  .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
-    list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png);
-  }
-
-  #identity-box:hover > #page-proxy-favicon {
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
-
-  #identity-box:hover:active > #page-proxy-favicon,
-  #identity-box[open=true] > #page-proxy-favicon {
-    -moz-image-region: rect(0, 96px, 32px, 64px);
+    -moz-image-region: rect(0, 32px, 32px, 0);
   }
 }
 

browser/themes/shared/identity-block/identity-block.inc.css

@@ -0,0 +1,107 @@
+%if 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/. */
+%endif
+
+:root {
+  --identity-box-verified-color: hsl(92,100%,30%);
+  --identity-box-verified-background-image: linear-gradient(hsla(92,81%,16%,0),
+                                            hsla(92,81%,16%,.2) 35%,
+                                            hsla(92,81%,16%,.2) 65%,
+                                            hsla(92,81%,16%,0));
+%ifdef MOZ_OFFICIAL_BRANDING
+  --identity-box-chrome-color: rgb(229,115,0);
+  --identity-box-chrome-background-image: linear-gradient(rgba(229,114,0,0),
+                                    rgba(229,114,0,.5) 35%,
+                                    rgba(229,114,0,.5) 65%,
+                                    rgba(229,114,0,0));
+%else
+%if MOZ_UPDATE_CHANNEL == aurora
+  --identity-box-chrome-color: rgb(51,30,84);
+  --identity-box-chrome-background-image: linear-gradient(rgba(51,30,84,0),
+                                    rgba(51,30,84,.5) 35%,
+                                    rgba(51,30,84,.5) 65%,
+                                    rgba(51,30,84,0));
+%else
+  --identity-box-chrome-color: rgb(0,33,71);
+  --identity-box-chrome-background-image: linear-gradient(rgba(0,33,71,0),
+                                    rgba(0,33,71,.5) 35%,
+                                    rgba(0,33,71,.5) 65%,
+                                    rgba(0,33,71,0));
+%endif
+%endif
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
+  background-position: right;
+  background-size: 1px;
+  background-repeat: no-repeat;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
+  background-position: left;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
+  color: var(--identity-box-verified-color);
+  background-image: var(--identity-box-verified-background-image);
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
+  color: var(--identity-box-chrome-color);
+  background-image: var(--identity-box-chrome-background-image);
+}
+
+/* page proxy icon */
+
+#page-proxy-favicon {
+  width: 16px;
+  height: 16px;
+  list-style-image: url(chrome://browser/skin/identity-not-secure.svg);
+}
+
+.chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
+  list-style-image: url(chrome://branding/content/identity-icons-brand.png);
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"],
+.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
+  list-style-image: url(chrome://browser/skin/identity-secure.svg);
+}
+
+.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
+  list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
+}
+
+.weakCipher > #page-proxy-favicon[pageproxystate="valid"],
+.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"],
+.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
+  list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
+}
+
+.mixedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
+  list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
+}
+
+#page-proxy-favicon[pageproxystate="invalid"] {
+  opacity: 0.3;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
+    list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png);
+    -moz-image-region: rect(0, 32px, 32px, 0);
+  }
+}
+
+#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon {
+  -moz-image-region: inherit;
+  list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
+  width: 16px;
+  height: 16px;
+  opacity: 1;
+}

browser/themes/shared/identity-block/identity-mixed-active-blocked.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #4d9a26;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="2" y="1" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="4" y="3" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="1" y="6" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" class="icon-default" />
+  <path fill="#fff" d="M10.5,5C9.8,5,9.1,5.4,8.8,6.2l-3.5,6.8c-0.4,0.7-0.4,1.4,0,2c0.4,0.6,1,1,1.8,1H14c0.8,0,1.4-0.4,1.8-1 c0.3-0.6,0.3-1.4,0-2l-3.5-6.8C11.9,5.4,11.2,5,10.5,5L10.5,5z"/>
+  <path fill="#999" d="M14.8,13.4l-3.5-6.8C11.2,6.2,10.9,6,10.5,6c-0.3,0-0.7,0.2-0.9,0.6l-3.5,6.8c-0.2,0.4-0.2,0.8,0,1.1C6.3,14.8,6.6,15,7,15 H14c0.4,0,0.7-0.2,0.9-0.5C15.1,14.2,15,13.8,14.8,13.4z"/>
+  <path fill="#fff" d="M10,8.5C10,8.2,10.2,8,10.5,8S11,8.2,11,8.5L10.8,11h-0.6L10,8.5z" />
+  <circle fill="#fff" cx="10.5" cy="12.5" r=".75" />
+</svg>

browser/themes/shared/identity-block/identity-mixed-active-loaded.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #999;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+      <line x1="2" y1="13" x2="14" y2="1.5" stroke="#000" stroke-width="2" />
+      <line x1="2" y1="15" x2="14" y2="3.5" stroke="#000" stroke-width="2" />
+      <rect x="3" y="7" width="10" height="7" rx="1" ry="1" fill="#000" />
+    </mask>
+
+    <mask id="mask-base-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-base" fill="#fff" />
+      <line x1="2" y1="14.8" x2="14" y2="3.2" stroke="#000" stroke-width="1.8" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" class="icon-default" />
+
+  <line x1="2" y1="14.1" x2="14" y2="2.5" stroke="#d92d21" stroke-width="1.8" />
+</svg>

browser/themes/shared/identity-block/identity-mixed-passive-loaded.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #808080;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="2" y="1" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="4" y="3" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="1" y="6" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" class="icon-default" />
+  <path fill="#fff" d="M10.5,5C9.8,5,9.1,5.4,8.8,6.2l-3.5,6.8c-0.4,0.7-0.4,1.4,0,2c0.4,0.6,1,1,1.8,1H14c0.8,0,1.4-0.4,1.8-1 c0.3-0.6,0.3-1.4,0-2l-3.5-6.8C11.9,5.4,11.2,5,10.5,5L10.5,5z"/>
+  <path fill="#ffbf00" d="M14.8,13.4l-3.5-6.8C11.2,6.2,10.9,6,10.5,6c-0.3,0-0.7,0.2-0.9,0.6l-3.5,6.8c-0.2,0.4-0.2,0.8,0,1.1C6.3,14.8,6.6,15,7,15 H14c0.4,0,0.7-0.2,0.9-0.5C15.1,14.2,15,13.8,14.8,13.4z"/>
+  <path fill="#fff" d="M10,8.5C10,8.2,10.2,8,10.5,8S11,8.2,11,8.5L10.8,11h-0.6L10,8.5z" />
+  <circle fill="#fff" cx="10.5" cy="12.5" r=".75" />
+</svg>

browser/themes/shared/identity-block/identity-secure.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #4d9a26;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" class="icon-default" />
+</svg>

browser/themes/windows/browser.css

@@ -1519,7 +1519,7 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
 
 /* page proxy icon */
 
-%include ../shared/identity-block.inc.css
+%include ../shared/identity-block/identity-block.inc.css
 
 #page-proxy-favicon {
   margin-top: 1px;

browser/themes/windows/jar.mn

@@ -47,16 +47,11 @@ browser.jar:
         skin/classic/browser/heartbeat-star-off.svg                  (../shared/heartbeat-star-off.svg)
         skin/classic/browser/Info.png
         skin/classic/browser/Info-XP.png
-        skin/classic/browser/identity-icons-generic.png
-        skin/classic/browser/identity-icons-generic@2x.png
-        skin/classic/browser/identity-icons-https.png
-        skin/classic/browser/identity-icons-https@2x.png
-        skin/classic/browser/identity-icons-https-ev.png
-        skin/classic/browser/identity-icons-https-ev@2x.png
-        skin/classic/browser/identity-icons-https-mixed-active.png
-        skin/classic/browser/identity-icons-https-mixed-active@2x.png
-        skin/classic/browser/identity-icons-https-mixed-display.png
-        skin/classic/browser/identity-icons-https-mixed-display@2x.png
+        skin/classic/browser/identity-not-secure.svg                 (../shared/identity-block/identity-not-secure.svg)
+        skin/classic/browser/identity-secure.svg                     (../shared/identity-block/identity-secure.svg)
+        skin/classic/browser/identity-mixed-active-blocked.svg       (../shared/identity-block/identity-mixed-active-blocked.svg)
+        skin/classic/browser/identity-mixed-passive-loaded.svg       (../shared/identity-block/identity-mixed-passive-loaded.svg)
+        skin/classic/browser/identity-mixed-active-loaded.svg        (../shared/identity-block/identity-mixed-active-loaded.svg)
         skin/classic/browser/keyhole-forward-mask.svg
         skin/classic/browser/KUI-background.png
         skin/classic/browser/livemark-folder.png