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

[mv3] Open options page at first install

Browse Source 
To be sure first time users are properly informed about the
possibility to enable broad permissions for better filtering.
This commit is contained in:
Raymond Hill 2022-09-30 09:18:52 -04:00
parent 6210a85f26
commit 1a9a19a91f
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
11 changed files with 164 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/mv3/extension/3p-filters.html
View File

@ -16,13 +16,13 @@
<div class="body">
<div id="actions">
<p>
<p class="firstRun">
<label id="omnipotenceWidget"><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 data-i18n="omnipotenceLabel">_</span></label>
<legend data-i18n="omnipotenceLegend">_</legend>
</p>
<hr>
<p><button id="buttonApply" class="preferred disabled iconified" type="button" data-i18n-title="genericApplyChanges"><span class="fa-icon">check</span><span data-i18n="genericApplyChanges">_</span><span class="hover"></span></button>
<p id="listsOfBlockedHostsPrompt">
<p><button id="buttonApply" class="preferred disabled iconified" type="button" data-i18n-title="genericApplyChanges"><span class="fa-icon">check</span><span data-i18n="genericApplyChanges">_</span><span class="hover"></span></button>
</div>
<div>

5
platform/mv3/extension/css/3p-filters.css
View File

@ -17,6 +17,11 @@ legend {
top: 0;
z-index: 10;
}
body.firstRun .firstRun {
background-color: rgb(var(--dashboard-highlight-surface-rgb));
padding: 8px;
zoom: 1.1;
}
#buttonUpdate.active {
pointer-events: none;
}

1
platform/mv3/extension/css/dashboard-common.css
View File

@ -1,6 +1,5 @@
body > div.body {
margin: 0 1em;
max-width: min(600px, 100vw);
}
h2, h3 {
margin: 1em 0;

116
platform/mv3/extension/css/dashboard.css Normal file
View File

@ -0,0 +1,116 @@
html, body {
align-items: center;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: stretch;
overflow: hidden;
position: relative;
width: 100vw;
}
body > * {
width: min(641px, 100vw);
}
#dashboard-nav {
border: 0;
border-bottom: 1px solid var(--border-1);
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
overflow-x: hidden;
padding: 0;
position: sticky;
top: 0;
z-index: 10;
}
.tabButton {
background-color: transparent;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
font-family: var(--font-family);
font-size: var(--font-size);
padding: 0.7em 1.4em calc(0.7em - 3px);
text-decoration: none;
white-space: nowrap;
}
.tabButton:focus {
outline: 0;
}
/*
* TODO: support keyboard-driven navigation
*
.tabButton:not(:active):focus {
background-color: var(--dashboard-tab-focus-surface);
}
*/
.tabButton.selected {
background-color: var(--dashboard-tab-active-surface);
border-bottom: 3px solid var(--dashboard-tab-active-ink);
color: var(--dashboard-tab-active-ink);
fill: var(--dashboard-tab-active-ink);
}
iframe {
background-color: transparent;
border: 0;
flex-grow: 1;
margin: 0;
padding: 0;
}
#unsavedWarning {
display: none;
left: 0;
position: absolute;
width: 100%;
z-index: 20;
}
#unsavedWarning.on {
display: initial;
}
#unsavedWarning > div:first-of-type {
padding: 0.5em;
}
#unsavedWarning > div:last-of-type {
height: 100vh;
position: absolute;
}
body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
display: none;
}
body .tabButton[data-pane="no-dashboard.html"] {
display: none;
}
body.noDashboard #dashboard-nav {
display: none;
}
/* high dpi devices */
:root.hidpi .tabButton {
font-family: Metropolis, sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
}
/* hover-able devices */
:root.desktop .tabButton {
cursor: default;
}
:root.desktop .tabButton:not(.selected) {
cursor: pointer;
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-hover-surface);
border-bottom-color: var(--dashboard-tab-hover-border);
}
/* touch-screen devices */
:root.mobile #dashboard-nav {
flex-wrap: nowrap;
overflow-x: auto;
}
:root.mobile #dashboard-nav .logo {
display: none;
}

32
platform/mv3/extension/dashboard.html
View File

@ -12,22 +12,24 @@
</head>
<body>
<div id="dashboard-nav">
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
--><button class="tabButton" type="button" data-pane="3p-filters.html" data-i18n="3pPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="about.html" data-i18n="aboutPageName" tabindex="0"></button>
</div>
<section id="unsavedWarning" class="notice">
<div>
<span data-i18n="dashboardUnsavedWarning"></span>&emsp;
<button type="button" data-i18n="dashboardUnsavedWarningStay">_<span class="hover"></span></button>&ensp;
<button type="button" data-i18n="dashboardUnsavedWarningIgnore">_<span class="hover"></span></button>
<!-- -------- -->
<div id="dashboard-nav">
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
--><button class="tabButton" type="button" data-pane="3p-filters.html" data-i18n="3pPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="about.html" data-i18n="aboutPageName" tabindex="0"></button>
</div>
<div></div>
</section>
<iframe id="iframe" src=""></iframe>
<!-- -------- -->
<section id="unsavedWarning" class="notice">
<div>
<span data-i18n="dashboardUnsavedWarning"></span>&emsp;
<button type="button" data-i18n="dashboardUnsavedWarningStay">_<span class="hover"></span></button>&ensp;
<button type="button" data-i18n="dashboardUnsavedWarningIgnore">_<span class="hover"></span></button>
</div>
<div></div>
</section>
<!-- -------- -->
<iframe id="iframe" src=""></iframe>
<!-- -------- -->
<script src="js/i18n.js" type="module"></script>
<script src="js/dashboard.js" type="module"></script>

2
platform/mv3/extension/js/3p-filters.js
View File

@ -214,6 +214,8 @@ function renderFilterLists(soft = false) {
/******************************************************************************/
const renderWidgets = function() {
dom.cl.toggle(dom.body, 'firstRun', cachedRulesetData.firstRun === true);
qs$('#omnipotenceWidget input').checked = cachedRulesetData.hasOmnipotence;
dom.cl.toggle(

8
platform/mv3/extension/js/background.js
View File

@ -56,6 +56,7 @@ import {
const rulesetConfig = {
version: '',
enabledRulesets: [],
firstRun: false,
};
/******************************************************************************/
@ -69,6 +70,7 @@ async function loadRulesetConfig() {
const configRule = dynamicRuleMap.get(CURRENT_CONFIG_BASE_RULE_ID);
if ( configRule === undefined ) {
rulesetConfig.enabledRulesets = await defaultRulesetsFromLanguage();
rulesetConfig.firstRun = true;
return;
}
@ -167,7 +169,9 @@ function onMessage(request, sender, callback) {
enabledRulesets,
rulesetDetails: Array.from(rulesetDetails.values()),
hasOmnipotence,
firstRun: rulesetConfig.firstRun,
});
rulesetConfig.firstRun = false;
});
return true;
}
@ -243,4 +247,8 @@ async function start() {
browser.permissions.onAdded.addListener(onPermissionsAdded);
browser.permissions.onRemoved.addListener(onPermissionsRemoved);
if ( rulesetConfig.firstRun ) {
runtime.openOptionsPage();
}
})();

4
platform/mv3/extension/popup.html
View File

@ -13,6 +13,7 @@
<body class="loading" data-section="">
<div id="main">
<!-- -------- -->
<div id="sticky">
<div id="stickyTools">
<div class="rulesetTools">
@ -40,6 +41,7 @@
</div>
<div id="hostname"><span></span>&shy;<span></span></div>
</div>
<!-- -------- -->
<div class="toolRibbon pageTools">
<span id="toggleGreatPowers">
<span class="fa-icon tool enabled" data-i18n-title="popupGrantGreatPowers">sun-o<span class="caption"></span></span>
@ -51,9 +53,11 @@
<span></span>
<a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></a>
</div>
<!-- -------- -->
<div id="rulesetStats" data-section="a">
</div>
<hr data-section="a">
<!-- -------- -->
<div id="moreOrLess">
<span id="moreButton">
<span data-i18n="popupMoreButton">_</span>&emsp;<span class="fa-icon">angle-up</span>

8
platform/mv3/make-rulesets.js
View File

@ -55,7 +55,13 @@ const outputDir = commandLineArgs.get('output') || '.';
const cacheDir = `${outputDir}/../mv3-data`;
const rulesetDir = `${outputDir}/rulesets`;
const scriptletDir = `${rulesetDir}/js`;
const env = [ 'chromium', 'ubol', 'native_css_has' ];
const env = [
'chromium',
'native_css_has',
'ublock',
'ubol',
'user_stylesheet',
];
/******************************************************************************/

4
src/css/themes/default.css
View File

@ -5,7 +5,7 @@
https://material.io/
Color names from:
https://protocol.mozilla.org/fundamentals/color.html
https://protocol.mozilla.org/docs/fundamentals/color.html
Tools:
Lightness validator: https://www.hsluv.org/
@ -237,6 +237,7 @@
--dashboard-tab-active-ink-rgb: var(--primary-40);
--dashboard-tab-focus-surface-rgb: var(--primary-90);
--dashboard-highlight-surface-rgb: var(--primary-90);
/* popup panel */
--popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
@ -327,6 +328,7 @@
--dashboard-tab-active-ink-rgb: var(--primary-70);
--dashboard-tab-focus-surface-rgb: var(--primary-20);
--dashboard-highlight-surface-rgb: var(--primary-20);
/* popup panel */
--popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;

1
tools/make-mv3.sh
View File

@ -25,7 +25,6 @@ echo "*** uBOLite.mv3: Copying common files"
cp -R src/css/fonts/* $DES/css/fonts/
cp src/css/themes/default.css $DES/css/
cp src/css/common.css $DES/css/
cp src/css/dashboard.css $DES/css/
cp src/css/dashboard-common.css $DES/css/
cp src/css/fa-icons.css $DES/css/