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(); const panelEl = this.getCurrentPanelElement();
panelEl.classList.remove("hide"); panelEl.classList.remove("hide");
const focusEl = panelEl.querySelector(".firstTabindex"); const firstFocus = panelEl.querySelector(".firstTabindex");
if(focusEl) { if(firstFocus) {
focusEl.focus(); firstFocus.focus();
} else {
panelEl.focus();
} }
}, },

42
src/popup.html
View file

@ -7,92 +7,92 @@
</head> </head>
<body> <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" /> <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> <h3 class="onboarding-title">A better way to manage all the things you do online</h3>
<p> <p>
Use containers to organize tasks, manage accounts, and keep your focus where you want it. Use containers to organize tasks, manage accounts, and keep your focus where you want it.
</p> </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>
<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" /> <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> <h3 class="onboarding-title">A simple and secure way to manage your online life</h3>
<p> <p>
Use containers to organize tasks, manage accounts, and store sensitive data. Use containers to organize tasks, manage accounts, and store sensitive data.
</p> </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>
<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" /> <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
<h3 class="onboarding-title">Put containers to work for you.</h3> <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> <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>
<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" /> <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
<h3 class="onboarding-title">Put containers to work for you.</h3> <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> <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>
<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" /> <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> <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> <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>
<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" /> <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3-security.png" />
<h3 class="onboarding-title">Set boundaries for your browsing.</h3> <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> <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>
<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" /> <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> <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> <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>
<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" /> <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> <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> <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>
<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" /> <img class="onboarding-img" alt="You achieved a Containers milestone!" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">100 tabs!</h3> <h3 class="onboarding-title">100 tabs!</h3>
<p>You've opened 100 Container tabs.</p> <p>You've opened 100 Container tabs.</p>
<p>If you enjoy Containers, help us spread the word!</p> <p>If you enjoy Containers, help us spread the word!</p>
<p class="share-ctas"> <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"> <span class="cta amo-rate-cta">
<img src="/img/amo-icon.svg" class="cta-icon" alt="addons.mozilla.org Icon"> <img src="/img/amo-icon.svg" class="cta-icon" alt="addons.mozilla.org Icon">
Rate Rate
</span> </span>
</a> </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"> <span class="cta fb-share-cta">
<img src="/img/webicon-facebook.svg" class="cta-icon" alt="Facebook Icon"> <img src="/img/webicon-facebook.svg" class="cta-icon" alt="Facebook Icon">
Share Share
</span> </span>
</a> </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"> <span class="cta tweet-cta">
<img src="/img/webicon-twitter.svg" class="cta-icon" alt="Twitter Icon"> <img src="/img/webicon-twitter.svg" class="cta-icon" alt="Twitter Icon">
Tweet Tweet
</span> </span>
</a> </a>
</p> </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>
<div class="panel container-panel hide" id="container-panel"> <div class="panel container-panel hide" id="container-panel">