From 765a0eb727330927a17b8980d0dc8bbafd5e6979 Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Fri, 22 May 2020 14:11:40 -0500 Subject: [PATCH 1/6] Linted Container Delete SVG --- src/img/container-delete.svg | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/img/container-delete.svg b/src/img/container-delete.svg index 5fe16db..1e67c8e 100644 --- a/src/img/container-delete.svg +++ b/src/img/container-delete.svg @@ -1,12 +1,7 @@ - - - - + From b47844b43a91d60868ebaeb317561a7e90484ac6 Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Tue, 26 May 2020 22:31:13 -0500 Subject: [PATCH 2/6] Added dark mode support on the settings page Updated p, label color for light mode, removed commented code --- src/css/options.css | 28 ++++++++++++++++++++++++++++ src/manifest.json | 3 ++- src/options.html | 15 +++++++++++---- 3 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 src/css/options.css diff --git a/src/css/options.css b/src/css/options.css new file mode 100644 index 0000000..fead645 --- /dev/null +++ b/src/css/options.css @@ -0,0 +1,28 @@ +body { + background: #fff; + color: #202023; +} + +h3 { + margin-block-start: 2.5rem; +} + +h3:first-of-type { + margin-block-start: 1rem; +} + +p, +label { + color: rgb(74, 74, 79); +} + +@media (prefers-color-scheme: dark) { + body { + background: #202023; + color: #fff; + } + p, + label { + color: rgb(177, 177, 179); + } +} diff --git a/src/manifest.json b/src/manifest.json index b4d6c59..64f42ed 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -143,6 +143,7 @@ "/img/container-site-d-24.png" ], "options_ui": { - "page": "options.html" + "page": "options.html", + "browser_style": true } } diff --git a/src/options.html b/src/options.html index 62671e1..6f30fae 100644 --- a/src/options.html +++ b/src/options.html @@ -3,20 +3,25 @@ +
+

Optional Permissions:

-

This setting allows you to open a bookmark or folder of bookmarks in a container.

+

This setting allows you to open a bookmark or folder of bookmarks in a container.

+

Firefox Accounts Sync:

-

This setting allows you to sync your containers and site assignments across devices.

+

This setting allows you to sync your containers and site assignments across devices.

+

Keyboard Shortcuts:

+

Edit which container is opened when using the numbered shortcuts.

- +

Onboarding:

+ +

Toggle this to see the onboarding panels again.

- \ No newline at end of file + From d901ba9067ba1788ae34e7d78c4fb20f2d26b989 Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Wed, 27 May 2020 10:14:33 -0500 Subject: [PATCH 3/6] Fixed issue where items with too-long page titles wrapped in tab list of specific container inside the panel --- src/css/popup.css | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 293a970..2e8ad20 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -107,12 +107,28 @@ table { /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */ .truncate-text { + position: relative; inline-size: 100%; - mask-image: linear-gradient(to left, transparent, black 1em); overflow: hidden; white-space: nowrap; } +.truncate-text::after { + position: absolute; + mask-image: linear-gradient(to right, transparent, white 70%); + content: " "; + inline-size: 50px; + height: 100%; + inset-inline-end: 0; + background: white; +} + +.hover-highlight:hover .truncate-text::after, +.hover-highlight:focus .truncate-text::after { + mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%); + background: var(--highlight-blue); +} + /* Color and icon helpers */ [data-identity-color="blue"] { --identity-tab-color: #37adff; @@ -674,6 +690,11 @@ h3.title { line-height: 24px; } +.menu-item td { + display: flex; + max-inline-size: 300px; +} + .disabled-menu-item { color: grey; cursor: default; @@ -687,12 +708,13 @@ h3.title { } .menu-text { + inline-size: calc(100% - 40px); + max-inline-size: 260px; line-height: 24px; } .menu-icon { display: block; - float: left; height: 16px; inline-size: 16px; margin-block-end: 4px; @@ -703,8 +725,6 @@ h3.title { } .menu-right-float { - display: inline-block; - float: right; height: 24px; inline-size: 60px; text-align: right; From 682d877960ced0826d1a8def540bdd5e252b9192 Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Wed, 27 May 2020 10:15:09 -0500 Subject: [PATCH 4/6] Updated lint errors, updated Stylelint library to latest version Re-added stylelint/order plugin, updated options to match new syntax . Fixed stylelint error --- .stylelintrc | 4 ++-- package.json | 6 ++--- src/css/options.css | 1 + src/css/popup.css | 54 +++++++++++++++++++++------------------------ 4 files changed, 31 insertions(+), 34 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 0161b95..d30a871 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -9,10 +9,10 @@ "rules": { "declaration-block-no-duplicate-properties": true, - "order/declaration-block-properties-alphabetical-order": true, + "order/properties-alphabetical-order": true, "property-no-unknown": [ true, { - ignoreProperties: + ignoreProperties: ["inset-block-end", "inset-block-start"] }], "property-blacklist": [ diff --git a/package.json b/package.json index b4b98db..4b5ddf8 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,9 @@ "nyc": "^15.0.0", "sinon": "^7.5.0", "sinon-chai": "^3.3.0", - "stylelint": "^7.9.0", - "stylelint-config-standard": "^16.0.0", - "stylelint-order": "^0.3.0", + "stylelint-order": "^4.0.0", + "stylelint": "^13.5.0", + "stylelint-config-standard": "^20.0.0", "web-ext": "^2.9.3", "webextensions-jsdom": "^1.2.1" }, diff --git a/src/css/options.css b/src/css/options.css index fead645..9346afe 100644 --- a/src/css/options.css +++ b/src/css/options.css @@ -21,6 +21,7 @@ label { background: #202023; color: #fff; } + p, label { color: rgb(177, 177, 179); diff --git a/src/css/popup.css b/src/css/popup.css index 2e8ad20..6890da8 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -18,9 +18,18 @@ html { } body { + color: #000; font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif; + font-size: 13px; inline-size: calc(var(--overflow-size) + 299px); + + /* inline-size: 320px; */ + letter-spacing: -0.1px; max-inline-size: calc(var(--overflow-size) + 299px); + + --highlight-blue: #1296f8; + --hr-grey: #e3e3e3; + --text-grey: #737373; } html, @@ -46,7 +55,6 @@ body { --inline-start-size: 1.66rem; /* 20px */ --inline-button-size: 5.833rem; /* 70px */ --icon-size: 1.166rem; /* 14px */ - --small-text-size: 0.833rem; /* 10px */ --small-radius: 3px; --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ @@ -107,26 +115,26 @@ table { /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */ .truncate-text { - position: relative; inline-size: 100%; overflow: hidden; + position: relative; white-space: nowrap; } .truncate-text::after { - position: absolute; - mask-image: linear-gradient(to right, transparent, white 70%); - content: " "; - inline-size: 50px; - height: 100%; - inset-inline-end: 0; background: white; + content: " "; + height: 100%; + inline-size: 50px; + inset-inline-end: 0; + mask-image: linear-gradient(to right, transparent, white 70%); + position: absolute; } .hover-highlight:hover .truncate-text::after, .hover-highlight:focus .truncate-text::after { - mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%); background: var(--highlight-blue); + mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%); } /* Color and icon helpers */ @@ -379,6 +387,13 @@ manage things like container crud */ text-decoration: none; } +.userContext-wrapper { + align-items: center; + display: flex; + flex: 1 1; + transition: background-color 75ms; +} + .edit-containers-panel .userContext-wrapper { max-inline-size: calc(var(--overflow-size) + 203px); } @@ -388,13 +403,6 @@ manage things like container crud */ pointer-events: none; } -.userContext-wrapper { - align-items: center; - display: flex; - flex: 1 1; - transition: background-color 75ms; -} - .userContext-icon-wrapper { block-size: var(--icon-button-size); flex: 0 0 var(--icon-button-size); @@ -655,18 +663,6 @@ manage things like container crud */ background: #0f1126; } -body { - color: #000; - font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 13px; - inline-size: 320px; - letter-spacing: -0.1px; - - --highlight-blue: #1296f8; - --hr-grey: #e3e3e3; - --text-grey: #737373; -} - h3.title { block-size: 40px; color: #000; @@ -709,8 +705,8 @@ h3.title { .menu-text { inline-size: calc(100% - 40px); - max-inline-size: 260px; line-height: 24px; + max-inline-size: 260px; } .menu-icon { From d0f7fc35a4a931c8589c62122e81299a656fc649 Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Tue, 7 Jul 2020 10:18:14 -0500 Subject: [PATCH 5/6] Bumped version number for new release --- package.json | 2 +- src/manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4b5ddf8..a226499 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "testpilot-containers", "title": "Multi-Account Containers", "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.", - "version": "6.2.5", + "version": "7.0.0", "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston", "bugs": { "url": "https://github.com/mozilla/multi-account-containers/issues" diff --git a/src/manifest.json b/src/manifest.json index 64f42ed..a186552 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Firefox Multi-Account Containers", - "version": "6.2.5", + "version": "7.0.0", "incognito": "not_allowed", "description": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.", "icons": { From bcd3aaeb92033b17ea4277428924375539670aba Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Thu, 9 Jul 2020 11:51:24 -0500 Subject: [PATCH 6/6] Fixed icon clipping where container icons are displayed. Added override for website favicons (listed in active container) --- src/css/popup.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/css/popup.css b/src/css/popup.css index 6890da8..f02c8bd 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -712,7 +712,7 @@ h3.title { .menu-icon { display: block; height: 16px; - inline-size: 16px; + inline-size: 23px; margin-block-end: 4px; margin-block-start: 4px; margin-inline-end: 8px; @@ -720,6 +720,11 @@ h3.title { text-align: center; } +/* Maintain 1:1 square ratio for Favicons of websites added to a specific container */ +#container-info-table .menu-icon { + inline-size: 16px; +} + .menu-right-float { height: 24px; inline-size: 60px;