Fix elements styling to follow the Proton Design System more closely
This includes fixes for the hover, active and focus states of all the elements that didn't have one.
This commit is contained in:
Danny Colin
parent
873ba0ab09
commit
aaef0fd4a6
7 changed files with 593 additions and 439 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -53,11 +53,20 @@ async function enableDisableReplaceTab() {
|
|||
await browser.storage.local.set({replaceTabEnabled: !!checkbox.checked});
|
||||
}
|
||||
|
||||
async function changeTheme(event) {
|
||||
const theme = event.currentTarget;
|
||||
await browser.storage.local.set({currentTheme: theme.value});
|
||||
await browser.storage.local.set({currentThemeId: theme.selectedIndex});
|
||||
}
|
||||
|
||||
async function setupOptions() {
|
||||
const { syncEnabled } = await browser.storage.local.get("syncEnabled");
|
||||
const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
|
||||
const { currentThemeId } = await browser.storage.local.get("currentThemeId");
|
||||
|
||||
document.querySelector("#syncCheck").checked = !!syncEnabled;
|
||||
document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
|
||||
document.querySelector("#changeTheme").selectedIndex = currentThemeId;
|
||||
setupContainerShortcutSelects();
|
||||
}
|
||||
|
||||
|
|
@ -114,6 +123,8 @@ browser.permissions.onRemoved.addListener(resetPermissionsUi);
|
|||
document.addEventListener("DOMContentLoaded", setupOptions);
|
||||
document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
|
||||
document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
|
||||
document.querySelector("#changeTheme").addEventListener( "change", changeTheme);
|
||||
|
||||
maybeShowPermissionsWarningIcon();
|
||||
for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
|
||||
document.querySelector("#open_container_"+i)
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@ async function init() {
|
|||
list.appendChild(fragment);
|
||||
|
||||
MozillaVPN.handleContainerList(identities);
|
||||
|
||||
// Set the theme
|
||||
Utils.applyTheme();
|
||||
}
|
||||
|
||||
init();
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ async function getExtensionInfo() {
|
|||
return extensionInfo;
|
||||
}
|
||||
|
||||
|
||||
// This object controls all the panels, identities and many other things.
|
||||
const Logic = {
|
||||
_identities: [],
|
||||
|
|
@ -65,6 +66,9 @@ const Logic = {
|
|||
method: "MozillaVPN_attemptPort"
|
||||
}),
|
||||
|
||||
// Set the theme
|
||||
Utils.applyTheme();
|
||||
|
||||
// Remove browserAction "upgraded" badge when opening panel
|
||||
this.clearBrowserActionBadge();
|
||||
|
||||
|
|
|
|||
|
|
@ -169,6 +169,26 @@ const Utils = {
|
|||
false
|
||||
);
|
||||
},
|
||||
/* Theme helper
|
||||
*
|
||||
* First, we look if there's a theme already set in the local storage. If
|
||||
* there isn't one, we set the theme based on `prefers-color-scheme`.
|
||||
* */
|
||||
getTheme(currentTheme, window) {
|
||||
if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
|
||||
return currentTheme;
|
||||
}
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
},
|
||||
async applyTheme() {
|
||||
const { currentTheme } = await browser.storage.local.get("currentTheme");
|
||||
const popup = document.getElementsByTagName("html")[0];
|
||||
const theme = Utils.getTheme(currentTheme, window);
|
||||
popup.setAttribute("data-theme", theme);
|
||||
}
|
||||
};
|
||||
|
||||
window.Utils = Utils;
|
||||
|
|
|
|||
|
|
@ -59,6 +59,24 @@
|
|||
<p><em data-i18n-message-id="replaceTabDescription"></em></p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
TODO
|
||||
- Add data-i18n
|
||||
-->
|
||||
<h3 data-i18n-message-id="theme"></h3>
|
||||
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="chooseTheme"></span>
|
||||
<select id="changeTheme" name="changeTheme">
|
||||
<option value="auto" selected data-i18n-message-id="themeAuto">
|
||||
</option>
|
||||
<option value="light" data-i18n-message-id="themeLight">
|
||||
</option>
|
||||
<option value="dark" data-i18n-message-id="themeDark">
|
||||
</option>
|
||||
</select>
|
||||
</label></p>
|
||||
|
||||
<h3 data-i18n-message-id="keyboardShortCuts"></h3>
|
||||
<p><em data-i18n-message-id="editWhichContainer"></em></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html data-theme="auto">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Multi-Account Containers</title>
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<v-padding-hack-footer></v-padding-hack-footer>
|
||||
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
|
||||
<div class="bottom-btn keyboard-nav hover-highlight controller" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -342,10 +342,11 @@
|
|||
</button>
|
||||
</div>
|
||||
</moz-vpn-container-ui>
|
||||
<button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn controller">
|
||||
<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 -->
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue