Add experimental style browser ui
This commit is contained in:
MrOtherGuy
parent
5e0e6e150e
commit
f7922f419a
6 changed files with 484 additions and 0 deletions
44
html_resources/main.css
Normal file
44
html_resources/main.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
body{background-color: rgb(60,50,70); color: silver; margin: 0px }
|
||||
#ui{ display: flex; }
|
||||
|
||||
#categories{
|
||||
padding-block: 1em;
|
||||
box-sizing: border-box;
|
||||
border-inline-end: 1px solid gold;
|
||||
background-color: rgb(60,60,70);
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
min-width: 18ch
|
||||
}
|
||||
a{ color: rgb(100,150,200); margin-inline-start: 1ch }
|
||||
a:visited{ color: rgb(150,100,200) }
|
||||
a:hover{ color: rgb(200,150,100) }
|
||||
pre:empty{ display: none }
|
||||
.category{ padding: 0.2em 1em; cursor: pointer }
|
||||
|
||||
.currentCategory,
|
||||
.category:hover{ background-color: grey }
|
||||
|
||||
.target{
|
||||
margin: 0.2em;
|
||||
background-color: rgb(60,60,70);
|
||||
padding: 0.5em;
|
||||
border: 1px solid rgb(40,40,40);
|
||||
border-radius: 4px;
|
||||
max-width: 50ch;
|
||||
cursor: pointer
|
||||
}
|
||||
.target:hover{ background-color: rgb(80,80,90) }
|
||||
#targets{ display: flex; flex-wrap: wrap }
|
||||
|
||||
pre{
|
||||
white-space: pre-wrap;
|
||||
margin: 1em;
|
||||
border: 2px inset;
|
||||
padding: 0.5em;
|
||||
background-color: rgb(40,50,50)
|
||||
}
|
||||
|
||||
.hidden{ display: none !important }
|
||||
|
||||
.target{ display: flex; justify-content: space-between }
|
||||
139
html_resources/selector.js
Normal file
139
html_resources/selector.js
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
'use strict';
|
||||
|
||||
let DB = null;
|
||||
|
||||
function initDB(obj){
|
||||
DB = obj;
|
||||
Object.defineProperty(DB,"query",{value:function (q,list){
|
||||
let nlist = [];
|
||||
for(let key of list || Object.keys(this)){
|
||||
if(this[key].includes(q)){
|
||||
nlist.push(key)
|
||||
}
|
||||
}
|
||||
return nlist
|
||||
}});
|
||||
return true
|
||||
}
|
||||
|
||||
let previousCategory = new (function(){
|
||||
let current = null;
|
||||
this.set = function(t){
|
||||
current&¤t.classList.remove("currentCategory");
|
||||
current = t;
|
||||
current.classList.add("currentCategory");
|
||||
};
|
||||
return this
|
||||
})()
|
||||
|
||||
function getText(node){
|
||||
return node.childNodes[0].textContent
|
||||
}
|
||||
|
||||
async function onCategoryClicked(categoryNode){
|
||||
|
||||
previousCategory.set(categoryNode);
|
||||
|
||||
let names = DB.query(categoryNode.textContent);
|
||||
for(let c of Array.from(document.querySelectorAll(".target"))){
|
||||
names.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
async function onTargetClicked(targetNode){
|
||||
const codeBlock = document.querySelector("pre");
|
||||
let file = await fetch(`chrome/${getText(targetNode)}`);
|
||||
let t = await file.text();
|
||||
codeBlock.textContent = t;
|
||||
}
|
||||
|
||||
function onSomeClicked(e){
|
||||
let cl = e.target.parentNode.id;
|
||||
switch(cl){
|
||||
case "categories":
|
||||
onCategoryClicked(e.target);
|
||||
break;
|
||||
case "targets":
|
||||
onTargetClicked(e.target);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function createCategories(){
|
||||
|
||||
const CAT_PARENT = document.getElementById("categories");
|
||||
CAT_PARENT.addEventListener("click",onSomeClicked)
|
||||
|
||||
const TAR_PARENT = document.getElementById("targets");
|
||||
TAR_PARENT.addEventListener("click",onSomeClicked);
|
||||
|
||||
const createNode = function(name,type){
|
||||
let node = document.createElement("div");
|
||||
node.classList.add(type);
|
||||
node.textContent = name;
|
||||
if(type === "target"){
|
||||
let link = node.appendChild(document.createElement("a"));
|
||||
node.classList.add("hidden");
|
||||
link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${name}`;
|
||||
link.textContent = "Github";
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
const createCategory = name => createNode(name,"category");
|
||||
|
||||
const createTarget = name => createNode(name,"target");
|
||||
|
||||
const CAT_NAMES = (function(){
|
||||
let list = [];
|
||||
|
||||
for(let key of Object.keys(DB)){
|
||||
TAR_PARENT.appendChild(createNode(key,"target"));
|
||||
let things = DB[key];
|
||||
for(let t of things){
|
||||
list.push(t)
|
||||
}
|
||||
}
|
||||
list.sort();
|
||||
let ret = [];
|
||||
let ns = [0];
|
||||
ret[0] = list[0];
|
||||
let i = 0;
|
||||
for(let item of list){
|
||||
if(ret[i]!=item){
|
||||
ret[++i]=item;
|
||||
ns[i]=0;
|
||||
}else{
|
||||
ns[i]++
|
||||
}
|
||||
}
|
||||
let map = ret.map((a,i)=>({name:a,value:ns[i]}))
|
||||
|
||||
return map.sort((a,b)=>(a.value > b.value?-1:a.value < b.value ? 1:0))
|
||||
})();
|
||||
|
||||
for(let cat of CAT_NAMES){
|
||||
CAT_PARENT.appendChild(createCategory(cat.name))
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.onreadystatechange = (function () {
|
||||
if (document.readyState === "complete") {
|
||||
fetch("html_resources/tagmap.json")
|
||||
.then(response => {
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (!contentType || !contentType.includes('application/json')) {
|
||||
throw new TypeError("Oops, we haven't got JSON!");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json=>(initDB(json)))
|
||||
.then(()=>createCategories())
|
||||
.catch(e=>{console.log(e);document.getElementById("ui").textContent = "FAILURE, Database could not be loaded"});
|
||||
}
|
||||
});
|
||||
95
html_resources/tagmap.json
Normal file
95
html_resources/tagmap.json
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
{
|
||||
"Fx65_tabs_on_bottom.css":["tabs","toolbars","classic"],
|
||||
"Fx65_tabs_on_bottom_menubar_on_top_patch.css":["tabs","menubar","toolbars","classic","patch"],
|
||||
"autohide_bookmarks_and_main_toolbars.css":["autohide","bookmarks","toolbars","nav-bar","toolbox"],
|
||||
"autohide_bookmarks_toolbar.css":["autohide","bookmarks","toolbars"],
|
||||
"autohide_menubar.css":["autohide","menubar","toolbars"],
|
||||
"autohide_navigation_button.css":["autohide","minimal","navigation","buttons"],
|
||||
"autohide_sidebar.css":["autohide","sidebar"],
|
||||
"autohide_tabstoolbar.css":["autohide","tabs","toolbars"],
|
||||
"autohide_toolbox.css":["autohide","toolbox","toolbars","fullscreen"],
|
||||
"blank_page_background.css":["dark-mode","flash","blank","background"],
|
||||
"bookmarksbar_on_new_tabs_only.css":["legacy"],
|
||||
"button_effect_icon_glow.css":["buttons","effect","minimal"],
|
||||
"button_effect_scale_onclick.css":["buttons","effect","minimal"],
|
||||
"button_effect_scale_onhover.css":["buttons","effect","minimal"],
|
||||
"classic_grid_main_menu_popup.css":["classic","grid","menu","popup"],
|
||||
"click_selected_tab_to_focus_urlbar.css":["hack","tabs","urlbar"],
|
||||
"color_variable_template.css":["theme","color","variables"],
|
||||
"combined_favicon_and_tab_close_button.css":["tab","icon","close"],
|
||||
"combined_tabs_and_main_toolbars.css":["minimal","tabs","toolbars"],
|
||||
"compact_urlbar_megabar.css":["urlbar","minimal"],
|
||||
"dark_additional_windows.css":["windows","dark-mode"],
|
||||
"dark_checkboxes_and_radios.css":["widgets","dark-mode"],
|
||||
"dark_context_menus.css":["dark-mode","menus"],
|
||||
"dark_theme_aware_statuspanel.css":["staus","dark-mode"],
|
||||
"disable_newtab_on_middle_click.css":["hack","newtab","tab"],
|
||||
"fake_statusbar.css":["hack","status","toolbar"],
|
||||
"floating_findbar_on_top.css":["findbar","overlay"],
|
||||
"full_width_urlbar_popup.css":["ulrbar","popup"],
|
||||
"google_style_urlbar_popup.css":["urlbar","popup"],
|
||||
"grid_overflow_menu.css":["popup","menu"],
|
||||
"hide_statuspanel_when_fullscreen.css":["status","fullscreen","hiding"],
|
||||
"hide_tabs_toolbar.css":["hiding","tabs","toolbars"],
|
||||
"hide_tabs_with_one_tab.css":["hiding","tabs","toolbars"],
|
||||
"hide_tabs_with_one_tab_w_window_controls.css":["hiding","tabs","toolbars"],
|
||||
"hide_toolbox_top_bottom_borders.css":["toolbox","hiding"],
|
||||
"hide_urlbar_first_row.css":["urlbar","popup","hiding"],
|
||||
"linux_gtk_window_control_patch.css":["patch","window-control"],
|
||||
"menubar_in_toolbar.css":["toolbars","minimal"],
|
||||
"menubar_in_toolbar_oneliner_compatible.css":["toolbars","minimal"],
|
||||
"minimal_in-UI_scrollbars.css":["minimal","scrollbar"],
|
||||
"minimal_text_fields.css":["minimal","urlbar","searchbar"],
|
||||
"minimal_toolbarbuttons.css":["minimal","buttons"],
|
||||
"minimal_toolbarbuttons_v2.css":["minimal","buttons"],
|
||||
"minimal_toolbarbuttons_v3.css":["minimal","buttons"],
|
||||
"more_visible_tab_icon.css":["tab","icon"],
|
||||
"multi-row_bookmarks.css":["multi-row","bookmarks"],
|
||||
"multi-row_oneliner_combo_patch.css":["multi-row","patch","1-line","minimal"],
|
||||
"multi-row_tabs.css":["tabs","multi-row","toolbars"],
|
||||
"multi-row_tabs_Fx66%2B.css":["legacy"],
|
||||
"multi-row_tabs_below_content.css":["multi-row","tabs","toolbars"],
|
||||
"multi-row_tabs_below_content_legacy.css":["legacy"],
|
||||
"multi-row_tabs_legacy.css":["legacy"],
|
||||
"multi-row_tabs_window_control_patch.css":["patch","multi-row","window-control"],
|
||||
"navbar_below_content.css":["nav-bar","toolbars"],
|
||||
"navbar_tabs_oneliner.css":["1-line","minimal","tabs","nav-bar","toolbars"],
|
||||
"navbar_tabs_oneliner_menu_buttons_on_right.css":["1-line","minimal","tabs","nav-bar","toolbars","patch","menubar"],
|
||||
"navbar_tabs_oneliner_tabs_on_left.css":["1-line","minimal","tabs","nav-bar","toolbar"],
|
||||
"navbar_tabs_responsive_oneliner.css":["1-line","minimal","tabs","nav-bar","toolbars"],
|
||||
"navigation_buttons_inside_urlbar.css":["navigation","buttons","urlbar"],
|
||||
"numbered_tabs.css":["tabs"],
|
||||
"overlay_menubar.css":["menubar"],
|
||||
"overlay_scrollbars.as.css":["scrollbar"],
|
||||
"page_action_buttons_on_hover.css":["urlbar","minimal","effect"],
|
||||
"pinned_tabs_on_right.css":["tabs"],
|
||||
"scrollable_menupopups.css":["scrollbar","popup","menu"],
|
||||
"scrollable_urlbar_popup.css":["scrollbar","popup","urlbar"],
|
||||
"show_navbar_on_focus_only.css":["urlbar","nav-bar","toolbar","hiding"],
|
||||
"show_window_title_in_menubar.css":["windows","menubar"],
|
||||
"status_inside_urlbar.css":["status","urlbar","hack"],
|
||||
"tab_close_button_always_on_hover.css":["tab","close"],
|
||||
"tab_loading_progress_throbber.css":["tab","icon","animation"],
|
||||
"tabs_animated_gradient_border.css":["hack","animation"],
|
||||
"tabs_below_content.css":["toolbars","tabs"],
|
||||
"tabs_fill_available_width.css":["tab","tabs"],
|
||||
"textual_context_navigation.css":["navigation","popup","menu"],
|
||||
"theme_additional_windows.css":["legacy"],
|
||||
"theme_color_variables.css":["legacy"],
|
||||
"theme_popups_and_menus.css":["legacy"],
|
||||
"theme_sidebar.css":["legacy"],
|
||||
"theme_toolbars.css":["legacy"],
|
||||
"toggle_bookmarksbar_with_alt.css":["legacy"],
|
||||
"toggle_tabs_toolbar_with_alt.css":["hack","tabs","menubar"],
|
||||
"toolbarbuttons_icon%2Blabel.css":["buttons","icon"],
|
||||
"toolbars_below_content.css":["tabs","toolbox","toolbars"],
|
||||
"urlbar_and_popup_equal_width.css":["legacy"],
|
||||
"urlbar_centered_text.css":["urlbar"],
|
||||
"urlbar_full_width.css":["urlbar","popup"],
|
||||
"urlbar_results_in_two_rows.css":["urlbar","popup"],
|
||||
"urlbar_visible_on_active_tab_click.css":["hack","urlbar"],
|
||||
"vertical_context_navigation.css":["navigation","menu","popup"],
|
||||
"vertical_context_navigation_v2.css":["navigation","menu","popup"],
|
||||
"vertical_menubar.css":["menubar","hack"],
|
||||
"window_control_placeholder_support.css":["window-control","patch"]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue