code review and feedback changes

2020-02-25 18:25:10 -06:00 · 2020-02-25 18:25:10 -06:00 · 807435ca4b
commit 807435ca4b
parent 2679c4e15f
13 changed files with 88 additions and 58 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -46,7 +46,7 @@ module.exports = {
      "error",
      {
        "escape": {
-          "taggedTemplates": ["escaped", "Utils.escaped"]
+          "taggedTemplates": ["Utils.escaped"]
        }
      }
    ],
--- a/src/css/popup.css
+++ b/src/css/popup.css
@ -392,7 +392,7 @@ manage things like container crud */
  background-image: var(--identity-icon);
  background-position: center center;
  background-repeat: no-repeat;
-  background-size: 16px 16px;
+  background-size: 16px;
  block-size: 100%;
  fill: var(--identity-icon-color);
  filter: url('/img/filters.svg#fill');
@ -402,7 +402,7 @@ manage things like container crud */
  background-image: url('/img/multiaccountcontainer-16.svg');
  background-position: center center;
  background-repeat: no-repeat;
-  background-size: 16px 16px;
+  background-size: 16px;
  block-size: 100%;
 }

@ -647,6 +647,9 @@ body {
  font-size: 13px;
  inline-size: 320px;
  letter-spacing: -0.1px;
+  --highlight-blue: #1296f8;
+  --hr-grey: #e3e3e3;
+  --text-grey: #737373;
 }

 h3.title {
@ -679,7 +682,7 @@ h3.title {
 }

 .hover-highlight:hover {
-  background: #1296f8;
+  background: var(--highlight-blue);
  color: #fff;
 }

@ -739,7 +742,7 @@ h3.title {

 hr {
  border: 0;
-  border-block-start: 1px solid #e3e3e3;
+  border-block-start: 1px solid var(--hr-grey);
  display: block;
  margin-block-end: 0;
  margin-block-start: 6px;
@ -752,7 +755,7 @@ hr {
 }

 .sub-header {
-  color: #737373;
+  color: var(--text-grey);
  height: 24px;
  line-height: 24px;
  padding-block-end: 0;
@ -762,7 +765,7 @@ hr {
 }

 .edit-form {
-  color: #737373;
+  color: var(--text-grey);
  flex: 1;
  padding-block-end: 0;
  padding-block-start: 0;
@ -778,7 +781,7 @@ hr {
 }

 .bottom-btn {
-  background-color: #e3e3e3;
+  background-color: var(--hr-grey);
  border: solid 1px #d9d9d9;
  cursor: pointer;
  height: 41px;
@ -794,7 +797,7 @@ hr {

 .delete-container {
  background-color: #fff;
-  border-block-start: solid 1px #e3e3e3;
+  border-block-start: solid 1px var(--hr-grey);
  cursor: default;
  display: flex;
  height: 65px;
@ -843,7 +846,7 @@ input {
  padding-inline-start: 0;
 }

-#edit-container-panel-name-input {
+.edit-container-panel-name-input {
  height: 29px;
 }

@ -851,7 +854,7 @@ input {
  height: 23px;
 }

-#site-isolation {
+.site-isolation {
  inset-block-end: auto;
  position: fixed;
 }
@ -861,19 +864,14 @@ input {
  padding-inline-start: 25px;
 }

-#manage-assigned-sites-list {
-  color: #5a9de6;
+.manage-assigned-sites-list {
+  color: var(--highlight-blue);
 }

-#info-icon {
-  border: solid 1px #000;
-  border-radius: 7px;
-  color: #000;
+.info-icon {
  cursor: pointer;
-  font-size: 10px;
-  font-weight: bold;
-  height: 14px;
-  inline-size: 14px;
+  height: 16px;
+  inline-size: 16px;
  inset-block-start: 13px;
  position: absolute;
  right: 13px;
@ -907,8 +905,3 @@ tr > td > .trash-button {
 tr:hover > td > .trash-button {
  display: block;
 }
-
-.new-container-icon {
-  font-size: 24px;
-  margin-block-start: -2px;
-}
--- a/src/img/container-openin-16.svg
+++ b/src/img/container-openin-16.svg
@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <rect x="1" y="1" width="6" height="6" rx="1"/>
+  <rect x="1" y="9" width="6" height="6" rx="1"/>
+  <rect x="9" y="9" width="6" height="6" rx="1"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.92 1.62a1 1 0 0 0-0.54-0.54A1 1 0 0 0 14 1h-4a1 1 0 0 0 0 2h1.59l-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L13 4.41V6a1 1 0 0 0 2 0V2a1 1 0 0 0-0.08-0.38z"/>
+</svg>
--- a/src/img/info-thin-16.svg
+++ b/src/img/info-thin-16.svg
@ -0,0 +1,13 @@
+<!-- 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/. -->
+<svg id="Flat_For_Export_" data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1{fill-rule:evenodd}
+    </style>
+  </defs>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" class="cls-1" d="M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" class="cls-1" d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/>
+  <circle cx="8" cy="5" r="1.19"/>
+</svg>
--- a/src/img/new-16.svg
+++ b/src/img/new-16.svg
@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 1 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"/>
+</svg>
--- a/src/img/open-in-new-16.svg
+++ b/src/img/open-in-new-16.svg
@ -1,7 +0,0 @@
-<!-- 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/. -->
-<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.92 1.62a1 1 0 0 0-0.54-0.54A1 1 0 0 0 14 1H9a1 1 0 0 0 0 2h2.59l-3.3 3.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L13 4.41V7a1 1 0 0 0 2 0V2a1 1 0 0 0-0.08-0.38z"/>
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 10a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h1a1 1 0 0 0 0-2H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1a1 1 0 0 0-1-1z"/>
-</svg>
--- a/src/js/background/backgroundLogic.js
+++ b/src/js/background/backgroundLogic.js
@ -1,4 +1,3 @@
-const NUMBER_OF_KEYBOARD_SHORTCUTS = 2;
 const DEFAULT_TAB = "about:newtab";
 const backgroundLogic = {
  NEW_TAB_PAGES: new Set([
@ -7,10 +6,11 @@ const backgroundLogic = {
    "about:home",
    "about:blank"
  ]),
+  NUMBER_OF_KEYBOARD_SHORTCUTS: 2,
  unhideQueue: [],
  init() {
    browser.commands.onCommand.addListener(function (command) {
-      for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
+      for (let i=0; i < this.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
        const key = "open_container_" + i;
        const cookieStoreId = identityState.keyboardShortcut[key];
        if (command === key) {
--- a/src/js/background/identityState.js
+++ b/src/js/background/identityState.js
@ -1,5 +1,3 @@
-const NUM_OF_KEYBOARD_SHORTCUTS = 2;
-
 window.identityState = {
  keyboardShortcut: {},
  storageArea: {
@ -51,7 +49,7 @@ window.identityState = {
    },

    async loadKeyboardShortcuts () {
-      for (let i=0; i < NUM_OF_KEYBOARD_SHORTCUTS; i++) {
+      for (let i=0; i < backgroundLogic.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
        const key = "open_container_" + i;
        const storageObject = await this.area.get(key);
        identityState.keyboardShortcut[key] = storageObject[key];
--- a/src/js/pageAction.js
+++ b/src/js/pageAction.js
@ -17,9 +17,8 @@ async function init() {
        </div>
        <span class="menu-text">${identity.name}</span>`;
    
-    fragment.appendChild(tr);
-
    tr.appendChild(td);
+    fragment.appendChild(tr);

    Utils.addEnterHandler(tr, async () => {
      Utils.alwaysOpenInContainer(identity);
--- a/src/js/popup.js
+++ b/src/js/popup.js
@ -725,6 +725,17 @@ Logic.registerPanel(P_CONTAINER_INFO, {
  async prepare() {
    const identity = Logic.currentIdentity();

+    const newTab = document.querySelector("#open-new-tab-in-info");
+    Utils.addEnterHandler(newTab, () => {
+      try {
+        browser.tabs.create({
+          cookieStoreId: identity.cookieStoreId
+        });
+        window.close();
+      } catch (e) {
+        window.close();
+      }
+    });
    // Populating the panel: name and icon
    document.getElementById("container-info-title").textContent = identity.name;
    
@ -922,7 +933,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
      <table class="menu">
        <tr class="menu-item hover-highlight" id="new-container" tabindex="0">
          <td>
-            <div class="menu-icon new-container-icon">+
+            <div class="menu-icon"><img alt="New Container" src="/img/new-16.svg" />
            </div>
            <span class="menu-text">New Container</span>
          </td>
--- a/src/manifest.json
+++ b/src/manifest.json
@ -41,16 +41,16 @@
      "description": "Open containers panel"
    },
    "open_container_0": {
-      "suggested_key": {
-        "default": "Ctrl+Shift+0"
-      },
-      "description": "Container Shortcut 0"
-    },
-    "open_container_1": {
      "suggested_key": {
        "default": "Ctrl+Shift+1"
      },
      "description": "Container Shortcut 1"
+    },
+    "open_container_1": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+2"
+      },
+      "description": "Container Shortcut 2"
    }
  },
  "browser_action": {
@ -68,7 +68,7 @@
  },
  "page_action": {
    "browser_style": true,
-    "default_icon": "img/multiaccountcontainer-16.svg",
+    "default_icon": "img/container-openin-16.svg",
    "default_title": "Always open this in a Container",
    "default_popup": "pageActionPopup.html",
    "pinned": false,
--- a/src/options.html
+++ b/src/options.html
@ -20,13 +20,11 @@
      <p><label>
        Container to open with Keyboard Shortcut 0
        <select id="open_container_0">
-          <!-- <option value="none">None</option> -->
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 1
        <select id="open_container_1">
-          <!-- <option value="none">None</option> -->
        </select>
      </label></p>
    </form>
--- a/src/popup.html
+++ b/src/popup.html
@ -119,7 +119,9 @@
    <h3 class="title">
      Multi-Account Containers
    </h3>
-    <a href="#" id="info-icon" tabindex="10">i</a>
+    <a href="#" class="info-icon" id="info-icon" tabindex="10">
+      <img alt="info" src="/img/info-thin-16.svg" / >
+    </a>
    <hr>
    <table class="menu">
      <tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
@ -153,7 +155,7 @@
      </tr>
      <tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
        <td>
-          <img class="menu-icon" alt="Open in New Tab" src="/img/open-in-new-16.svg" />
+          <img class="menu-icon" alt="Open in New Tab" src="/img/container-openin-16.svg" />
          <span class="menu-text">Always Open This Site in...</span>
            <span class="menu-arrow">
              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
@ -199,6 +201,14 @@
    <button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
    <hr>
    <table class="menu">
+      <tr class="menu-item hover-highlight" id="open-new-tab-in-info" tabindex="0">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
+          <span class="menu-text">Open New Tab in this Container</span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
      <tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
        <td>
          <img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
@ -217,7 +227,7 @@
      </tr>
      <tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
        <td>
-          <img class="menu-icon" alt="Always Open Site in Container" src="/img/open-in-new-16.svg" />
+          <img class="menu-icon" alt="Always Open Site in Container" src="/img/container-openin-16.svg" />
          <span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
            <span class="menu-arrow">
            </span>
@ -280,7 +290,7 @@
        <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
        <fieldset>
          <legend class="form-header">Name</legend>
-          <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
+          <input type="text" name="container-name" id="edit-container-panel-name-input" class="edit-container-panel-name-input" maxlength="25"/>
        </fieldset>
        <fieldset id="edit-container-panel-choose-color" class="radio-choice">
          <legend class="form-header">Color</legend>
@ -291,10 +301,10 @@
      </form>
      <div class="options-header">Options</div>
      <div class="container-options">
-        <input type="checkbox" id="site-isolation" name="site-isolation">
+        <input type="checkbox" class="site-isolation" id="site-isolation" name="site-isolation">
        <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
      </div>
-      <div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
+      <div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list">Manage Site List...
      </div>
    </div>
    <div class="delete-container">