uBlock/platform/mv3/extension/dashboard.html
Raymond Hill b6829698cc
[mv3] Add spinner as visual feedback rulesets are being registered
Additionally, fixed a race condition where changes to rulesets would
not be ultimately registered when the changes were made during an
ongoing registration operation. This race condition would be
especially likely to occur on platforms where rulesets registration
take long.
2025-08-07 08:56:17 -04:00

214 lines
13 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="color-scheme" content="light dark" />
<title data-i18n="dashboardName"></title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="css/dashboard-common.css">
<link rel="stylesheet" href="css/filtering-mode.css">
<link rel="stylesheet" href="css/settings.css">
<link rel="stylesheet" href="css/develop.css">
<link rel="icon" type="image/png" href="img/icon_64.png"/>
</head>
<body data-pane="settings" class="loading">
<!-- -------- -->
<header>
<nav id="dashboard-nav">
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg" alt="uBO Lite"></span><!--
--><button class="tabButton" type="button" data-pane="settings" data-i18n="settingsPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="rulesets" data-i18n="aboutFilterLists" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="develop" data-i18n="developPageName"tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="about" data-i18n="aboutPageName" tabindex="0"></button>
</nav>
<!-- -------- -->
<div data-pane-related="rulesets">
<p><span id="listsOfBlockedHostsPrompt"></span> <span id="commit-spinner" class="fa-icon">spinner</span></p>
<p><input id="findInLists" type="search" spellcheck="false" placeholder="findListsPlaceholder" /></p>
</div>
</header>
<!-- -------- -->
<section data-pane="settings">
<div>
<h3 data-i18n="behaviorSectionLabel"></h3>
<p><label id="autoReload" data-i18n="autoReloadLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
</p>
<p><label id="showBlockedCount" data-i18n="showBlockedCountLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
</div>
<div>
<h3 data-i18n="defaultFilteringModeSectionLabel"></h3>
<p data-i18n="defaultFilteringModeDescription"></p>
<div id="defaultFilteringMode">
<label class="filteringModeCard">
<div>
<span><span class="input radio"><input type="radio" name="filteringMode" value="1"><svg viewBox="0 0 24 24"><path d="M 12 0 A 12 12 0 0 0 0 12 A 12 12 0 0 0 12 24 A 12 12 0 0 0 24 12 A 12 12 0 0 0 12 0 z M 12 2.5 A 9.5 9.5 0 0 1 21.5 12 A 9.5 9.5 0 0 1 12 21.5 A 9.5 9.5 0 0 1 2.5 12 A 9.5 9.5 0 0 1 12 2.5 z"/><circle cx="12" cy="12" r="7"/></svg></span><span data-i18n="filteringMode1Name">_</span></span>
</div>
<div>
<div class="filteringModeSlider" data-level="1">
<div class="filteringModeButton"><div></div></div>
<span data-level="0"></span>
<span data-level="1"></span>
<span data-level="2"></span>
<span data-level="3"></span>
</div>
</div>
<div data-i18n="basicFilteringModeDescription"></div>
</label>
<label class="filteringModeCard">
<div>
<span><span class="input radio"><input type="radio" name="filteringMode" value="2"><svg viewBox="0 0 24 24"><path d="M 12 0 A 12 12 0 0 0 0 12 A 12 12 0 0 0 12 24 A 12 12 0 0 0 24 12 A 12 12 0 0 0 12 0 z M 12 2.5 A 9.5 9.5 0 0 1 21.5 12 A 9.5 9.5 0 0 1 12 21.5 A 9.5 9.5 0 0 1 2.5 12 A 9.5 9.5 0 0 1 12 2.5 z"/><circle cx="12" cy="12" r="7"/></svg></span><span data-i18n="filteringMode2Name">_</span></span>
</div>
<div>
<div class="filteringModeSlider" data-level="2">
<div class="filteringModeButton"><div></div></div>
<span data-level="0"></span>
<span data-level="1"></span>
<span data-level="2"></span>
<span data-level="3"></span>
</div>
</div>
<div data-i18n="optimalFilteringModeDescription"></div>
</label>
<label class="filteringModeCard">
<div>
<span><span class="input radio"><input type="radio" name="filteringMode" value="3"><svg viewBox="0 0 24 24"><path d="M 12 0 A 12 12 0 0 0 0 12 A 12 12 0 0 0 12 24 A 12 12 0 0 0 24 12 A 12 12 0 0 0 12 0 z M 12 2.5 A 9.5 9.5 0 0 1 21.5 12 A 9.5 9.5 0 0 1 12 21.5 A 9.5 9.5 0 0 1 2.5 12 A 9.5 9.5 0 0 1 12 2.5 z"/><circle cx="12" cy="12" r="7"/></svg></span><span data-i18n="filteringMode3Name">_</span></span>
</div>
<div>
<div class="filteringModeSlider" data-level="3">
<div class="filteringModeButton"><div></div></div>
<span data-level="0"></span>
<span data-level="1"></span>
<span data-level="2"></span>
<span data-level="3"></span>
</div>
</div>
<div data-i18n="completeFilteringModeDescription"></div>
</label>
</div>
<p><label id="strictBlockMode" data-i18n="enableStrictBlockLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label><legend data-i18n="enableStrictBlockLegend"></legend>
<p id="developerMode"><label data-i18n="developerModeLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label><legend data-i18n="developerModeLegend"></legend>
</div>
</section>
<!-- -------- -->
<section data-pane="rulesets">
<div id="lists"></div>
</section>
<!-- -------- -->
<section data-pane="develop">
<div>
<p>
<label for="editors" data-i18n="developDropdownLabel"></label> <select id="editors">
<option value="modes" selected data-i18n="developOptionFilteringModeDetails"></option>
<option value="dnr.rw.user" data-i18n="developOptionCustomDnrRules"></option>
<hr>
<optgroup label="" data-i18n-label="developOptionDnrRulesOf">
<option value="dnr.ro.dynamic" data-i18n="developOptionDynamicRuleset"></option>
<option value="dnr.ro.session" data-i18n="developOptionSessionRuleset"></option>
</optgroup>
</select>&nbsp;
</p>
<div id="cm-container"></div>
</div>
</section>
<!-- -------- -->
<section data-pane="about">
<div class="body">
<div id="aboutNameVer" class="li"></div>
<div class="liul">
<div class="li">Copyright (c) Raymond Hill 2014-present</div>
</div>
<div class="li"><a href="https://github.com/gorhill/uBlock/wiki/Privacy-policy" data-i18n="aboutPrivacyPolicy"></a></div>
<div class="li"><a href="https://github.com/uBlockOrigin/uBOL-home/releases" data-i18n="aboutChangelog"></a></div>
<div class="li"><a href="https://github.com/gorhill/uBlock" data-i18n="aboutCode"></a></div>
<div class="li"><span data-i18n="aboutContributors"></span></div>
<div class="liul">
<div class="li"><a href="https://github.com/gorhill/uBlock/graphs/contributors" data-i18n="aboutSourceCode"></a></div>
<div class="li"><a href="https://crowdin.com/project/ublock" data-i18n="aboutTranslations"></a></div>
<div class="li"><a href="https://github.com/uBlockOrigin/uAssets/graphs/contributors" data-i18n="aboutFilterLists"></a></div>
</div>
<div class="li"><span data-i18n="aboutDependencies"></span></div>
<div class="liul">
<div class="li"><span><a href="https://github.com/rsms/inter" target="_blank">Inter font family</a> by <a href="https://github.com/rsms">Rasmus Andersson</a></span></div>
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
<div class="li"><span><a href="https://github.com/mathiasbynens/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
<div class="li"><span><a href="https://flagpedia.net/" target="_blank">Flags of the World</a> by <a href="https://www.davidkrmela.com/">David Krmela</a></span></div>
<div class="li"><span><a href="https://codemirror.net/" target="_blank">CodeMirror 6</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a></span></div>
</div>
<hr>
<details><summary data-i18n="supportS5H"></summary>
<pre style="user-select: all; -webkit-user-select: all;"></pre>
</details>
</div>
</section>
<!-- -------- -->
<div id="templates">
<div class="listEntries"></div>
<div class="listEntry" data-role="leaf">
<span class="detailbar">
<label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span class="listname forinput"></span>
</label>
<span class="iconbar"><!--
--><a class="fa-icon support" href="#" target="_blank">home</a>
</span>
</span>
</div>
<div class="listEntry expandable" data-role="node">
<span class="detailbar">
<label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span class="listname forinput"></span></label>
<span class="count"></span>
<span class="fa-icon listExpander">angle-up</span>
</span>
</div>
<div class="listEntry expandable" data-role="rootnode">
<div class="detailbar">
<h3 class="listname"></h3>
<span class="count"></span>
<span class="fa-icon listExpander">angle-up</span>
</div>
</div>
</div>
<template class="io-panel">
<span class="io-panel">
<button id="apply" class="preferred iconified" type="button" disabled><span class="fa-icon">save</span><span data-i18n="saveButton">_</span><span class="hover"></span></button>
<button id="revert" class="iconified" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="revertButton">_</span><span class="hover"></span></button>
<button id="import" class="iconified" type="button"><span class="fa-icon">download-alt</span><span data-i18n="importAndAppendButton">_</span><span class="hover"></span></button>
<button id="export" class="iconified" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="exportButton">_</span><span class="hover"></span></button><input type="file" accept="json/application">
</span>
</template>
<template class="summary-panel">
<div class="info-panel summary-panel">
<span class="info"></span><span class="warning" data-i18n="dnrRulesWarning"></span>
</div>
</template>
<template class="feedback-panel">
<div class="info-panel feedback-panel">
<div class="info"></div>
<div class="close"></div>
</div>
</template>
<template class="ro-summary-panel">
<div class="info-panel summary-panel">
</div>
</template>
<template class="badmark-tooltip">
<div class="badmark-tooltip">
</div>
</template>
<script src="lib/codemirror/cm6.bundle.ubol.min.js"></script>
<script src="js/theme.js" type="module"></script>
<script src="js/fa-icons.js" type="module"></script>
<script src="js/i18n.js" type="module"></script>
<script src="js/dashboard.js" type="module"></script>
<script src="js/settings.js" type="module"></script>
<script src="js/develop.js" type="module"></script>
</body>
</html>