commit b874d93d1e3346af21e7e5d64707d593cc68bd77 Author: Richard Pospesel richard@torproject.org Date: Wed Sep 22 16:53:18 2021 -0500

fixup! Bug 30237: Add v3 onion services client authentication prompt --- .../onionservices/content/netError/browser.svg | 4 +- .../onionservices/content/netError/network.svg | 4 +- .../content/netError/onionNetError.css | 55 +++++++++++++++------- .../content/netError/onionNetError.js | 9 ++-- .../onionservices/content/netError/onionsite.svg | 9 ++-- 5 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/browser/components/onionservices/content/netError/browser.svg b/browser/components/onionservices/content/netError/browser.svg index b4c433b37bbb..1359679f7171 100644 --- a/browser/components/onionservices/content/netError/browser.svg +++ b/browser/components/onionservices/content/netError/browser.svg @@ -1,3 +1,3 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="72" height="65" viewBox="0 0 72 65"> - <path fill="context-fill" fill-opacity="context-fill-opacity" d="M0.0 0.0C0.0 0.0 0.0 65.0 0.0 65.0C0.0 65.0 72.0 65.0 72.0 65.0C72.0 65.0 72.0 0.0 72.0 0.0C72.0 0.0 52.9019692 0.0 52.9019692 0.0C52.9019692 0.0 0.0 0.0 0.0 0.0C0.0 0.0 0.0 0.0 0.0 0.0M65.0 58.0C65.0 58.0 6.0 58.0 6.0 58.0C6.0 58.0 6.0 25.0 6.0 25.0C6.0 25.0 65.0 25.0 65.0 25.0C65.0 25.0 65.0 58.0 65.0 58.0C65.0 58.0 65.0 58.0 65.0 58.0M6.0 10.0C6.0 10.0 10.0 10.0 10.0 10.0C10.0 10.0 10.0 14.0 10.0 14.0C10.0 14.0 6.0 14.0 6.0 14.0C6.0 14.0 6.0 10.0 6.0 10.0C6.0 10.0 6.0 10.0 6.0 10.0M14.0 10.0C14.0 10.0 18.0 10.0 18.0 10.0C18.0 10.0 18.0 14.0 18.0 14.0C18.0 14.0 14.0 14.0 14.0 14.0C14.0 14.0 14.0 10.0 14.0 10.0C14.0 10.0 14.0 10.0 14.0 10.0M22.0 10.0C22.0 10.0 26.0 10.0 26.0 10.0C26.0 10.0 26.0 14.0 26.0 14.0C26.0 14.0 22.0 14.0 22.0 14.0C22.0 14.0 22.0 10.0 22.0 10.0C22.0 10.0 22.0 10.0 22.0 10.0" /> +<svg fill="none" height="60" viewBox="0 0 60 60" width="60" xmlns="http://www.w3.org/2000/svg"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="m49 6h-37.5c-1.98912 0-3.89678.79018-5.3033 2.1967s-2.1967 3.3142-2.1967 5.3033v33.75c0 1.9891.79018 3.8968 2.1967 5.3033s3.31418 2.1967 5.3033 2.1967h37.5c1.9891 0 3.8968-.7902 5.3033-2.1967s2.1967-3.3142 2.1967-5.3033v-33.75c0-1.9891-.7902-3.89678-2.1967-5.3033s-3.3142-2.1967-5.3033-2.1967zm-38.0625 4.6875h38.625l2.25 2.25v8.0625h-43.125v-8.0625zm38.625 39.375h-38.625l-2.25-2.25v-22.125h43.125v22.125z"/> </svg> diff --git a/browser/components/onionservices/content/netError/network.svg b/browser/components/onionservices/content/netError/network.svg index 808c53dedd09..68610e30bfca 100644 --- a/browser/components/onionservices/content/netError/network.svg +++ b/browser/components/onionservices/content/netError/network.svg @@ -1,3 +1,3 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="72" height="54" viewBox="0 0 72 54"> - <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.0487805 54.0C6.28990244 54.0 0.0 47.3306322 0.0 39.1034585C0.0 32.0105634 4.68716488 26.0867675 10.9481707 24.585103C10.6902 23.574652 10.5365854 22.5107596 10.5365854 21.4138156C10.5365854 14.7292347 15.6471278 9.3103384 21.9512195 9.3103384C24.8076351 9.3103384 27.4126741 10.4393194 29.4146341 12.2780088C32.1344254 5.0777841 38.77452 0.0 46.5365854 0.0C56.7201249 0.0 64.9756098 8.7536733 64.9756098 19.5517479C64.9756098 20.7691677 64.8471688 21.9453428 64.6463415 23.1013144C69.0576849 26.0679606 72.0 31.2693674 72.0 37.2413909C72.0 46.5256603 64.9510244 54.0 56.195122 54.0C56.195122 54.0 14.0487805 54.0 14.0487805 54.0C14.0487805 54.0 14.0487805 54.0 14.0487805 54.0" /> +<svg fill="none" height="60" viewBox="0 0 60 60" width="60" xmlns="http://www.w3.org/2000/svg"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="m30 1.875c-7.4592 0-14.6129 2.96316-19.8874 8.2376-5.27444 5.2745-8.2376 12.4282-8.2376 19.8874s2.96316 14.6129 8.2376 19.8874c5.2745 5.2744 12.4282 8.2376 19.8874 8.2376s14.6129-2.9632 19.8874-8.2376c5.2744-5.2745 8.2376-12.4282 8.2376-19.8874s-2.9632-14.6129-8.2376-19.8874c-5.2745-5.27444-12.4282-8.2376-19.8874-8.2376zm9.1762 6.5625c3.8504 1.6533 7.1876 4.3079 9.6646 7.6877 2.477 3.3799 4.0034 7.3615 4.4205 11.531h-8.3588c-.4617-6.9829-2.9858-13.6716-7.2525-19.2187zm-7.6837 0c5.0739 5.1814 8.1562 11.9874 8.7037 19.2187h-20.3924c.5475-7.2313 3.6298-14.0373 8.7037-19.2187zm-10.6725 0h1.53c-4.2651 5.548-6.789 12.2362-7.2525 19.2187h-8.35875c.41632-4.1692 1.942-8.1508 4.41835-11.5306 2.4764-3.3799 5.813-6.0346 9.6629-7.6881zm0 43.125c-3.8504-1.6528-7.1874-4.3074-9.6639-7.6874-2.47642-3.38-4.0018-7.3619-4.41735-11.5313h8.35875c.4617 6.9829 2.9858 13.6716 7.2525 19.2187zm7.6875 0c-5.0739-5.1814-8.1562-11.9874-8.7037-19.2 187h20.3887c-.5475 7.2313-3.6298 14.0373-8.7037 19.2187zm10.6725 0h-1.5338c4.2683-5.5462 6.7926-12.2354 7.2525-19.2187h8.3588c-.4156 4.1689-1.9406 8.1504-4.4163 11.5302-2.4757 3.3799-5.8118 6.0348-9.6612 7.6885z"/> </svg> diff --git a/browser/components/onionservices/content/netError/onionNetError.css b/browser/components/onionservices/content/netError/onionNetError.css index 58117ab93223..2c92b187b71c 100644 --- a/browser/components/onionservices/content/netError/onionNetError.css +++ b/browser/components/onionservices/content/netError/onionNetError.css @@ -1,15 +1,12 @@ /* Copyright (c) 2020, The Tor Project, Inc. */

-:root { - --grey-70: #38383d; -} - #onionErrorDiagramContainer { - margin: 60px auto; - width: 460px; /* 3 columns @ 140px plus 2 column gaps @ 20px */ + margin: 0px auto 40px 0px; + /* 3 icons 64px wide each seperated by a 64px gap */ + width: 384px; display: grid; grid-row-gap: 15px; - grid-column-gap: 20px; + grid-column-gap: 64px; grid-template-columns: 1fr 1fr 1fr; }

@@ -19,12 +16,36 @@ }

.onionErrorImage { - width: 72px; - height: 72px; + width: 64px; + height: 64px; + background-size: 64px 64px; background-position: center; background-repeat: no-repeat; -moz-context-properties: fill; - fill: var(--grey-70); + fill: var(--in-content-icon-color); + opacity: 50%; +} + +/* TODO: remove these --warning-color definitions after we + are esr92 based (tor-browser#40640 */ +.onionErrorImage { + --warning-color: #ffa436; +} + +@media (-moz-toolbar-prefers-color-scheme: dark) { + .onionErrorImage { + --warning-color: #ffbd4f; + } +} + +@media (prefers-contrast) { + .onionErrorImage { + --warning-color: var(--in-content-page-color); + } +} + +.onionErrorImage[status] { + opacity: 100%; }

#onionErrorBrowserImage { @@ -43,13 +64,13 @@ .onionErrorImage[status]::after { content: " "; position: absolute; - left: -18px; - top: 18px; - width: 36px; - height: 36px; + left: -8px; + top: calc((64px - 24px) / 2); + width: 24px; + height: 24px; -moz-context-properties: fill; fill: var(--in-content-page-background); - background-color: var(--grey-70); + background-repeat: no-repeat; background-position: center; border: 3px solid var(--in-content-page-background); @@ -57,9 +78,11 @@ }

.onionErrorImage[status="ok"]::after { + background-color: var(--in-content-icon-color); background-image: url("chrome://global/skin/icons/check.svg"); }

.onionErrorImage[status="error"]::after { - background-image: url("chrome://browser/skin/stop.svg"); + background-color: var(--warning-color); + background-image: url("chrome://global/skin/icons/close.svg"); } diff --git a/browser/components/onionservices/content/netError/onionNetError.js b/browser/components/onionservices/content/netError/onionNetError.js index 8fabb3f38eb7..745c58ec6124 100644 --- a/browser/components/onionservices/content/netError/onionNetError.js +++ b/browser/components/onionservices/content/netError/onionNetError.js @@ -6,6 +6,7 @@

var OnionServicesAboutNetError = { _selector: { + textContainer: "div#text-container", header: ".title-text", longDesc: "#errorLongDesc", learnMoreContainer: "#learnMoreContainer", @@ -194,12 +195,10 @@ var OnionServicesAboutNetError = { labelDiv = this._createDiv(aDoc, undefined, undefined, container); labelDiv.textContent = this._strings.errorPage.onionSite;

- const contentContainer = aDoc.querySelector( - this._selector.contentContainer + const textContainer = aDoc.querySelector( + this._selector.textContainer ); - if (contentContainer) { - contentContainer.insertBefore(container, contentContainer.firstChild); - } + textContainer?.insertBefore(container, textContainer.firstChild); }, // _insertDiagram()

_createDiv(aDoc, aID, aClass, aParentElem) { diff --git a/browser/components/onionservices/content/netError/onionsite.svg b/browser/components/onionservices/content/netError/onionsite.svg index 1f2777e6acc7..c1b2d7382dc9 100644 --- a/browser/components/onionservices/content/netError/onionsite.svg +++ b/browser/components/onionservices/content/netError/onionsite.svg @@ -1,7 +1,8 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="70" height="63" viewBox="0 0 70 63"> +<svg fill="none" height="60" viewBox="0 0 60 60" width="60" xmlns="http://www.w3.org/2000/svg"> <g fill="context-fill" fill-opacity="context-fill-opacity"> - <path d="M64.0 2.0C64.0 2.0 4.0 2.0 4.0 2.0C2.8954305 2.0 2.0 2.81148389 2.0 3.8125C2.0 3.8125 2.0 58.1875 2.0 58.1875C2.0 59.1885161 2.8954305 60.0 4.0 60.0C4.0 60.0 36.0 60.0 36.0 60.0C36.0 60.0 36.0 56.375 36.0 56.375C36.0 56.375 6.0 56.375 6.0 56.375C6.0 56.375 6.0 41.875 6.0 41.875C6.0 41.875 38.0 41.875 38.0 41.875C38.0 41.875 38.0 38.25 38.0 38.25C38.0 38.25 6.0 38.25 6.0 38.25C6.0 38.25 6.0 23.75 6.0 23.75C6.0 23.75 62.0 23.75 62.0 23.75C62.0 23.75 62.0 36.4375 62.0 36.4375C62.0 36.4375 66.0 36.4375 66.0 36.4375C66.0 36.4375 66.0 3.8125 66.0 3.8125C66.0 2.81148389 65.1045695 2.0 64.0 2.0C64.0 2.0 64.0 2.0 64.0 2.0M62.0 20.125C62.0 20.125 6.0 20.125 6.0 20.125C6.0 20.125 6.0 5.625 6.0 5.625C6.0 5.625 62.0 5.625 62.0 5.625C62.0 5.625 62.0 20.125 62.0 20.125C62.0 20.125 62.0 20.125 62.0 20.125" /> - <path d="M24.0 47.0C24.0 47.0 24.0 51.0 24.0 51.0C24.0 51.0 20.0 51.0 20.0 51.0C20.0 51.0 20.0 47.0 20.0 47.0C20.0 47.0 24.0 47.0 24.0 47.0C24.0 47.0 24.0 47.0 24.0 47.0M16.0 47.0C16.0 47.0 16.0 51.0 16.0 51.0C16.0 51.0 12.0 51.0 12.0 51.0C12.0 51.0 12.0 47.0 12.0 47.0C12.0 47.0 16.0 47.0 16.0 47.0C16.0 47.0 16.0 47.0 16.0 47.0M56.0 29.0C56.0 29.0 56.0 33.0 56.0 33.0C56.0 33.0 52.0 33.0 52.0 33.0C52.0 33.0 52.0 29.0 52.0 29.0C52.0 29.0 56.0 29.0 56.0 29.0C56.0 29.0 56.0 29.0 56.0 29.0M48.0 29.0C48.0 29.0 48.0 33.0 48.0 33.0C48.0 33.0 12.0 33.0 12.0 33.0C12.0 33.0 12.0 29.0 12.0 29.0C12.0 29.0 48.0 29.0 48.0 29.0C48.0 29.0 48.0 29.0 48.0 29.0M22.0 11.0C22.0 11.0 22.0 15.0 22.0 15.0C22.0 15.0 10.0 15.0 10.0 15.0C10.0 15.0 10.0 11.0 10.0 11.0C10.0 11.0 22.0 11.0 22.0 11.0C22.0 11.0 22.0 11.0 22.0 11.0M70.0 0.0C70.0 0.0 70.0 36.5 70.0 36.5C70.0 36.5 65.0 36.5 65.0 36.5C65.0 36.5 65.0 4.5 65.0 4.5C65.0 4.5 5.0 4.5 5.0 4.5C5.0 4.5 5.0 58.5 5.0 58.5C5.0 58.5 36.0 58.5 36.0 58.5C36.0 58 .5 36.0 63.0 36.0 63.0C36.0 63.0 0.0 63.0 0.0 63.0C0.0 63.0 0.0 0.0 0.0 0.0C0.0 0.0 70.0 0.0 70.0 0.0C70.0 0.0 70.0 0.0 70.0 0.0M32.0 47.0C32.0 47.0 32.0 51.0 32.0 51.0C32.0 51.0 28.0 51.0 28.0 51.0C28.0 51.0 28.0 47.0 28.0 47.0C28.0 47.0 32.0 47.0 32.0 47.0C32.0 47.0 32.0 47.0 32.0 47.0M54.0 11.0C54.0 11.0 54.0 15.0 54.0 15.0C54.0 15.0 50.0 15.0 50.0 15.0C50.0 15.0 50.0 11.0 50.0 11.0C50.0 11.0 54.0 11.0 54.0 11.0C54.0 11.0 54.0 11.0 54.0 11.0M46.0 11.0C46.0 11.0 46.0 15.0 46.0 15.0C46.0 15.0 42.0 15.0 42.0 15.0C42.0 15.0 42.0 11.0 42.0 11.0C42.0 11.0 46.0 11.0 46.0 11.0C46.0 11.0 46.0 11.0 46.0 11.0M38.0 11.0C38.0 11.0 38.0 15.0 38.0 15.0C38.0 15.0 34.0 15.0 34.0 15.0C34.0 15.0 34.0 11.0 34.0 11.0C34.0 11.0 38.0 11.0 38.0 11.0C38.0 11.0 38.0 11.0 38.0 11.0M30.0 11.0C30.0 11.0 30.0 15.0 30.0 15.0C30.0 15.0 26.0 15.0 26.0 15.0C26.0 15.0 26.0 11.0 26.0 11.0C26.0 11.0 30.0 11.0 30.0 11.0C30.0 11.0 30.0 11.0 30.0 11.0" /> - <path d="M61.0 46.0C61.0 46.0 59.0 46.0 59.0 46.0C59.0 46.0 59.0 40.0 59.0 40.0C59.0 38.8954305 58.1045695 38.0 57.0 38.0C57.0 38.0 49.0 38.0 49.0 38.0C47.8954305 38.0 47.0 38.8954305 47.0 40.0C47.0 40.0 47.0 46.0 47.0 46.0C47.0 46.0 45.0 46.0 45.0 46.0C43.8954305 46.0 43.0 46.8954305 43.0 48.0C43.0 48.0 43.0 60.0 43.0 60.0C43.0 61.1045695 43.8954305 62.0 45.0 62.0C45.0 62.0 61.0 62.0 61.0 62.0C62.1045695 62.0 63.0 61.1045695 63.0 60.0C63.0 60.0 63.0 48.0 63.0 48.0C63.0 46.8954305 62.1045695 46.0 61.0 46.0C61.0 46.0 61.0 46.0 61.0 46.0M51.0 42.0C51.0 42.0 55.0 42.0 55.0 42.0C55.0 42.0 55.0 46.0 55.0 46.0C55.0 46.0 51.0 46.0 51.0 46.0C51.0 46.0 51.0 42.0 51.0 42.0C51.0 42.0 51.0 42.0 51.0 42.0M59.0 58.0C59.0 58.0 47.0 58.0 47.0 58.0C47.0 58.0 47.0 50.0 47.0 50.0C47.0 50.0 59.0 50.0 59.0 50.0C59.0 50.0 59.0 58.0 59.0 58.0C59.0 58.0 59.0 58.0 59.0 58.0" /> + <path clip-rule="evenodd" d="m11.25 6h37.5c1.9891 0 3.8968.79018 5.3033 2.1967s2.1967 3.3142 2.1967 5.3033v33.75c0 1.9891-.7902 3.8968-2.1967 5.3033s-3.3142 2.1967-5.3033 2.1967h-37.5c-1.98912 0-3.89678-.7902-5.3033-2.1967s-2.1967-3.3142-2.1967-5.3033v-33.75c0-1.9891.79018-3.89678 2.1967-5.3033s3.31418-2.1967 5.3033-2.1967zm-.5625 4.6875h38.625l2.25 2.25v34.875l-2.25 2.25h-38.625l-2.25-2.25v-34.875z" fill-rule="evenodd"/> + <path d="m15.9606 22c-.52 0-1.0187-.2107-1.3863-.5858-.3677-.3751-.5743-.8838-.5743-1.4142s.2066-1.0391.5743-1.4142c.3676-.3751.8663-.5858 1.3863-.5858h14.0788c.52 0 1.0187.2107 1.3863.5858.3677.3751.5743.8838.5743 1.4142s-.2066 1.0391-.5743 1.4142c-.3676.3751-.8663.5858-1.3863.5858z"/> + <path d="m44.0709 32h-28.1418c-.5116 0-1.0023-.2107-1.3641-.5858s-.565-.8838-.565-1.4142.2032-1.0391.565-1.4142.8525-.5858 1.3641-.5858h28.1418c.5116 0 1.0023.2107 1.3641.5858s.565.8838.565 1.4142-.2032 1.0391-.565 1.4142-.8525.5858-1.3641.5858z"/> + <path d="m44.0709 42h-28.1418c-.5116 0-1.0023-.2107-1.3641-.5858s-.565-.8838-.565-1.4142.2032-1.0391.565-1.4142.8525-.5858 1.3641-.5858h28.1418c.5116 0 1.0023.2107 1.3641.5858s.565.8838.565 1.4142-.2032 1.0391-.565 1.4142-.8525.5858-1.3641.5858z"/> </g> </svg>