Merge pull request #1750 from mozilla/1746-ux-ui-followup

UX/UI Followup Issues

.stylelintrc

@@ -9,7 +9,7 @@
 
   "rules": {
     "declaration-block-no-duplicate-properties": true,
-    "order/declaration-block-properties-alphabetical-order": true,
+    "order/properties-alphabetical-order": true,
     "property-no-unknown": [
       true, {
         ignoreProperties:

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"
@@ -22,9 +22,9 @@
     "nyc": "^15.0.0",
     "sinon": "^7.5.0",
     "sinon-chai": "^3.3.0",
-    "stylelint": "^7.9.0",
+    "stylelint-order": "^4.0.0",
-    "stylelint-config-standard": "^16.0.0",
+    "stylelint": "^13.5.0",
-    "stylelint-order": "^0.3.0",
+    "stylelint-config-standard": "^20.0.0",
     "web-ext": "^2.9.3",
     "webextensions-jsdom": "^1.2.1"
   },

src/css/options.css

@@ -0,0 +1,29 @@
+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);
+  }
+}

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 */
@@ -108,11 +116,27 @@ table {
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
   inline-size: 100%;
-  mask-image: linear-gradient(to left, transparent, black 1em);
   overflow: hidden;
+  position: relative;
   white-space: nowrap;
 }
 
+.truncate-text::after {
+  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 {
+  background: var(--highlight-blue);
+  mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%);
+}
+
 /* Color and icon helpers */
 [data-identity-color="blue"] {
   --identity-tab-color: #37adff;
@@ -363,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);
 }
@@ -372,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);
@@ -639,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;
@@ -674,6 +686,11 @@ h3.title {
   line-height: 24px;
 }
 
+.menu-item td {
+  display: flex;
+  max-inline-size: 300px;
+}
+
 .disabled-menu-item {
   color: grey;
   cursor: default;
@@ -687,14 +704,15 @@ h3.title {
 }
 
 .menu-text {
+  inline-size: calc(100% - 40px);
   line-height: 24px;
+  max-inline-size: 260px;
 }
 
 .menu-icon {
   display: block;
-  float: left;
   height: 16px;
-  inline-size: 16px;
+  inline-size: 23px;
   margin-block-end: 4px;
   margin-block-start: 4px;
   margin-inline-end: 8px;
@@ -702,9 +720,12 @@ 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 {
-  display: inline-block;
-  float: right;
   height: 24px;
   inline-size: 60px;
   text-align: right;

src/img/container-delete.svg

@@ -1,12 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
+<!-- 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/. -->
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. --><!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	<path fill="#FFFFFF" d="M4.6,0.3h2.7c0.1,0,0.2,0.1,0.2,0.2v1H4.4v-1C4.4,0.4,4.5,0.3,4.6,0.3z M1.7,1.5h8.6c0.1,0,0.2,0.1,0.2,0.2
-	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M4.6,0.3h2.7c0.1,0,0.2,0.1,0.2,0.2v1H4.4v-1C4.4,0.4,4.5,0.3,4.6,0.3z M1.7,1.5h8.6c0.1,0,0.2,0.1,0.2,0.2
 	l0.2,1.4H1.3l0.2-1.4C1.5,1.6,1.6,1.5,1.7,1.5z M6,11.7H3.2L2.1,3.9H6h3.9l-1.1,7.8H6L6,11.7z"/>
 </svg>

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": {
@@ -143,6 +143,7 @@
     "/img/container-site-d-24.png"
   ],
   "options_ui": {
-    "page": "options.html"
+    "page": "options.html",
+    "browser_style": true
   }
 }

src/options.html

@@ -3,20 +3,25 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="css/options.css">
   </head>
 
   <body>
     <form>
+      <h3>Optional Permissions:</h3>
       <label>
         <input type="checkbox" id="bookmarksPermissions">
         Enable Bookmark Menus
       </label>
-      <p>This setting allows you to open a bookmark or folder of bookmarks in a container.</p>
+      <p><em>This setting allows you to open a bookmark or folder of bookmarks in a container.</em></p>
+      <h3>Firefox Accounts Sync:</h3>
       <label>
         <input type="checkbox" id="syncCheck">
         Enable Sync
       </label>
-      <p>This setting allows you to sync your containers and site assignments across devices.</p>
+      <p><em>This setting allows you to sync your containers and site assignments across devices.</em></p>
+      <h3>Keyboard Shortcuts:</h3>
+      <p><em>Edit which container is opened when using the numbered shortcuts.</em></p>
       <p><label>
         Container to open with Keyboard Shortcut 1
         <select id="open_container_0">
@@ -67,7 +72,9 @@
         <select id="open_container_9">
         </select>
       </label></p>
-      <button>Reset Onboarding Panels </button>
+      <h3>Onboarding:</h3>
+      <button>Reset Onboarding Panels</button>
+      <p><em>Toggle this to see the onboarding panels again.</em></p>
     </form>
     <script src="js/options.js"></script>
   </body>