Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-06 19:02:30 +01:00
Code Issues Releases Wiki Activity

First pass to Re-design the dashboard

Browse Source 
This is a first pass in which only the dashboard
navigation widget and the "Settings" pane have
been revisited.

Reference work:
- https://app.abstract.com/share/54f1465e-8d1c-4e7b-9ae4-f37e21bef7fe
This commit is contained in:
Raymond Hill 2020-04-05 15:19:07 -04:00
parent 20332c65b4
commit 453f5450b6
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
7 changed files with 121 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/dashboard-common.css
View File

@ -48,10 +48,6 @@ input[type="checkbox"][disabled] + label {
.para { .para {
width: 40em; width: 40em;
} }
.synopsis {
display: inline-block;
padding: 0.25em 0;
}
.whatisthis { .whatisthis {
margin: 0 0 0 8px; margin: 0 0 0 8px;
border: 0; border: 0;

76
src/css/dashboard.css
View File

@ -1,69 +1,54 @@
html, body { html, body {
margin: 0;
border: 0; border: 0;
font: 16px/24px sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0; padding: 0;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%;
overflow: hidden;
}
@media screen and (max-device-width: 960px) {
#dashboard-nav {
zoom: 1.2;
}
} }
#dashboard-nav { #dashboard-nav {
background-color: #f9f9fb;
border: 0; border: 0;
margin: 0; border-bottom: 1px solid rgba(14, 13, 26, 0.12);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
padding: 0; padding: 0;
position: sticky;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
} }
#dashboard-nav-widgets { #dashboard-nav > span {
align-items: stretch;
background-color: white;
border-bottom: 1px solid #ccc;
display: flex;
margin: 0;
padding: 4px 0 0;
white-space: nowrap;
}
#dashboard-nav-widgets > span {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
padding: 0 0.5em; padding: 0 0.5em;
width: 1.25em; width: 1.25em;
} }
#dashboard-nav-widgets > span > img { #dashboard-nav > span > img {
width: 100%; width: 100%;
} }
.tabButton { .tabButton {
background-color: #eee; border: 0;
border: 1px solid #ccc; border-bottom: 3px solid #f9f9fb;
border-top-left-radius: 3px; box-sizing: border-box;
border-top-right-radius: 3px; color: #20123a;
border-bottom: 1px solid #ccc;
color: black;
cursor: pointer; cursor: pointer;
display: inline-block; padding: 0.5em 1.5em;
font-size: 110%;
margin: 0 0.2em 0 0;
overflow: hidden;
padding: 4px;
position: relative;
text-decoration: none; text-decoration: none;
top: 1px; white-space: nowrap;
} }
.tabButton:focus { .tabButton:focus {
outline: 0; outline: 0;
} }
.tabButton:active,.tabButton:visited { .tabButton:active,.tabButton:visited {
color: inherit; color: #20123a;
} }
.tabButton.selected { .tabButton.selected {
background-color: white; border-bottom: 3px solid #592acb;
border-bottom: 1px solid white; color: #592acb;
} }
iframe { iframe {
background-color: transparent; background-color: transparent;
@ -97,20 +82,9 @@ body:not(.canUpdateShortcuts) .tabButton[href="#shortcuts.html"] {
display: none; display: none;
} }
@media (max-width: 640px) { @media (pointer: coarse) {
#dashboard-nav { #dashboard-nav {
position: relative; flex-wrap: nowrap;
} overflow-x: auto;
#dashboard-nav-widgets {
padding: 1px 0 0 0;
}
.hverbose {
display: none !important;
}
.tabButton {
font-size: 90%;
}
.tabButton.selected {
border-bottom: 1px solid #ccc;
}
} }
}

57
src/css/settings.css
View File

@ -1,27 +1,40 @@
ul { body {
padding-left: 1em; border: 0;
padding-right: 0; font: 16px/24px sans-serif;
margin: 0;
padding: 0;
} }
body[dir="rtl"] ul { hr {
padding-left: 0; border: 0;
padding-right: 1em; border-top: 1px solid #ccc;
margin: 1.5em 0;
} }
ul#userSettings { .body {
padding-left: 0; color: #20123a;
}
li {
margin-top: 0.25em;
}
ul#userSettings,
ul#userSettings ul {
list-style-type: none;
}
ul#userSettings .subgroup {
margin-top: 1em; margin-top: 1em;
} }
ul#userSettings .subgroup > span { .entries {
font-size: larger; margin: 0.5em 0;
}
.section {
font-size: large;
font-weight: bold; font-weight: bold;
margin-top: 0.75em;
}
.synopsis {
font-size: smaller;
}
.entry {
align-items: baseline;
display: flex;
margin: 0.5em 0;
}
.entry > * {
margin-inline-end: 0.5em;
-webkit-margin-end: 0.5em;
}
.entry > input[type="checkbox"] {
align-self: center;
} }
#advanced-user-enabled ~ a.fa { #advanced-user-enabled ~ a.fa {
display: none; display: none;
@ -29,9 +42,3 @@ ul#userSettings .subgroup > span {
body.advancedUser #advanced-user-enabled ~ a.fa { body.advancedUser #advanced-user-enabled ~ a.fa {
display: inline; display: inline;
} }
#localData > ul > li {
margin-top: 1em;
}
#localData > ul > li > ul > li:nth-of-type(2) {
font-family: monospace;
}

22
src/dashboard.html
View File

@ -2,25 +2,23 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title data-i18n="dashboardName"></title> <title data-i18n="dashboardName"></title>
<link href="css/dashboard.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css"> <link href="css/common.css" rel="stylesheet" type="text/css">
<link href="css/dashboard.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/icon_16.png"/> <link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
</head> </head>
<body> <body>
<div id="dashboard-nav"> <div id="dashboard-nav">
<div id="dashboard-nav-widgets"> <span class="hverbose" ><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
<span class="hverbose" data-i18n-title="extName"><img src="img/ublock.svg"></span><!-- --><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!--
--><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!-- --><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!--
--><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!-- --><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!--
--><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!-- --><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!--
--><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!-- --><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!--
--><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!-- --><a class="tabButton" href="#shortcuts.html" data-i18n="shortcutsPageName"></a><!--
--><a class="tabButton" href="#shortcuts.html" data-i18n="shortcutsPageName"></a><!-- --><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
--><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
</div>
</div> </div>
<div id="unsavedWarning"> <div id="unsavedWarning">
<div> <div>

9
src/js/dashboard.js
View File

@ -84,12 +84,15 @@ const discardUnsavedData = function(synchronous = false) {
}; };
const loadDashboardPanel = function(pane, first) { const loadDashboardPanel = function(pane, first) {
const tabButton = uDom(`[href="#${pane}"]`); const tabButton = uDom.nodeFromSelector(`[href="#${pane}"]`);
if ( !tabButton || tabButton.hasClass('selected') ) { return; } if ( tabButton === null || tabButton.classList.contains('selected') ) {
return;
}
const loadPane = ( ) => { const loadPane = ( ) => {
self.location.replace(`#${pane}`); self.location.replace(`#${pane}`);
uDom('.tabButton.selected').toggleClass('selected', false); uDom('.tabButton.selected').toggleClass('selected', false);
tabButton.toggleClass('selected', true); tabButton.classList.add('selected');
tabButton.scrollIntoView();
uDom.nodeFromId('iframe').setAttribute('src', pane); uDom.nodeFromId('iframe').setAttribute('src', pane);
vAPI.localStorage.setItem('dashboardLastVisitedPane', pane); vAPI.localStorage.setItem('dashboardLastVisitedPane', pane);
}; };

27
src/js/settings.js
View File

@ -117,13 +117,11 @@ const exportToFile = async function() {
/******************************************************************************/ /******************************************************************************/
const onLocalDataReceived = function(details) { const onLocalDataReceived = function(details) {
uDom('#localData > ul > li:nth-of-type(1)').text( uDom.nodeFromId('storageUsed').textContent =
vAPI.i18n('settingsStorageUsed') vAPI.i18n('settingsStorageUsed').replace(
.replace( '{{value}}',
'{{value}}', typeof details.storageUsed === 'number' ? details.storageUsed.toLocaleString() : '?'
typeof details.storageUsed === 'number' ? details.storageUsed.toLocaleString() : '?' );
)
);
const timeOptions = { const timeOptions = {
weekday: 'long', weekday: 'long',
@ -138,18 +136,19 @@ const onLocalDataReceived = function(details) {
const lastBackupFile = details.lastBackupFile || ''; const lastBackupFile = details.lastBackupFile || '';
if ( lastBackupFile !== '' ) { if ( lastBackupFile !== '' ) {
const dt = new Date(details.lastBackupTime); const dt = new Date(details.lastBackupTime);
uDom('#localData > ul > li:nth-of-type(2) > ul > li:nth-of-type(1)').text(dt.toLocaleString('fullwide', timeOptions)); const text = vAPI.i18n('settingsLastBackupPrompt');
//uDom('#localData > ul > li:nth-of-type(2) > ul > li:nth-of-type(2)').text(lastBackupFile); const node = uDom.nodeFromId('settingsLastBackupPrompt');
uDom('#localData > ul > li:nth-of-type(2)').css('display', ''); node.textContent = text + '\xA0' + dt.toLocaleString('fullwide', timeOptions);
node.style.display = '';
} }
const lastRestoreFile = details.lastRestoreFile || ''; const lastRestoreFile = details.lastRestoreFile || '';
uDom('#localData > p:nth-of-type(3)');
if ( lastRestoreFile !== '' ) { if ( lastRestoreFile !== '' ) {
const dt = new Date(details.lastRestoreTime); const dt = new Date(details.lastRestoreTime);
uDom('#localData > ul > li:nth-of-type(3) > ul > li:nth-of-type(1)').text(dt.toLocaleString('fullwide', timeOptions)); const text = vAPI.i18n('settingsLastRestorePrompt');
uDom('#localData > ul > li:nth-of-type(3) > ul > li:nth-of-type(2)').text(lastRestoreFile); const node = uDom.nodeFromId('settingsLastRestorePrompt');
uDom('#localData > ul > li:nth-of-type(3)').css('display', ''); node.textContent = text + '\xA0' + dt.toLocaleString('fullwide', timeOptions);
node.style.display = '';
} }
if ( details.cloudStorageSupported === false ) { if ( details.cloudStorageSupported === false ) {

76
src/settings.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>uBlock — Settings</title> <title>uBlock — Settings</title>
<link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css"> <link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
@ -11,48 +11,42 @@
<body> <body>
<div class="body"> <div class="body">
<ul id="userSettings"> <div class="entries">
<li><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label> <div class="entry"><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label></div>
<li><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label> <div class="entry"><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label></div>
<li><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label> <div class="entry"><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label></div>
<li><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label> <div class="entry"><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label></div>
<li><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label> <div class="entry"><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label></div>
<li><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a> <div class="entry"><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a></div>
<li><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">&#xf085;</a> <div class="entry"><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">&#xf085;</a></div>
<li class="subgroup"><span data-i18n="3pGroupPrivacy"></span><ul> </div>
<li><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">&#xf05a;</a> <div class="section" data-i18n="3pGroupPrivacy"></div>
<li><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">&#xf05a;</a> <div class="entries">
<li><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a> <div class="entry"><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">&#xf05a;</a></div>
<li><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a> <div class="entry"><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">&#xf05a;</a></div>
</ul> <div class="entry"><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a></div>
<li class="subgroup"><span data-i18n="settingPerSiteSwitchGroup"></span><ul> <div class="entry"><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a></div>
<li><label class="synopsis"><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label> </div>
<li><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a> <div class="section" data-i18n="settingPerSiteSwitchGroup"></div>
<li><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"><input type="number" min="0"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a> <div class="entries">
<li><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a> <div class="synopsis"><label><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label></div>
<li><input id="no-scripting" type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><label data-i18n="settingsNoScriptingPrompt" for="no-scripting"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">&#xf05a;</a> <div class="entry"><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a></div>
</ul> <div class="entry"><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"><input type="number" min="0"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a></div>
</ul> <div class="entry"><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-scripting" type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><label data-i18n="settingsNoScriptingPrompt" for="no-scripting"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">&#xf05a;</a></div>
</div>
<div id="localData" style="margin: 0 1em;"> <div id="localData" class="entrie">
<div style="margin: 2.5em 0; border-top: 1px solid #ccc;"></div> <hr>
<ul> <div id="storageUsed" class="entry"></div>
<li> <div style="margin: 1.5em 0">
<li style="display: none;"><span data-i18n="settingsLastBackupPrompt"></span><ul> <div class="entry" id="settingsLastBackupPrompt" style="display:none;"></div>
<li> <div class="entry" id="settingsLastRestorePrompt" style="display:none;"></div>
</ul> <p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<li style="display: none;"><span data-i18n="settingsLastRestorePrompt"></span><ul> <button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<li> <p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
<li>
</ul>
</ul>
</div>
<div style="margin: 2.5em 1em;">
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div> </div>
</div>
</div> </div>
<div class="hidden"> <div class="hidden">