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

add onboarding and achievement tabindexes and firstFocus

Browse source
This commit is contained in:
dnahol 2019-11-02 05:08:47 -07:00
parent 869883ec85
commit e0a1a951ff
2 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/js/popup.js
View file

@ -292,9 +292,11 @@ const Logic = {
const panelEl = this.getCurrentPanelElement();
panelEl.classList.remove("hide");
const focusEl = panelEl.querySelector(".firstTabindex");
if(focusEl) {
focusEl.focus();
const firstFocus = panelEl.querySelector(".firstTabindex");
if(firstFocus) {
firstFocus.focus();
} else {
panelEl.focus();
}
},

42
src/popup.html
View file

@ -7,92 +7,92 @@
</head>
<body>
<div class="hide panel onboarding onboarding-panel-1">
<div class="hide panel onboarding onboarding-panel-1" tabindex="0">
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3 class="onboarding-title">A better way to manage all the things you do online</h3>
<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 firstTabindex" tabindex="0">Get Started</a>
</div>
<div class="hide panel onboarding security-onboarding-panel-1">
<div class="hide panel onboarding security-onboarding-panel-1" tabindex="0">
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3 class="onboarding-title">A simple and secure way to manage your online life</h3>
<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 firstTabindex" tabindex="0">Get Started</a>
</div>
<div class="panel onboarding onboarding-panel-2 hide">
<div class="panel onboarding onboarding-panel-2 hide" tabindex="0">
<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 firstTabindex" tabindex="0">Next</a>
</div>
<div class="panel onboarding security-onboarding-panel-2 hide">
<div class="panel onboarding security-onboarding-panel-2 hide" tabindex="0">
<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 firstTabindex" tabindex="0">Next</a>
</div>
<div class="panel onboarding onboarding-panel-3 hide">
<div class="panel onboarding onboarding-panel-3 hide" tabindex="0">
<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 firstTabindex" tabindex="0">Next</a>
</div>
<div class="panel onboarding security-onboarding-panel-3 hide">
<div class="panel onboarding security-onboarding-panel-3 hide" tabindex="0">
<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 firstTabindex" tabindex="0">Next</a>
</div>
<div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
<div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4" tabindex="0">
<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 firstTabindex" tabindex="0">Next</a>
</div>
<div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5">
<div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5" tabindex="0">
<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">Done</a>
<a href="#" id="onboarding-longpress-button" class="onboarding-button firstTabindex" tabindex="0">Done</a>
</div>
<div class="panel achievement-panel hide" id="achievement-panel">
<div class="panel achievement-panel hide" id="achievement-panel" tabindex="0">
<img class="onboarding-img" alt="You achieved a Containers milestone!" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">100 tabs!</h3>
<p>You've opened 100 Container tabs.</p>
<p>If you enjoy Containers, help us spread the word!</p>
<p class="share-ctas">
<a class="cta-link" href="https://mzl.la/2gJtIZ4" id="achievement-rate-button" target="_blank">
<a class="cta-link firstTabindex" tabindex="0" href="https://mzl.la/2gJtIZ4" id="achievement-rate-button" target="_blank">
<span class="cta amo-rate-cta">
<img src="/img/amo-icon.svg" class="cta-icon" alt="addons.mozilla.org Icon">
Rate
</span>
</a>
<a class="cta-link" href="https://bit.ly/fb-share-mac-addon" target="_blank">
<a class="cta-link" tabindex="0" href="https://bit.ly/fb-share-mac-addon" target="_blank">
<span class="cta fb-share-cta">
<img src="/img/webicon-facebook.svg" class="cta-icon" alt="Facebook Icon">
Share
</span>
</a>
<a class="cta-link" href="http://bit.ly/tweet-100-tabs-mac-addon" target="_blank">
<a class="cta-link" tabindex="0" href="http://bit.ly/tweet-100-tabs-mac-addon" target="_blank">
<span class="cta tweet-cta">
<img src="/img/webicon-twitter.svg" class="cta-icon" alt="Twitter Icon">
Tweet
</span>
</a>
</p>
<a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
<a tabindex="0" href="#" id="achievement-done-button" class="onboarding-button">Done</a>
</div>
<div class="panel container-panel hide" id="container-panel">