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

UX/UI Followup Issues
2020-07-09 11:58:33 -05:00 · 2020-07-09 11:58:33 -05:00 · 94885de85b
commit 94885de85b
parent 3b97e2722f bcd3aaeb92
7 changed files with 99 additions and 46 deletions
--- 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": [
--- 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"
@ -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"
  },
--- a/src/css/options.css
+++ b/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);
+  }
+}
--- 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 */
@ -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;
--- a/src/img/container-delete.svg
+++ b/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
-   - 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/. --><!-- 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">
-<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
+<!-- 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/. -->
+<!-- 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">
+	<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
 	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>
--- 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": {
@ -143,6 +143,7 @@
    "/img/container-site-d-24.png"
  ],
  "options_ui": {
-    "page": "options.html"
+    "page": "options.html",
+    "browser_style": true
  }
 }
--- a/src/options.html
+++ b/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,8 +72,10 @@
        <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>
-</html>
+</html>