diff options
Diffstat (limited to 'browser/themes/shared/identity-block')
7 files changed, 456 insertions, 0 deletions
diff --git a/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg b/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg new file mode 100644 index 000000000..35d84784a --- /dev/null +++ b/browser/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/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg b/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg new file mode 100644 index 000000000..66cb96ee0 --- /dev/null +++ b/browser/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/browser/themes/shared/identity-block/connection-secure.svg b/browser/themes/shared/identity-block/connection-secure.svg new file mode 100644 index 000000000..5dad8903b --- /dev/null +++ b/browser/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/browser/themes/shared/identity-block/icons.inc.css b/browser/themes/shared/identity-block/icons.inc.css new file mode 100644 index 000000000..6cf300061 --- /dev/null +++ b/browser/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/browser/themes/shared/identity-block/identity-block.inc.css b/browser/themes/shared/identity-block/identity-block.inc.css new file mode 100644 index 000000000..6fa40e9db --- /dev/null +++ b/browser/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/browser/themes/shared/identity-block/identity-icon.svg b/browser/themes/shared/identity-block/identity-icon.svg new file mode 100755 index 000000000..9f4c81655 --- /dev/null +++ b/browser/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/browser/themes/shared/identity-block/tracking-protection-16.svg b/browser/themes/shared/identity-block/tracking-protection-16.svg new file mode 100755 index 000000000..6517fe36b --- /dev/null +++ b/browser/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> |
