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

Start i18n

Browse source
This commit is contained in:
Lesley Norton 2021-09-16 10:55:54 -05:00
parent 50f5ebfcff
commit 05dc48eac2
No known key found for this signature in database
GPG key ID: E98FBAEE3F13956E
8 changed files with 415 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

256
src/_locales/en/messages.json Normal file
View file

@ -0,0 +1,256 @@
{
"openInNewTabTitle": {
"message": "Open New Tab in…",
"description": "Menu title"
},
"reopenThisSiteIn": {
"message": "Reopen This Site in…",
"description": "Menu title"
},
"sortTabsByContainer": {
"message": "Sort Tabs by Container",
"description": "Menu title"
},
"alwaysOpenThisSiteIn": {
"message": "Always Open This Site in…",
"description": "Menu title"
},
"alwaysOpenSiteInContainer": {
"message": "Always Open Site in Container"
},
"openNewTabInThisContainer": {
"message" : "Open New Tab in this Container"
},
"openTabs": {
"message": "Open Tabs"
},
"moveTabsToANewWindow": {
"message": "Move Tabs to a New Window"
},
"onboarding-1-header": {
"message": "A better way to manage all the things you do online"
},
"onboarding-1-description": {
"message": "Use containers to organize tasks, manage accounts, and keep your focus where you want it."
},
"onboarding-1-sec-header": {
"message": "A simple and secure way to manage your online life"
},
"onboarding-1-sec-description": {
"message" : "Use containers to organize tasks, manage accounts, and store sensitive data."
},
"onboarding-2-header": {
"message": "Put containers to work for you."
},
"onboarding-2-description": {
"message": "Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions."
},
"onboarding-2-sec-description": {
"message": "Color-coding helps you categorize your online life, find things easily, and minimize distractions."
},
"onboarding-3-header": {
"message": "A place for everything, and everything in its place."
},
"onboarding-3-description": {
"message": "Start with the containers we've created, or create your own."
},
"onboarding-3-sec-header": {
"message": "Set boundaries for your browsing."
},
"onboarding-3-sec-description": {
"message": "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."
},
"onboarding-4-header": {
"message": "Always open sites in the containers you want."
},
"onboarding-4-description": {
"message": "Right-click inside a container tab to assign the site to always open in the container."
},
"onboarding-5-header": {
"message": "Container tabs when you need them."
},
"onboarding-5-description": {
"message": "Long-press the New Tab button to create a new container tab."
},
"onboarding-6-header": {
"message": "Syncing Containers is now Available!"
},
"onboarding-6-description": {
"message": "Turn on Sync to share container and site assignments with any computer connected to your Firefox Account."
},
"onboarding-7-header": {
"message": "Firefox Account is required to sync."
},
"onboarding-7-description": {
"message": "Click Sign In to confirm that your Firefox Account is active."
},
"oneHundredTabsHeader": {
"message": "100 tabs!"
},
"youHaveOpened": {
"message": "You've opened 100 Container tabs."
},
"spreadTheWord": {
"message": "If you enjoy Containers, help us spread the word!"
},
"rate": {
"message": "Rate"
},
"share": {
"message": "Share"
},
"tweet": {
"message": "Tweet"
},
"default": {
"message": "Default"
},
"manageContainers": {
"message": "Manage Containers"
},
"hideThisContainer": {
"message": "Hide This Container"
},
"removeThisContainer": {
"message": "Remove This Container"
},
"removeThisContainerConfirmation": {
"message": "Are you sure you want to remove this Container?"
},
"cancel": {
"message": "Cancel"
},
"ok": {
"message": "OK"
},
"sitesAssignedToThisContainer": {
"message": "Sites assigned to this container"
},
"options": {
"message": "Options"
},
"name": {
"message": "Name"
},
"color": {
"message": "Color"
},
"icon": {
"message": "Icon"
},
"limitToDesignatedSites": {
"message": "Limit to Designated Sites"
},
"deleteThisContainer": {
"message": "Delete This Container"
},
"manageSiteList": {
"message": "Manage Site List…"
},
"manageThisContainer": {
"message": "Manage This Container"
},
"containers": {
"message": "Containers"
},
"done": {
"message": "Done"
},
"getStarted": {
"message": "Get Started"
},
"signIn": {
"message": "Sign In"
},
"notNow": {
"message": "Not Now"
},
"startSyncing": {
"message": "Start Syncing"
},
"info": {
"message": "info"
},
"next": {
"message": "Next"
},
"openThisSiteConfirmation": {
"message": "Open this site in your assigned container?"
},
"wouldYouStillLikeToOpenConfirmation": {
"message": "Would you still like to open in this current container?"
},
"rememberMyDecision": {
"message": " Remember my decision for this site"
},
"optionalPermissions": {
"message": "Optional Permissions:"
},
"keyboardShortCuts": {
"message": "Keyboard Shortcuts:"
},
"onboarding": {
"message": "Onboarding"
},
"resetOnboardingPanels": {
"message": "Reset Onboarding Panels"
},
"onboardingToggle": {
"message": "Toggle this to see the onboarding panels again."
},
"tabBehavior": {
"message": "Tab behavior:"
},
"firefoxAccountsSync": {
"message": "Firefox Accounts Sync:"
},
"enableBookMarkMenus": {
"message": "Enable Bookmark Menus"
},
"enableSync": {
"message": "Enable Sync"
},
"enableBookMarkMenusDescription": {
"message": "This setting allows you to open a bookmark or folder of bookmarks in a container."
},
"enableSyncDescription": {
"message": "This setting allows you to sync your containers and site assignments across devices."
},
"replaceTab": {
"message": "This setting allows you to sync your containers and site assignments across devices."
},
"replaceTabDescription": {
"message": "Replace the current tab if a page which is assigned to another container is opened (instead of keeping the current tab open). Opening tabs with middle mouse button is not affected."
},
"editWhichContainer": {
"message": "Edit which container is opened when using the numbered shortcuts."
},
"keyboardShortCut": {
"message": "Container to open with Keyboard Shortcut $keyId$",
"placeholders": {
"keyId": {
"content": "$1"
}
}
},
"confirmNavigationTitle": {
"message": "Multi-Account Containers Confirm Navigation",
"description": "This is the title of a confirmation page. Please do not translate \"Multi-Account Containers\"."
},
"openInContainer": {
"message": "Open in $containerName$ Container",
"placeholders": {
"containerName": {
"content": "$1"
}
}
},
"youAskedFirefox": {
"message": "You asked Firefox to always open $containerName$ for this site:",
"placeholders": {
"containerName": {
"content": "$1"
}
}
}
}

17
src/confirm-page.html
View file

@ -1,31 +1,30 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multi-Account Containers Confirm Navigation</title>
<title data-i18n-message-id="confirmNavigationTitle"></title>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="chrome://browser/skin/aboutNetError.css" type="text/css" media="all" />
<script type="text/javascript" src="./js/i18n.js"></script>
<link rel="stylesheet" href="/css/confirm-page.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="title-text">Open this site in your assigned container?</h1>
<h1 class="title-text" data-i18n-message-id="openThisSiteConfirmation"></h1>
</div>
<form id="redirect-form">
<p>
You asked <dfn id="browser-name" title="Thanks for trying out Containers. Sorry we may have got your browser name wrong. #FxNightly" >Firefox</dfn> to always open <dfn class="container-name"></dfn> for this site:<br />
</p>
<p data-message-id="youAskedFireFox" data-message-arg="container-name"></p>
<div id="redirect-url"></div>
<p>Would you still like to open in this current container?</p>
<p data-i18n-message-id="wouldYouStillLikeToOpenConfirmation"></p>
<br />
<br />
<label for="never-ask" class="check-label">
<input id="never-ask" type="checkbox" />
Remember my decision for this site
<span data-i18n-message-id="rememberMyDecision"></span>
</label>
<br />
<div class="button-container">
<button id="deny" class="button">Open in <dfn id="current-container-name">Current</dfn> Container</button>
<button id="confirm" class="button primary" autofocus>Open in <dfn class="container-name"></dfn> Container</button>
<button id="deny" class="button" data-message-id="openInContainer" data-message-arg="current-container-name"></button>
<button id="confirm" class="button primary" data-message-id="openInContainer" data-message-arg="container-name"></button>
</div>
</form>
</main>

20
src/js/confirm-page.js
View file

@ -7,21 +7,21 @@ async function load() {
redirectUrlElement.textContent = redirectUrl;
appendFavicon(redirectUrl, redirectUrlElement);
const container = await browser.contextualIdentities.get(cookieStoreId);
[...document.querySelectorAll(".container-name")].forEach((containerNameElement) => {
containerNameElement.textContent = container.name;
});
// If default container, button will default to normal HTML content
if (currentCookieStoreId) {
const currentContainer = await browser.contextualIdentities.get(currentCookieStoreId);
document.getElementById("current-container-name").textContent = currentContainer.name;
}
document.getElementById("deny").addEventListener("click", (e) => {
e.preventDefault();
denySubmit(redirectUrl);
});
const container = await browser.contextualIdentities.get(cookieStoreId);
const currentContainer = currentCookieStoreId ? await browser.contextualIdentities.get(currentCookieStoreId) : null;
const currentContainerName = currentContainer ? currentContainer.name : ""
document.querySelectorAll("[data-message-id]").forEach(el => {
const elementData = el.dataset;
const containerName = elementData.messageArg === "container-name" ? container.name : currentContainerName;
el.textContent = browser.i18n.getMessage(elementData.messageId, containerName);
});
document.getElementById("confirm").addEventListener("click", (e) => {
e.preventDefault();
confirmSubmit(redirectUrl, cookieStoreId);

9
src/js/i18n.js Normal file
View file

@ -0,0 +1,9 @@
document.addEventListener("DOMContentLoaded", async () => {
document.querySelectorAll("[data-i18n-message-id]").forEach(el => {
const messageArgs = el.dataset.i18nPlaceholder ? el.dataset.i18nPlaceholder : null;
el.textContent = browser.i18n.getMessage(el.dataset.i18nMessageId, [messageArgs]);
});
document.querySelectorAll("[data-i18n-attribute]").forEach(el => {
el.setAttribute(el.dataset.i18nAttribute, browser.i18n.getMessage(el.dataset.i18nAttributeMessageId));
});
});

1
src/manifest.json
View file

@ -140,6 +140,7 @@
"run_at": "document_start"
}
],
"default_locale": "en",
"web_accessible_resources": [
"/img/container-site-d-24.png"
],

53
src/options.html
View file

@ -3,85 +3,86 @@
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./js/i18n.js"></script>
<link rel="stylesheet" href="css/options.css">
</head>
<body>
<form>
<h3>Optional Permissions:</h3>
<label>
<h3 data-i18n-message-id="optionalPermissions"></h3>
<label >
<input type="checkbox" id="bookmarksPermissions">
Enable Bookmark Menus
<span data-i18n-message-id="enableBookMarkMenus"></span>
</label>
<p><em>This setting allows you to open a bookmark or folder of bookmarks in a container.</em></p>
<h3>Firefox Accounts Sync:</h3>
<p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
<h3 data-i18n-message-id="firefoxAccountsSync"></h3>
<label>
<input type="checkbox" id="syncCheck">
Enable Sync
<span data-i18n-message-id="enableSync"></span>
</label>
<p><em>This setting allows you to sync your containers and site assignments across devices.</em></p>
<h3>Tab behaviour:</h3>
<p><em data-i18n-message-id="enableSyncDescription"></em></p>
<h3 data-i18n-message-id="tabBehavior"></h3>
<label>
<input type="checkbox" id="replaceTabCheck">
Replace tab instead of creating a new one
<span data-i18n-message-id="replaceTab"></span>
</label>
<p><em>Replace the current tab if a page which is assigned to another container is opened (instead of keeping the current tab open).
Opening tabs with middle mouse button is not affected.</em></p>
<h3>Keyboard Shortcuts:</h3>
<p><em>Edit which container is opened when using the numbered shortcuts.</em></p>
<p><em data-i18n-message-id="replaceTabDescription"></em></p>
<h3 data-i18n-message-id="keyboardShortCuts"></h3>
<p><em data-i18n-message-id="editWhichContainer"></em></p>
<p><label>
Container to open with Keyboard Shortcut 1
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="1"></span>
<select id="open_container_0">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 2
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="2"></span>
<select id="open_container_1">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 3
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="3"></span>
<select id="open_container_2">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 4
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="4"></span>
<select id="open_container_3">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 5
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="5"></span>
<select id="open_container_4">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 6
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="6"></span>
<select id="open_container_5">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 7
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="7"></span>
<select id="open_container_6">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 8
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="8"></span>
<select id="open_container_7">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 9
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="9"></span>
<select id="open_container_8">
</select>
</label></p>
<p><label>
Container to open with Keyboard Shortcut 10
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="10"></span>
<select id="open_container_9">
</select>
</label></p>
<h3>Onboarding:</h3>
<button>Reset Onboarding Panels</button>
<p><em>Toggle this to see the onboarding panels again.</em></p>
<h3 data-i18n-message-id="onboarding"></h3>
<button data-i18n-message-id="resetOnboardingPanels"></button>
<p><em data-i18n-message-id="onboardingToggle"></em></p>
</form>
<script src="js/options.js"></script>
</body>

7
src/pageActionPopup.html
View file

@ -2,15 +2,14 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multi-Account Containers</title>
<script type="text/javascript" src="./js/i18n.js"></script>
<link rel="stylesheet" type="text/css" href="css/popup.css">
</head>
<body>
<div class="page-action-container-picker" id="container-picker-panel">
<h3 class="title">
Always Open this Site in...
</h3>
<h3 class="title" data-i18n-message-id="alwaysOpenThisSiteIn"></h3>
<hr>
<div class="scrollable identities-list">
<table class="menu" id="picker-identities-list">
@ -22,7 +21,7 @@
data-identity-color="blue">
</div>
</div>
<span class="menu-text">Default</span>
<span class="menu-text" data-i18n-message-id="default"></span>
</td>
</tr>
</table>

227
src/popup.html
View file

@ -2,143 +2,133 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multi-Account Containers</title>
<link rel="stylesheet" href="css/popup.css">
<script type="text/javascript" src="./js/i18n.js"></script>
<link rel="stylesheet" href="./css/popup.css">
</head>
<body>
<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>
Use containers to organize tasks, manage accounts, and keep your focus where you want it.
</p>
<a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0">Get Started</a>
<img class="onboarding-img" alt="" src="/img/onboarding-1.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-1-header"></h3>
<p data-i18n-message-id="onboarding-1-description"></p>
<a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0" data-i18n-message-id="getStarted"></a>
</div>
<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>
Use containers to organize tasks, manage accounts, and store sensitive data.
</p>
<a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0">Get Started</a>
<img class="onboarding-img" alt="" src="/img/onboarding-1.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-1-sec-header"></h3>
<p data-i18n-message-id="onboarding-1-sec-description"></p>
<a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0" data-i18n-message-id="getStarted"></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 keyboard-nav" tabindex="0">Next</a>
<img class="onboarding-img" alt="" src="/img/onboarding-2.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-2-header"></h3>
<p data-i18n-message-id="onboarding-2-description"></p>
<a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0" data-i18n-message-id="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 keyboard-nav" tabindex="0">Next</a>
<img class="onboarding-img" alt="" src="/img/onboarding-2.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-2-header"></h3>
<p data-i18n-message-id="onboarding-2-sec-description"></p>
<a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0" data-i18n-message-id="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 keyboard-nav" tabindex="0">Next</a>
<img class="onboarding-img" alt="" src="/img/onboarding-3.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-3-header"></h3>
<p data-i18n-message-id="onboarding-3-description"></p>
<a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0" data-i18n-message-id="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 keyboard-nav" tabindex="0">Next</a>
<img class="onboarding-img" alt="" src="/img/onboarding-3-security.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-3-sec-header"></h3>
<p data-i18n-message-id="onboarding-2-sec-description"></p>
<a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0" data-i18n-message-id="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 keyboard-nav" tabindex="0">Next</a>
<img class="onboarding-img" alt="" src="/img/onboarding-4.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-4-header"></h3>
<p data-i18n-message-id="onboarding-4-description"></p>
<a href="#" id="onboarding-done-button" class="onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="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 keyboard-nav" tabindex="0">Next</a>
<img class="onboarding-img" alt="" src="/img/onboarding-3.png" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-5-header"></h3>
<p data-i18n-message-id="onboarding-5-description"></p>
<a href="#" id="onboarding-longpress-button" class="onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="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>
<img class="onboarding-img" alt="" src="/img/Sync.svg" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-6-header"></h3>
<p data-i18n-message-id="onboarding-6-description"></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>
<a href="#" id="no-sync" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
<a href="#" id="start-sync-button" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="startSyncing"></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>
<img class="onboarding-img" alt="" src="/img/Account.svg" />
<h3 class="onboarding-title" data-i18n-message-id="onboarding-7-header"></h3>
<p data-i18n-message-id="onboarding-7-description"></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>
<a href="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
<a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="signIn"></a>
</div>
</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>
<img class="onboarding-img" alt="" src="/img/onboarding-3.png" />
<h3 class="onboarding-title" data-i18n-message-id="oneHundredTabsHeader"></h3>
<p data-i18n-message-id="youHaveOpened"></p>
<p data-i18n-message-id="spreadTheWord"></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">
<img src="/img/amo-icon.svg" class="cta-icon" alt="addons.mozilla.org Icon">
Rate
<span class="cta amo-rate-cta" data-i18n-message-id="rate">
<img src="/img/amo-icon.svg" class="cta-icon" alt="">
</span>
</a>
<a class="cta-link" 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 class="cta fb-share-cta" data-i18n-message-id="share">
<img src="/img/webicon-facebook.svg" class="cta-icon" alt="">
</span>
</a>
<a class="cta-link" 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 class="cta tweet-cta" data-i18n-message-id="tweet">
<img src="/img/webicon-twitter.svg" class="cta-icon" alt="">
</span>
</a>
</p>
<a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav">Done</a>
<a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav" data-i18n-message-id="done"></a>
</div>
<div class="panel menu-panel container-panel hide" id="container-panel">
<h3 class="title">
Multi-Account Containers
</h3>
<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" / >
<img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" 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>
<img class="menu-icon" alt="" src="/img/tab-new-16.svg" />
<span class="menu-text" data-i18n-message-id="openInNewTabTitle"></span>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
<img alt="" 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>
<img class="menu-icon" alt="" src="/img/refresh-16.svg" />
<span data-i18n-message-id="reopenThisSiteIn" class="menu-text"></span>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
<img alt="" src="/img/arrow-icon-right.svg" />
</span>
</td>
</tr>
@ -147,26 +137,24 @@
<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>
<img class="menu-icon" alt="" src="/img/sort-16_1.svg" />
<span class="menu-text" data-i18n-message-id="sortTabsByContainer"></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>
<img class="menu-icon" alt="" src="/img/container-openin-16.svg" />
<span class="menu-text" data-i18n-message-id="alwaysOpenThisSiteIn"></span>
<span class="menu-arrow">
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
<img alt="" src="/img/arrow-icon-right.svg" />
</span>
</td>
</tr>
</table>
<hr>
<div class="sub-header">
Containers
</div>
<div class="sub-header" data-i18n-message-id="containers"></div>
<div class="scrollable identities-list">
<table class="menu" id="identities-list">
<tr class="menu-item hover-highlight">
@ -177,68 +165,62 @@
data-identity-icon="pet"
data-identity-color="blue"></div>
</div>
<span class="menu-text">Default</span>
<span class="menu-text" data-i18n-message-id="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" />
<img alt="" src="/img/arrow-icon-right.svg" />
</span>
</span>
</td>
</tr>
</table>
</div>
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0">
Manage Containers
</div>
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0" data-i18n-message-id="manageContainers">Manage Containers</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>
<h3 class="title" id="container-info-title" data-i18n-attribute-message-id="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>
<img class="menu-icon" alt="" src="/img/tab-new-16.svg" />
<span class="menu-text" data-i18n-message-id="openNewTabInThisContainer"></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>
<img id="container-info-hideorshow-icon" class="menu-icon" alt="" src="img/password-hide.svg" />
<span id="container-info-hideorshow-label" class="menu-text" data-i18n-message-id="hideThisContainer"></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>
<img class="menu-icon" alt="" src="/img/movetowindow-16.svg" />
<span class="menu-text" data-i18n-message-id="moveTabsToANewWindow"></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>
<img class="menu-icon" alt="" src="/img/container-openin-16.svg" />
<span class="menu-text" id="always-open-in-info-panel" data-i18n-message-id="alwaysOpenSiteInContainer"></span>
<span class="menu-arrow">
</span>
</td>
</tr>
</table>
<hr>
<div class="sub-header">
Open Tabs
</div>
<div class="sub-header" data-i18n-message-id="openTabs"></div>
<div class="scrollable">
<table class="menu" id="container-info-table">
<tr class="menu-item hover-highlight keyboard-nav" tabindex="0">
@ -250,9 +232,7 @@
</tr>
</table>
</div>
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0">
Manage This Container
</div>
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
</div>
@ -273,7 +253,7 @@
data-identity-color="blue">
</div>
</div>
<span class="menu-text">Default</span>
<span class="menu-text" data-i18n-message-id="default"></span>
</td>
</tr>
</table>
@ -281,52 +261,48 @@
</div>
<div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
<h3 class="title" id="container-edit-title">
Default
</h3>
<h3 class="title" id="container-edit-title" data-i18n-message-id="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>
<legend class="form-header" data-i18n-message-id="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>
<legend class="form-header" data-i18n-message-id="color"></legend>
</fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend class="form-header">Icon</legend>
<legend class="form-header" data-i18n-message-id="icon"></legend>
</fieldset>
</form>
<div id="edit-container-options">
<div class="options-header">Options</div>
<div class="options-header" data-i18n-message-id="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>
<label for="site-isolation" class="options-label" data-i18n-message-id="limitToDesignatedSites"></label>
</div>
<div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">Manage Site List...
<div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">
</div>
</div>
</div>
<div class="delete-container">
<button class="delete-btn" id="delete-container-button">Delete This Container</button>
<button class="delete-btn" id="delete-container-button" data-i18n-message-id="deleteThisContainer"></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>
<a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link" data-i18n-message-id="cancel"></a>
<a href="#" class="button expanded primary footer-button" id="create-container-ok-link" data-i18n-message-id="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>
<h3 class="title" id="edit-assignments-title" data-i18n-message-id="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>
<div class="sub-header" data-i18n-attribute-message-id="sitesAssignedToThisContainer"></div>
<table class="menu scrollable" id="edit-sites-assigned">
<tr class="menu-item hover-highlight" tabindex="0">
<td>
@ -340,19 +316,18 @@
</div>
<div class="hide panel delete-container-panel" id="delete-container-panel">
<h3 class="title" id="container-delete-title">
Default
<h3 class="title" id="container-delete-title" data-i18n-message-id="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>
<h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisContainer"></h4>
<p class="delete-warning" id="delete-container-tab-warning"></p>
<p class="delete-warning">Are you sure you want to remove this Container?</p>
<p class="delete-warning" data-i18n-message-id="removeThisContainerConfirmation"></p>
</div>
<div class="panel-footer">
<a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
<a href="#" class="button expanded primary footer-button" id="delete-container-ok-link">OK</a>
<a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="delete-container-cancel-link"></a>
<a href="#" class="button expanded primary footer-button" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
</div>
</div>