some improvements on tag browser

html_resources/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 750">
+<style>
+  #styled { stroke: #153a51 }
+  @media (prefers-color-scheme: dark) { #styled { stroke: #fff } }
+</style>
+<path id="styled" d="m41 373c49-115.5 97.5-231 153-231 111 0 195 463 306 462.5s195-462.5 106-462.5" stroke-linecap="round" stroke-width="115" fill="none"/>
+<path d="m41 373c49-115.5 97.5-231 153-231 111 0 195 463 306 462.5s195-462.5 106-462.5" stroke="#f00" stroke-linecap="round" stroke-width="40" fill="none"/>
+</svg>

html_resources/main.css

@@ -9,7 +9,7 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
   background-color: rgb(60,60,70);
   max-height: 100vh;
   overflow-y: auto;
-  min-width: 18ch
+  min-width: 22ch
 }
 
 .categoryList.blurred{
@@ -28,9 +28,10 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
   z-index: 2;
   background-color: rgb(60,60,70);
   opacity: 1;
+  box-shadow: 0 0 26px 0 black;
 }
 
-a{ color: rgb(100,150,200); margin-inline-start: 1ch }
+a{ color: rgb(100,150,200); margin-inline-end: 0.4ch }
 pre a{ margin: 0 }
 a:visited{ color: rgb(150,100,200) }
 a:hover{ color: rgb(200,150,100) }
@@ -49,13 +50,16 @@ pre:empty{ display: none }
   padding: 0.3em;
   border: 1px solid rgb(40,40,40);
   border-radius: 4px;
-  max-width: 50ch;
+  max-width: 30%;
-  cursor: pointer
+  cursor: pointer;
+  white-space:nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .target > a{
-  content: "";
+  display:inline-block;
   width: 1.2em;
-  height: 1.3em;
+  height: 80%;
   background-image: url("ext.svg");
   background-repeat: no-repeat;
   background-size: contain;
@@ -74,22 +78,26 @@ pre{
   white-space: pre-wrap;
   margin: 1em;
   border: 2px inset;
-  padding: 0.5em;
+  padding: 0 0 0 2em;
-  background-color: rgb(40,50,50)
+  background-color: rgb(30,30,40);
+}
+
+pre > div{
+  background-color: rgb(40,37,43);;
+  padding: 1em 0.5em;
+  border-inline-start: 1px solid rgb(90,90,90)
 }
 
 .categoryList:not(.blurred)+.categoryList,
 .hidden{ display: none !important }
 
-.target{ display: flex; justify-content: space-between }
-
 .comment{ color: rgb(50,180,20) }
-.selector{ color: violet }
+.selector{ color: palegoldenrod }
 .pseudo{ color: silver }
 .id{ color: lightcoral }
 .class{ color: lightgreen }
 .attribute{ color: cyan }  
-.atrule{ color: royalblue }
+.atrule{ color: mediumslateblue }
 .atvalue{ color: lightblue }
 .property{ color: orange }
 .value{ color: skyblue }

html_resources/selector.js

@@ -70,7 +70,6 @@ let currentCategory = new (function(){
       currentTopLevelFileNames = DB.query(t.textContent);
     }
 
-    //this.fileNames = DB.query(t.textContent,secondary?this.fileNames:null);
   };
   
   this.getFileNames = function(node,secondary){
@@ -83,7 +82,7 @@ let currentCategory = new (function(){
 })()
 
 function getText(node){
-  return `${node.childNodes[0].textContent}.css`
+  return `${node.textContent}.css`
 }
 
 function getSecondaryCategories(list){
@@ -115,10 +114,7 @@ function clearCodeBlock(){
 function onCategoryClicked(categoryNode,isSecondary = false){
   
   clearCodeBlock();
-  
   currentCategory.set(categoryNode,isSecondary);
-  // Using textContent is bad but meh
-  //let names = DB.query(categoryNode.textContent);
   
   let secondaryCategoriesNode = document.querySelector("#secondaryCategories");
   let fileNames = currentCategory.getFileNames(categoryNode,isSecondary);
@@ -129,11 +125,8 @@ function onCategoryClicked(categoryNode,isSecondary = false){
       for(let child of Array.from(secondaryCategoriesNode.children)){
         matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden")
       }
-      
-      //secondaryCategoriesNode.classList.remove("hidden");
       document.getElementById("categories").classList.add("blurred");
     }else{
-      //secondaryCategoriesNode.classList.add("hidden");
       document.getElementById("categories").classList.remove("blurred");
       
     }
@@ -145,9 +138,13 @@ function onCategoryClicked(categoryNode,isSecondary = false){
   document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
 }
 
-async function onTargetClicked(targetNode){
+async function onTargetClicked(target){
   const codeBlock = document.querySelector("pre");
-  fetchWithType(`chrome/${getText(targetNode)}`)
+  const text = typeof target === "string"
+              ? target
+              : getText(target);
+  
+  fetchWithType(`chrome/${text}`)
   //.then(text => (codeBlock.textContent = text))
   .then(text => Highlighter.parse(codeBlock,text))
   .catch(e => console.log(e))
@@ -185,12 +182,15 @@ function createCategories(){
     let node = document.createElement("div");
     node.classList.add(type);
     if(type === "target"){
-      node.textContent = name.substring(0,name.lastIndexOf("."));
+      
       let link = node.appendChild(document.createElement("a"));
       node.classList.add("hidden");
       link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${name}`;
       link.title = "See on Github";
       link.target = "_blank";
+      const content = name.substring(0,name.lastIndexOf("."));
+      node.append(content);
+      node.setAttribute("title",content);
     }else{
       node.textContent = name.name;
       name.value > 0 && node.setAttribute("data-value",name.value);
@@ -436,11 +436,49 @@ const Highlighter = new(function(){
   return this
 })();
 
+function handleSearchQuery(){
+  let params = (new URL(document.location)).searchParams;
+  let param = params.get("tag");
+  if(param){
+    let cats = document.querySelectorAll("#categories > .category");
+    for(let cat of cats){
+      if(cat.textContent === param){
+        onCategoryClicked(cat);
+        return
+      }
+    }
+    return
+  }
+  param = params.get("file");
+  if(param){
+    if(DB.keys.includes(param)){
+      onTargetClicked(param)
+    }
+  }
+}
+
 document.onreadystatechange = (function () {
+  
   if (document.readyState === "complete") {
+    function linkClicked(ev){
+      if(ev.target instanceof HTMLAnchorElement){
+        let ref = ev.target.href;
+        if(!ref){
+          return
+        }
+        let fileName = ref.slice(ref.lastIndexOf("/"));
+        if(fileName.endsWith(".css")){
+          onTargetClicked(fileName);
+          ev.preventDefault();
+        }
+      }
+    }
+    document.getElementById("previewBox").addEventListener("click",linkClicked);
+    
     fetchWithType("html_resources/tagmap.json")
-    .then(response=>(initDB(response)))
+    .then(initDB)
-    .then(()=>createCategories())
+    .then(createCategories)
+    .then(handleSearchQuery)
     .catch(e=>{console.log(e);document.getElementById("ui").textContent = "FAILURE, Database could not be loaded"});
   }
 });

index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>firefox-csshacks selector</title>
   <meta name="viewport" content="width=device-width"/>
   <meta charset="UTF-8">
+  <title>firefox-csshacks tag browser</title>
   <script type="text/javascript" src="html_resources/selector.js"></script>
   <link href="html_resources/main.css" rel="stylesheet" type="text/css"/>
+  <link rel="icon" href="html_resources/favicon.svg" type="image/svg+xml">
 </head>
 <body>
 <div id="ui">