WIP assignment controls. Fixes #499

mozilla · May 25, 2017 · 4f6e913 · 4f6e913
1 parent 69d497b
commit 4f6e913
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 67 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 README.html
 *.xpi
 *.swp
+*.swo
 .vimrc
 .env
 addon.env
diff --git a/webextension/background.js b/webextension/background.js
@@ -84,38 +84,7 @@ const assignManager = {
 
   init() {
     browser.contextMenus.onClicked.addListener((info, tab) => {
-      const userContextId = this.getUserContextIdFromCookieStore(tab);
-      // Mapping ${URL(info.pageUrl).hostname} to ${userContextId}
-      if (userContextId) {
-        let actionName;
-        let storageAction;
-        if (info.menuItemId === this.MENU_ASSIGN_ID) {
-          actionName = "added";
-          storageAction = this.storageArea.set(info.pageUrl, {
-            userContextId,
-            neverAsk: false,
-            exempted: []
-          });
-        } else {
-          actionName = "removed";
-          storageAction = this.storageArea.remove(info.pageUrl);
-        }
-        storageAction.then(() => {
-          browser.notifications.create({
-            type: "basic",
-            title: "Containers",
-            message: `Successfully ${actionName} site to always open in this container`,
-            iconUrl: browser.extension.getURL("/img/onboarding-1.png")
-          });
-          backgroundLogic.sendTelemetryPayload({
-            event: `${actionName}-container-assignment`,
-            userContextId: userContextId,
-          });
-          this.calculateContextMenu(tab);
-        }).catch((e) => {
-          throw e;
-        });
-      }
+      this._onClickedHandler(info, tab);
     });
 
     // Before a request is handled by the browser we decide if we should route through a different container
@@ -163,6 +132,26 @@ const assignManager = {
     },{urls: ["<all_urls>"], types: ["main_frame"]}, ["blocking"]);
   },
 
+  async _onClickedHandler(info, tab) {
+    const userContextId = this.getUserContextIdFromCookieStore(tab);
+    // Mapping ${URL(info.pageUrl).hostname} to ${userContextId}
+    if (userContextId) {
+     // let actionName;
+      let remove;
+      if (info.menuItemId === this.MENU_ASSIGN_ID) {
+        //actionName = "added";
+       // storageAction = this._setAssignment(info.pageUrl, userContextId, setOrRemove);
+        remove = false;
+      } else {
+       // actionName = "removed";
+        //storageAction = this.storageArea.remove(info.pageUrl);
+        remove = true;
+      }
+      await this._setOrRemoveAssignment(info.pageUrl, userContextId, remove);
+      this.calculateContextMenu(tab);
+    }
+  },
+
 
   deleteContainer(userContextId) {
     this.storageArea.deleteContainer(userContextId);
@@ -191,36 +180,63 @@ const assignManager = {
     return true;
   },
 
-  calculateContextMenu(tab) {
+  async _setOrRemoveAssignment(pageUrl, userContextId, remove) {
+    let storageAction;
+    if (!remove) {
+      await this.storageArea.set(pageUrl, {
+        userContextId,
+        neverAsk: false,
+        exempted: []
+      });
+      actionName = "added";
+    } else {
+      await this.storageArea.remove(pageUrl);
+      actionName = "removed";
+    }
+    browser.notifications.create({
+      type: "basic",
+      title: "Containers",
+      message: `Successfully ${actionName} site to always open in this container`,
+      iconUrl: browser.extension.getURL("/img/onboarding-1.png")
+    });
+    backgroundLogic.sendTelemetryPayload({
+      event: `${actionName}-container-assignment`,
+      userContextId: userContextId,
+    });
+  },
+
+  async _getAssignment(tab) {
+    const cookieStore = this.getUserContextIdFromCookieStore(tab);
+    // Ensure we have a cookieStore to assign to
+    if (cookieStore
+        && this.isTabPermittedAssign(tab)) {
+      return await this.storageArea.get(tab.url);
+    }
+    return false;
+  },
+
+  async calculateContextMenu(tab) {
     // There is a focus issue in this menu where if you change window with a context menu click
     // you get the wrong menu display because of async
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1215376#c16
     // We also can't change for always private mode
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1352102
-    const cookieStore = this.getUserContextIdFromCookieStore(tab);
     browser.contextMenus.remove(this.MENU_ASSIGN_ID);
     browser.contextMenus.remove(this.MENU_REMOVE_ID);
-    // Ensure we have a cookieStore to assign to
-    if (cookieStore
-        && this.isTabPermittedAssign(tab)) {
-      this.storageArea.get(tab.url).then((siteSettings) => {
-        // ✓ This is to mitigate https://bugzilla.mozilla.org/show_bug.cgi?id=1351418
-        let prefix = "   "; // Alignment of non breaking space, unknown why this requires so many spaces to align with the tick
-        let menuId = this.MENU_ASSIGN_ID;
-        if (siteSettings) {
-          prefix = "✓";
-          menuId = this.MENU_REMOVE_ID;
-        }
-        browser.contextMenus.create({
-          id: menuId,
-          title: `${prefix} Always Open in This Container`,
-          checked: true,
-          contexts: ["all"],
-        });
-      }).catch((e) => {
-        throw e;
-      });
+    const siteSettings = await this._getAssignment(tab);
+    // ✓ This is to mitigate https://bugzilla.mozilla.org/show_bug.cgi?id=1351418
+    let prefix = "   "; // Alignment of non breaking space, unknown why this requires so many spaces to align with the tick
+    let menuId = this.MENU_ASSIGN_ID;
+    if (siteSettings) {
+      prefix = "✓";
+      menuId = this.MENU_REMOVE_ID;
     }
+    browser.contextMenus.create({
+      id: menuId,
+      title: `${prefix} Always Open in This Container`,
+      checked: true,
+      contexts: ["all"],
+    });
   },
 
   reloadPageInContainer(url, currentUserContextId, userContextId, index, neverAsk = false) {
@@ -396,6 +412,17 @@ const messageHandler = {
       case "neverAsk":
         assignManager._neverAsk(m);
         break;
+      case "getAssignment":
+        response = browser.tabs.get(m.tabId).then((tab) => {
+          return assignManager._getAssignment(tab);
+        });
+        break;
+      case "setOrRemoveAssignment":
+        response = browser.tabs.get(m.tabId).then((tab) => {
+          const userContextId = assignManager.getUserContextIdFromCookieStore(tab);
+          return assignManager._setOrRemoveAssignment(tab.url, userContextId, m.value);
+        });
+        break;
       case "exemptContainerAssignment":
         response = assignManager._exemptTab(m);
         break;

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
@@ -8,6 +8,11 @@ html {
   box-sizing: border-box;
 }
 
+:root {
+  --font-size-heading: 16px;
+  --primary-action-color: #248aeb;
+}
+
 *,
 *::before,
 *::after {
@@ -35,6 +40,10 @@ table {
   overflow: auto;
 }
 
+.offpage {
+  opacity: 0;
+}
+
 /* Color and icon helpers */
 [data-identity-color="blue"] {
   --identity-tab-color: #37adff;
@@ -140,6 +149,18 @@ table {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
+/* Text links with actions */
+
+.action-link:link {
+  color: var(--primary-action-color);
+  text-decoration: none;
+}
+
+.action-link:active,
+.action-link:hover {
+  text-decoration: underline;
+}
+
 /* Panels keep everything togethert */
 .panel {
   display: flex;
@@ -223,7 +244,7 @@ table {
 
 .onboarding-title {
   color: #43484e;
-  font-size: 16px;
+  font-size: var(--font-size-heading);
   margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-end: 0;
@@ -312,7 +333,7 @@ manage things like container crud */
 .panel-header-text {
   color: #4a4a4a;
   flex: 1;
-  font-size: 16px;
+  font-size: var(--font-size-heading);
   font-weight: normal;
   margin-block-end: 0;
   margin-block-start: 0;
@@ -324,13 +345,87 @@ manage things like container crud */
   padding-inline-start: 16px;
 }
 
+#container-panel .panel-header {
+  block-size: 26px;
+  background-color: #efefef;
+  font-size: 14px;
+}
+
+#container-panel .panel-header-text {
+  font-size: 14px;
+  text-transform: uppercase;
+  color: #727272;
+  padding-block-end: 0;
+  padding-block-start: 0;
+}
+
+#container-panel .sort-containers-link {
+  margin-inline-end: 16px;
+}
+
 span ~ .panel-header-text {
   padding-block-end: 0;
   padding-block-start: 0;
   padding-inline-end: 0;
   padding-inline-start: 0;
 }
 
+#current-tab {
+  max-inline-size: 100%;
+  min-block-size: 94px;
+  padding-block-end: 16px;
+  padding-block-start: 16px;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+}
+
+#current-tab > h3 {
+  color: #4a4a4a;
+  font-size: var(--font-size-heading);
+  font-weight: normal;
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+
+#current-page {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#current-page > img {
+  block-size: 16px;
+  inline-size: 16px;
+}
+
+#current-tab > label {
+  align-items: center;
+  display: flex;
+  margin-inline-start: 17px;
+}
+
+#current-tab > label > input {
+  display: inline;
+}
+#current-tab > label > img {
+  block-size: 12px;
+  display: inline-block;
+  inline-size: 12px;
+}
+
+#current-container {
+  display: contents;
+  text-transform: lowercase;
+}
+
+#current-container > .usercontext-icon {
+  block-size: 16px;
+  display: block;
+  flex: 0 0 20px;
+  inline-size: 20px;
+  background-size: 16px;
+}
+
 /* Rows used when iterating over panels */
 .container-panel-row {
   align-items: center;
@@ -501,7 +596,7 @@ span ~ .panel-header-text {
 
 .edit-containers-exit-text {
   align-items: center;
-  background: #248aeb;
+  background: var(--primary-action-color);
   block-size: 100%;
   color: #fff;
   display: flex;
@@ -528,7 +623,7 @@ span ~ .panel-header-text {
 
 .delete-container-confirm-title {
   color: #000;
-  font-size: 16px;
+  font-size: var(--font-size-heading);
 }
 
 /* Form info */