wildtail/multi-account-containers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed first panel keyboard arrow nav. Added second panel keyboard nav.

Browse Source
This commit is contained in:
Kendall Werts
2020-07-11 14:47:30 -05:00
parent 94885de85b
commit 28222e510f
2 changed files with 112 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/popup.html
+28 -28
View File
@@ -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" tabindex="0">Get Started</a>
<a href="#" class="onboarding-button onboarding-start-button keyboard-nav" 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" tabindex="0">Get Started</a>
<a href="#" class="onboarding-button onboarding-start-button keyboard-nav" 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" tabindex="0">Next</a>
<a href="#" class="onboarding-button onboarding-next-button keyboard-nav" 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" tabindex="0">Next</a>
<a href="#" class="onboarding-button onboarding-next-button keyboard-nav" 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" tabindex="0">Next</a>
<a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" 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" tabindex="0">Next</a>
<a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" 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" tabindex="0">Next</a>
<a href="#" id="onboarding-done-button" class="onboarding-button keyboard-nav" 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" tabindex="0">Next</a>
<a href="#" id="onboarding-longpress-button" class="onboarding-button keyboard-nav" 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" tabindex="0">Not Now</a>
<a href="#" id="start-sync-button" class="half-onboarding-button" tabindex="0">Start Syncing</a>
<a herf="#" id="no-sync" class="half-onboarding-button grey-button keyboard-nav" tabindex="0">Not Now</a>
<a href="#" id="start-sync-button" class="half-onboarding-button keyboard-nav" 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" tabindex="0">Not Now</a>
<a href="#" id="sign-in" class="half-onboarding-button" tabindex="0">Sign In</a>
<a herf="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0">Not Now</a>
<a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0">Sign In</a>
</div>
</div>
@@ -112,7 +112,7 @@
</span>
</a>
</p>
<a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
<a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav">Done</a>
</div>
<div class="panel menu-panel container-panel hide" id="container-panel">
@@ -124,7 +124,7 @@
</a>
<hr>
<table class="menu">
<tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="open-new-tab-in" 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...</span>
@@ -133,7 +133,7 @@
</span>
</td>
</tr>
<tr class="menu-item hover-highlight" id="reopen-site-in" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="reopen-site-in" tabindex="0">
<td>
<img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
<span class="menu-text">Reopen This Site in...</span>
@@ -145,7 +145,7 @@
</table>
<hr>
<table class="menu">
<tr class="menu-item hover-highlight" id="sort-containers-link" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="sort-containers-link" tabindex="0">
<td>
<img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
<span class="menu-text">Sort Tabs by Container</span>
@@ -153,7 +153,7 @@
</span>
</td>
</tr>
<tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="always-open-in" tabindex="0">
<td>
<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>
@@ -188,7 +188,7 @@
</tr>
</table>
</div>
<div class="bottom-btn" id="manage-containers-link" tabindex="0">
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0">
Manage Containers
</div>
</div>
@@ -198,10 +198,10 @@
<h3 class="title" id="container-info-title">
Personal
</h3>
<button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
<button class="btn-return arrow-left keyboard-nav-back" 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">
<tr class="menu-item hover-highlight keyboard-nav" 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>
@@ -209,7 +209,7 @@
</span>
</td>
</tr>
<tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="hideorshow-container" tabindex="0">
<td>
<img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
<span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
@@ -217,7 +217,7 @@
</span>
</td>
</tr>
<tr class="menu-item hover-highlight" id="move-to-new-window" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="move-to-new-window" tabindex="0">
<td>
<img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
<span class="menu-text">Move Tabs to a New Window</span>
@@ -225,7 +225,7 @@
</span>
</td>
</tr>
<tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" id="always-open" tabindex="0">
<td>
<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>
@@ -240,7 +240,7 @@
</div>
<div class="scrollable">
<table class="menu" id="container-info-table">
<tr class="menu-item hover-highlight" tabindex="0">
<tr class="menu-item hover-highlight keyboard-nav" tabindex="0">
<td>
<div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
<span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
@@ -249,7 +249,7 @@
</tr>
</table>
</div>
<div class="bottom-btn" id="manage-container-link">
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0">
Manage This Container
</div>
</div>
@@ -259,12 +259,12 @@
<h3 class="title" id="picker-title">
Multi-Account Containers
</h3>
<button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
<button class="btn-return arrow-left keyboard-nav-back" id="close-container-picker-panel" tabindex="0"></button>
<hr>
<div id="new-container-div"></div>
<div class="scrollable identities-list">
<table class="menu" id="picker-identities-list">
<tr class="menu-item hover-highlight">
<tr class="menu-item hover-highlight keyboard-nav">
<td>
<div class="menu-icon">
<div class="usercontext-icon"
@@ -305,7 +305,7 @@
<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 manage-assigned-sites-list" id="manage-assigned-sites-list">Manage Site List...
<div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">Manage Site List...
</div>
</div>
</div>