Added tabs in options page

For #353
This commit is contained in:
kkapsner 2019-06-29 16:55:26 +02:00
parent 7037804b6f
commit 6083eb051f
8 changed files with 862 additions and 675 deletions

View File

@ -7,7 +7,7 @@ const util = require("util");
function getMessagesInContent(content){
const foundMessages = [];
[
/\b(?:_|browser.i18n.getMessage|notify|extension)\(["']([^"']+)["']\s*(?:\)|,)/g,
/\b(?:_|browser.i18n.getMessage|extension.getTranslation|notify|extension)\(["']([^"']+)["']\s*(?:\)|,)/g,
/\b(?:messageId|name|getTranslation)\s*:\s*["']([^"']+)["']/g,
].forEach(function(re){
let match;
@ -81,11 +81,15 @@ async function getSettingMessages(){
const settingsDisplay = require("../options/settingsDisplay");
const foundMessages = [];
settingsDisplay.forEach(function(display){
if ((typeof display) === "string"){
foundMessages.push("section_" + display.toLowerCase());
settingsDisplay.forEach(function(groupDefinition){
if (groupDefinition.name){
foundMessages.push("group_" + groupDefinition.name.toLowerCase());
}
else {
groupDefinition.sections.forEach(function(sectionDefinition){
if (sectionDefinition.name){
foundMessages.push("section_" + sectionDefinition.name.toLowerCase());
}
sectionDefinition.settings.forEach(function(display){
let settingDefinition = getDefinition(display.name);
if (!settingDefinition){
settingDefinition = display;
@ -106,7 +110,8 @@ async function getSettingMessages(){
foundMessages.push(message.toLowerCase());
});
}
}
});
});
});
return foundMessages.map(function(message){return message.toLowerCase();});
}
@ -140,7 +145,7 @@ Promise.all([getSettingMessages(), getMessagesInFolder(path.join(__dirname, ".."
settingMessages.indexOf(message) === -1 &&
knownMessages.indexOf(message) === -1
){
console.log(`${message} not used`);
console.log(`usage of ${message} not found`);
}
});
});

View File

@ -83,6 +83,18 @@
"message": "In separatem Tab öffnen",
"description": ""
},
"group_general": {
"message": "Allgemein",
"description": ""
},
"group_APIs": {
"message": "APIs",
"description": ""
},
"group_misc": {
"message": "Vermischtes",
"description": ""
},
"section_asking": {
"message": "Nachfragen",
"description": ""
@ -100,7 +112,7 @@
"description": ""
},
"section_misc": {
"message": "Gemischtes",
"message": "Vermischtes",
"description": ""
},
"section_settings": {

View File

@ -89,6 +89,19 @@
"description": ""
},
"group_general": {
"message": "General",
"description": ""
},
"group_APIs": {
"message": "APIs",
"description": ""
},
"group_misc": {
"message": "Misc",
"description": ""
},
"section_asking": {
"message": "Asking",
"description": ""

View File

@ -25,8 +25,6 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.settings {
table-layout: fixed;
}
.settings * {
@ -290,3 +288,42 @@ td.hideColumn {
.searching .settingRow.found:not(.hidden) {
display: table-row;
}
.groupTabs {
display: flex;
flex-wrap: nowrap;
}
.groups {
flex-basis: max-content;
flex-shrink: 0;
flex-grow: 0;
list-style: none;
margin: 0;
margin-right: 1em;
padding: 0;
min-width: 50px;
min-height: 100%;
border-right: 1px solid #c1c1c1;
}
.searching .groups {
visibility: hidden;
}
.groups .groupName {
cursor: pointer;
border: 1px solid #c1c1c1;
border-radius: 0.5em;
padding: 2px 1em;
margin: 2px;
}
.groups .groupName.selected {
border-right-color: transparent;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: -1px;
padding-right: calc(1em + 3px);
background-color: var(--background-color);
}
body:not(.searching) .settings tbody:not(.selectedGroup) {
display: none;
}

View File

@ -222,12 +222,24 @@
}
});
var groupTabs = document.createElement("div");
groupTabs.classList = "groupTabs";
document.body.appendChild(groupTabs);
var groups = document.createElement("ul");
groups.className = "groups";
groupTabs.appendChild(groups);
var table = document.createElement("table");
table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
settings.on("displayDescriptions", function(){
table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
});
document.body.appendChild(table);
var tableContainer = document.createElement("div");
tableContainer.classList = "tabContents";
groupTabs.appendChild(tableContainer);
tableContainer.appendChild(table);
const displayHidden = settings.getDefinition(settingsDisplay.displayHidden);
const searchInput = search.init();
@ -261,7 +273,41 @@
const {hide: hideContainer, expand: expandContainer} = settings.getContainers();
let lastSection = null;
const addGroup = function addGroup(groupDefinition){
const sections = [];
const group = {
select: function(){
groups.querySelectorAll(".selected").forEach(function(group){
group.classList.remove("selected");
});
table.querySelectorAll("tbody").forEach(function(section){
section.classList.remove("selectedGroup");
});
sections.forEach(function(section){
section.node.classList.add("selectedGroup");
});
name.classList.add("selected");
},
addSection: function(sectionDefinition){
const section = addSection(sectionDefinition.name);
sections.push(section);
return section;
}
};
const groupIndex = groups.childNodes.length;
const name = document.createElement("li");
name.textContent = extension.getTranslation("group_" + groupDefinition.name);
name.className = "groupName group" + groupIndex;
name.addEventListener("click", group.select);
groups.appendChild(name);
return group;
};
const addSection = function addSection(name){
const body = document.createElement("tbody");
if (name){
@ -296,8 +342,9 @@
body.appendChild(row);
}
table.appendChild(body);
let rows = [];
let section = {
const rows = [];
const section = {
node: body,
addRow: function(row){
rows.push(row);
body.appendChild(row);
@ -327,16 +374,15 @@
};
search.on(function(){section.updateDisplay();});
lastSection = section;
return section;
};
addSection();
const beforeChangeEventListeners = {};
settingsDisplay.forEach(function(display){
if (typeof display === "string"){
addSection(display);
}
else {
settingsDisplay.map(function(groupDefinition){
const group = addGroup(groupDefinition);
groupDefinition.sections.forEach(function(sectionDefinition){
const section = group.addSection(sectionDefinition);
sectionDefinition.settings.forEach(function(display){
var setting = settings.getDefinition(display.name);
if (!setting){
if (display.inputs){
@ -445,7 +491,6 @@
settingStrings.getStrings(setting).forEach(function(string){
search.register(string, row);
});
let section = lastSection;
section.addRow(row);
if (!display.displayDependencies){
display.displayDependencies = {};
@ -477,8 +522,10 @@
});
displayHidden.on(computeDependencies);
}
}
});
});
return group;
})[0].select();
const version = document.createElement("div");
version.className = "version";

View File

@ -6,15 +6,22 @@
"use strict";
var settingsDisplay = [
{
"name": "displayAdvancedSettings"
},
name: "general",
sections: [
{
"name": "displayDescriptions"
name: "",
settings: [
{
"name": "displayAdvancedSettings"
},
{
"name": "blockMode"
},
"asking",
]
},
{
name: "asking",
settings: [
{
"name": "askOnlyOnce",
"displayDependencies": {
@ -35,7 +42,11 @@
"displayAdvancedSettings": [true]
}
},
"faking",
]
},
{
name: "faking",
settings: [
{
"name": "rng",
"displayDependencies": [
@ -116,7 +127,11 @@
}
]
},
"notifications",
]
},
{
name: "notifications",
settings: [
{
"name": "showNotifications"
},
@ -193,7 +208,11 @@
}
]
},
"lists",
]
},
{
name: "lists",
settings: [
{
"name": "enableStackList",
"displayDependencies": {
@ -234,7 +253,16 @@
"displayAdvancedSettings": [true]
}
},
"Canvas-API",
]
},
]
},
{
name: "APIs",
sections: [
{
name: "Canvas-API",
settings: [
{
"name": "protectedCanvasPart"
},
@ -345,7 +373,11 @@
}
]
},
"Audio-API",
]
},
{
name: "Audio-API",
settings: [
{
"name": "protectAudio"
},
@ -441,7 +473,11 @@
}
]
},
"History-API",
]
},
{
name: "History-API",
settings: [
{
"name": "protectedAPIFeatures",
"displayedSection": "History-API",
@ -457,7 +493,11 @@
"displayAdvancedSettings": [true]
}
},
"Window-API",
]
},
{
name: "Window-API",
settings: [
{
"name": "protectWindow"
},
@ -471,7 +511,11 @@
}
]
},
"DOMRect-API",
]
},
{
name: "DOMRect-API",
settings: [
{
"name": "protectDOMRect"
},
@ -492,7 +536,11 @@
"displayAdvancedSettings": [true]
}
},
"Navigator-API",
]
},
{
name: "Navigator-API",
settings: [
{
"name": "protectNavigator"
},
@ -514,7 +562,16 @@
}
]
},
"misc",
]
},
]
},
{
name: "misc",
sections: [
{
name: "misc",
settings: [
{
"name": "theme"
},
@ -533,7 +590,14 @@
"displayAdvancedSettings": [true]
}
},
"settings",
]
},
{
name: "settings",
settings: [
{
"name": "displayDescriptions"
},
{
"name": "openSettingSanitation"
},
@ -544,6 +608,10 @@
{
"name": "resetSettings"
}
]
}
]
}
];
settingsDisplay.displayHidden = "displayHiddenSettings";

View File

@ -4,6 +4,7 @@ Version 0.5.12:
new features:
- enabled whitelisting of local files
- added tabs in options page
fixes:
- detect when browser.contextualIdentities.onRemoved is not supported

View File

@ -37,6 +37,10 @@
{
"version": "0.5.12Alpha20190625",
"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.12Alpha20190625-an+fx.xpi"
},
{
"version": "0.5.12Alpha20190629",
"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.12Alpha20190629-an+fx.xpi"
}
]
}