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

refactoring selectors in DOM to change based on class instead of tag names

Browse source
This commit is contained in:
silvererudite 2019-10-17 22:33:04 +06:00
parent e46f35f770
commit 3465a1257b
2 changed files with 33 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/js/check-theme.js
View file

@ -12,22 +12,14 @@ function getStyle(themeInfo) {
document.getElementById('current-tab').style.color=themeInfo.colors.tab_background_text;
const headers = document.getElementsByTagName('h3');
for (var i = 0; i < headers.length; i++) {
headers[i].style.color =themeInfo.colors.tab_background_text;
const colorChangingText = document.getElementsByClassName("tabBackgroundText");
for (var i = 0; i < colorChangingText.length; i++) {
colorChangingText[i].style.color =themeInfo.colors.tab_background_text;
}
const paras= document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
paras[i].style.color =themeInfo.colors.tab_background_text;
}
document.getElementById('sort-containers-link').style.color=themeInfo.colors.tab_background_text;
var legends1= document.getElementsByTagName('legend');
for (var i = 0; i < legends1.length; i++) {
legends1[i].style.color =themeInfo.colors.tab_background_text;
}
}

56
src/popup.html
View file

@ -9,8 +9,8 @@
<div class="hide panel onboarding onboarding-panel-1">
<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>
<h3 class="onboarding-title tabBackgroundText">A better way to manage all the things you do online</h3>
<p class="tabBackgroundText">
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>
@ -18,8 +18,8 @@
<div class="hide panel onboarding security-onboarding-panel-1">
<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>
<h3 class="onboarding-title tabBackgroundText">A simple and secure way to manage your online life</h3>
<p class="tabBackgroundText">
Use containers to organize tasks, manage accounts, and store sensitive data.
</p>
<a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
@ -27,51 +27,51 @@
<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>
<h3 class="onboarding-title tabBackgroundText">Put containers to work for you.</h3>
<p class="tabBackgroundText">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>
</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>
<h3 class="onboarding-title tabBackgroundText">Put containers to work for you.</h3>
<p class="tabBackgroundText">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>
</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>
<h3 class="onboarding-title tabBackgroundText">A place for everything, and everything in its place.</h3>
<p class="tabBackgroundText">Start with the containers we've created, or create your own.</p>
<a href="#" class="onboarding-button onboarding-almost-done-button">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>
<h3 class="onboarding-title tabBackgroundText">Set boundaries for your browsing.</h3>
<p class="tabBackgroundText">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>
</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>
<h3 class="onboarding-title tabBackgroundText">Always open sites in the containers you want.</h3>
<p class="tabBackgroundText">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>
</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>
<h3 class="onboarding-title tabBackgroundText">Container tabs when you need them.</h3>
<p class="tabBackgroundText">Long-press the New Tab button to create a new container tab.</p>
<a href="#" id="onboarding-longpress-button" class="onboarding-button">Done</a>
</div>
<div class="panel achievement-panel hide" id="achievement-panel">
<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>
<h3 class="onboarding-title tabBackgroundText">100 tabs!</h3>
<p class="tabBackgroundText">You've opened 100 Container tabs.</p>
<p class="tabBackgroundText">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">
<span class="cta amo-rate-cta">
@ -97,11 +97,11 @@
<div class="panel container-panel hide" id="container-panel">
<div id="current-tab">
<h3>Current Tab</h3>
<h3 class="tabBackgroundText">Current Tab</h3>
<div id="current-page"></div>
<label for="container-page-assigned">
<input type="checkbox" id="container-page-assigned" />
<span class="truncate-text">
<span class="truncate-text tabBackgroundText">
Always open in
<span id="current-container"></span>
</span>
@ -116,8 +116,8 @@
</table>
</div>
<div class="panel-footer edit-identities">
<div class="edit-containers-text panel-footer-secondary">
<a href="#" tabindex="0" id="edit-containers-link">Edit Containers</a>
<div class="edit-containers-text panel-footer-secondary ">
<a href="#" tabindex="0" id="edit-containers-link" >Edit Containers</a>
</div>
<a href="#" tabindex="0" class="add-container-link pop-button" id="container-add-link" title="Create new container">
<img class="pop-button-image-small icon" alt="Create new container icon" src="/img/container-add.svg" />
@ -134,7 +134,7 @@
<div class="column-panel-content">
<div class="panel-header container-info-panel-header">
<span class="usercontext-icon" id="container-info-icon"></span>
<h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
<h3 class="tabBackgroundText" id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
</div>
<div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/>
@ -152,7 +152,7 @@
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
<div class="panel-header">
<h3 class="panel-header-text">Edit Containers</h3>
<h3 class="panel-header-text tabBackgroundText">Edit Containers</h3>
</div>
<div class="scrollable panel-content">
<table class="unstriped">
@ -174,14 +174,14 @@
<form id="edit-container-panel-form">
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
<fieldset>
<legend>Name</legend>
<legend class="tabBackgroundText">Name</legend>
<input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
</fieldset>
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
<legend>Choose a color</legend>
<legend class="tabBackgroundText" >Choose a color</legend>
</fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend>Choose an icon</legend>
<legend class="tabBackgroundText">Choose an icon</legend>
</fieldset>
</form>
<div id="edit-sites-assigned" class="scrollable" hidden>