1
0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2024-12-22 12:50:36 +01:00

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,32 +81,37 @@ 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 {
let settingDefinition = getDefinition(display.name);
if (!settingDefinition){
settingDefinition = display;
display.action = true;
groupDefinition.sections.forEach(function(sectionDefinition){
if (sectionDefinition.name){
foundMessages.push("section_" + sectionDefinition.name.toLowerCase());
}
if (settingDefinition){
if (display.inputs){
settingDefinition.inputs = display.inputs.map(function(input){
return getDefinition(input);
sectionDefinition.settings.forEach(function(display){
let settingDefinition = getDefinition(display.name);
if (!settingDefinition){
settingDefinition = display;
display.action = true;
}
if (settingDefinition){
if (display.inputs){
settingDefinition.inputs = display.inputs.map(function(input){
return getDefinition(input);
});
}
else if (display.actions){
settingDefinition.actions = display.actions.map(function(action){
return {name: action};
});
}
settingStrings.getMessages(settingDefinition).forEach(function(message){
foundMessages.push(message.toLowerCase());
});
}
else if (display.actions){
settingDefinition.actions = display.actions.map(function(action){
return {name: action};
});
}
settingStrings.getMessages(settingDefinition).forEach(function(message){
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 * {
@ -289,4 +287,43 @@ 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,158 +374,158 @@
};
search.on(function(){section.updateDisplay();});
lastSection = section;
return section;
};
addSection();
const beforeChangeEventListeners = {};
settingsDisplay.forEach(function(display){
if (typeof display === "string"){
addSection(display);
}
else {
var setting = settings.getDefinition(display.name);
if (!setting){
if (display.inputs){
setting = {
name: display.name,
inputs: display.inputs.map(settings.getDefinition)
};
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){
setting = {
name: display.name,
inputs: display.inputs.map(settings.getDefinition)
};
}
else if (display.actions){
setting = {
name: display.name,
actions: display.actions.map(function(action){
return {
name: action,
action: callbacks[action]
};
}).filter(function(action){
return action.action;
})
};
}
else if (callbacks[display.name]){
setting = {
name: display.name,
action: callbacks[display.name]
};
}
}
else if (display.actions){
setting = {
name: display.name,
actions: display.actions.map(function(action){
return {
name: action,
action: callbacks[action]
};
}).filter(function(action){
return action.action;
})
if (setting){
setting.display = display;
let originalSet = setting.set;
setting.originalSet = originalSet;
if (originalSet){
const eventListeners = [];
beforeChangeEventListeners[setting.name] = eventListeners;
setting.set = function(...args){
if (eventListeners.every(function(listener){
return listener.call(setting, ...args);
})){
return originalSet.apply(this, args);
}
else {
return false;
}
};
}
let hideChangeListeners = [];
setting.setHide = function setHide(value){
if (hideContainer){
hideContainer.setHideByName(display.name, value);
if (computeDependencies){
computeDependencies();
}
}
};
}
else if (callbacks[display.name]){
setting = {
name: display.name,
action: callbacks[display.name]
setting.onHideChange = function(listener){
hideChangeListeners.push(listener);
};
}
}
if (setting){
setting.display = display;
let originalSet = setting.set;
setting.originalSet = originalSet;
if (originalSet){
const eventListeners = [];
beforeChangeEventListeners[setting.name] = eventListeners;
setting.set = function(...args){
if (eventListeners.every(function(listener){
return listener.call(setting, ...args);
})){
return originalSet.apply(this, args);
setting.getHide = function getHide(){
if (hideContainer){
return hideContainer.getHideByName(display.name);
}
else {
return false;
}
};
}
let hideChangeListeners = [];
setting.setHide = function setHide(value){
if (hideContainer){
hideContainer.setHideByName(display.name, value);
if (computeDependencies){
computeDependencies();
}
}
};
setting.onHideChange = function(listener){
hideChangeListeners.push(listener);
};
setting.getHide = function getHide(){
if (hideContainer){
return hideContainer.getHideByName(display.name);
}
else {
return false;
}
};
if (hideContainer){
hideContainer.onHideChange(display.name, function(value){
if (computeDependencies){
computeDependencies();
}
hideChangeListeners.forEach(function(listener){
listener(value);
});
});
}
let expandChangeListeners = [];
setting.setExpand = function setExpand(value){
if (expandContainer){
expandContainer.setExpandByName(display.name, value);
}
};
setting.onExpandChange = function(listener){
expandChangeListeners.push(listener);
};
setting.getExpand = function getExpand(){
if (expandContainer){
return expandContainer.getExpandByName(display.name);
}
else {
return false;
}
};
if (expandContainer){
expandContainer.onExpandChange(display.name, function(value){
expandChangeListeners.forEach(function(listener){
listener(value);
});
});
}
var row = optionsGui.createSettingRow(setting);
settingStrings.getStrings(setting).forEach(function(string){
search.register(string, row);
});
let section = lastSection;
section.addRow(row);
if (!display.displayDependencies){
display.displayDependencies = {};
}
var displayDependencies = display.displayDependencies;
displayDependencies = Array.isArray(displayDependencies)?
displayDependencies:
[displayDependencies];
var computeDependencies = function(){
logging.verbose("evaluate display dependencies for", setting);
row.classList[(
(
displayHidden.get() ||
!setting.getHide()
) &&
displayDependencies.some(function(displayDependency){
return Object.keys(displayDependency).every(function(key){
return displayDependency[key].indexOf(settings[key]) !== -1;
hideContainer.onHideChange(display.name, function(value){
if (computeDependencies){
computeDependencies();
}
hideChangeListeners.forEach(function(listener){
listener(value);
});
})
)? "remove": "add"]("hidden");
section.updateDisplay();
};
computeDependencies();
displayDependencies.forEach(function(displayDependency){
Object.keys(displayDependency).forEach(function(name){
settings.on(name, computeDependencies);
});
}
let expandChangeListeners = [];
setting.setExpand = function setExpand(value){
if (expandContainer){
expandContainer.setExpandByName(display.name, value);
}
};
setting.onExpandChange = function(listener){
expandChangeListeners.push(listener);
};
setting.getExpand = function getExpand(){
if (expandContainer){
return expandContainer.getExpandByName(display.name);
}
else {
return false;
}
};
if (expandContainer){
expandContainer.onExpandChange(display.name, function(value){
expandChangeListeners.forEach(function(listener){
listener(value);
});
});
}
var row = optionsGui.createSettingRow(setting);
settingStrings.getStrings(setting).forEach(function(string){
search.register(string, row);
});
});
displayHidden.on(computeDependencies);
}
}
});
section.addRow(row);
if (!display.displayDependencies){
display.displayDependencies = {};
}
var displayDependencies = display.displayDependencies;
displayDependencies = Array.isArray(displayDependencies)?
displayDependencies:
[displayDependencies];
var computeDependencies = function(){
logging.verbose("evaluate display dependencies for", setting);
row.classList[(
(
displayHidden.get() ||
!setting.getHide()
) &&
displayDependencies.some(function(displayDependency){
return Object.keys(displayDependency).every(function(key){
return displayDependency[key].indexOf(settings[key]) !== -1;
});
})
)? "remove": "add"]("hidden");
section.updateDisplay();
};
computeDependencies();
displayDependencies.forEach(function(displayDependency){
Object.keys(displayDependency).forEach(function(name){
settings.on(name, computeDependencies);
});
});
displayHidden.on(computeDependencies);
}
});
});
return group;
})[0].select();
const version = document.createElement("div");
version.className = "version";

File diff suppressed because it is too large Load Diff

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"
}
]
}