From d528d72b4d363c202d2a50d88d41b8ab0ba4542e Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 31 Jul 2021 20:03:51 +0100 Subject: [PATCH 01/19] Change links to buttons - more semantically accurate, will expose these as buttons to assistive technologies - note: while having block-level elements like `
` inside a ` @@ -28,8 +28,8 @@ - - + + @@ -39,7 +39,7 @@ - + diff --git a/src/popup/accounts/home.component.html b/src/popup/accounts/home.component.html index 3cdfa2e99f..5e37c55e8b 100644 --- a/src/popup/accounts/home.component.html +++ b/src/popup/accounts/home.component.html @@ -1,14 +1,14 @@ -
-
-
-

{{'loginOrCreateNewAccount' | i18n}}

- {{'login' | i18n}} - - {{'enterpriseSingleSignOn' | i18n}} - - {{'createAccount' | i18n}} -
-
- -  {{'settings' | i18n}} - +
+
+
+

{{'loginOrCreateNewAccount' | i18n}}

+ {{'login' | i18n}} + + {{'createAccount' | i18n}} +
+
+ +  {{'settings' | i18n}} + diff --git a/src/popup/accounts/lock.component.html b/src/popup/accounts/lock.component.html index 173487f001..16ddbb5a71 100644 --- a/src/popup/accounts/lock.component.html +++ b/src/popup/accounts/lock.component.html @@ -23,11 +23,11 @@ class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
- - +
@@ -38,11 +38,11 @@
- +

- {{'logOut' | i18n}} +

diff --git a/src/popup/accounts/login.component.html b/src/popup/accounts/login.component.html index 0e760197ad..6f0434b89f 100644 --- a/src/popup/accounts/login.component.html +++ b/src/popup/accounts/login.component.html @@ -28,11 +28,11 @@ class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
- - +
diff --git a/src/popup/accounts/register.component.html b/src/popup/accounts/register.component.html index e9fd86bcad..4bc4ebc801 100644 --- a/src/popup/accounts/register.component.html +++ b/src/popup/accounts/register.component.html @@ -36,11 +36,11 @@ [appAutofocus]="email !== ''" appInputVerbatim (input)="updatePasswordStrength()">
- - +
@@ -64,11 +64,11 @@ appInputVerbatim>
- - +
diff --git a/src/popup/accounts/set-password.component.html b/src/popup/accounts/set-password.component.html index 53ebcbd33a..52c75ac9a7 100644 --- a/src/popup/accounts/set-password.component.html +++ b/src/popup/accounts/set-password.component.html @@ -54,11 +54,11 @@ (input)="updatePasswordStrength()" appInputVerbatim>
- - +
@@ -85,11 +85,11 @@ autocomplete="new-password">
- - +
diff --git a/src/popup/accounts/two-factor-options.component.html b/src/popup/accounts/two-factor-options.component.html index f9405d4837..15ad88013f 100644 --- a/src/popup/accounts/two-factor-options.component.html +++ b/src/popup/accounts/two-factor-options.component.html @@ -10,14 +10,14 @@
- + +
diff --git a/src/popup/accounts/two-factor.component.html b/src/popup/accounts/two-factor.component.html index 2e8cd97b06..e667aa3771 100644 --- a/src/popup/accounts/two-factor.component.html +++ b/src/popup/accounts/two-factor.component.html @@ -73,7 +73,7 @@

{{'webAuthnNewTab' | i18n}}

- +

- {{'useAnotherTwoStepMethod' | i18n}} +

- +

diff --git a/src/popup/components/pop-out.component.html b/src/popup/components/pop-out.component.html index 1c34a1c762..2e8d5581c2 100644 --- a/src/popup/components/pop-out.component.html +++ b/src/popup/components/pop-out.component.html @@ -1,5 +1,5 @@ - diff --git a/src/popup/components/send-list.component.html b/src/popup/components/send-list.component.html index 7862cd640e..cbedd7fbe9 100644 --- a/src/popup/components/send-list.component.html +++ b/src/popup/components/send-list.component.html @@ -1,4 +1,4 @@ -
@@ -47,4 +47,4 @@
- + diff --git a/src/popup/generator/password-generator-history.component.html b/src/popup/generator/password-generator-history.component.html index f2d93bc27f..26c9610888 100644 --- a/src/popup/generator/password-generator-history.component.html +++ b/src/popup/generator/password-generator-history.component.html @@ -1,6 +1,6 @@
- @@ -9,7 +9,7 @@ {{'passwordHistory' | i18n}}
-
@@ -26,10 +26,10 @@
- - +
diff --git a/src/popup/generator/password-generator.component.html b/src/popup/generator/password-generator.component.html index bb5f255231..6986210e94 100644 --- a/src/popup/generator/password-generator.component.html +++ b/src/popup/generator/password-generator.component.html @@ -19,10 +19,10 @@
- {{'regeneratePassword' | i18n}} - {{'copyPassword' | i18n}} + +
diff --git a/src/popup/send/efflux-dates.component.html b/src/popup/send/efflux-dates.component.html index 57dc270244..b7b35f3a46 100644 --- a/src/popup/send/efflux-dates.component.html +++ b/src/popup/send/efflux-dates.component.html @@ -46,9 +46,9 @@
- +
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html index 3db380c527..63e04cf332 100644 --- a/src/popup/send/send-add-edit.component.html +++ b/src/popup/send/send-add-edit.component.html @@ -155,11 +155,11 @@ class="monospaced" [(ngModel)]="password" appInputVerbatim [readonly]="disableSend">
- - +
@@ -204,7 +204,7 @@
-
{{'deleteSend' | i18n}}
- +
diff --git a/src/popup/send/send-groupings.component.html b/src/popup/send/send-groupings.component.html index 959ee3c37a..34bc2f1bfe 100644 --- a/src/popup/send/send-groupings.component.html +++ b/src/popup/send/send-groupings.component.html @@ -8,7 +8,7 @@
-
@@ -22,7 +22,7 @@

{{'noItemsInList' | i18n}}

- @@ -32,22 +32,22 @@ {{'types' | i18n}}
- + +
diff --git a/src/popup/send/send-type.component.html b/src/popup/send/send-type.component.html index 7fe28aacfc..d489e5f3a5 100644 --- a/src/popup/send/send-type.component.html +++ b/src/popup/send/send-type.component.html @@ -11,7 +11,7 @@
-
@@ -24,7 +24,7 @@

{{'noItemsInList' | i18n}}

- diff --git a/src/popup/settings/excluded-domains.component.html b/src/popup/settings/excluded-domains.component.html index 7a10449282..50bc0a856e 100644 --- a/src/popup/settings/excluded-domains.component.html +++ b/src/popup/settings/excluded-domains.component.html @@ -16,9 +16,9 @@
- +
- - +
- {{'newUri' | i18n}} - +
{{'excludedDomainsDesc' | i18n}} diff --git a/src/popup/settings/export.component.html b/src/popup/settings/export.component.html index 759fbec53c..3badbc72cb 100644 --- a/src/popup/settings/export.component.html +++ b/src/popup/settings/export.component.html @@ -31,11 +31,11 @@ class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim appAutofocus>
- - +
diff --git a/src/popup/settings/folder-add-edit.component.html b/src/popup/settings/folder-add-edit.component.html index d7e6f9ea56..9ebdeb7ab3 100644 --- a/src/popup/settings/folder-add-edit.component.html +++ b/src/popup/settings/folder-add-edit.component.html @@ -24,7 +24,7 @@
-
{{'deleteFolder' | i18n}}
- +
diff --git a/src/popup/settings/folders.component.html b/src/popup/settings/folders.component.html index 6b12b47d59..6becefcf38 100644 --- a/src/popup/settings/folders.component.html +++ b/src/popup/settings/folders.component.html @@ -9,7 +9,7 @@ {{'folders' | i18n}}
-
@@ -17,8 +17,8 @@
- {{f.name}} +
diff --git a/src/popup/settings/settings.component.html b/src/popup/settings/settings.component.html index dca4e80134..6fe0a69667 100644 --- a/src/popup/settings/settings.component.html +++ b/src/popup/settings/settings.component.html @@ -50,16 +50,16 @@
-
{{'lockNow' | i18n}}
- - +
@@ -72,41 +72,41 @@
-
{{'changeMasterPassword' | i18n}}
- - +
{{'tools' | i18n}}
-
{{'importItems' | i18n}}
- - +
@@ -116,26 +116,26 @@
{{'options' | i18n}}
-
{{'about' | i18n}}
- - +
{{'rateExtensionDesc' | i18n}}
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html index 77418d02a4..ea54027ebf 100644 --- a/src/popup/vault/add-edit.component.html +++ b/src/popup/vault/add-edit.component.html @@ -56,17 +56,17 @@ - - - +
@@ -90,11 +90,11 @@ name="Card.Number" [(ngModel)]="cipher.card.number" appInputVerbatim>
- - +
@@ -121,11 +121,11 @@ name="Card.Code" [(ngModel)]="cipher.card.code" appInputVerbatim>
- - +
@@ -225,9 +225,9 @@
- +
- - - +
- {{'newUri' | i18n}} - +
@@ -301,17 +301,17 @@
-
{{'attachments' | i18n}}
- - +
@@ -333,9 +333,9 @@
- +
@@ -352,11 +352,11 @@ *ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
- - +
@@ -364,9 +364,9 @@
- + -
- -
-
-
- {{'username' | i18n}} - - -
-
- - - -
-
-
-
- {{'password' | i18n}} -
- {{cipher.login.maskedPassword}}
-
-
-
- - - - - - - -
-
-
-
- {{'verificationCodeTotp' | i18n}} - {{totpCodeFormatted}} -
- - {{totpSec}} - - - - - - - -
- - - -
-
-
- -
-
- {{'cardholderName' | i18n}} - {{cipher.card.cardholderName}} -
-
-
- {{'number' | i18n}} - {{cipher.card.maskedNumber}} - {{cipher.card.number}} -
-
- - - - - - -
-
-
- {{'brand' | i18n}} - {{cipher.card.brand}} -
-
- {{'expiration' | i18n}} - {{cipher.card.expiration}} -
-
-
- {{'securityCode' | i18n}} - {{cipher.card.maskedCode}} - {{cipher.card.code}} -
-
- - - - - - -
-
-
- -
-
- {{'identityName' | i18n}} - {{cipher.identity.fullName}} -
-
- {{'username' | i18n}} - {{cipher.identity.username}} -
-
- {{'company' | i18n}} - {{cipher.identity.company}} -
-
- {{'ssn' | i18n}} - {{cipher.identity.ssn}} -
-
- {{'passportNumber' | i18n}} - {{cipher.identity.passportNumber}} -
-
- {{'licenseNumber' | i18n}} - {{cipher.identity.licenseNumber}} -
-
- {{'email' | i18n}} - {{cipher.identity.email}} -
-
- {{'phone' | i18n}} - {{cipher.identity.phone}} -
-
- {{'address' | i18n}} -
{{cipher.identity.address1}}
-
{{cipher.identity.address2}}
-
{{cipher.identity.address3}}
-
{{cipher.identity.fullAddressPart2}}
-
{{cipher.identity.country}}
-
-
-
-
-
-
-
-
- {{'uri' | i18n}} - {{'website' | i18n}} - - - -
-
- - - - - - -
-
-
-
-
-
- {{'notes' | i18n}} -
-
-
- -
-
-
-
-
- {{'customFields' | i18n}} -
-
-
-
- {{field.name}} -
- {{field.value || ' '}} -
-
- {{field.value}} - {{field.maskedValue}} -
-
- - - {{field.value}} -
-
-
- - - - - - -
-
-
-
-
-
- {{'attachments' | i18n}} -
-
- - {{attachment.fileName}} - {{attachment.sizeName}} - - - -
-
-
-
- -
- - {{'autoFill' | i18n}} -
- - -
- - {{'autoFillAndSave' | i18n}} -
- - -
- - {{'cloneItem' | i18n}} -
- - -
- - {{'moveToOrganization' | i18n}} -
- - -
- - {{'restoreItem' | i18n}} -
- - -
- - {{(cipher.isDeleted ? 'permanentlyDeleteItem' : 'deleteItem') | i18n}} -
- -
-
-
-
-
- {{'dateUpdated' | i18n}}: - {{cipher.revisionDate | date:'medium'}} -
-
- {{'datePasswordUpdated' | i18n}}: - {{cipher.passwordRevisionDisplayDate | date:'medium'}} -
-
- {{'passwordHistory' | i18n}}: - - {{cipher.passwordHistory.length}} - -
-
-
- +
+
+ +
+
+ {{'viewItem' | i18n}} +
+
+ +
+
+ +
+
+ {{'itemInformation' | i18n}} +
+
+
+ {{'name' | i18n}} + +
+ +
+
+
+ {{'username' | i18n}} + + +
+
+ +
+
+
+
+ {{'password' | i18n}} +
+ {{cipher.login.maskedPassword}}
+
+
+
+ + + +
+
+
+
+ {{'verificationCodeTotp' | i18n}} + {{totpCodeFormatted}} +
+ + {{totpSec}} + + + + + + + +
+ +
+
+
+ +
+
+ {{'cardholderName' | i18n}} + {{cipher.card.cardholderName}} +
+
+
+ {{'number' | i18n}} + {{cipher.card.maskedNumber}} + {{cipher.card.number}} +
+
+ + +
+
+
+ {{'brand' | i18n}} + {{cipher.card.brand}} +
+
+ {{'expiration' | i18n}} + {{cipher.card.expiration}} +
+
+
+ {{'securityCode' | i18n}} + {{cipher.card.maskedCode}} + {{cipher.card.code}} +
+
+ + +
+
+
+ +
+
+ {{'identityName' | i18n}} + {{cipher.identity.fullName}} +
+
+ {{'username' | i18n}} + {{cipher.identity.username}} +
+
+ {{'company' | i18n}} + {{cipher.identity.company}} +
+
+ {{'ssn' | i18n}} + {{cipher.identity.ssn}} +
+
+ {{'passportNumber' | i18n}} + {{cipher.identity.passportNumber}} +
+
+ {{'licenseNumber' | i18n}} + {{cipher.identity.licenseNumber}} +
+
+ {{'email' | i18n}} + {{cipher.identity.email}} +
+
+ {{'phone' | i18n}} + {{cipher.identity.phone}} +
+
+ {{'address' | i18n}} +
{{cipher.identity.address1}}
+
{{cipher.identity.address2}}
+
{{cipher.identity.address3}}
+
{{cipher.identity.fullAddressPart2}}
+
{{cipher.identity.country}}
+
+
+
+
+
+
+
+
+ {{'uri' | i18n}} + {{'website' | i18n}} + + + +
+
+ + +
+
+
+
+
+
+ {{'notes' | i18n}} +
+
+
+ +
+
+
+
+
+ {{'customFields' | i18n}} +
+
+
+
+ {{field.name}} +
+ {{field.value || ' '}} +
+
+ {{field.value}} + {{field.maskedValue}} +
+
+ + + {{field.value}} +
+
+
+ + +
+
+
+
+
+
+ {{'attachments' | i18n}} +
+
+ +
+
+
+
+ + + + + + +
+
+
+
+
+ {{'dateUpdated' | i18n}}: + {{cipher.revisionDate | date:'medium'}} +
+
+ {{'datePasswordUpdated' | i18n}}: + {{cipher.passwordRevisionDisplayDate | date:'medium'}} +
+
+ {{'passwordHistory' | i18n}}: + + {{cipher.passwordHistory.length}} + +
+
+
+ From 7e1c4911245f7a4b7584f25b7bf71f5acc1f3617 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 31 Jul 2021 21:10:37 +0100 Subject: [PATCH 02/19] Add extra styles for buttons - to maintain the existing look and feel after switching links to buttons --- src/popup/scss/buttons.scss | 186 +++++++++++++++++++----------------- 1 file changed, 98 insertions(+), 88 deletions(-) diff --git a/src/popup/scss/buttons.scss b/src/popup/scss/buttons.scss index 1be16c912e..f312aa4629 100644 --- a/src/popup/scss/buttons.scss +++ b/src/popup/scss/buttons.scss @@ -1,88 +1,98 @@ -@import "variables.scss"; - -.btn { - border-radius: $border-radius; - padding: 7px 15px; - border: 1px solid #000000; - font-size: $font-size-base; - white-space: nowrap; - text-align: center; - cursor: pointer; - - @include themify($themes) { - background-color: themed('buttonBackgroundColor'); - border-color: themed('buttonBorderColor'); - color: themed('buttonColor'); - } - - &.primary { - @include themify($themes) { - color: themed('buttonPrimaryColor'); - } - } - - &.danger { - @include themify($themes) { - color: themed('buttonDangerColor'); - } - } - - &:hover:not([disabled]) { - cursor: pointer; - - @include themify($themes) { - background-color: darken(themed('buttonBackgroundColor'), 1.5%); - border-color: darken(themed('buttonBorderColor'), 17%); - color: darken(themed('buttonColor'), 10%); - } - - &.primary { - @include themify($themes) { - color: darken(themed('buttonPrimaryColor'), 6%); - } - } - - &.danger { - @include themify($themes) { - color: darken(themed('buttonDangerColor'), 6%); - } - } - } - - &:focus:not([disabled]) { - cursor: pointer; - outline: 0; - - @include themify($themes) { - background-color: darken(themed('buttonBackgroundColor'), 6%); - border-color: darken(themed('buttonBorderColor'), 25%); - } - } - - &[disabled] { - opacity: 0.65; - cursor: default !important; - } - - &.block { - display: block; - width: 100%; - } - - &.link { - border: none !important; - background: none !important; - - &:focus { - text-decoration: underline; - } - } -} - -.action-buttons { - .btn { - &:focus { - outline: auto; - } - } -} +@import "variables.scss"; + +.btn { + border-radius: $border-radius; + padding: 7px 15px; + border: 1px solid #000000; + font-size: $font-size-base; + white-space: nowrap; + text-align: center; + cursor: pointer; + + @include themify($themes) { + background-color: themed('buttonBackgroundColor'); + border-color: themed('buttonBorderColor'); + color: themed('buttonColor'); + } + + &.primary { + @include themify($themes) { + color: themed('buttonPrimaryColor'); + } + } + + &.danger { + @include themify($themes) { + color: themed('buttonDangerColor'); + } + } + + &:hover:not([disabled]) { + cursor: pointer; + + @include themify($themes) { + background-color: darken(themed('buttonBackgroundColor'), 1.5%); + border-color: darken(themed('buttonBorderColor'), 17%); + color: darken(themed('buttonColor'), 10%); + } + + &.primary { + @include themify($themes) { + color: darken(themed('buttonPrimaryColor'), 6%); + } + } + + &.danger { + @include themify($themes) { + color: darken(themed('buttonDangerColor'), 6%); + } + } + } + + &:focus:not([disabled]) { + cursor: pointer; + outline: 0; + + @include themify($themes) { + background-color: darken(themed('buttonBackgroundColor'), 6%); + border-color: darken(themed('buttonBorderColor'), 25%); + } + } + + &[disabled] { + opacity: 0.65; + cursor: default !important; + } + + &.block { + display: block; + width: 100%; + } + + &.link { + border: none !important; + background: none !important; + + &:focus { + text-decoration: underline; + } + } +} + +.action-buttons { + .btn { + &:focus { + outline: auto; + } + } +} + +button.box-content-row { + display: block; + width: 100%; + background: none; +} + +button { + border: none; +} \ No newline at end of file From 888fc74a57a43c2ebf361eb6132250dd4716eb68 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 31 Jul 2021 21:56:05 +0100 Subject: [PATCH 03/19] A11y: use visually hidden styles rather than visibility - `visibility:hidden` also hides text from assistive technologies, leading to the settings link lacking an accessible name when not hovered (focused with keyboard only, for instance) - turn the styles around and hide the non-hovered link's span with "visually hidden" styles https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ - also include `:focus` to make the text visible when hovered (for sighted keyboard users) --- src/popup/scss/pages.scss | 187 +++++++++++++++++++------------------- 1 file changed, 96 insertions(+), 91 deletions(-) diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss index f3287b1760..ff0d2094c3 100644 --- a/src/popup/scss/pages.scss +++ b/src/popup/scss/pages.scss @@ -1,91 +1,96 @@ -@import "variables.scss"; - -app-sync { - content { - .btn { - margin-bottom: 10px; - } - } -} - -app-password-generator .password-block { - font-size: $font-size-large; - font-family: $font-family-monospace; - margin: 20px; - - .password-wrapper { - text-align: center; - } -} - -app-home { - position: fixed; - height: 100%; - width: 100%; - - .center-content { - margin-top: -50px; - height: calc(100% + 50px); - } - - img { - width: 284px; - margin: 0 auto; - } - - p.lead { - margin: 30px 0; - } - - .btn + .btn { - margin-top: 10px; - } - - a.settings-icon { - position: absolute; - top: 10px; - left: 10px; - - @include themify($themes) { - color: themed('mutedColor'); - } - - span { - visibility: hidden; - } - - &:hover { - text-decoration: none; - - @include themify($themes) { - color: themed('primaryColor'); - } - - span { - visibility: visible; - } - } - } -} - -body.body-sm, body.body-xs { - app-home { - .center-content { - margin-top: 0; - height: 100%; - } - - p.lead { - margin: 15px 0; - } - } -} - -body.body-full { - app-home { - .center-content { - margin-top: -80px; - height: calc(100% + 80px); - } - } -} +@import "variables.scss"; + +app-sync { + content { + .btn { + margin-bottom: 10px; + } + } +} + +app-password-generator .password-block { + font-size: $font-size-large; + font-family: $font-family-monospace; + margin: 20px; + + .password-wrapper { + text-align: center; + } +} + +app-home { + position: fixed; + height: 100%; + width: 100%; + + .center-content { + margin-top: -50px; + height: calc(100% + 50px); + } + + img { + width: 284px; + margin: 0 auto; + } + + p.lead { + margin: 30px 0; + } + + .btn + .btn { + margin-top: 10px; + } + + a.settings-icon { + position: absolute; + top: 10px; + left: 10px; + + @include themify($themes) { + color: themed('mutedColor'); + } + + &:not(:hover):not(:focus) { + span { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + } + } + + &:hover, &:focus { + text-decoration: none; + + @include themify($themes) { + color: themed('primaryColor'); + } + + } + } +} + +body.body-sm, body.body-xs { + app-home { + .center-content { + margin-top: 0; + height: 100%; + } + + p.lead { + margin: 15px 0; + } + } +} + +body.body-full { + app-home { + .center-content { + margin-top: -80px; + height: calc(100% + 80px); + } + } +} From fdb3e25d9827cb25d6cc0e3c989371235277a5a5 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 2 Sep 2021 22:06:36 +0100 Subject: [PATCH 04/19] Apply suggestions from code review Co-authored-by: Addison Beck --- src/popup/accounts/home.component.html | 3 ++- src/popup/accounts/lock.component.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/popup/accounts/home.component.html b/src/popup/accounts/home.component.html index 5e37c55e8b..53c9384f12 100644 --- a/src/popup/accounts/home.component.html +++ b/src/popup/accounts/home.component.html @@ -3,7 +3,8 @@

{{'loginOrCreateNewAccount' | i18n}}

{{'login' | i18n}} - {{'createAccount' | i18n}} diff --git a/src/popup/accounts/lock.component.html b/src/popup/accounts/lock.component.html index 16ddbb5a71..1b7da04eae 100644 --- a/src/popup/accounts/lock.component.html +++ b/src/popup/accounts/lock.component.html @@ -42,7 +42,7 @@

- +

From 0b024e11d6be276ed4f8f9702177384d4cf377ad Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 17 Sep 2021 21:19:34 +0100 Subject: [PATCH 05/19] Update src/popup/scss/pages.scss Co-authored-by: Addison Beck --- src/popup/scss/pages.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss index ff0d2094c3..4875783b66 100644 --- a/src/popup/scss/pages.scss +++ b/src/popup/scss/pages.scss @@ -68,7 +68,6 @@ app-home { @include themify($themes) { color: themed('primaryColor'); } - } } } From 8ce5cbe94373109d75bdcbe58bc571460f8a3b5e Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 17:32:02 +0100 Subject: [PATCH 06/19] Tweak styles to accommodate for buttons --- src/notification/bar.html | 2 +- src/notification/bar.scss | 14 ++++++++------ src/popup/scss/box.scss | 10 ++++++++-- src/popup/scss/buttons.scss | 7 +++++-- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index fcc34c585d..f50db6e5fd 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -15,7 +15,7 @@ - diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 1f673d5255..bc49e8a2c6 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -55,31 +55,33 @@ img { margin-right: 10px; } -button:not(.link) { +button:not(.link), +button:not(.neutral) { background-color: #175DDC; padding: 5px 15px; border-radius: 3px; color: #ffffff; border: 0; -} - button:not(.link):hover { + &:hover { cursor: pointer; background-color: #1751bd; } +} -button.link { +button.link, +button.neutral { background: none; padding: 5px 15px; color: #175DDC; border: 0; -} - button.link:hover { + &:hover { cursor: pointer; background: none; text-decoration: underline; } +} body[class*='lang-en'] .add-buttons { width: 175px; diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss index c11651c49b..51930d76f0 100644 --- a/src/popup/scss/box.scss +++ b/src/popup/scss/box.scss @@ -300,7 +300,8 @@ margin-top: 5px; } - > a { + > a, + > button { padding: 8px 8px 8px 4px; margin: 0; @@ -315,6 +316,12 @@ padding-left: 10px; } + &.box-content-row-newmulti { + @include themify($themes) { + color: themed('primaryColor'); + } + } + &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { label, .row-label { font-size: $font-size-base; @@ -511,7 +518,6 @@ justify-content: center; align-items: center; min-width: 34px; - height: 100%; margin-left: -5px; @include themify($themes) { diff --git a/src/popup/scss/buttons.scss b/src/popup/scss/buttons.scss index f312aa4629..f6f3718b8f 100644 --- a/src/popup/scss/buttons.scss +++ b/src/popup/scss/buttons.scss @@ -69,7 +69,8 @@ width: 100%; } - &.link { + &.link, + &.neutral { border: none !important; background: none !important; @@ -90,9 +91,11 @@ button.box-content-row { display: block; width: 100%; - background: none; + text-align: left; } button { border: none; + background: transparent; + color: inherit; } \ No newline at end of file From c178cbdc129d41b14685b8728a13af22526b1b23 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 17:45:54 +0100 Subject: [PATCH 07/19] Resolve merge conflict --- src/notification/bar.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index f50db6e5fd..d352b2133c 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -27,9 +27,12 @@ + + + - - + + From f389ea29515f83ee3a5720b957cbf423c94c755c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 17:55:18 +0100 Subject: [PATCH 08/19] Change links to buttons in new components/fragments that appeared after latest merge --- src/popup/accounts/update-temp-password.component.html | 8 ++++---- src/popup/components/cipher-row.component.html | 4 ++-- src/popup/components/password-reprompt.component.html | 4 ++-- src/popup/components/set-pin.component.html | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/popup/accounts/update-temp-password.component.html b/src/popup/accounts/update-temp-password.component.html index 91ce4d5cbf..608e7214c8 100644 --- a/src/popup/accounts/update-temp-password.component.html +++ b/src/popup/accounts/update-temp-password.component.html @@ -36,11 +36,11 @@ appInputVerbatim (input)="updatePasswordStrength()">
- - +
@@ -62,11 +62,11 @@ appInputVerbatim>
- - +
diff --git a/src/popup/components/cipher-row.component.html b/src/popup/components/cipher-row.component.html index 818e44c1b8..91aa472d42 100644 --- a/src/popup/components/cipher-row.component.html +++ b/src/popup/components/cipher-row.component.html @@ -1,4 +1,4 @@ -
@@ -20,4 +20,4 @@ - + diff --git a/src/popup/components/password-reprompt.component.html b/src/popup/components/password-reprompt.component.html index 0033cdd286..24354cb16e 100644 --- a/src/popup/components/password-reprompt.component.html +++ b/src/popup/components/password-reprompt.component.html @@ -12,11 +12,11 @@ class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
- - +
diff --git a/src/popup/components/set-pin.component.html b/src/popup/components/set-pin.component.html index 8513011282..c9a0126a8a 100644 --- a/src/popup/components/set-pin.component.html +++ b/src/popup/components/set-pin.component.html @@ -14,11 +14,11 @@ class="monospaced" [(ngModel)]="pin" required appInputVerbatim cdkFocusInitial>
- - +
From bf7dd5da966a9ee2ea613056ed733150471db03b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 28 Sep 2021 19:55:11 +0100 Subject: [PATCH 09/19] Change links to buttons in new split-out components --- .../vault/add-edit-custom-fields.component.html | 12 ++++++------ src/popup/vault/view-custom-fields.component.html | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/popup/vault/add-edit-custom-fields.component.html b/src/popup/vault/add-edit-custom-fields.component.html index 843fde75d0..4fe2eae422 100644 --- a/src/popup/vault/add-edit-custom-fields.component.html +++ b/src/popup/vault/add-edit-custom-fields.component.html @@ -8,9 +8,9 @@
- +
@@ -28,11 +28,11 @@
- - +
@@ -41,9 +41,9 @@
- + -
- -
-
-
- {{'username' | i18n}} - - -
-
- -
-
-
-
- {{'password' | i18n}} -
- {{cipher.login.maskedPassword}}
-
-
-
- - - -
-
-
-
- {{'verificationCodeTotp' | i18n}} - {{totpCodeFormatted}} -
- - {{totpSec}} - - - - - - - -
- -
-
-
- -
-
- {{'cardholderName' | i18n}} - {{cipher.card.cardholderName}} -
-
-
- {{'number' | i18n}} - {{cipher.card.maskedNumber}} - {{cipher.card.number}} -
-
- - -
-
-
- {{'brand' | i18n}} - {{cipher.card.brand}} -
-
- {{'expiration' | i18n}} - {{cipher.card.expiration}} -
-
-
- {{'securityCode' | i18n}} - {{cipher.card.maskedCode}} - {{cipher.card.code}} -
-
- - -
-
-
- -
-
- {{'identityName' | i18n}} - {{cipher.identity.fullName}} -
-
- {{'username' | i18n}} - {{cipher.identity.username}} -
-
- {{'company' | i18n}} - {{cipher.identity.company}} -
-
- {{'ssn' | i18n}} - {{cipher.identity.ssn}} -
-
- {{'passportNumber' | i18n}} - {{cipher.identity.passportNumber}} -
-
- {{'licenseNumber' | i18n}} - {{cipher.identity.licenseNumber}} -
-
- {{'email' | i18n}} - {{cipher.identity.email}} -
-
- {{'phone' | i18n}} - {{cipher.identity.phone}} -
-
- {{'address' | i18n}} -
{{cipher.identity.address1}}
-
{{cipher.identity.address2}}
-
{{cipher.identity.address3}}
-
{{cipher.identity.fullAddressPart2}}
-
{{cipher.identity.country}}
-
-
-
-
-
-
-
-
- {{'uri' | i18n}} - {{'website' | i18n}} - - - -
-
- - -
-
-
-
-
-
- {{'notes' | i18n}} -
-
-
- -
-
-
-
- -
-
-
- {{'attachments' | i18n}} -
-
- -
-
-
-
- < - - - - - -
-
-
-
-
- {{'dateUpdated' | i18n}}: - {{cipher.revisionDate | date:'medium'}} -
-
- {{'datePasswordUpdated' | i18n}}: - {{cipher.passwordRevisionDisplayDate | date:'medium'}} -
-
- {{'passwordHistory' | i18n}}: - - {{cipher.passwordHistory.length}} - -
-
-
- +
+
+ +
+
+ {{'viewItem' | i18n}} +
+
+ +
+
+ +
+
+ {{'itemInformation' | i18n}} +
+
+
+ {{'name' | i18n}} + +
+ +
+
+
+ {{'username' | i18n}} + + +
+
+ +
+
+
+
+ {{'password' | i18n}} +
+ {{cipher.login.maskedPassword}}
+
+
+
+ + + +
+
+
+
+ {{'verificationCodeTotp' | i18n}} + {{totpCodeFormatted}} +
+ + {{totpSec}} + + + + + + + +
+ +
+
+
+ +
+
+ {{'cardholderName' | i18n}} + {{cipher.card.cardholderName}} +
+
+
+ {{'number' | i18n}} + {{cipher.card.maskedNumber}} + {{cipher.card.number}} +
+
+ + +
+
+
+ {{'brand' | i18n}} + {{cipher.card.brand}} +
+
+ {{'expiration' | i18n}} + {{cipher.card.expiration}} +
+
+
+ {{'securityCode' | i18n}} + {{cipher.card.maskedCode}} + {{cipher.card.code}} +
+
+ + +
+
+
+ +
+
+ {{'identityName' | i18n}} + {{cipher.identity.fullName}} +
+
+ {{'username' | i18n}} + {{cipher.identity.username}} +
+
+ {{'company' | i18n}} + {{cipher.identity.company}} +
+
+ {{'ssn' | i18n}} + {{cipher.identity.ssn}} +
+
+ {{'passportNumber' | i18n}} + {{cipher.identity.passportNumber}} +
+
+ {{'licenseNumber' | i18n}} + {{cipher.identity.licenseNumber}} +
+
+ {{'email' | i18n}} + {{cipher.identity.email}} +
+
+ {{'phone' | i18n}} + {{cipher.identity.phone}} +
+
+ {{'address' | i18n}} +
{{cipher.identity.address1}}
+
{{cipher.identity.address2}}
+
{{cipher.identity.address3}}
+
{{cipher.identity.fullAddressPart2}}
+
{{cipher.identity.country}}
+
+
+
+
+
+
+
+
+ {{'uri' | i18n}} + {{'website' | i18n}} + + + +
+
+ + +
+
+
+
+
+
+ {{'notes' | i18n}} +
+
+
+ +
+
+
+
+ +
+
+
+ {{'attachments' | i18n}} +
+
+ +
+
+
+
+ < + + + + + +
+
+
+
+
+ {{'dateUpdated' | i18n}}: + {{cipher.revisionDate | date:'medium'}} +
+
+ {{'datePasswordUpdated' | i18n}}: + {{cipher.passwordRevisionDisplayDate | date:'medium'}} +
+
+ {{'passwordHistory' | i18n}}: + + {{cipher.passwordHistory.length}} + +
+
+
+ From 6dfb06c5b0d314524bacd6949d98adf1b398aa79 Mon Sep 17 00:00:00 2001 From: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Date: Tue, 5 Oct 2021 06:30:31 +1000 Subject: [PATCH 14/19] Use theme enum and platformUtilsService helpers (#2089) * Use theme enum and platformUtilsService helpers * Update jslib --- jslib | 2 +- src/background/main.background.ts | 4 ++-- src/popup/services/services.module.ts | 23 ++++++++++--------- src/popup/settings/options.component.ts | 9 ++++---- .../browserPlatformUtils.service.spec.ts | 14 ++++++----- src/services/browserPlatformUtils.service.ts | 23 +++++++++++++++---- 6 files changed, 46 insertions(+), 29 deletions(-) diff --git a/jslib b/jslib index 91b73fa777..ce71c0c0bd 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 91b73fa77727a12c788c00eef4f32065c23b6314 +Subproject commit ce71c0c0bd6667573e0e611222dc415770ba3909 diff --git a/src/background/main.background.ts b/src/background/main.background.ts index 161ca0ced9..b52b8cda8c 100644 --- a/src/background/main.background.ts +++ b/src/background/main.background.ts @@ -146,7 +146,8 @@ export default class MainBackground { constructor() { // Services this.messagingService = new BrowserMessagingService(); - this.platformUtilsService = new BrowserPlatformUtilsService(this.messagingService, + this.storageService = new BrowserStorageService(); + this.platformUtilsService = new BrowserPlatformUtilsService(this.messagingService, this.storageService, (clipboardValue, clearMs) => { if (this.systemService != null) { this.systemService.clearClipboard(clipboardValue, clearMs); @@ -165,7 +166,6 @@ export default class MainBackground { return promise.then(result => result.response === 'unlocked'); } }); - this.storageService = new BrowserStorageService(); this.secureStorageService = new BrowserStorageService(); this.i18nService = new I18nService(BrowserApi.getUILanguage(window)); this.cryptoFunctionService = new WebCryptoFunctionService(window, this.platformUtilsService); diff --git a/src/popup/services/services.module.ts b/src/popup/services/services.module.ts index 4c6967d154..9507ea9647 100644 --- a/src/popup/services/services.module.ts +++ b/src/popup/services/services.module.ts @@ -62,6 +62,7 @@ import { StateService } from 'jslib-common/services/state.service'; import { PopupSearchService } from './popup-search.service'; import { PopupUtilsService } from './popup-utils.service'; +import { ThemeType } from 'jslib-common/enums/themeType'; function getBgService(service: string) { return (): T => { @@ -96,17 +97,17 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ await stateService.save(ConstantsService.disableBadgeCounterKey, await storageService.get(ConstantsService.disableBadgeCounterKey)); - let theme = await storageService.get(ConstantsService.themeKey); - if (theme == null) { - theme = await platformUtilsService.getDefaultSystemTheme(); - - platformUtilsService.onDefaultSystemThemeChange(sysTheme => { - window.document.documentElement.classList.remove('theme_light', 'theme_dark'); - window.document.documentElement.classList.add('theme_' + sysTheme); - }); - } - window.document.documentElement.classList.add('locale_' + i18nService.translationLocale); - window.document.documentElement.classList.add('theme_' + theme); + const htmlEl = window.document.documentElement; + const theme = await platformUtilsService.getEffectiveTheme(); + htmlEl.classList.add('theme_' + theme); + platformUtilsService.onDefaultSystemThemeChange(async sysTheme => { + const bwTheme = await storageService.get(ConstantsService.themeKey); + if (bwTheme == null || bwTheme === ThemeType.System) { + htmlEl.classList.remove('theme_' + ThemeType.Light, 'theme_' + ThemeType.Dark); + htmlEl.classList.add('theme_' + sysTheme); + } + }); + htmlEl.classList.add('locale_' + i18nService.translationLocale); } }; } diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index 5b94c15110..ba9def8803 100644 --- a/src/popup/settings/options.component.ts +++ b/src/popup/settings/options.component.ts @@ -12,6 +12,7 @@ import { StorageService } from 'jslib-common/abstractions/storage.service'; import { TotpService } from 'jslib-common/abstractions/totp.service'; import { ConstantsService } from 'jslib-common/services/constants.service'; +import { ThemeType } from 'jslib-common/enums/themeType'; @Component({ selector: 'app-options', @@ -44,10 +45,10 @@ export class OptionsComponent implements OnInit { private stateService: StateService, private totpService: TotpService, i18nService: I18nService) { this.themeOptions = [ { name: i18nService.t('default'), value: null }, - { name: i18nService.t('light'), value: 'light' }, - { name: i18nService.t('dark'), value: 'dark' }, - { name: 'Nord', value: 'nord' }, - { name: i18nService.t('solarizedDark'), value: 'solarizedDark' }, + { name: i18nService.t('light'), value: ThemeType.Light }, + { name: i18nService.t('dark'), value: ThemeType.Dark }, + { name: 'Nord', value: ThemeType.Nord }, + { name: i18nService.t('solarizedDark'), value: ThemeType.SolarizedDark }, ]; this.uriMatchOptions = [ { name: i18nService.t('baseDomain'), value: UriMatchType.Domain }, diff --git a/src/services/browserPlatformUtils.service.spec.ts b/src/services/browserPlatformUtils.service.spec.ts index a56feabb14..0d7a7a2666 100644 --- a/src/services/browserPlatformUtils.service.spec.ts +++ b/src/services/browserPlatformUtils.service.spec.ts @@ -2,6 +2,8 @@ import BrowserPlatformUtilsService from './browserPlatformUtils.service'; import { DeviceType } from 'jslib-common/enums/deviceType'; +const platformUtilsFactory = () => new BrowserPlatformUtilsService(null, null, null, null); + describe('Browser Utils Service', () => { describe('getBrowser', () => { const originalUserAgent = navigator.userAgent; @@ -27,7 +29,7 @@ describe('Browser Utils Service', () => { value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36', }); - const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null); + const browserPlatformUtilsService = platformUtilsFactory(); expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.ChromeExtension); }); @@ -37,7 +39,7 @@ describe('Browser Utils Service', () => { value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0', }); - const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null); + const browserPlatformUtilsService = platformUtilsFactory(); expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.FirefoxExtension); }); @@ -52,7 +54,7 @@ describe('Browser Utils Service', () => { value: {}, }); - const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null); + const browserPlatformUtilsService = platformUtilsFactory(); expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.OperaExtension); }); @@ -62,7 +64,7 @@ describe('Browser Utils Service', () => { value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.74 Safari/537.36 Edg/79.0.309.43', }); - const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null); + const browserPlatformUtilsService = platformUtilsFactory(); expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.EdgeExtension); }); @@ -77,7 +79,7 @@ describe('Browser Utils Service', () => { value: true, }); - const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null); + const browserPlatformUtilsService = platformUtilsFactory(); expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.SafariExtension); Object.defineProperty(window, 'safariAppExtension', { @@ -92,7 +94,7 @@ describe('Browser Utils Service', () => { value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.97 Safari/537.36 Vivaldi/1.94.1008.40', }); - const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null); + const browserPlatformUtilsService = platformUtilsFactory(); expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.VivaldiExtension); }); }); diff --git a/src/services/browserPlatformUtils.service.ts b/src/services/browserPlatformUtils.service.ts index 509a9c9f71..8a3a2d0cd3 100644 --- a/src/services/browserPlatformUtils.service.ts +++ b/src/services/browserPlatformUtils.service.ts @@ -2,9 +2,13 @@ import { BrowserApi } from '../browser/browserApi'; import { SafariApp } from '../browser/safariApp'; import { DeviceType } from 'jslib-common/enums/deviceType'; +import { ThemeType } from 'jslib-common/enums/themeType'; import { MessagingService } from 'jslib-common/abstractions/messaging.service'; import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service'; +import { StorageService } from 'jslib-common/abstractions/storage.service'; + +import { ConstantsService } from 'jslib-common/services/constants.service'; const DialogPromiseExpiration = 600000; // 10 minutes @@ -16,7 +20,7 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService private deviceCache: DeviceType = null; private prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)'); - constructor(private messagingService: MessagingService, + constructor(private messagingService: MessagingService, private storageService: StorageService, private clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void, private biometricCallback: () => Promise) { } @@ -317,13 +321,22 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService return false; } - getDefaultSystemTheme(): Promise<'light' | 'dark'> { - return Promise.resolve(this.prefersColorSchemeDark.matches ? 'dark' : 'light'); + getDefaultSystemTheme(): Promise { + return Promise.resolve(this.prefersColorSchemeDark.matches ? ThemeType.Dark : ThemeType.Light); } - onDefaultSystemThemeChange(callback: ((theme: 'light' | 'dark') => unknown)) { + onDefaultSystemThemeChange(callback: ((theme: ThemeType.Light | ThemeType.Dark) => unknown)) { this.prefersColorSchemeDark.addEventListener('change', ({ matches }) => { - callback(matches ? 'dark' : 'light'); + callback(matches ? ThemeType.Dark : ThemeType.Light); }); } + + async getEffectiveTheme() { + const theme = await this.storageService.get(ConstantsService.themeKey); + if (theme == null || theme === ThemeType.System) { + return this.getDefaultSystemTheme(); + } else { + return theme; + } + } } From bbcbcf2b40d33086d097d89c6edced96d5301034 Mon Sep 17 00:00:00 2001 From: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Date: Tue, 5 Oct 2021 08:41:21 +1000 Subject: [PATCH 15/19] Fix breaking typo (#2099) --- src/popup/vault/view.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html index cd61c3baba..9603f8af4a 100644 --- a/src/popup/vault/view.component.html +++ b/src/popup/vault/view.component.html @@ -241,7 +241,7 @@
- <