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

Merge branch 'master' into proxy-support

Browse Source
This commit is contained in:
luke crouch
2020-11-11 17:14:07 -06:00
parent 1a825ac507 f0afc0da36
commit 63996ce416
72 changed files with 4236 additions and 1819 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/popup.html
+244 -100
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">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,69 @@
<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 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">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">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">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">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">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">Done</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">
<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 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>
<div class="panel onboarding onboarding-panel-7 hide" id="onboarding-panel-7">
<img class="onboarding-img" alt="Firefox Account is required to sync" src="/img/Account.svg" />
<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 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>
<div class="panel achievement-panel hide" id="achievement-panel">
@@ -92,123 +112,247 @@
</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 container-panel hide" id="container-panel">
<div id="current-tab">
<h3>Current Tab</h3>
<div id="current-page"></div>
<label for="container-page-assigned">
<input type="checkbox" id="container-page-assigned" />
<span class="truncate-text">
Always open in
<span id="current-container"></span>
</span>
</label>
<div class="panel menu-panel container-panel hide" id="container-panel">
<h3 class="title">
Multi-Account Containers
</h3>
<a href="#" class="info-icon" id="info-icon" tabindex="10">
<img alt="info" src="/img/info-thin-16.svg" / >
</a>
<hr>
<table class="menu">
<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>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
</span>
</td>
</tr>
<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>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
</span>
</td>
</tr>
</table>
<hr>
<table class="menu">
<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>
<span class="menu-arrow">
</span>
</td>
</tr>
<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>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
</span>
</td>
</tr>
</table>
<hr>
<div class="sub-header">
Containers
</div>
<div class="container-panel-controls">
<a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
</div>
<div class="scrollable panel-content" tabindex="-1">
<table class="identities-list">
<tbody></tbody>
<div class="scrollable identities-list">
<table class="menu" id="identities-list">
<tr class="menu-item hover-highlight">
<td>
<div class="menu-item-name">
<div class="menu-icon">
<div class="usercontext-icon"
data-identity-icon="pet"
data-identity-color="blue"></div>
</div>
<span class="menu-text">Default</span>
</div>
<span class="menu-right-float">
<span class="container-count">22</span>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
</span>
</span>
</td>
</tr>
</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>
<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" />
</a>
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0">
Manage Containers
</div>
</div>
<div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
<div class="columns">
<div class="panel-back-arrow" id="close-container-info-panel">
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
</div>
<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>
</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"/>
<span id="container-info-hideorshow-label">Hide this container</span>
</div>
<div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
<div class="scrollable">
<table id="container-info-table" class="container-info-list">
</table>
</div>
</div>
<div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
<h3 class="title" id="container-info-title">
Personal
</h3>
<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 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>
<span class="menu-arrow">
</span>
</td>
</tr>
<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>
<span class="menu-arrow">
</span>
</td>
</tr>
<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>
<span class="menu-arrow">
</span>
</td>
</tr>
<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>
<span class="menu-arrow">
</span>
</td>
</tr>
</table>
<hr>
<div class="sub-header">
Open Tabs
</div>
</div>
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
<div class="panel-header">
<h3 class="panel-header-text">Edit Containers</h3>
</div>
<div class="scrollable panel-content">
<table class="unstriped">
<tbody id="edit-identities-list"></tbody>
<div class="scrollable">
<table class="menu" id="container-info-table">
<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>
<img class="trash-button" src="/img/container-close-tab.svg" />
</td>
</tr>
</table>
</div>
<div class="panel-footer edit-containers-panel-footer">
<a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">Exit Edit Mode</a>
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0">
Manage This Container
</div>
</div>
<div class="panel edit-container-panel hide" id="edit-container-panel">
<div class="columns">
<div class="panel-back-arrow" id="edit-container-panel-back-arrow">
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
</div>
<div class="column-panel-content">
<form id="edit-container-panel-form">
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
<fieldset>
<legend>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>
</fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend>Choose an icon</legend>
</fieldset>
<fieldset>
<legend>HTTP Proxy (Optional)</legend>
<input type="text" name="container-proxy" id="edit-container-panel-proxy" maxlength="15" placeholder="IP:PORT or USER:PASS@IP:PORT"/>
</fieldset>
</form>
<div id="edit-sites-assigned" class="scrollable" hidden>
<h3>Sites assigned to this container</h3>
<div class="assigned-sites-list">
</div>
<div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
<h3 class="title" id="picker-title">
Multi-Account Containers
</h3>
<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 keyboard-nav">
<td>
<div class="menu-icon">
<div class="usercontext-icon"
data-identity-icon="pet"
data-identity-color="blue">
</div>
</div>
<span class="menu-text">Default</span>
</td>
</tr>
</table>
</div>
</div>
<div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
<h3 class="title" id="container-edit-title">
Default
</h3>
<button class="btn-return arrow-left" id="close-container-edit-panel"></button>
<hr>
<div class="scrollable edit-form">
<form id="edit-container-panel-form">
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
<fieldset>
<legend class="form-header">Name</legend>
<input type="text" name="container-name" id="edit-container-panel-name-input" class="edit-container-panel-name-input" maxlength="25"/>
</fieldset>
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
<legend class="form-header">Color</legend>
</fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend class="form-header">Icon</legend>
</fieldset>
<fieldset>
<legend>HTTP Proxy (Optional)</legend>
<input type="text" name="container-proxy" id="edit-container-panel-proxy" maxlength="15" placeholder="IP:PORT or USER:PASS@IP:PORT"/>
</fieldset>
</form>
<div id="edit-container-options">
<div class="options-header">Options</div>
<div class="container-options">
<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="panel-footer">
<a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
<a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
<div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">Manage Site List...
</div>
</div>
</div>
<div class="delete-container">
<button class="delete-btn" id="delete-container-button">Delete This Container</button>
</div>
<div class="panel-footer">
<a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link">Cancel</a>
<a href="#" class="button expanded primary footer-button" id="create-container-ok-link">OK</a>
</div>
</div>
<div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
<h3 class="title" id="edit-assignments-title">
Default
</h3>
<button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
<hr>
<div class="scrollable edit-sites-assigned">
<div class="sub-header">Sites assigned to this container</div>
<table class="menu scrollable" id="edit-sites-assigned">
<tr class="menu-item hover-highlight" 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.mozillllllllllllllllllllllllllllla.org</span>
<img class="trash-button" src="/img/container-delete.svg" />
</td>
</tr>
</table>
</div>
</div>
<div class="hide panel delete-container-panel" id="delete-container-panel">
<div class="panel-header">
<span class="usercontext-icon" id="delete-container-icon"></span>
<h3 id="delete-container-name" class="panel-header-text container-name"></h3>
</div>
<h3 class="title" id="container-delete-title">
Default
</h3>
<button class="btn-return arrow-left" id="close-container-delete-panel"></button>
<hr>
<div class="panel-content delete-container-confirm">
<h4 class="delete-container-confirm-title">Remove This Container</h4>
<p><span id="delete-container-tab-warning"></span> Are you sure you want to remove this Container?</p>
<p class="delete-warning" id="delete-container-tab-warning"></p>
<p class="delete-warning">Are you sure you want to remove this Container?</p>
</div>
<div class="panel-footer">
<a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>