Merge pull request #1663 from mozilla/bugfixes

Removed Enter Key Handler (fix for #1656, #1643, and #1637)

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.2",
   "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/popup.js

@@ -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");

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "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 @@ <h3 class="onboarding-title">A better way to manage all the things you do online
     <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,58 +22,58 @@ <h3 class="onboarding-title">A simple and secure way to manage your online life<
     <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">
     <img class="onboarding-img" alt="Syncing Containers is now Available!" src="/img/Sync.svg" />
     <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">Syncing Containers is now Available!</h3>
     <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>