Issue #303 Part 1: Move basilisk files from /browser to /application/basilisk

7 files changed, 456 insertions, 0 deletions

diff --git a/application/basilisk/themes/shared/identity-block/connection-mixed-active-loaded.svg b/application/basilisk/themes/shared/identity-block/connection-mixed-active-loaded.svg
new file mode 100644
index 000000000..35d84784a
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/connection-mixed-active-loaded.svg
@@ -0,0 +1,54 @@
+<?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">
+#include ../icon-colors.inc.svg
+  <style>
+    svg > g:not(:target) {
+      display: none;
+    }
+  </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">
+      <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">
+      <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>
+
+    <g id="lock">
+      <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)"/>
+      <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)"/>
+    </g>
+
+    <line id="strike-through-red" x1="2" y1="14.1" x2="14" y2="2.5" stroke="#d92d21" stroke-width="1.8"/>
+  </defs>
+
+  <g id="icon">
+    <use xlink:href="#lock" class="fieldtext"/>
+    <use xlink:href="#strike-through-red"/>
+  </g>
+
+  <g id="icon-black">
+    <use xlink:href="#lock" class="black"/>
+    <use xlink:href="#strike-through-red"/>
+  </g>
+
+  <g id="icon-white">
+    <use xlink:href="#lock" class="white"/>
+    <use xlink:href="#strike-through-red"/>
+  </g>
+</svg>
diff --git a/application/basilisk/themes/shared/identity-block/connection-mixed-passive-loaded.svg b/application/basilisk/themes/shared/identity-block/connection-mixed-passive-loaded.svg
new file mode 100644
index 000000000..66cb96ee0
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/connection-mixed-passive-loaded.svg
@@ -0,0 +1,52 @@
+<?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">
+#include ../icon-colors.inc.svg
+  <style>
+    svg > g:not(:target) {
+      display: none;
+    }
+  </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>
+
+    <mask id="mask-lock">
+      <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#fff"/>
+      <use xlink:href="#shape-lock-base" fill="#fff"/>
+    </mask>
+
+    <g id="warning-triangle">
+      <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"/>
+    </g>
+  </defs>
+
+  <g id="icon">
+    <rect width="16" height="16" mask="url(#mask-lock)" class="fieldtext"/>
+    <use xlink:href="#warning-triangle"/>
+  </g>
+
+  <g id="icon-black">
+    <rect width="16" height="16" mask="url(#mask-lock)" class="black"/>
+    <use xlink:href="#warning-triangle"/>
+  </g>
+
+  <g id="icon-white">
+    <rect width="16" height="16" mask="url(#mask-lock)" class="white"/>
+    <use xlink:href="#warning-triangle"/>
+  </g>
+</svg>
diff --git a/application/basilisk/themes/shared/identity-block/connection-secure.svg b/application/basilisk/themes/shared/identity-block/connection-secure.svg
new file mode 100644
index 000000000..5dad8903b
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/connection-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>
diff --git a/application/basilisk/themes/shared/identity-block/icons.inc.css b/application/basilisk/themes/shared/identity-block/icons.inc.css
new file mode 100644
index 000000000..6cf300061
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/icons.inc.css
@@ -0,0 +1,62 @@
+%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
+
+@selectorPrefix@#identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal@iconVariant@);
+}
+
+@selectorPrefix@#identity-box:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
+@selectorPrefix@#identity-box[open=true] > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover@iconVariant@);
+}
+
+@selectorPrefix@#identity-box.grantedPermissions > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice@iconVariant@);
+}
+
+@selectorPrefix@#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
+@selectorPrefix@#identity-box.grantedPermissions[open=true] > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover@iconVariant@);
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
+}
+
+
+@selectorPrefix@#tracking-protection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled@iconVariant@);
+}
+
+@selectorPrefix@#tracking-protection-icon[state="loaded-tracking-content"]@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled@iconVariant@);
+}
+
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-secure.svg);
+  visibility: visible;
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
+  visibility: visible;
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon@iconVariant@);
+  visibility: visible;
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
+  visibility: visible;
+}
diff --git a/application/basilisk/themes/shared/identity-block/identity-block.inc.css b/application/basilisk/themes/shared/identity-block/identity-block.inc.css
new file mode 100644
index 000000000..6fa40e9db
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/identity-block.inc.css
@@ -0,0 +1,163 @@
+%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
+
+%filter substitution
+
+%define selectorPrefix
+%define selectorSuffix
+%define iconVariant
+%include icons.inc.css
+
+%define selectorPrefix
+%define selectorSuffix :-moz-lwtheme
+%define iconVariant -black
+%include icons.inc.css
+
+#identity-box {
+  font-size: .9em;
+  padding: 3px 5px;
+  overflow: hidden;
+  /* The padding-left and padding-right transitions handle the delayed hiding of
+     the forward button when hovered. */
+  transition: padding-left, padding-right;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
+  color: hsl(92,100%,30%);
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
+%ifdef MOZ_OFFICIAL_BRANDING
+  color: rgb(229,115,0);
+%else
+  color: inherit;
+%endif
+}
+
+#identity-icon-labels:-moz-locale-dir(ltr) {
+  padding-left: 2px;
+}
+
+#identity-icon-labels:-moz-locale-dir(rtl) {
+  padding-right: 2px;
+}
+
+@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #identity-box {
+  padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px);
+}
+
+@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
+  /* Forward button hiding is delayed when hovered, so we should use the same
+     delay for the identity box. We handle both horizontal paddings (for LTR and
+     RTL), the latter two delays here are for padding-left and padding-right. */
+  transition-delay: 100s, 100s;
+}
+
+@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
+  /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
+  padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px);
+}
+
+/* MAIN IDENTITY ICON */
+
+#identity-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
+  opacity: .3;
+}
+
+#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
+  -moz-image-region: inherit;
+  list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
+  width: 16px;
+  height: 16px;
+}
+
+#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
+  -moz-image-region: inherit;
+  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
+  width: 16px;
+  height: 16px;
+}
+
+/* SHARING ICON */
+
+#sharing-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: -16px;
+  position: relative;
+  display: none;
+}
+
+#identity-box[sharing="camera"] > #sharing-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
+}
+
+#identity-box[sharing="microphone"] > #sharing-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
+}
+
+#identity-box[sharing="screen"] > #sharing-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
+}
+
+#identity-box[sharing] > #sharing-icon {
+  display: -moz-box;
+  animation-delay: -1.5s;
+}
+
+#identity-box[sharing] > #identity-icon,
+#sharing-icon {
+  animation: 3s linear pulse infinite;
+}
+
+@keyframes pulse {
+  0%, 16.66%, 83.33%, 100% {
+    opacity: 0;
+  }
+  33.33%, 66.66% {
+    opacity: 1;
+  }
+}
+
+/* TRACKING PROTECTION ICON */
+
+#tracking-protection-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  margin-inline-end: 0;
+}
+
+#tracking-protection-icon[animate] {
+  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
+}
+
+#tracking-protection-icon:not([state]) {
+  margin-inline-end: -18px;
+  pointer-events: none;
+  opacity: 0;
+  /* Only animate the shield in, when it disappears hide it immediately. */
+  transition: none;
+}
+
+#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
+  visibility: collapse;
+}
+
+/* CONNECTION ICON */
+
+#connection-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  visibility: collapse;
+}
+
diff --git a/application/basilisk/themes/shared/identity-block/identity-icon.svg b/application/basilisk/themes/shared/identity-block/identity-icon.svg
new file mode 100644
index 000000000..9f4c81655
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/identity-icon.svg
@@ -0,0 +1,39 @@
+<?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"
+     class="fieldtext"
+     width="16" height="16" viewBox="0 0 16 16">
+#include ../icon-colors.inc.svg
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill-rule: evenodd;
+    }
+  </style>
+
+  <defs>
+    <path id="glyph-normal" d="M128,193a7,7,0,1,1,7-7A7,7,0,0,1,128,193Zm0-13a6,6,0,1,0,6,6A6,6,0,0,0,128,180Zm0,10a1,1,0,0,1-1-1v-3a1,1,0,0,1,2,0v3A1,1,0,0,1,128,190Zm0-6a1,1,0,1,1,1-1A1,1,0,0,1,128,184Z" transform="translate(-120 -178)"/>
+    <path id="glyph-hover" d="M102,179a7,7,0,1,1-7,7A7,7,0,0,1,102,179Zm0,3a1,1,0,1,1-1,1A1,1,0,0,1,102,182Zm0,3a1,1,0,0,1,1,1v3a1,1,0,0,1-2,0v-3A1,1,0,0,1,102,185Z" transform="translate(-94 -178)"/>
+    <path id="glyph-notice" d="M133.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,133.5,202Zm-5.5,1a1,1,0,1,1,1-1A1,1,0,0,1,128,203Zm1,5a1,1,0,0,1-2,0v-3a1,1,0,0,1,2,0v3Zm-1-9a6.08,6.08,0,1,0,5.629,3.987,3.452,3.452,0,0,0,.984-0.185A6.9,6.9,0,0,1,135,205a7,7,0,1,1-7-7,6.9,6.9,0,0,1,2.2.387,3.452,3.452,0,0,0-.185.984A5.951,5.951,0,0,0,128,199Z" transform="translate(-120 -197)"/>
+    <path id="glyph-notice-hover" d="M107.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,107.5,202Zm0,1.039a3.5,3.5,0,0,0,1.125-.2,7.124,7.124,0,1,1-4.464-4.464,3.5,3.5,0,0,0-.2,1.125A3.54,3.54,0,0,0,107.5,203.039ZM102,201a1,1,0,1,0,1,1A1,1,0,0,0,102,201Zm1,4a1,1,0,0,0-2,0v3a1,1,0,0,0,2,0v-3Z" transform="translate(-94 -197)"/>
+  </defs>
+
+  <use id="normal" xlink:href="#glyph-normal"/>
+  <use id="hover" xlink:href="#glyph-hover"/>
+  <use id="notice" xlink:href="#glyph-notice"/>
+  <use id="notice-hover" xlink:href="#glyph-notice-hover"/>
+
+  <use class="black" id="normal-black" xlink:href="#glyph-normal"/>
+  <use class="black" id="hover-black" xlink:href="#glyph-hover"/>
+  <use class="black" id="notice-black" xlink:href="#glyph-notice"/>
+  <use class="black" id="notice-hover-black" xlink:href="#glyph-notice-hover"/>
+
+  <use class="white" id="normal-white" xlink:href="#glyph-normal"/>
+  <use class="white" id="hover-white" xlink:href="#glyph-hover"/>
+  <use class="white" id="notice-white" xlink:href="#glyph-notice"/>
+  <use class="white" id="notice-hover-white" xlink:href="#glyph-notice-hover"/>
+</svg>
diff --git a/application/basilisk/themes/shared/identity-block/tracking-protection-16.svg b/application/basilisk/themes/shared/identity-block/tracking-protection-16.svg
new file mode 100644
index 000000000..6517fe36b
--- /dev/null
+++ b/application/basilisk/themes/shared/identity-block/tracking-protection-16.svg
@@ -0,0 +1,59 @@
+<?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">
+#include ../icon-colors.inc.svg
+  <style>
+    g:not(:target) {
+      display: none;
+    }
+  </style>
+
+  <defs>
+    <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/>
+    <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/>
+    <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/>
+
+    <mask id="mask-shield-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-shield-outer" fill="#fff" />
+      <use xlink:href="#shape-shield-inner" fill="#000" />
+      <use xlink:href="#shape-shield-detail" fill="#fff" />
+    </mask>
+
+    <mask id="mask-shield-cutout-disabled">
+      <rect width="16" height="16" fill="#000"/>
+      <use xlink:href="#shape-shield-outer" fill="#fff"/>
+      <use xlink:href="#shape-shield-inner" fill="#000"/>
+      <use xlink:href="#shape-shield-detail" fill="#fff"/>
+      <line x1="3" y1="15" x2="15" y2="3" stroke="#000" stroke-width="2"/>
+    </mask>
+
+    <line id="strike-through-red" x1="3" y1="14" x2="15" y2="2" stroke="#d92d21" stroke-width="2"/>
+  </defs>
+
+  <g id="enabled">
+    <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
+  </g>
+  <g id="enabled-black">
+    <use class="black" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
+  </g>
+  <g id="enabled-white">
+    <use class="white" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
+  </g>
+
+  <g id="disabled">
+    <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
+    <use xlink:href="#strike-through-red"/>
+  </g>
+  <g id="disabled-black">
+    <use class="black" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
+    <use xlink:href="#strike-through-red"/>
+  </g>
+  <g id="disabled-white">
+    <use class="white" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
+    <use xlink:href="#strike-through-red"/>
+  </g>
+</svg>