From d6a1282dd18cddf89faa2e7079268c40b02a80c1 Mon Sep 17 00:00:00 2001
From: Lootyhoof <lootyhoofer@gmail.com>
Date: Mon, 3 May 2021 16:20:10 +0100
Subject: [PATCH] Add mixed-mode SSL styling

---
 src/chrome/browser/browser.css             |  15 ++-
 src/chrome/browser/identity-low-secure.svg |  27 +++++
 src/chrome/browser/padlock/padlock.css     | 117 ++++++---------------
 3 files changed, 69 insertions(+), 90 deletions(-)
 create mode 100644 src/chrome/browser/identity-low-secure.svg

diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css
index c5fa3b7..f81a0f6 100644
--- a/src/chrome/browser/browser.css
+++ b/src/chrome/browser/browser.css
@@ -842,7 +842,8 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain {
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedContent {
   margin-inline-end: 4px;
 }
 
@@ -882,7 +883,8 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain {
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedContent {
   background-position: right;
   background-size: 1px;
   background-repeat: no-repeat;
@@ -890,7 +892,8 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl),
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain:-moz-locale-dir(rtl) {
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain:-moz-locale-dir(rtl),
+#urlbar[pageproxystate="valid"] > #identity-box.mixedContent:-moz-locale-dir(rtl) {
   background-position: left;
 }
 
@@ -911,6 +914,12 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
                                     hsla(0,0%,0%,.13));
 }
 
+#urlbar[pageproxystate="valid"] > #identity-box.mixedContent {
+  color: rgb(156,156,0);
+  background-image: linear-gradient(hsla(0,0%,0%,.13),
+                                    hsla(0,0%,0%,.13));
+}
+
 /* page proxy icon */
 
 #page-proxy-favicon {
diff --git a/src/chrome/browser/identity-low-secure.svg b/src/chrome/browser/identity-low-secure.svg
new file mode 100644
index 0000000..36d1cdc
--- /dev/null
+++ b/src/chrome/browser/identity-low-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: #7F7F7F;
+    }
+  </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>
diff --git a/src/chrome/browser/padlock/padlock.css b/src/chrome/browser/padlock/padlock.css
index 6488c23..be191ab 100644
--- a/src/chrome/browser/padlock/padlock.css
+++ b/src/chrome/browser/padlock/padlock.css
@@ -1,108 +1,51 @@
-#padlock-ib[padshow="ib-trans-bg"][level="ev"] {
-  list-style-image: url("chrome://browser/skin/identity-secure.svg") !important;
-  background-color: transparent;
+#padlock-ib,
+#padlock-ib-left,
+#padlock-ub-right,
+#padlock-sb,
+#padlock-tab {
+  background-color: transparent !important;
 }
 
-#padlock-ib[padshow="ib-trans-bg"][level="high"] {
-  list-style-image: url("chrome://browser/skin/identity-domain-secure.svg") !important;
-  background-color: transparent;
+#padlock-ib-left[padshow="ib-left"] {
+  padding: 2px;
 }
 
-#padlock-ib[padshow="ib-trans-bg"][level="low"],
-#padlock-ib[padshow="ib-trans-bg"][level="mixed"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-ib[padshow="ib-trans-bg"][level="broken"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-ib-left[padshow="ib-left"][level="ev"] {
+#padlock-ib[padshow="ib-trans-bg"][level="ev"],
+#padlock-ib-left[padshow="ib-left"][level="ev"],
+#padlock-ub-right[padshow="ub-right"][level="ev"],
+#padlock-sb[padshow="statbar"][level="ev"],
+#padlock-tab[padshow="tabs-bar"][level="ev"] {
   list-style-image: url("chrome://browser/skin/identity-secure.svg") !important;
-  padding:2px;
-  background-color: transparent;
 }
 
-#padlock-ib-left[padshow="ib-left"][level="high"] {
+#padlock-ib[padshow="ib-trans-bg"][level="high"],
+#padlock-ib-left[padshow="ib-left"][level="high"],
+#padlock-ub-right[padshow="ub-right"][level="high"],
+#padlock-sb[padshow="statbar"][level="high"],
+#padlock-tab[padshow="tabs-bar"][level="high"] {
   list-style-image: url("chrome://browser/skin/identity-domain-secure.svg") !important;
-  padding:2px;
-  background-color: transparent;
 }
 
+#padlock-ib[padshow="ib-trans-bg"][level="low"],
 #padlock-ib-left[padshow="ib-left"][level="low"],
-#padlock-ib-left[padshow="ib-left"][level="mixed"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg") !important;
-  padding:2px;
-  background-color: transparent;
-}
-
-#padlock-ib-left[padshow="ib-left"][level="broken"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg") !important;
-  padding:2px;
-  background-color: transparent;
-}
-
-#padlock-ub-right[padshow="ub-right"][level="ev"] {
-  list-style-image: url("chrome://browser/skin/identity-secure.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-ub-right[padshow="ub-right"][level="high"] {
-  list-style-image: url("chrome://browser/skin/identity-domain-secure.svg") !important;
-  background-color: transparent;
-}
-
 #padlock-ub-right[padshow="ub-right"][level="low"],
-#padlock-ub-right[padshow="ub-right"][level="mixed"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-ub-right[padshow="ub-right"][level="broken"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-sb[padshow="statbar"][level="ev"] {
-  list-style-image: url("chrome://browser/skin/identity-secure.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-sb[padshow="statbar"][level="high"] {
-  list-style-image: url("chrome://browser/skin/identity-domain-secure.svg") !important;
-  background-color: transparent;
-}
-
 #padlock-sb[padshow="statbar"][level="low"],
-#padlock-sb[padshow="statbar"][level="mixed"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg") !important;
-  background-color: transparent;
+#padlock-tab[padshow="tabs-bar"][level="low"] {
+  list-style-image: url("chrome://browser/skin/identity-low-secure.svg") !important;
 }
 
-#padlock-sb[padshow="statbar"][level="broken"] {
-  list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-tab[padshow="tabs-bar"][level="ev"] {
-  list-style-image: url("chrome://browser/skin/identity-secure.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-tab[padshow="tabs-bar"][level="high"] {
-  list-style-image: url("chrome://browser/skin/identity-domain-secure.svg") !important;
-  background-color: transparent;
-}
-
-#padlock-tab[padshow="tabs-bar"][level="low"],
+#padlock-ib[padshow="ib-trans-bg"][level="mixed"],
+#padlock-ib-left[padshow="ib-left"][level="mixed"],
+#padlock-ub-right[padshow="ub-right"][level="mixed"],
+#padlock-sb[padshow="statbar"][level="mixed"],
 #padlock-tab[padshow="tabs-bar"][level="mixed"] {
   list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg") !important;
-  background-color: transparent;
 }
 
+#padlock-ib[padshow="ib-trans-bg"][level="broken"],
+#padlock-ib-left[padshow="ib-left"][level="broken"],
+#padlock-ub-right[padshow="ub-right"][level="broken"],
+#padlock-sb[padshow="statbar"][level="broken"],
 #padlock-tab[padshow="tabs-bar"][level="broken"] {
   list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg") !important;
-  background-color: transparent;
-}
\ No newline at end of file
+}