7b20467a97
This adds a option in the info panel that let the user removes the data (cache, cookies and localStorage) for the selected container. The option is only clickable if there's data associated to the container.
482 lines
24 KiB
HTML
482 lines
24 KiB
HTML
<html data-theme="auto">
|
|
<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" href="./css/popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="hide panel onboarding onboarding-panel-1">
|
|
<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="panel onboarding onboarding-panel-2 hide">
|
|
<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 onboarding-panel-3 hide">
|
|
<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 onboarding-panel-4 hide" id="onboarding-panel-4">
|
|
<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="" 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="" 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 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="" 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 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 onboarding onboarding-panel-8 hide" id="onboarding-panel-8">
|
|
<div class="moz-vpn-onboarding-content">
|
|
<img class="onboarding-img" alt="" src="/img/moz-vpn-onboarding.svg" />
|
|
<h3 class="onboarding-title" data-i18n-message-id="proxyNowAvailable"></h3>
|
|
<p data-i18n-message-id="onboarding-8-description"></p>
|
|
</div>
|
|
<div id="moz-vpn-fw-onboarding-done" class="half-button-wrapper">
|
|
<a id="moz-vpn-fw-onboarding-done" href="#" class="half-onboarding-button keyboard-nav onboarding-done" tabindex="0" data-i18n-message-id="done"></a>
|
|
</div>
|
|
<div class="moz-vpn-permissions">
|
|
<div class="moz-vpn-permissions-copy">
|
|
<span data-i18n-message-id="mozillaVpnRequiresAdditionalPermissions"></span>
|
|
</div>
|
|
<div class="half-button-wrapper">
|
|
<a href="#" id="permissions-not-now" class="half-onboarding-button grey-button keyboard-nav onboarding-done" tabindex="0" data-i18n-message-id="notNow"></a>
|
|
<a href="#" id="onboarding-enable-permissions" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="enable"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel achievement-panel hide" id="achievement-panel">
|
|
<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" 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" 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" 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" 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>
|
|
<a href="#" class="info-icon" id="info-icon" tabindex="10">
|
|
<img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" src="/img/info.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="" src="/img/tab-new-16.svg" />
|
|
<span class="menu-text" data-i18n-message-id="openInNewTabTitle"></span>
|
|
<span class="menu-arrow">
|
|
<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="" src="/img/refresh-16.svg" />
|
|
<span data-i18n-message-id="reopenThisSiteIn" class="menu-text"></span>
|
|
<span class="menu-arrow">
|
|
<img alt="" src="/img/arrow-icon-right.svg" />
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="menu-item hover-highlight keyboard-nav" id="sort-containers-link" tabindex="0">
|
|
<td>
|
|
<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="" src="/img/container-openin-16.svg" />
|
|
<span class="menu-text" data-i18n-message-id="alwaysOpenThisSiteIn"></span>
|
|
<span class="menu-arrow">
|
|
<img alt="" src="/img/arrow-icon-right.svg" />
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<div class="sub-header-wrapper flx-row flx-space-between">
|
|
<div class="sub-header" data-i18n-message-id="containers"></div>
|
|
<h4 class="moz-vpn-logotype vpn-status-container-list display-none">Mozilla VPN
|
|
<span class="moz-vpn-connection-status-indicator container-list-status-icon">
|
|
</span>
|
|
</h4>
|
|
</div>
|
|
<div class="scrollable identities-list">
|
|
<div class="searchbar">
|
|
<label for="search-terms"
|
|
class="hide-label"
|
|
data-i18n-message-id="filterInputLabel">
|
|
</label>
|
|
<input type="text"
|
|
id="search-terms"
|
|
name="search-terms"
|
|
placeholder="Search container name"
|
|
data-i18n-attribute="placeholder"
|
|
data-i18n-attribute-message-id="filterInputPlaceholder">
|
|
</div>
|
|
<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" data-i18n-message-id="default"></span>
|
|
</div>
|
|
<span class="menu-right-float">
|
|
<span class="container-count">22</span>
|
|
<span class="menu-arrow">
|
|
<img alt="" src="/img/arrow-icon-right.svg" />
|
|
</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="moz-vpn-tout" class="moz-vpn-content expanded">
|
|
<div class="flx-row button-wrapper">
|
|
<h4 class="moz-vpn-logo">Mozilla VPN</h4>
|
|
<button class="controller dismiss-moz-vpn-tout" tab-index="0"></button>
|
|
</div>
|
|
<div class="collapsible-content flx-col controller-collapsible-content">
|
|
<div class="flx-row flx-space-between">
|
|
<span class="moz-vpn-subtitle" data-i18n-message-id="integrateContainers"></span>
|
|
</div>
|
|
<button id="moz-vpn-learn-more" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
|
|
</div>
|
|
</div>
|
|
<v-padding-hack-footer></v-padding-hack-footer> <!--prevents last container from getting covered up by the 'manage containers button' when list is long-->
|
|
<div class="bottom-btn keyboard-nav controller" id="manage-containers-link" tabindex="0" data-i18n-message-id="manageContainers"></div>
|
|
</div>
|
|
|
|
|
|
<div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
|
|
<h3 class="title" id="container-info-title" data-i18n-attribute-message-id="personal"></h3>
|
|
<button class="btn-return arrow-left controller 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="" 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="" 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="" 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="" 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>
|
|
<tr class="menu-item hover-highlight keyboard-nav" id="delete-data" tabindex="0">
|
|
<td>
|
|
<img class="menu-icon" alt="" src="" />
|
|
<span class="menu-text" id="delete-data-info-panel" data-i18n-message-id="alwaysOpenSiteInContainer">
|
|
Delete data
|
|
</span>
|
|
<span class="menu-arrow">
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<div class="sub-header-wrapper">
|
|
<div class="sub-header" data-i18n-message-id="openTabs"></div>
|
|
</div>
|
|
<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/close.svg" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<v-padding-hack-footer></v-padding-hack-footer>
|
|
<div class="bottom-btn keyboard-nav hover-highlight controller" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
|
|
</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 controller 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" data-i18n-message-id="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" data-i18n-message-id="default"></h3>
|
|
<button class="btn-return arrow-left controller" id="close-container-edit-panel"></button>
|
|
<hr>
|
|
<div class="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" data-i18n-message-id="name"></legend>
|
|
<v-padding-hack-4></v-padding-hack-4>
|
|
<input type="text" name="container-name" id="edit-container-panel-name-input" class="edit-container-panel-name-input" maxlength="25"/>
|
|
</fieldset>
|
|
<legend class="form-header" data-i18n-message-id="color"></legend>
|
|
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
|
|
|
|
</fieldset>
|
|
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
|
|
<legend class="form-header" data-i18n-message-id="icon"></legend>
|
|
</fieldset>
|
|
<fieldset class="proxies"> <!---- PROXIES -->
|
|
<input type="text" class="proxies" name="container-proxy" id="edit-container-panel-proxy" placeholder="type://host:port" hidden/>
|
|
<input type="text" class="proxies" name="moz-proxy-enabled" id="moz-proxy-enabled" maxlength="5" hidden/>
|
|
<input type="text" class="proxies" name="country-code" id="country-code-input" maxlength="5" hidden/>
|
|
<input type="text" class="proxies" name="city-name" id="city-name-input" maxlength="5" hidden/>
|
|
</fieldset>
|
|
</form>
|
|
<div id="edit-container-options">
|
|
<div class="options-header" data-i18n-message-id="options"></div>
|
|
<div class="container-options">
|
|
<label for="site-isolation" class="options-label" data-i18n-message-id="limitToDesignatedSites"></label>
|
|
<label class="switch">
|
|
<input id="site-isolation" class="switch-input" name="site-isolation" type="checkbox">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
<button class="container-options blue-link" id="manage-assigned-sites-list" tabindex="0" data-i18n-message-id="manageSiteList"></button>
|
|
</div>
|
|
</div>
|
|
<moz-vpn-container-ui class="moz-vpn-controller-content expanded">
|
|
<div class="flx-row button-wrapper">
|
|
<h4 class="moz-vpn-logotype">Mozilla VPN
|
|
<span class="moz-vpn-connection-status-indicator"></span>
|
|
</h4>
|
|
<button class="expand-collapse blue-link" tab-index="0">
|
|
<span data-i18n-message-id="hide" class="hide-label hide-show-label"></span>
|
|
<span data-i18n-message-id="show" class="show-label hide-show-label"></span>
|
|
</button>
|
|
</div>
|
|
<div class="collapsible-content flx-col controller-collapsible-conten">
|
|
<div class="flx-row flx-space-between add-bg-color">
|
|
<span class="moz-vpn-subtitle"></span>
|
|
<label class="switch">
|
|
<input id="moz-vpn-switch" class="moz-vpn-switch switch-input" type="checkbox">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
<button id="get-mozilla-vpn" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
|
|
<button id="moz-vpn-current-server" class="controller">
|
|
<span class="current-country-flag"></span>
|
|
<span class="current-city-name"></span>
|
|
</button>
|
|
</div>
|
|
</moz-vpn-container-ui>
|
|
<button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn">
|
|
<span class="advanced-proxy-settings-btn-label" data-i18n-message-id="advancedProxySettings"></span>
|
|
<span id="advanced-proxy-address"></span>
|
|
</button>
|
|
<hr>
|
|
<button class="delete-container delete-btn alert-text" id="delete-container-button" data-i18n-message-id="deleteThisContainer"></button>
|
|
|
|
<!-- TODO get UX / CONTENT on how to message about unavailable proxies -->
|
|
<!-- Prevent users from opening containers where proxies are unavailable and which will result in timeouts -->
|
|
<!-- Provide a way for users to disable Mozilla proxies if they cancel their subscription or somehow lose access -->
|
|
|
|
<!-- <div class="modal-warning">
|
|
<div class="modal-content">
|
|
<button id="close-proxy-warning" class="x-close modal-clickable">Close</button>
|
|
<p>This container has been configured to use a Mozilla VPN proxy, but the Mozilla VPN app is off. To access the web via this container, turn Mozilla VPN on or disable the proxy for this container.</p>
|
|
<button class="disable-proxy modal-clickable">Disable proxy for this container</button>
|
|
<button id="close-modal" class="modal-clickable" class="disable-proxy">Close</button>
|
|
</div>
|
|
</div> -->
|
|
|
|
|
|
<div class="panel-footer">
|
|
<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" data-i18n-message-id="default"></h3>
|
|
<button class="btn-return arrow-left controller" id="close-container-assignment-panel"></button>
|
|
<hr>
|
|
<div class="scrollable edit-sites-assigned">
|
|
<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>
|
|
<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">
|
|
<h3 class="title" id="container-delete-title" data-i18n-message-id="default">
|
|
</h3>
|
|
|
|
<button class="btn-return arrow-left controller" id="close-container-delete-panel"></button>
|
|
<hr>
|
|
<div class="panel-content delete-container-confirm">
|
|
<h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisContainer"></h4>
|
|
<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" 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>
|
|
|
|
<div class="hide panel moz-vpn-server-list-panel" id="moz-vpn-server-list-panel">
|
|
<h3 class="title proxy-panel-title" id="vpn-server-list-title" data-i18n-message-id="chooseLocation"></h3>
|
|
<button class="btn-return arrow-left controller moz-vpn-return" id="moz-vpn-return"></button>
|
|
<ul id="moz-vpn-server-list" class="moz-vpn-server-list">
|
|
<template id="server-list-item">
|
|
<li class="server-list-item" data-country-code="">
|
|
<button class="flx-row server-city-list-visibility-btn controller">
|
|
<div class="toggle"></div>
|
|
<img class="server-country-flag" src="" alt="" />
|
|
<p class="server-country-name"></p>
|
|
</button>
|
|
<ul class="server-city-list"></ul>
|
|
</li>
|
|
</template>
|
|
<template id="server-city-list-items">
|
|
<li>
|
|
<label class="server-city-list-item" tabindex="0">
|
|
<input class="server-radio-btn" type="radio" data-country-code="" data-city-name="" checked=""/>
|
|
<div class="server-radio-control"></div>
|
|
<span class="server-city-name"></span>
|
|
</label>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="hide panel advanced-proxy-settings-panel" id="advanced-proxy-settings-panel">
|
|
<h3 class="title proxy-panel-title" id="advanced-proxy-settings-title">
|
|
<span data-i18n-message-id="advancedProxySettings"></span>
|
|
<div class="flx-row">
|
|
<p data-identity-color="" class="proxy-title-container-color"></p>
|
|
<span id="proxy-title-container-name"></span>
|
|
</div>
|
|
</h3>
|
|
<button class="btn-return arrow-left controller moz-vpn-return" id="advanced-proxy-settings-return"></button>
|
|
<form class="advanced-proxy-panel-content">
|
|
<label class="advanced-proxy-input-label" for="container-proxy" data-i18n-message-id="advancedProxySettings"></label>
|
|
<div class="advanced-proxy-input-wrapper">
|
|
<input id="edit-advanced-proxy-input" class="proxy-host primary-input" name="container-proxy" type="text" placeholder="type://host:port" />
|
|
<button id="clear-advanced-proxy-input" class="controller" data-i18n-attribute="value" data-i18n-attribute-message-id="clearproxylabel"></button>
|
|
<span class="proxy-validity" data-i18n-message-id="invalidProxyAlert"></span>
|
|
</div>
|
|
<button id="submit-advanced-proxy" class="primary-cta apply-to-container" data-i18n-message-id="applyToContainer"></button>
|
|
<a id="advanced-proxy-settings-learn-more" href="" class="blue-link" data-i18n-message-id="learnMore"></a>
|
|
</form>
|
|
<div id="permissions-overlay" class="permissions-overlay" data-tab-group="proxy-disabled">
|
|
<p data-tab-group="proxy-disabled" data-i18n-message-id="additionalPermissionNeeded"></p>
|
|
<button id="enable-proxy-permissions" class="primary-cta" data-tab-group="proxy-disabled" data-i18n-message-id="enable"></button>
|
|
</div>
|
|
</div>
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/popup.js"></script>
|
|
<script src="js/mozillaVpn.js"></script>
|
|
<script src="js/proxified-containers.js"></script>
|
|
</body>
|
|
</html>
|