Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make proxy & nativeMessaging permissions optional #2225

Merged
merged 23 commits into from
Dec 14, 2021
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
09d9b05
Make nativeMessaging and proxy permissions optional
lesleyjanenorton Nov 27, 2021
6635994
Start updates to to options.html
lesleyjanenorton Nov 27, 2021
ef662cd
Show permission warning in advanced proxy panel
lesleyjanenorton Nov 27, 2021
5a2e631
Gate MozillaVPN tout on enabled permissions in edit container panels
lesleyjanenorton Nov 29, 2021
ed63f18
Lint roll
lesleyjanenorton Nov 29, 2021
1b165ae
Handle proxy and nativeMessaging permission disabling + enabling
lesleyjanenorton Nov 29, 2021
c146a0b
Move the permission observers in the background scripts
bakulf Nov 30, 2021
ca861e2
Permission handlers triggered on add and on remove
bakulf Dec 3, 2021
07d7b0c
Make the linter happy again
bakulf Dec 3, 2021
3c3b5ae
Add Mozilla VPN & Proxy permissions block to options.html
lesleyjanenorton Dec 4, 2021
396411f
Update panel
lesleyjanenorton Dec 5, 2021
2fbb3e0
Hide Mozilla VPN proxy flags when proxy permission is disabled
lesleyjanenorton Dec 5, 2021
567a284
Update options page to latest UX
lesleyjanenorton Dec 7, 2021
8e51ea0
Add ability to enable permissions from Mozilla VPN + Proxy onboarding…
lesleyjanenorton Dec 7, 2021
1f5245b
Update options page when permissions change (Jira 682, 686, 680)
lesleyjanenorton Dec 8, 2021
dc7b5ca
Add sumo link to options page
lesleyjanenorton Dec 8, 2021
2361fc7
Fix Windows UI edge cases (Jira - 683)
lesleyjanenorton Dec 8, 2021
c914096
Use localized string
lesleyjanenorton Dec 8, 2021
29d5863
Fix onboarding panel buttons on Windows
lesleyjanenorton Dec 8, 2021
cbcae35
Use 'inline-size' instead of 'width'
lesleyjanenorton Dec 9, 2021
e87be3d
Fix MAC-689
lesleyjanenorton Dec 10, 2021
478a6db
Address review comment
lesleyjanenorton Dec 14, 2021
f544f41
Fix travis builds
bakulf Dec 14, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bin/build-addon.sh
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ git submodule init || die
git submodule update --remote --depth 1 src/_locales || die

print Y "Installing dependencies..."
npm install || die
npm install --legacy-peer-deps || die

print Y "Running tests..."
npm test
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
},
"dependencies": {},
"devDependencies": {
"addons-linter": "^1.3.2",
"addons-linter": "^3.23.0",
"ajv": "^6.6.3",
"chai": "^4.2.0",
"eslint": "^6.6.0",
"eslint-plugin-no-unsanitized": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint": "^7.32.0",
"eslint-plugin-no-unsanitized": "^4.0.0",
"eslint-plugin-promise": "^5.2.0",
"htmllint-cli": "0.0.7",
"json": ">=10.0.0",
"mocha": "^6.2.2",
Expand Down
113 changes: 103 additions & 10 deletions src/css/options.css
Original file line number Diff line number Diff line change
@@ -1,29 +1,122 @@
body {
--grey10: #e7e7e7;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

system-ui is the equivalent of -apple-system on Linux, and results in the same font that's used by the current desktop theme by default.

background: #fff;
color: #202023;
color: rgb(74, 74, 79);
font-size: 13px;
overflow: hidden;
}

h3 {
h3:first-of-type {
margin-block-start: 2.5rem;
}

h3:first-of-type {
margin-block-start: 1rem;
label {
display: flex;
align-items: center;
font-size: 14px;
}

p,
label {
color: rgb(74, 74, 79);
label > span {
padding-inline-end: 4px;
}

.settings-group {
margin-block-end: 16px;
}

form {
display: flex;
flex-direction: column;
padding-block-end: 1rem;
}

.settings-group p {
margin-inline-start: 24px;
margin-block: 4px 8px;
}

input[type="checkbox"] {
margin-inline: 0 8px;
margin-block: 1px auto;
inline-size: 16px;
block-size: 16px;
}

button {
margin-inline: 0 auto;
}

.keyboard-shortcut {
display: flex;
flex-direction: row;
justify-content: space-between;
max-inline-size: 70%;
align-items: center;
}

.bold {
font-weight: 600;
}

.moz-vpn-proxy-permissions {
margin-block: 0 2rem;
padding-block-end: 1rem;
border-block-end: 1px solid var(--grey10);
display: flex;
flex-direction: column;
}

h3.moz-vpn-proxy-permissions-title {
margin-block-start: 0;
position: relative;
display: flex;
align-items: center;
}

.warning-icon {
display: flex;
align-items: center;
}

.warning-icon.show-warning::before {
background-image: url("/img/warning.svg");
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
content: "";
display: block;
block-size: 24px;
inline-size: 24px;
margin-inline-end: 0.5rem;
}

.moz-vpn-proxy-permissions-title::before,
.moz-vpn-proxy-permissions-title::after {
background-color: var(--grey10);
content: "";
height: 1px;
flex: 1 1 0%;
}

h3.moz-vpn-proxy-permissions-title::before {
margin-inline-end: 2rem;
margin-inline-start: -50%;
}

h3.moz-vpn-proxy-permissions-title::after {
margin-inline-start: 2rem;
margin-inline-end: -50%;
}

@media (prefers-color-scheme: dark) {
body {
background: #202023;
background: #23212a;
color: #fff;
}

p,
label {
p {
color: rgb(177, 177, 179);
}
}
132 changes: 100 additions & 32 deletions src/css/popup.css
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,7 @@ input:checked + .slider::before {
/* Primary CTA Buttons */

.primary-cta {
block-size: 32px;
background-color: var(--primaryCtaDefault);
border: transparent;
border-radius: 4px;
Expand Down Expand Up @@ -481,10 +482,6 @@ input:checked + .slider::before {
transition: opacity 0.1s ease-in-out, max-height 0.3s ease-in-out;
}

#moz-vpn-tout.disappear {
animation: hideTout 0.2s ease-in forwards;
}

@keyframes appear {
0% {
opacity: 0;
Expand All @@ -497,22 +494,6 @@ input:checked + .slider::before {
}
}

@keyframes hideTout {
0% {
transform: translateY(0%);
opacity: 1;
}

50% {
opacity: 1;
}

100% {
transform: translateY(20%);
opacity: 0;
}
}

/* Mozilla VPN Controller UI in Container Management Panel */

.moz-vpn-content,
Expand All @@ -522,9 +503,6 @@ input:checked + .slider::before {
flex-direction: column;
padding-block: 16px;
transition: max-height 0.3s ease-in-out, padding-block-end 0.2s ease-in-out;

/* max-block-size: 56px; */
min-block-size: 56px;
box-shadow: 0 0 0 1px var(--hr-grey);
}

Expand Down Expand Up @@ -610,7 +588,8 @@ input.proxies {

.moz-vpn-cta {
block-size: 32px;
margin-block: 16px;
margin-block-start: 16px;
margin-block-end: 4px;
margin-inline: var(--marginInline);
text-align: center;
}
Expand Down Expand Up @@ -685,6 +664,7 @@ input.proxies {
max-block-size: 0;
opacity: 0;
visibility: hidden;
display: none;
background-color: var(--bgColor);
transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
Expand Down Expand Up @@ -713,6 +693,7 @@ input.proxies {
}

.expanded .collapsible-content {
display: flex;
max-block-size: 500px;
opacity: 1;
visibility: visible;
Expand Down Expand Up @@ -1337,6 +1318,44 @@ input[type=text] {
min-block-size: 360px;
}

.panel.onboarding-panel-8.optional-permissions-disabled {
min-block-size: 420px;
margin-block-end: 0;
margin-inline: 0;
}

.optional-permissions-disabled #moz-vpn-fw-onboarding-done {
display: none !important;
}

.moz-vpn-permissions {
padding-block: var(--marginInline);
padding-inline: var(--marginInline);
background-color: #cececf1c;
border-block-start: 1px solid var(--hr-grey);
display: none;
}

.optional-permissions-disabled .moz-vpn-permissions {
display: block;
inline-size: 100%;
}

.moz-vpn-onboarding-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-inline: var(--marginInline);
padding-block-end: var(--marginInline);
}

.moz-vpn-permissions-copy {
padding-inline: 20px;
font-size: 12px;
margin-block-end: 16px;
}

.panel-content {
flex: 1;
padding-block-start: 16px;
Expand All @@ -1363,8 +1382,7 @@ input[type=text] {
.onboarding-title {
color: #43484e;
font-size: var(--font-size-heading);
margin-block-end: 0;
margin-block-start: 0;
margin-block: 12px;
margin-inline-end: 0;
margin-inline-start: 0;
max-inline-size: 80%;
Expand Down Expand Up @@ -1518,9 +1536,7 @@ manage things like container crud */
/* Panel footer */
.panel-footer {
align-items: center;
background: #efefef;
block-size: var(--footerHeight);
border-block-end: 1px solid #d8d8d8;
color: #000;
display: flex;
font-size: 13px;
Expand Down Expand Up @@ -1994,6 +2010,24 @@ input {
text-decoration: none;
}

.info-icon-alert::after {
block-size: 12px;
inline-size: 12px;
background-color: var(--alertColor);
content: "1";
border-radius: 50%;
position: absolute;
inset-block: -5px;
inset-inline-end: -6px;
box-shadow: 0 0 1px #00000075;
font-size: 8px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
}

.delete-warning {
padding-block-end: 8px;
padding-block-start: 8px;
Expand Down Expand Up @@ -2031,6 +2065,36 @@ tr:hover > td > .trash-button {
margin-inline-start: 8px;
}

/* ----- Permissions Overlay ---------- */

#advanced-proxy-settings-panel,
.advanced-proxy-panel-content {
position: absolute;
inset-block: 0;
inset-inline: 0;
}

.permissions-overlay {
position: absolute;
inset-inline: 0 0;
inset-block-start: 40px;
inset-block-end: 0;
justify-content: center;
align-content: center;
flex-direction: column;
background-color: white;
padding-block: 2.25rem;
padding-inline: 2.25rem;
display: none;
}

#enable-proxy-permissions {
text-align: center;
font-family: var(--fontMetropolis);
font-size: 14px;
margin-block-start: 1rem;
}

@media (prefers-color-scheme: dark) {
:root {
--iconCloseX: url("/img/close-light.svg");
Expand Down Expand Up @@ -2061,6 +2125,10 @@ tr:hover > td > .trash-button {
--text-grey: #fefffe;
}

.permissions-overlay {
background-color: #494755;
}

.tooltip {
background-color: var(--controllerActive);
}
Expand All @@ -2069,6 +2137,10 @@ tr:hover > td > .trash-button {
box-shadow: 0 0 21px 3px #323139;
}

.moz-vpn-permissions {
background-color: #322f3e;
}

.blue-link {
color: #36abfc;
}
Expand Down Expand Up @@ -2152,10 +2224,6 @@ tr:hover > td > .trash-button {
background-color: #676767;
}

.panel-footer {
border-block-end: solid 1px #4a4a4a;
}

input[type="text"]:focus {
box-shadow: 0 0 0 3px var(--blue50);
border-color: var(--blue30);
Expand Down
Loading