Merge pull request #1686 from DeadlySurprise/fixCurrentContainerBtn

Fixes #1682 'open in current container button' not working

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.1",
+  "version": "6.2.3",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
@@ -37,6 +37,7 @@
   },
   "scripts": {
     "build": "npm test && cd src && web-ext build --overwrite-dest",
+    "webext": "web-ext run -s src/",
     "lint": "npm-run-all lint:*",
     "lint:addon": "addons-linter src --self-hosted",
     "lint:css": "stylelint src/css/*.css",

src/css/popup.css

@@ -390,6 +390,11 @@ table {
   background-color: #0675d3;
 }
 
+.onboarding-button:focus,
+.half-onboarding-button:focus {
+  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
 /* Pop buttons are the square shaped buttons used to
 manage things like container crud */
 .pop-button {

src/js/confirm-page.js

@@ -17,25 +17,14 @@ async function load() {
     const currentContainer = await browser.contextualIdentities.get(currentCookieStoreId);
     document.getElementById("current-container-name").textContent = currentContainer.name;
   }
-
-  document.getElementById("redirect-form").addEventListener("submit", (e) => {
+  document.getElementById("deny").addEventListener("click", (e) => {
     e.preventDefault();
-    let button = "confirm"; // Confirm is the form default.
-    let buttonTarget = e.explicitOriginalTarget;
-    if (buttonTarget.tagName !== "BUTTON") {
-      buttonTarget = buttonTarget.closest("button");
-    }
-    if (buttonTarget && buttonTarget.id) {
-      button = buttonTarget.id;
-    }
-    switch (button) {
-    case "deny":
-      denySubmit(redirectUrl);
-      break;
-    case "confirm":
-      confirmSubmit(redirectUrl, cookieStoreId);
-      break;
-    }
+    denySubmit(redirectUrl);
+  });
+
+  document.getElementById("confirm").addEventListener("click", (e) => {
+    e.preventDefault();
+    confirmSubmit(redirectUrl, cookieStoreId);
   });
 }
 

src/js/popup.js

@@ -611,7 +611,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     });
 
     document.addEventListener("keydown", (e) => {
-      const selectables = [...document.querySelectorAll("[tabindex='0'], [tabindex='-1']")];
+      const selectables = [...document.querySelectorAll(".open-newtab[tabindex='0']")];
       const element = document.activeElement;
       const index = selectables.indexOf(element) || 0;
       function next() {
@@ -633,14 +633,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       case 38:
         previous();
         break;
-      case 13: {
-        const panel = Logic.getCurrentPanelElement();
-        const button = panel.getElementsByTagName("A")[0];
-        if(button) {
-          button.click();
-        }
-        break;
-      }
       case 39:
       {
         const showTabs = element.parentNode.querySelector(".show-tabs");
@@ -660,7 +652,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       default:
         if ((e.keyCode >= 49 && e.keyCode <= 57) &&
             Logic._currentPanel === "containersList") {
-          const element = selectables[e.keyCode - 48];
+          const element = selectables[e.keyCode - 49];
           if (element) {
             element.click();
           }

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "6.2.1",
+  "version": "6.2.3",
   "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": {

src/popup.html

@@ -13,7 +13,7 @@
     <p>
       Use containers to organize tasks, manage accounts, and keep your focus where you want it.
     </p>
-    <a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
+    <a href="#" class="onboarding-button onboarding-start-button" tabindex="0">Get Started</a>
   </div>
 
   <div class="hide panel onboarding security-onboarding-panel-1">
@@ -22,49 +22,49 @@
     <p>
       Use containers to organize tasks, manage accounts, and store sensitive data.
     </p>
-    <a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
+    <a href="#" class="onboarding-button onboarding-start-button" tabindex="0">Get Started</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-2 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
     <h3 class="onboarding-title">Put containers to work for you.</h3>
     <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
-    <a href="#" class="onboarding-button onboarding-next-button">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding security-onboarding-panel-2 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
     <h3 class="onboarding-title">Put containers to work for you.</h3>
     <p>Color-coding helps you categorize your online life, find things easily, and minimize distractions.</p>
-    <a href="#" class="onboarding-button onboarding-next-button">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-3 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
     <h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
     <p>Start with the containers we've created, or create your own.</p>
-    <a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding security-onboarding-panel-3 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3-security.png" />
     <h3 class="onboarding-title">Set boundaries for your browsing.</h3>
     <p>Cookies are stored within a container, so you can segment sensitive data and browsing history to stay organized and to limit the impact of online trackers.</p>
-    <a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
     <img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
     <h3 class="onboarding-title">Always open sites in the containers you want.</h3>
     <p>Right-click inside a container tab to assign the site to always open in the container.</p>
-    <a href="#" id="onboarding-done-button" class="onboarding-button">Next</a>
+    <a href="#" id="onboarding-done-button" class="onboarding-button" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5">
     <img class="onboarding-img" alt="Long-press the New Tab button to create a new container tab." src="/img/onboarding-3.png" />
     <h3 class="onboarding-title">Container tabs when you need them.</h3>
     <p>Long-press the New Tab button to create a new container tab.</p>
-    <a href="#" id="onboarding-longpress-button" class="onboarding-button">Next</a>
+    <a href="#" id="onboarding-longpress-button" class="onboarding-button" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
@@ -72,8 +72,8 @@
     <h3 class="onboarding-title">Syncing Containers is now Available!</h3>
     <p>Turn on Sync to share container and site assignments with any computer connected to your Firefox Account.</p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sync" class="half-onboarding-button grey-button">Not Now</a>
-      <a href="#" id="start-sync-button" class="half-onboarding-button">Start Syncing</a>
+      <a herf="#" id="no-sync" class="half-onboarding-button grey-button" tabindex="0">Not Now</a>
+      <a href="#" id="start-sync-button" class="half-onboarding-button" tabindex="0">Start Syncing</a>
     </div>
   </div>
 
@@ -82,8 +82,8 @@
     <h3 class="onboarding-title">Firefox Account is required to sync.</h3>
     <p>Click Sign In to confirm that your Firefox Account is active.</p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sign-in" class="half-onboarding-button grey-button">Not Now</a>
-      <a href="#" id="sign-in" class="half-onboarding-button">Sign In</a>
+      <a herf="#" id="no-sign-in" class="half-onboarding-button grey-button" tabindex="0">Not Now</a>
+      <a href="#" id="sign-in" class="half-onboarding-button" tabindex="0">Sign In</a>
     </div>
   </div>