save file

Author: javascript-2020

utils/browser-extensions/cors/cors.html

@@ -31,6 +31,9 @@
   html
     {font-family:arial}
 
+  body
+    {display:flex;flex-direction:column;gap:20px}
+    
   #hdr
     {display:flex;justify-content:space-between}
 
@@ -112,6 +115,8 @@ <h3>
                         </div>
                   </div>
 
+                  <dir-tree component></dir-tree>
+                  
                   <snippet-editor id=one component v2.0 src='github:javascript-2020:browser-extensions:main:/cors/chrome/manifest.json'></snippet-editor>
                   <snippet-editor id=two component v2.0 src='github:javascript-2020:browser-extensions:main:/cors/chrome/extension.js'></snippet-editor>
 
@@ -131,17 +136,27 @@ <h3>
 
         var $   = (root,css)=>(!css && (css=root,root=document),root.querySelector(css));
 
+        var dirtree;
         var log;
 
 
         async function init(){
                                                                                 debug('init');
               await libs();
 
+              dirtree   = mod['dir-tree'];
+              log       = mod['log-mod'];
+              
               await mod.auto();
 
+              
+              files.chrome    = dirtree.build(files.chrome);
+              files.firefox   = dirtree.build(files.firefox);
+              
+              
               initdom();
 
+              
         }//init
 
 
@@ -173,6 +188,8 @@ <h3>
 
               tabs                        = $('#tabs');
               tabs.onclick                = btn.tabs;
+              console.log(files.chrome);
+              dirtree.display(files.chrome);
 
 
         }//initdom
@@ -216,15 +233,50 @@ <h3>
               var node    = e.target;
               var name    = node.textContent.trim();
                                                                                 debug(name);
+              if(node.classList.contains('active')){
+                    return;
+              }
+              
+              tabs.childNodes.forEach(node2=>{
+              
+                    if(node2.nodeType!==Node.ELEMENT_NODE)return;
+                    if(node2===node){
+                          node2.classList.remove('inactive');
+                          node2.classList.add('active');
+                    }else{
+                          node2.classList.add('inactive');
+                          node2.classList.remove('active');
+                    }
+                    
+              });
+              
+              dirtree.display(files[name]);
+              
+              
+              
         }//tabs
 
 
   //:
 
 
 
-  
-  
+        var files       = {};
+        files.chrome    = {
+                                chrome    : {
+                                                  'maniferst.json'    : null,
+                                                  'extension.js'      : null,
+                                }
+                          };
+        files.firefox   = {
+                                firefox   : {
+                                                  'maniferst.json'    : null,
+                                                  'extension.js'      : null
+                                            }
+                          };
+                          
+                          
+                          
         async function create(dir,{download=true,test,df=false}={}){
                                                                                 df && debug('download',download);
                                                                                 df && debug('test',!!test);